diff --git a/src/css/style.css b/src/css/style.css
index 55c96059a7181ece8ad61598f8bfa366c75af951..3616bc251cfaaebcec55f255503630483a63b7dd 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -19,8 +19,8 @@ html {
scroll-behavior: smooth;
}
-section:not(:last-child) {
- margin-bottom: 120px;
+section {
+ margin-bottom: 100px;
}
.content-container {
@@ -35,7 +35,7 @@ body {
background-color: #f9f9f9;
position: relative;
color: var(--body-color);
- background: linear-gradient(to left, #F9F9F9 0%, #FBFBFB 100%);
+ background: linear-gradient(to left, #e2e2e2 0%, #e6e6e6 100%);
}
.page-container {
@@ -58,6 +58,11 @@ h2 {
margin-bottom: 1rem;
}
+h2.left {
+ text-align: left;
+ max-width: none;
+}
+
h3 {
font-size: 1.25rem;
font-weight: var(--weight-semi-bold);
@@ -94,15 +99,112 @@ h4 {
}
}
-.intro-section .intro-container {
+.intro-section .text-container {
+ padding-right: 10%;
+ margin-bottom: 50px;
+}
+
+.intro-section .preview-container {
+ padding: 110px;
display: flex;
- flex-direction: column;
+ justify-content: center;
align-items: center;
+ background: rgba(255, 255, 255, .5);
+ border-radius: 25px;
+}
+
+@media screen and (min-width: 890px) {
+ .intro-section .intro-container {
+ display: flex;
+ align-items: center;
+ }
+
+ .intro-section .intro-container>* {
+ width: 50%;
+ }
+
+ .intro-section .text-container {
+ margin-bottom: 0;
+ }
+
+ section {
+ margin-bottom: 180px;
+ }
+}
+
+.intro-section .project-overview {
+ display: grid;
+ grid-gap: 20px;
+ grid-template-areas:
+ 'small-1 large'
+ 'small-2 large';
+}
+
+.small-1 {
+ grid-area: small-1;
+}
+
+.small-2 {
+ grid-area: small-2;
+}
+
+.large {
+ grid-area: large;
+}
+
+.project {
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
justify-content: center;
- margin: 5rem auto;
+ align-items: center;
+ padding: 10px;
text-align: center;
}
+.project .title {
+ margin-top: 5px;
+ line-height: 1.2;
+ font-weight: var(--weight-bold);
+}
+
+.project svg {
+ width: 70px;
+ height: 70px;
+}
+
+.project .graph {
+ position: relative;
+ height: 70px;
+}
+
+.project .percent {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ line-height: 1;
+ font-weight: var(--weight-bold);
+ font-size: 14px;
+}
+
+.project path {
+ width: 70px;
+ height: 70px;
+}
+
+.project-overview .project-small {
+ width: 150px;
+ height: 150px;
+ background: #fff;
+}
+
+.project-overview .project-large {
+ width: 150px;
+ height: 320px;
+ background: #fff;
+}
+
.feature-section .feature-container {
display: flex;
flex-direction: column;
@@ -249,6 +351,7 @@ footer .footer-container {
align-items: center;
justify-content: center;
text-align: center;
+ padding: 100px 0;
}
footer .footer-copyright {
@@ -284,7 +387,7 @@ a {
font-size: 18px;
font-weight: var(--weight-bold);
background: radial-gradient(60% 100% at 50% 0%, #D298FF 0.01%, var(--primary) 100%);
- box-shadow: 0px 5px 25px rgba(var(--primary), 0.5);
+ box-shadow: 0px 5px 25px rgba(172, 66, 255, 0.25);
border-radius: 25px;
display: inline-block;
color: #fff;
@@ -292,7 +395,7 @@ a {
}
.button:hover {
- box-shadow: 0px 5px 40px -5px rgba(var(--primary), 0.35);
+ box-shadow: 0px 5px 25px rgba(172, 66, 255, 0.35);
cursor: pointer;
}
@@ -300,6 +403,14 @@ a {
transform: scale(0.9);
}
+section.darker {
+ padding: 30px 0;
+ margin: 0 75px;
+ border-radius: 25px;
+ color: #f1f1f1;
+ background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
+}
+
* {
margin: 0;
padding: 0;
@@ -370,7 +481,7 @@ nav a {
content: ' ';
position: absolute;
width: 25%;
- height: 16px;
+ height: 20px;
background: var(--body-color);
left: 50%;
top: 2px;
@@ -433,7 +544,7 @@ nav a {
}
.hero-section .text-container {
- width: 32%;
+ width: 25%;
padding-bottom: 160px;
}
}
@@ -464,10 +575,10 @@ nav a {
}
.background-container .bubble {
- width: 300px;
- height: 300px;
+ width: 400px;
+ height: 400px;
position: absolute;
- filter: blur(170px);
+ filter: blur(200px);
opacity: 0.75;
}
@@ -498,6 +609,18 @@ nav a {
padding: 0 5px;
}
+.contact-field:before {
+ content: ' ';
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 15px;
+ filter: blur(10px);
+}
+
.contact-field.textarea {
width: 100%;
}
@@ -534,8 +657,8 @@ textarea {
position: relative;
display: block;
border-radius: 15px;
- color: var(--body-color);
+ color: #fff;
font-weight: var(--weight-regular);
font-family: 'Poppins', sans-serif;
- background: rgba(44, 44, 44, 0.05);
+ background: rgba(255, 255, 255, 0.1);
}
\ No newline at end of file
diff --git a/src/img/background.svg b/src/img/background.svg
deleted file mode 100644
index 4b2401a797c1efb06370147ce626042f484d733a..0000000000000000000000000000000000000000
--- a/src/img/background.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg width="3202" height="3055" viewBox="0 0 3202 3055" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f)">
-<circle cx="933.5" cy="1739.5" r="333.5" fill="#AC42FF" fill-opacity="0.5"/>
-</g>
-<g filter="url(#filter1_f)">
-<circle cx="2215" cy="878" r="278" fill="#F15154"/>
-</g>
-<g filter="url(#filter2_f)">
-<circle cx="2324" cy="2177" r="278" fill="#7DEFFF"/>
-</g>
-<defs>
-<filter id="filter0_f" x="0" y="806" width="1867" height="1867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
-</filter>
-<filter id="filter1_f" x="1337" y="0" width="1756" height="1756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
-</filter>
-<filter id="filter2_f" x="1446" y="1299" width="1756" height="1756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
-</filter>
-</defs>
-</svg>
diff --git a/src/index.html b/src/index.html
index 032654b5ecdffeac303d0c64dd2f2d40387b8843..919da0813b67e1ac68a218b927518870eb4c151c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,15 +48,44 @@
</div>
</section>
<section class="intro-section" id="intro">
- <div class="content-container intro-container">
- <h2>Collaboration made easy with ryoko!</h2>
- <p>
- Do you want to boost your productivity and agility of your
- development? <br>
- With ryoko you are able to effectively plan your tasks
- and manage your projects. It is build with developers in mind and
- facilitates effective collaboration.
- </p>
+ <div class="content-container">
+ <div class="intro-container">
+ <div class="text-container">
+ <h2 class="left">Collaboration made easy with ryoko!</h2>
+ <p>
+ Do you want to boost your productivity and agility of your
+ development? <br>
+ With ryoko you are able to effectively plan your tasks
+ and manage your projects. It is build with developers in mind and
+ facilitates effective collaboration.
+ </p>
+ </div>
+ <div class="preview-container">
+ <div class="project-overview">
+ <div class="project project-small small-1">
+ <div class="graph">
+ <svg>
+ <path d=" M 36 5 A 30 30 0 1 1 35 5" fill="none" stroke="black"
+ stroke-width="7" />
+ </svg>
+ <div class="percent">100%</div>
+ </div>
+ <div class="title">Redesign website</div>
+ </div>
+ <div class="project project-small small-2">
+ <div class="graph">
+ <svg>
+ <path d=" M 36 5 A 30 30 0 0 1 41 64" fill="none" stroke="black"
+ stroke-width="7" />
+ </svg>
+ <div class="percent">47%</div>
+ </div>
+ <div class="title">Redesign website</div>
+ </div>
+ <div class="project project-large large"></div>
+ </div>
+ </div>
+ </div>
</div>
</section>
<section class="feature-section">
@@ -131,7 +160,7 @@
</div>
</div>
</section>
- <section class="contact-section" id="contact">
+ <section class="contact-section darker" id="contact">
<div class="content-container contact-container">
<h2>Get in touch</h2>
<p>