assets/css/style.css

@@ -0,0 +1,363 @@
+* {
+  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: 29px 0;
+}
+
+.header-logo {
+  display: block;
+}
+
+.banner {
+  width: 100%;
+  display: block;
+}
+
+.top-infocard {
+  align-items: center;
+  justify-content: center;
+  display: grid;
+  column-gap: 65px;
+  margin-top: 73px;
+}
+
+.top-infocard-text {
+  width: 62%;
+  text-align: center;
+  justify-content: center;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.top-infocard-subtitle {
+  font-weight: 400;
+  font-size: 32px;
+  text-transform: uppercase;
+}
+
+.top-infocard-title {
+  font-weight: 500;
+  font-size: 48px;
+  text-transform: uppercase;
+  font-weight: bold;
+  margin-bottom: 28px;
+}
+
+.top-infocard-description {
+  line-height: 24px;
+  font-size: 16px;
+}
+
+.top-infocard-image {
+  width: 38%;
+  margin-top: 73px;
+  margin-bottom: 179px;
+}
+
+.top-cards {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+  gap: 21px;
+  margin-bottom: 80px;
+
+  height: auto;
+  justify-content: center;
+}
+
+.top-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 287px;
+  box-shadow: 0px 4px 20px 0px #0000003b;
+  padding: 35px 0px 27px;
+}
+
+.top-card-image {
+  width: 30%;
+  margin-bottom: 27px;
+}
+
+.top-card-description {
+  font-size: 16px;
+  align-items: center;
+  line-height: 24px;
+  text-align: center;
+  max-width: 350px;
+}
+
+.middle-banners {
+  background: #f0f0f0;
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+  justify-content: center;
+  gap: 39px;
+}
+
+.middle-banner {
+  width: 60%;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  bottom: -64px;
+  margin-left: auto;
+  margin-right: auto;
+  height: auto;
+}
+
+.middle-banner-wrapper {
+  position: relative;
+  display: grid;
+  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: 193px 0 136px;
+  /*64 do bottom negativo + 129 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;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.bottom-card-image {
+  width: 35%;
+  margin-bottom: 14px;
+}
+
+.bottom-infocard {
+  align-items: center;
+  justify-content: center;
+  display: grid;
+  gap: 30px;
+}
+
+.bottom-infocard-image-desktop {
+  margin-bottom: 116px;
+  width: 70%;
+  height: auto;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bottom-infocard-text {
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.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 (min-width: 2500px) {
+  .top-infocard-subtitle {
+    font-size: 64px;
+  }
+
+  .top-infocard-title {
+    font-size: 96px;
+  }
+
+  .top-infocard-description,
+  .top-infocard-description,
+  .top-card-description,
+  .bottom-card-description,
+  .bottom-infocard-description {
+    line-height: 48px;
+    font-size: 32px;
+  }
+
+  .bottom-infocard-title {
+    font-size: 64px;
+    line-height: 40px;
+  }
+  .footer-text {
+    font-size: 20px;
+    line-height: 24px;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .banner-mobile,
+  .middle-banner-mobile,
+  .bottom-infocard-image-mobile {
+    display: none;
+  }
+}
+
+@media (max-width: 1024px) {
+  .banner-desktop,
+  .middle-banner,
+  .middle-banner-desktop,
+  .bottom-infocard-image-desktop {
+    display: none;
+  }
+  .top-infocard {
+    gap: 90px;
+  }
+
+  .top-infocard-text {
+    width: 90%;
+  }
+
+  .top-infocard-subtitle {
+    font-size: 20px;
+  }
+
+  .top-infocard-title {
+    font-size: 28px;
+    margin-bottom: 18px;
+  }
+
+  .top-infocard-description {
+    width: 90%;
+  }
+
+  .top-infocard-image {
+    width: 65%;
+    margin-top: 65px;
+  }
+
+  .top-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .middle-banner-wrapper {
+    grid-template-columns: auto auto auto auto;
+    grid-gap: 14px;
+  }
+
+  .image-1 {
+    grid-area: 1 / 1 / span 1 / span 1;
+  }
+
+  .image-2 {
+    grid-area: 2 / 1 / span 1 / span 1;
+  }
+
+  .image-3 {
+    grid-area: 1/ 2 / span 1 / span 2;
+    display: block;
+  }
+
+  .bottom-cards {
+    grid-template-columns: 1fr;
+    margin-bottom: 98px;
+  }
+
+  .bottom-infocard {
+    gap: 50px;
+    margin-bottom: 87px;
+  }
+
+  .bottom-infocard-text {
+    width: 90%;
+    order: 2;
+  }
+
+  .bottom-infocard-image-desktop {
+    order: 1;
+  }
+
+  .bottom-infocard-title {
+    font-size: 24px;
+  }
+
+  .bottom-infocard-description {
+    width: 90%;
+  }
+
+  .page-footer {
+    padding: 42px 0 26px;
+  }
+
+  .footer-text {
+    width: 70%;
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 820px) {
+}
+
+@media screem amd (max-width: 320px) {
+}

index.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <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>Challenge Landing Page</title>
+
+    <link
+      href="https://fonts.googleleaps.com/css2?family=Inter:wgt@400;500&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="./assets/css/style.css" />
+  </head>
+
+  <body>
+    <header class="page-header">
+      <a href="#">
+        <img
+          class="header-logo"
+          src="./assets/images/logom3.png"
+          alt="Logo M3"
+        />
+      </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>
+
+      <section class="top-infocard">
+        <div class="top-infocard-text">
+          <h2 class="top-infocard-subtitle">lore 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
+            class="top-infocard-image"
+            src="./assets/images/infocard-image.png"
+            alt="Imagem do Infocard"
+          />
+        </div>
+
+        <div class="top-cards">
+          <div class="top-card">
+            <img
+              class="top-card-image"
+              src="./assets/images/top-card-image-1.png"
+              alt="Primeiro Card"
+            />
+
+            <p class="top-card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              euismod enim non dui fringilla interdum.
+            </p>
+          </div>
+
+          <div class="top-card">
+            <img
+              class="top-card-image"
+              src="./assets/images/top-card-image-2.png"
+              alt="Segundo Card"
+            />
+
+            <p class="top-card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              euismod enim non dui fringilla interdum.
+            </p>
+          </div>
+
+          <div class="top-card">
+            <img
+              class="top-card-image"
+              src="./assets/images/top-card-image-3.png"
+              alt="Terceiro Card"
+            />
+
+            <p class="top-card-description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              euismod enim non dui fringilla interdum.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section class="middle-banners">
+        <img
+          class="middle-banner middle-banner-desktop"
+          src="./assets/images/middle-banner-desktop-1.png"
+          alt="Banner do Meio Desktop 1"
+        />
+        <img
+          class="middle-banner middle-banner-desktop"
+          src="./assets/images/middle-banner-desktop-2.png"
+          alt="Banner do Meio Desktop 2"
+        />
+        <img
+          class="middle-banner middle-banner-desktop"
+          src="./assets/images/middle-banner-desktop-3.png"
+          alt="Banner do Meio Desktop 3"
+        />
+
+        <div class="middle-banner-wrapper">
+          <img
+            class="middle-banner-mobile"
+            src="./assets/images/middle-banner-mobile-1.png"
+            alt="Banner do Meio Mobile 1"
+          />
+          <img
+            class="middle-banner-mobile"
+            src="./assets/images/middle-banner-mobile-2.png"
+            alt="Banner do Meio Mobile 2"
+          />
+
+          <img
+            class="middle-banner-mobile"
+            src="./assets/images/middle-banner-mobile-3.png"
+            alt="Banner do Meio Mobile 3"
+          />
+        </div>
+      </section>
+
+      <section class="bottom-cards">
+        <div class="bottom-card">
+          <img
+            class="bottom-card-image"
+            src="./assets/images/bottom-card-image-1.png"
+            alt="Primeiro Card"
+          />
+
+          <p 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.
+          </p>
+        </div>
+
+        <div class="bottom-card">
+          <img
+            class="bottom-card-image"
+            src="./assets/images/bottom-card-image-3.png"
+            alt="Segundo Card"
+          />
+
+          <p 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.
+          </p>
+        </div>
+
+        <div class="bottom-card">
+          <img
+            class="bottom-card-image"
+            src="./assets/images/bottom-card-image-2.png"
+            alt="Terceiro Card"
+          />
+
+          <p 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.
+          </p>
+        </div>
+
+        <div class="bottom-card">
+          <img
+            class="bottom-card-image"
+            src="./assets/images/bottom-card-image-4.png"
+            alt="Quarto Card"
+          />
+
+          <p 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.
+          </p>
+        </div>
+      </section>
+
+      <section class="bottom-infocard">
+        <div class="bottom-infocard-text">
+          <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
+
+          <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>
+
+        <img
+          class="bottom-infocard-image-desktop"
+          src="./assets/images/bottom-infocard-image-desktop.png"
+          alt="Banner do Bottom Desktop"
+        />
+        <img
+          class="bottom-infocard-image-mobile"
+          src="./assets/images/bottom-infocard-image-mobile.png"
+          alt="Banner do Bottom Mobile"
+        />
+      </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.png"
+              alt="Ícone do Instagram"
+            />
+          </a>
+        </li>
+
+        <li class="footer-icon">
+          <a href="#" target="_blank">
+            <img
+              src="./assets/images/facebook-icon.png"
+              alt="Imagem do Facebook"
+            />
+          </a>
+        </li>
+
+        <li class="footer-icon">
+          <a href="#" target="_blank">
+            <img
+              src="./assets/images/youtube-icon.png"
+              alt="Imagem do Youtube"
+            />
+          </a>
+        </li>
+      </ul>
+
+      <p class="footer-text">
+        Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
+      </p>
+    </footer>
+  </body>
+</html>