diff --git a/assets/images/Logo-M3Academy 1.png b/assets/images/Logo-M3Academy-1.png similarity index 100% rename from assets/images/Logo-M3Academy 1.png rename to assets/images/Logo-M3Academy-1.png diff --git a/assets/images/m3-logo.png b/assets/images/m3-logo.png new file mode 100644 index 0000000..2978a6e Binary files /dev/null and b/assets/images/m3-logo.png differ diff --git a/assets/styles/style.css b/assets/styles/style.css index df6dc5b..3b44d69 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -19,6 +19,8 @@ body { } .page-header-logo { + width: 100%; + height: 43px; display: block; } @@ -28,7 +30,9 @@ body { } .top-infocard { - padding: 73px 80px; + display: flex; + flex-direction: column; + padding: 73px 0; } .top-infocard-text { @@ -62,41 +66,43 @@ body { margin-top: 20px; } +.top-infocard-images { + max-width: 315px; +} + .top-infocard-image { + width: 100%; margin-top: 73px; } +/**/ + .top-cards { display: flex; - align-items: center; justify-content: center; - padding: 179px 0 80px; - gap: 21px; + gap: 40px; + padding: 74px 0; } -.top-card { +.top-card{ display: flex; flex-direction: column; align-items: center; - justify-content: center; - background: #FFFFFF; + padding: 26px 26px 34px; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - padding: 35px 26px 34px; - max-width: 350px; } .top-card-image { display: block; - margin-bottom: 27px; + margin-bottom: 26px; } .top-card-description { + max-width: 300px; + text-align: center; font-size: 16px; line-height: 24px; - text-align: center; - margin-top: 27px; } - .middle-images { display: flex; align-items: center; @@ -184,6 +190,11 @@ body { background: #000000; } +.bottom-text-image { + width: 100%; + display: block; +} + .footer-icons { display: flex; list-style: none; @@ -237,20 +248,11 @@ body { .middle-images { display: flex; + flex-direction: column; gap: 15px; padding: 0 20px; } - .middle-image { - } - - .middle-image-two { - margin-top: 10px; - } - - /* - */ - .bottom-card { display: flex; flex-direction: column; @@ -331,7 +333,7 @@ body { } -@media screen and (min-width: 769px) and (max-width: 1200px) { +@media screen and (min-width: 769px) and (max-width: 992px) { .top-infocard, .top-cards { display: flex; align-items: center; @@ -341,19 +343,42 @@ body { width: 100%; } - .bottom-card { + .top-cards { + padding: 0 10px; + gap: 21px; + } + .middle-images { + gap: 39px; + padding: 0 72px; } } @media screen and (min-width:993px) and (max-width: 1280px) { .top-infocard { - justify-content: center; + display: flex; + align-items: center; } +} - .bottom-text-image { - width: 100%; +@media screen and (min-width: 1281px) and (max-width: 1440px) { + .top-infocard { + display: flex; + align-items: center; + } +} + +@media screen and (min-width: 1441px) and (max-width: 2000px) { + .top-infocard { + display: flex; + align-items: center; } } + + + + + + diff --git a/index.html b/index.html index 9b3f9a5..1474fea 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ @@ -42,12 +42,14 @@ tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

+ +
Card do top Card do top -
+ -
+
Primeiro card do topo

@@ -68,7 +70,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
+