assets/CSS/main.css

@@ -0,0 +1,354 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap%27');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Inter", sans-serif;
+    color: #000000;
+}
+
+.page-header {
+    display: flex;
+    justify-content: center;
+    background: #000000;
+    padding: 28px 0;
+}
+
+.header-logo {
+    display: block;
+}
+
+.main-banner-desktop, .main-banner-mobile {
+    display: block;
+    width: 100%;
+}
+
+.top-infocard {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 72px 0 0 0;
+}
+
+.top-infocard-text {
+    max-width: 768px;
+}
+
+.top-infocard-subtitle {
+    text-transform: uppercase;
+    font-size: 32px;
+    font-weight: 400;
+    text-align: center;
+}
+
+.top-infocard-title {
+    text-transform: uppercase;
+    font-size: 48px;
+    font-weight: 500;
+    margin-bottom: 24px;
+    text-align: center;
+}
+
+.top-infocard-description {
+    font-size: 16px;
+    text-align: left;
+    line-height: 24px;
+}
+
+.top-infocard-image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 90px 0 180px;
+    margin: 0 auto;
+}
+
+.top-cards {
+    display: grid;
+    grid-template-columns: repeat(3,max-content);
+    gap: 22px;
+    justify-content: center;
+    width: 100%;
+}
+.top-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px  34px;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    width: 100%;
+}
+
+.top-card-image {
+    display: block;
+    margin-bottom: 26px;
+}
+
+.top-card-description {
+    display: flex;
+    margin: 0 auto;
+    max-width: 300px;
+    font-weight: 400;
+    font-size: 16px;
+    text-align: center;
+}
+
+.middle-banner {
+    background: #E0E0E0;
+    margin: 80px 0 0 0;
+    width: 100%;
+}
+
+.middle-banner-container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    gap: 40px;
+    width: 100%;
+    padding: 0 72px;
+    bottom: -62px;
+}
+
+.middle-banner-image img {
+    width: 100%;
+    max-width: 566px;
+}
+
+.bottom-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,432px);
+    gap: 16px;
+    justify-content: center;
+    width: 100%;
+    padding: 192px 72px 110px 72px;
+}
+.bottom-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px  34px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+    width: 100%;
+}
+
+.bottom-card-image {
+    display: block;
+    margin-bottom: 26px;
+}
+
+.bottom-card-description {
+    display: flex;
+    margin: 0 auto;
+    max-width: 368px;
+    font-weight: 400;
+    font-size: 16px;
+    text-align: center;
+}
+
+.bottom-infocard {
+    display: block;
+}
+
+.bottom-infocard-text {
+    max-width: 550px;
+    margin: 0 auto;
+}
+
+.bottom-infocard-title {
+    font-size: 32px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.bottom-infocard-description {
+    font-size: 16px;
+    text-align: center;
+    line-height: 24px;
+}
+
+.bottom-image-desktop {
+    max-width: 1360px;
+    padding: 50px 0 116px 0;
+    margin: 0 auto;
+}
+
+.bottom-image-mobile {
+    max-width: 414px;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+    height: auto;
+}
+
+.bottom-infocard-image-desktop, .bottom-infocard-image-mobile {
+    width: 100%;
+}
+
+.page-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #000000;
+    padding: 38px 0;
+}
+
+.footer-icons {
+    display: flex;
+    list-style: none;
+    margin-bottom: 16px;
+    align-items: center;
+}
+
+.footer-icon, .footer-icon-3 {
+    margin: 0 8px;
+}
+
+.footer-text {
+    text-transform: uppercase;
+    line-height: 12px;
+    font-size: 10px;
+    color: #BDBDBD;
+    text-align: center;
+
+}
+
+@media screen and (min-width:2375px) {
+    .bottom-cards {
+        grid-template-columns: repeat(4,max-content);
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+    .top-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+
+    .bottom-cards {
+        grid-template-columns: repeat(2,max-content);
+    }
+}
+
+@media screen and (max-width:1024px) {
+    .middle-banner-container {
+        display: grid;
+        grid-template-areas: 
+            "b a"
+            "c c";
+        row-gap: 24px;
+        column-gap: 14px;
+        padding: 0 24px;
+        bottom: -32px;
+    }
+
+    .middle-banner-image img {
+        max-width: unset;
+    }
+
+    .middle-banner-image.a {
+        grid-area: a;
+    }
+
+    .middle-banner-image.b {
+        grid-area: b;
+    }
+
+    .middle-banner-image.c {
+        grid-area: c;
+    }
+}
+
+@media screen and (max-width:992px) {
+    .middle-banner {
+        flex-wrap: wrap;
+    }
+}
+
+@media screen and (max-width:768px) {
+
+    .top-infocard {
+        flex-direction: column;
+        padding: 90px 0 0 0;
+    }
+    
+    .top-infocard-subtitle {
+        font-size: 20px;
+    }
+
+    .top-infocard-title {
+        margin-bottom: 20px;
+        font-size: 28px;
+    }
+
+    .top-infocard-description {
+        padding: 0 28px 0 28px;
+        text-align: center;
+    }
+
+    .top-infocard-image {
+        width: 100%;
+        max-width: 240px;
+        padding-top: 64px;
+        padding-bottom: 90px;
+    }
+
+    .top-cards {
+        grid-template-columns: 1fr;
+        padding: 0 32px ;
+    }
+
+    .middle-banner {
+        padding: 32px 43px 32px 24px;
+        align-items: center;
+    }
+
+    .bottom-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .bottom-infocard-title {
+        max-width: 315px;
+        margin: 0 auto;
+        padding: 0 0 9px 0;
+    }
+
+    .bottom-infocard-description {
+        max-width: 350px;
+        margin: 0 auto;
+    }
+}
+
+@media screen and (min-width: 415px) {
+    .main-banner-mobile, .bottom-image-mobile {
+        display: none;
+    }
+}
+@media screen and (max-width: 414px) {
+    .main-banner-desktop, .bottom-image-desktop {
+        display: none;
+    }
+
+    .bottom-cards {
+        padding: 80px 24px 98px 24px;
+    }
+
+    .bottom-infocard {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .bottom-infocard-title {
+        font-size: 24px;
+    }
+    
+    .bottom-infocard-description {
+        padding-bottom: 88px;
+    }
+
+    .bottom-image-mobile {
+        margin-bottom: 50px;
+    }
+}

index.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Desafio 1: Landing Page</title>
+    <link rel="stylesheet" href="./assets/CSS/main.css" />
+</head>
+<body>
+    <header class="page-header">
+        <a href="/">
+            <img class="header-logo" 
+            src="./assets/images/Logo-M3Academy 1.svg" 
+            alt="Logo M3" 
+            />
+        </a>
+    </header>
+
+    <main>
+        <div>
+            <img 
+            src="./assets/images/Banner-principal.jpg" 
+            alt="Banner Principal Desktop" 
+            class="main-banner-desktop" 
+            />
+
+            <img
+            class="main-banner-mobile"
+            src="./assets/images/Banner-principal-mobile.png"
+            alt="Banner Principal Mobile"
+        />
+        </div>
+
+        <section class="top-infocard">
+            <div class="top-infocard-text">
+                <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+
+                <h1 class="top-infocard-title">dolor sit amet</h1>
+
+                <p class="top-infocard-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                    euismod enim non dui fringilla interdum. Curabitur ut tortor sed
+                    lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
+                    dui.
+                </p>
+
+                <img 
+                src="./assets/images/Banner Infocard Topo.png" 
+                alt="Banner Infocard Topo" 
+                class="top-infocard-image" 
+                />
+            </div>
+        </section>
+
+        <div class="top-cards">
+            <figure class="top-card">
+                <img
+                  class="top-card-image"
+                  src="./assets/images/shop 1.png"
+                  alt="Imagem do Primeiro Card do Topo"
+                />
+                <figcaption class="top-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+            </figure>
+
+              <figure class="top-card">
+                <img
+                  class="top-card-image"
+                  src="./assets/images/shopping-bag (1) 1.png"
+                  alt="Imagem do Segundo Card do Topo"
+                />
+                <figcaption class="top-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+              </figure>
+
+              <figure class="top-card">
+                <img
+                  class="top-card-image"
+                  src="./assets/images/coin 1.png"
+                  alt="Imagem do Terceiro Card do Topo"
+                />
+                <figcaption class="top-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+              </figure>
+        </div>
+
+        <div class="middle-banner">
+            <div class="middle-banner-container">
+                  <div class="middle-banner-image a">
+                      <img 
+                      src="./assets/images/middle-image1.png" 
+                      alt="notebook-image-1" 
+                      />
+                  </div>
+  
+                  <div class="middle-banner-image b">
+                      <img 
+                      src="./assets/images/middle-image2.png" 
+                      alt="notebook-image-2" 
+                      />
+                  </div>
+  
+                  <div class="middle-banner-image c">
+                      <img 
+                      src="./assets/images/middle-image3.png" 
+                      alt="notebook-image-3" 
+                      />
+                  </div>
+                </div>
+          </div>
+
+          <div class="bottom-cards">
+            <figure class="bottom-card">
+                <img
+                  class="bottom-card-image"
+                  src="./assets/images/money (1) 2.png"
+                  alt="Imagem do Primeiro Card Debaixo"
+                />
+                <figcaption class="bottom-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+            </figure>
+  
+            <figure class="bottom-card">
+                <img
+                  class="bottom-card-image"
+                  src="./assets/images/coin 1.png"
+                  alt="Imagem do Segundo Card Debaixo"
+                />
+                <figcaption class="bottom-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+             </figure>
+  
+           <figure class="bottom-card">
+                <img
+                  class="bottom-card-image"
+                  src="./assets/images/laptop 1.png"
+                  alt="Imagem do Terceiro Card Debaixo"
+                />
+                <figcaption class="bottom-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+             </figure>
+  
+            <figure class="bottom-card">
+                <img
+                  class="bottom-card-image"
+                  src="./assets/images/Group.png"
+                  alt="Imagem do Quarto Card Debaixo"
+                />
+                <figcaption class="bottom-card-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                  Cras euismod enim non dui fringilla interdum.
+                </figcaption>
+             </figure>
+        </div>
+
+        <section class="bottom-infocard">
+            <div class="bottom-infocard-text">
+    
+                <h1 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h1>
+    
+                <p class="bottom-infocard-description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
+                  Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+                  Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                </p>
+              </div>
+              <div class="bottom-image-desktop">
+                <img 
+                src="./assets/images/Rectangle 15.png" 
+                alt="Banner Infocard Debaixo-Desktop" 
+                class="bottom-infocard-image-desktop" 
+                />
+              </div>
+    
+              <div class="bottom-image-mobile">
+                <img 
+                src="./assets/images/bottom-infocard-image-mobile.png" 
+                alt="Banner Infocard Debaixo-Mobile" 
+                class="bottom-infocard-image-mobile" 
+                />
+              </div>
+            
+        </section>
+    </main>
+
+    <footer class="page-footer">
+        <ul class="footer-icons">
+            <li class="footer-icon">
+                <a href="https://www.instagram.com/m3.ecommerce/" target="_blank">
+                    <img src="./assets/images/instagram-icon-m3.png" alt="Instagram Icon" />
+                    </a>
+            </li>
+            
+            <li class="footer-icon">
+                <a href="https://www.facebook.com/digitalm3" target="_blank">
+                    <img src="./assets/images/facebook-logo.png" alt="Facebook Icon" />
+                </a>
+            </li>
+            
+            <li class="footer-icon-3">
+                <a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank">
+                    <img src="./assets/images/youtube-logo.png" alt="Youtube Icon" />
+                    </a>
+            </li>
+        </ul>
+  
+        <p class="footer-text">
+            Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
+        </p>
+  
+      </footer>
+</body>
+</html>