assets/Styles/main.css

@@ -0,0 +1,352 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  color: #000000;
+}
+
+.page-header {
+  padding: 29px 0;
+  justify-content: center;
+  display: flex;
+  background: #000000;
+}
+
+.logo-cima {
+  display: block;
+}
+
+.banner-principal {
+  width: 100%;
+}
+
+.infocard-cima {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.top-paragrafo {
+  text-align: left;
+  max-width: 766px;
+  margin-top: 28px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.top-titulo-h2 {
+  text-align: center;
+  margin-top: 73px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 32px;
+  text-transform: uppercase;
+}
+
+.top-titulo-h1 {
+  text-align: center;
+  font-weight: 500;
+  font-size: 48px;
+  line-height: 58px;
+  text-transform: uppercase;
+}
+
+.top-img {
+  padding: 73px 0 179px;
+}
+
+.infocard-meio {
+  padding: 0 0 80px;
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+  gap: 20px;
+  justify-content: center;
+}
+.card-meio {
+  padding: 27px 27px 36px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+  background: #ffffff;
+}
+
+.cards-do-meio {
+  display: block;
+  margin-bottom: 27px;
+}
+
+.paragrafos-meio {
+  max-width: 299px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 24px;
+}
+.img-baixo {
+  height: 530px;
+  background: #e0e0e0;
+}
+.wrapper {
+  justify-content: center;
+  gap: 39px;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  position: relative;
+  top: 62px;
+  padding: 0 72px;
+}
+
+.notebook-baixo {
+  width: 100%;
+}
+
+.section3 {
+  height: 500px;
+  background: rgb(219, 196, 196);
+}
+
+.infocard-baixo {
+  margin: 191px 0px;
+  display: grid;
+  grid-template-columns: 432px 432px 432px 432px;
+  gap: 16px;
+  justify-content: center;
+}
+.card-baixo {
+  padding: 65px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+}
+
+.cards-de-baixo {
+  margin-bottom: 27px;
+}
+
+.paragrafos-baixo {
+  max-width: 367px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.very-low-titulo {
+  text-align: center;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 39px;
+  text-transform: uppercase;
+}
+
+.very-low-paragrafo {
+  text-align: center;
+  max-width: 550px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.very-low-infocard {
+  padding: 0 32px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.very-low-img {
+  height: auto;
+  width: 100%;
+  max-width: 1360px;
+  padding: 50px 0 116px;
+}
+
+.page-footer {
+  padding: 38px 38px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: black;
+}
+
+.footer-texto {
+  color: #bdbdbd;
+  font-size: 10px;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+.footer-icons-ul {
+  align-items: center;
+  display: flex;
+  list-style: none;
+  margin-bottom: 16px;
+}
+.footer-icon {
+  margin: 0 21px;
+}
+
+.very-low-img-mobile {
+  display: none;
+}
+
+.banner-principal-mobile {
+  display: none;
+}
+
+@media (max-width: 1900px) {
+  .infocard-baixo {
+    grid-template-columns: 432px 432px;
+  }
+}
+
+@media screen and (max-width: 1180px) {
+  .top-titulo-h2 {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  .top-titulo-h1 {
+    font-size: 28px;
+    line-height: 34px;
+    height: 49px;
+  }
+
+  .top-paragrafo {
+    font-size: 16px;
+    line-height: 24px;
+    max-width: 357px;
+    width: 96%;
+    height: 115px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  .top-img {
+    width: 239px;
+    height: auto;
+    padding: 65px 0 0;
+  }
+
+  .infocard-meio {
+    grid-template-columns: 1fr;
+    padding: 90px 32px 80px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .infocard-baixo {
+    grid-template-columns: 432px;
+  }
+
+  .very-low-img {
+    display: none;
+  }
+  .very-low-img-mobile {
+    width: 100%;
+    max-width: 414px;
+    height: auto;
+    display: block;
+  }
+  .very-low-paragrafo {
+    margin: 0 0 32px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #000000;
+  }
+  .very-low-titulo {
+    margin: 50px 0 9px;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 29px;
+    text-align: center;
+    color: #000000;
+  }
+
+  .very-low-infocard {
+    padding: 0;
+  }
+
+  .very-low-div {
+    max-width: 350px;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .notebook-esquerda-mobile {
+    width: 177px;
+    grid-area: header;
+  }
+  .notebook-centro-mobile {
+    width: 370px;
+    grid-area: menu;
+  }
+  .notebook-direita-mobile {
+    width: 177px;
+    grid-area: main;
+  }
+
+  .wrapper {
+    padding: 0 23px;
+    top: 32px;
+    column-gap: 14px;
+    row-gap: 23px;
+    grid-template-columns: none;
+    display: -ms-grid;
+    display: grid;
+    grid-template-areas:
+      "header main"
+      "menu menu "
+      "menu menu ";
+  }
+  .page-footer {
+    padding: 32px 32px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .infocard-baixo {
+    grid-template-columns: 100%;
+    justify-items: center;
+    padding: 0 16px;
+  }
+  .card-baixo {
+    max-width: 350px;
+    width: 100%;
+    padding: 35px 26px 27px;
+    height: 287px;
+  }
+}
+
+@media screen and (max-width: 414px) {
+  .banner-principal-mobile {
+    display: block;
+  }
+  .banner-principal-desktop {
+    display: none;
+  }
+  .notebook-esquerda-mobile {
+    width: 100%;
+    grid-area: header;
+  }
+  .notebook-centro-mobile {
+    width: 100%;
+    grid-area: menu;
+  }
+  .notebook-direita-mobile {
+    width: 100%;
+    grid-area: main;
+  }
+}

index.html

@@ -0,0 +1,209 @@
+<!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>M3 Challenge - Patrick Reis</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+
+    <link rel="stylesheet" href="./assets/Styles/main.css" />
+  </head>
+  <body>
+    <header class="page-header">
+      <a href="index.html">
+        <img
+          class="logo-cima"
+          src="./assets/Images/Logo-M3Academy1.png"
+          alt="Logo M3 Academy"
+        />
+      </a>
+    </header>
+    <main>
+      <section>
+        <img
+          class="banner-principal banner-principal-desktop"
+          src="./assets/Images/banner-principal-desktop.jpg"
+          alt="Banner principal desktop"
+        />
+        <img
+          class="banner-principal banner-principal-mobile"
+          src="./assets/Images/banner-principal-mobile.jpg"
+          alt="Banner principal mobile"
+        />
+      </section>
+      <section class="infocard-cima">
+        <div class="top-texto">
+          <h2 class="top-titulo-h2">Lorem ipsum</h2>
+          <h1 class="top-titulo-h1">dolor sit amet</h1>
+          <p class="top-paragrafo">
+            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>
+        </div>
+        <img
+          class="top-img"
+          src="./assets/Images/infocard-cima.png"
+          alt="Infocard de cima"
+        />
+      </section>
+      <section class="infocard-meio">
+        <div class="card-meio">
+          <img
+            class="cards-do-meio"
+            src="./assets/Images/mid-card-esquerda.png"
+            alt="Inforcard da esquerda"
+          />
+          <p class="paragrafos-meio">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-meio">
+          <img
+            class="cards-do-meio"
+            src="./assets/Images/mid-card-centro.png"
+            alt="Infocard do centro"
+          />
+          <p class="paragrafos-meio">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-meio">
+          <img
+            class="cards-do-meio"
+            src="./assets/Images/mid-card-direita.png"
+            alt="Infocard da direita"
+          />
+          <p class="paragrafos-meio">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+      </section>
+      <section class="img-baixo">
+        <div class="wrapper">
+          <img
+            class="notebook-baixo notebook-esquerda-mobile"
+            src="./assets/Images/notebook-esquerda.jpg"
+            alt="Imagem de um Notebook 1"
+          />
+
+          <img
+            class="notebook-baixo notebook-direita-mobile"
+            src="./assets/Images/notebook-centro.jpg"
+            alt="Imagem de um notebook 2"
+          />
+          <img
+            class="notebook-baixo notebook-centro-mobile"
+            src="./assets/Images/notebook-direita.jpg"
+            alt="Imagem de um notebook 3"
+          />
+        </div>
+      </section>
+      <section class="infocard-baixo">
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-esquerda-exterior.png"
+            alt="Inforcard de baixo da esquerda exterior"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-esquerda.png"
+            alt="Infocard de baixo da esquerda"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-direita.png"
+            alt="Infocard da direita"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-direta-exterior.png"
+            alt="Infocard da direita"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+      </section>
+      <section class="very-low-infocard">
+        <img
+          class="very-low-img-mobile"
+          src="./assets/Images/banner-baixo-mobile.png"
+          alt="Banner de baixo mobile"
+        />
+        <div class="very-low-div">
+          <h2 class="very-low-titulo">Lorem ipsum dolor sit amet</h2>
+          <p class="very-low-paragrafo">
+            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>
+        <img
+          class="very-low-img"
+          src="./assets/Images/banner-baixo.jpg"
+          alt="Banner de baixo"
+        />
+      </section>
+    </main>
+    <footer class="page-footer">
+      <ul class="footer-icons-ul">
+        <li class="footer-icon">
+          <a
+            href="https://www.instagram.com/m3.ecommerce/?hl=pt-br"
+            target="_blank"
+          >
+            <img src="./assets/Images/insta-icon.png" alt="Ícone instagram" />
+          </a>
+        </li>
+        <li class="footer-icon">
+          <a href="https://www.facebook.com/digitalm3" target="_blank">
+            <img src="./assets/Images/face-icon.png" alt="Ícone facebook" />
+          </a>
+        </li>
+        <li class="footer-icon">
+          <a
+            href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
+            target="_blank"
+          >
+            <img src="./assets/Images/yt-icon.png" alt="Ícone youtube" />
+          </a>
+        </li>
+      </ul>
+      <p class="footer-texto">
+        Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+      </p>
+    </footer>
+  </body>
+</html>