diff --git a/assets/styles/main.css b/assets/styles/main.css index 4c808f4..56dcd2b 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -12,9 +12,6 @@ body{ width: 100%; height: 100px; padding:28px; -} -.header img{ - } .topbannerdesktop{ width: 100%; @@ -30,26 +27,20 @@ body{ } .topinfo-texts{ text-align: center; - margin-top: 73px; + margin-top: 6.5vh; width: 43%; - } - .topinfo-subtitle{ text-transform: uppercase; font-weight: 400; font-size: 32px; line-height: 39px; - } - - .topinfo-title{ font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; - } .topinfo-text{ font-weight: 400; @@ -57,7 +48,6 @@ body{ line-height: 24px; margin-top: 28px; text-align: left; - } .topinfo-img{ margin-top:70px; @@ -70,7 +60,7 @@ body{ margin-bottom: 80px; display: flex; justify-content: center; - gap:21px; + gap:1.09vw; } .topcard{ padding: 46px 26px 27px; @@ -94,10 +84,9 @@ body{ justify-content: center; top:62px; width: 100%; - } .gridimg{ - margin:0 72px; + margin:0 3.75vw; display: grid; flex-wrap:nowrap; grid-template-columns: 1fr 1fr 1fr; @@ -115,12 +104,11 @@ body{ .middle-img3{ display: block; width: 100%; - } .middlecards{ display:flex; - margin: 129px 72px 0 72px; - gap:16px; + margin: 129px 3.75vw 0 3.75vw; + gap: 0.85vw; background: #FFFFFF; } .middlecard{ @@ -141,13 +129,11 @@ body{ display: flex; flex-direction: column; align-items: center; - text-align: center; } .bottombanner figure figcaption{ - width: 35%; + max-width: 28%; } - .bottombanner-subtitle{ font-weight: 600; font-size: 32px; @@ -175,18 +161,15 @@ body{ align-items: center; flex-direction: column; gap: 17px; - } .footer a{ text-decoration: none; } .footer nav figure{ display: flex; - gap:21px; - -} -.footerimg{ + gap:21px; } + .footer-text{ font-weight: 400; font-size: 10px; @@ -195,7 +178,6 @@ body{ color: #BDBDBD; } - @media screen and (max-width: 767px){ .topbannerdesktop{ display:none; @@ -206,8 +188,6 @@ body{ } } - - @media screen and (max-width: 1439px){ .topinfo-texts{ min-width: 86%; @@ -218,7 +198,6 @@ body{ line-height: 24px; } - .topinfo-title{ font-weight: 500; font-size: 28px; @@ -244,16 +223,13 @@ body{ margin-bottom: 80px; flex-direction:column; gap:24px; - } - + } .topcard-text{ - min-width: 0; - + min-width: 0; } .middle-wrapper{ top:32px; } - .gridimg{ display: grid; grid-template-columns: repeat(4, 1fr); @@ -267,7 +243,6 @@ body{ grid-area: 1 / 3 / 2 / 5; } .middle-img2{ - grid-area: 1 / 1 / 2 / 3; } .middle-img3{ @@ -278,13 +253,9 @@ body{ margin: 80px 23px; flex-direction: column; } - .middlecard{ - } .middlecard-text{ font-size: 14px; - } - .bottombanner-desktop{ display: none; } @@ -301,7 +272,7 @@ body{ text-align: center; } .bottombanner figure figcaption{ - width:auto; + max-width:100%; margin: 0 7%; } .bottombanner-subtitle{ @@ -319,13 +290,11 @@ body{ .bottombanner-mobile{ display:block; width: 100%; - } - + } .footer{ margin-top: 87px; padding: 32px; } - .footer-text{ text-align: center; font-size: 10px; @@ -346,7 +315,6 @@ body{ font-size: 32px; line-height: 48px; margin-top: 28px; - } .figuretopinfo{ width: 100%; @@ -378,10 +346,12 @@ body{ font-size: 32px; line-height: 48px; } - .footer-text{ font-size: 20px; line-height: 24px; } + .footerimg{ + width: 1.35vw; + } } diff --git a/index.html b/index.html index a1f8911..51152a9 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
- + Logo-M3Academy
@@ -99,7 +99,7 @@
-
+

Lorem ipsum dolor sit amet @@ -118,13 +118,13 @@