assets/css/style.css

@@ -0,0 +1,303 @@
+* {
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    
+}
+
+body{
+    font-family: 'Inter', sans-serif;
+    color:black;
+}
+
+.page-header{
+    background:black;
+    display:flex;
+    justify-content:center;
+    padding: 28px 0;
+    
+}
+
+.header-logo {
+    display:block;
+}
+
+.banner {
+    width: 100%;
+    display:block;
+}
+
+.top-infocard {
+    align-items: center;
+    justify-content:center;
+    display:grid;
+    column-gap:65px;
+}
+
+.top-infocard-text {
+    max-width: 766px;
+    text-align: center;
+    justify-content:center;
+    padding: 66px 0 0;
+}
+
+.top-infocard-subtitle {
+    font-weight:400;
+    font-size: 32px;
+    text-transform:uppercase;
+}
+
+.top-infocard-title {
+    font-weight:500;
+    font-size: 48px;
+    text-transform:uppercase;
+    margin-bottom:24px;
+}
+
+.top-infocard-description {
+    line-height: 24px;
+    font-size:16px;
+}
+
+.top-infocard-image {
+    max-width:315px;
+    width:100%;
+    margin-top: 65px;
+    margin-bottom:220px;
+}
+
+.top-cards {
+    display:grid;
+    grid-template-columns: repeat(3, max-content);
+    gap:20px;
+    margin-bottom:80px;
+    
+}
+
+.top-card {
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    max-width:250px;
+    box-shadow: 0px 4px 20px 0px #0000003B;
+    padding: 36px 0px 26px;
+}
+
+.top-card-image {
+    display:block;
+    margin-bottom: 26px;
+}
+
+.top-card-description {
+    max-width:300px;
+    font-size:16px;
+    align-items:center;
+    line-height:24px;
+    text-align:center;
+}
+
+.middle-banners {
+    background:#f0f0f0;
+    display:grid;
+    grid-template-columns: repeat(3, max-content);
+    justify-content:center;
+    gap:32px;
+}
+
+.middle-banner {
+    max-width:350px;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    position: relative;
+    bottom: -64px;
+}
+
+.middle-banner-wrapper {
+    max-width: 370px;
+    position: relative;
+    display:flex;
+    bottom: -130px;
+    justify-content:center;
+    align-items:center;
+}
+
+.middle-banner-first-row {
+    padding: -98px 14px 24px;
+    /*130 - 32 = 98 de diferença*/
+}
+
+.bottom-cards {
+    margin: 202px 0 136px;
+    /*a minha sacada foi somar 64 do bottom negativo + 138 que e de fato a margem entre o middle-banners e bottom-cards*/
+    display:grid;
+    grid-template-columns: repeat(4, max-content);
+    justify-content:center;
+    gap:16px;
+    background:#fff;
+}
+
+.bottom-card {
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    max-width:300px;
+    padding: 36px 0px 14px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+
+}
+
+.bottom-card-description {
+    padding: 14px 32px 66px;
+    max-width:368px;
+    font-size: 16px;
+    line-height:24px;
+    text-align:center;
+}
+
+.bottom-card-image {
+    display:block;
+    margin-bottom: 14px;
+
+}
+
+.bottom-infocard {
+    align-items: center;
+    justify-content:center;
+    display:grid;
+    gap:32px;
+}
+
+.bottom-infocard-image-desktop {
+  margin-bottom: 104px;
+  max-width:1360px;
+ 
+}
+
+.bottom-infocard-text {
+    text-align:center;
+    align-items:center;
+    justify-content:center;
+    max-width:550px;
+}
+
+.bottom-infocard-title {
+    font-weight:600;
+    font-size:32px;
+    line-height: 20px;
+    margin-bottom: 18px;
+}
+
+.bottom-infocard-description {
+    font-size:16px;
+    line-height:24px;
+    margin-bottom:32px;
+
+}
+
+.page-footer {
+    background:black;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    padding: 38px 0;
+}
+
+.footer-icons {
+    display:flex;
+    list-style:none;
+    margin-bottom: 16px;
+}
+
+.footer-icon {
+    margin:0 8px;
+}
+
+.footer-text {
+    color: #bdbdbd;
+    font-size:10px;
+    line-height:12px;
+    text-transform:uppercase;
+}
+
+@media screen and (max-width: 414px) {
+    .banner-desktop, .middle-banner-desktop, .bottom-infocard-image-desktop {
+        display:none;
+    }
+    .top-infocard {
+        gap:80px;
+    }
+
+    .top-infocard-text {
+        max-width: 250px;
+    }
+
+    .top-infocard-subtitle {
+        font-size: 20px;
+}
+
+    .top-infocard-title {
+        font-size: 28px;
+        margin-bottom:18px;
+    }
+
+    .top-infocard-description {
+        max-width: 330px;
+      
+    }
+
+    .top-infocard-image {
+        max-width:240px;
+        width:100%;
+        margin-top: 66px;
+        
+    }
+
+    .top-cards {
+        grid-template-columns: 1fr;
+        
+    }
+
+    .bottom-cards {
+        grid-template-columns: 300px;
+        margin-right:0;
+        
+    }
+
+    .bottom-infocard {
+        gap:80px;
+    }
+
+    .bottom-infocard {
+        gap:104px;
+    }
+
+    .bottom-infocard-text {
+        max-width:250px;
+       
+    }
+    
+    .bottom-infocard-title {
+        font-size:24px;
+    }
+
+    .bottom-infocard-description {
+        max-width: 250px;
+    }
+
+    .page-footer {
+        padding: 42px 0 26px;
+    }
+
+    .footer-text {
+        max-width:280px;
+        text-align:center;
+    }
+
+}
+
+@media screen and (min-width:415px) {
+    .banner-mobile, .middle-banner-mobile, .bottom-infocard-image-mobile {
+        display:none;
+    }
+}

index.html

@@ -28,5 +28,19 @@
         />
       </a>
     </header>
+
+    <main>
+        <section>
+          <img
+            class="banner banner-desktop"
+            src="./assets/images/banner-desktop.png"
+            alt="Banner Principal Desktop"
+          />
+          <img
+            class="banner banner-mobile"
+            src="./assets/images/banner-mobile.png"
+            alt="Banner Principal Mobile"
+          />
+        </section>
   </body>
 </html>