diff --git a/src/css/style.css b/src/css/style.css index c30542511084c61581c1b4842d84edf297bc1ca8..502976fa3adef781fb1a5a815d3de0c1aceadfb0 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -115,36 +115,18 @@ h4 { } .intro-section .preview-container { - padding: 110px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, .5); border-radius: 25px; + padding: 40px; } -@media screen and (min-width: 890px) { - .intro-section .intro-container { - display: flex; - align-items: center; - } - - .intro-section .intro-container .text-container { - flex-grow: 1; - } - - .intro-section .text-container { - margin-bottom: 0; - } - - section { - margin-bottom: 180px; - } -} .intro-section .project-overview { display: grid; - grid-gap: 30px; + grid-gap: 20px; grid-template-areas: 'small-1 large' 'small-2 large'; @@ -168,7 +150,7 @@ h4 { flex-direction: column; justify-content: center; align-items: center; - padding: 22px; + padding: 20px 20px 10px 20px; text-align: center; background: radial-gradient(100% 100% at 4.43% 0.11%, rgba(255, 255, 255, 0.8) 0%, rgba(252, 249, 255, 0.8) 100%); box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05); @@ -242,14 +224,41 @@ h4 { stroke-width: 8; } -.project-overview .project-small { - width: 150px; - height: 150px; -} +@media screen and (min-width: 890px) { + .intro-section .intro-container { + display: flex; + align-items: center; + } + + .intro-section .intro-container .text-container { + flex-grow: 1; + } + + .intro-section .text-container { + margin-bottom: 0; + } + + section { + margin-bottom: 180px; + } + + .intro-section .preview-container { + padding: 110px; + } + + .project-overview .project-small { + width: 150px; + height: 150px; + } + + .project-overview .project-large { + width: 150px; + height: 330px; + } -.project-overview .project-large { - width: 150px; - height: 330px; + .intro-section .project-overview { + grid-gap: 30px; + } } .feature-section .feature-container { @@ -302,14 +311,6 @@ h4 { } } -.team-section .team-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 5rem auto; - text-align: center; -} .team-section .team-list { display: flex; @@ -356,9 +357,15 @@ h4 { .team-section .team-member { flex-direction: column; } +} - .team-section .team-member-info { +@media screen and (min-width: 960px) { + .team-section .team-container { + display: flex; + flex-direction: column; align-items: center; + justify-content: center; + margin: 5rem auto; text-align: center; } } @@ -366,7 +373,6 @@ h4 { .contact-section .contact-container { display: flex; flex-direction: column; - margin: 5rem auto; text-align: center; } @@ -453,12 +459,18 @@ footer .footer-nav a { section.darker { padding: 30px 0; - margin: 0 75px; - border-radius: 25px; color: #f1f1f1; background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%); } +@media screen and (min-width: 960px) { + section.darker { + margin: 0 75px; + padding: 75px 0; + border-radius: 25px; + } +} + * { margin: 0; padding: 0; @@ -651,8 +663,14 @@ nav a { .contact-field { position: relative; margin: 20px 0 30px 0; - width: 50%; padding: 0 5px; + width: 100%; +} + +@media screen and (min-width: 640px) { + .contact-field { + width: 50%; + } } .contact-field:before {