Skip to content
Snippets Groups Projects
Commit 5b04866d authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

design adjustments for contact form and intro section

parent aa9e0e47
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css
+ 138
− 15
View file @ 5b04866d
......@@ -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
src/img/background.svg deleted 100644 → 0
+ 0
− 28
View file @ aa9e0e47
<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>
src/index.html
+ 39
− 10
View file @ 5b04866d
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment