Merge pull request 'fix[section feature]: card break height resolved in 4k' (#18) from develop into main

Reviewed-on: #18

README.md

@@ -18,7 +18,6 @@ Projeto criado e planejado pela M3Academy, com o intuito de mostrar nossas capac
 |[📥 Installation 📥](#installation)                                    |Yes       |
 |🕹️ Usage 🕹️                                                             |Yes       |
 |[💙 Support 💙](#support)                                              |Yes       |
-|🗺️ Roadmap 🗺️                                                           |Yes       |
 |[💙 Contributing 💙](#contributing)                                    |Yes       |
 |[✍️ Author ✍️](#author)                                                  |Yes       |
 |[📞 Contact 📞](#contact)                                              |Yes       |
@@ -28,46 +27,36 @@ Projeto criado e planejado pela M3Academy, com o intuito de mostrar nossas capac
 
 ### 🎯 The Challenge
 
-**DATA ENTREGA**: 13/10/2022
+**DATA ENTREGA**: 13/10/2022 - Antecipado
 
 A branch que será corrigida será a branch principal (main ou master), então, após terminar o desenvolvimento do desafio, faça o pull request das branchs para a branch principal (main ou master). Se não estiver tudo na branch correta, não será considerado.
 
 Os Requisitos cobrados serão:
 
-- [] Repositório PRIVADO no gitTea;
+- [x] Repositório PRIVADO no gitTea;
-- [] NÃO DEVE ser usado javaScript no desenvolvimento;
+- [x] NÃO DEVE ser usado javaScript no desenvolvimento;
-- [] Quantidade de commits feitos deve ser maior que 10;
+- [x] Quantidade de commits feitos deve ser maior que 10;
-- [] HTML e CSS devem considerar a performance da pagina (código limpo, sem repetições desnecessárias)
+- [x] HTML e CSS devem considerar a performance da pagina (código limpo, sem repetições desnecessárias)
-- [] Entrega deve ser feita conforme é informado no vídeo - no local de entrega DESTE desafio, você irá colocar a URL do SEU repositório com TODA a Landingpage desenvolvida (o professor que for corrigir irá fazer o clone do seu repositório para corrigir) e irá aguardar a nota e o link da tabela de correção com os erros cometidos e dicas de como ajustar. TRABALHOS ENTREGUES POR EMAIL NÃO SERÃO ACEITOS. CONFIRA O SEU REPOSITÓRIO ANTES DE ENTREGAR, faça o clone novamente e confira se tudo está correto.
+- [x] Entrega deve ser feita conforme é informado no vídeo - no local de entrega DESTE desafio, você irá colocar a URL do SEU repositório com TODA a Landingpage desenvolvida (o professor que for corrigir irá fazer o clone do seu repositório para corrigir) e irá aguardar a nota e o link da tabela de correção com os erros cometidos e dicas de como ajustar. TRABALHOS ENTREGUES POR EMAIL NÃO SERÃO ACEITOS. CONFIRA O SEU REPOSITÓRIO ANTES DE ENTREGAR, faça o clone novamente e confira se tudo está correto.
 
 Avisos:
 
 - Repositórios VAZIOS terão nota ZERO e o aluno poderá ser eliminado imediatamente do treinamento (no dia seguinte a data de entrega será conferido cada repositório).
 #### Developer Challenge
 
-- [] Semântica do HTML;
+- [x] Semântica do HTML;
-- [] Uso de Conventional Commits e GitFlow para fazer as branchs e os commits;
+- [x] Uso de Conventional Commits e GitFlow para fazer as branchs e os commits;
-- [] Layout deve ser igual ao do figma fornecido acima e deve ser feito por completo;
+- [x] Layout deve ser igual ao do figma fornecido acima e deve ser feito por completo;
-- [] CSS com uso de media query (pode fazer uso de SASS se tiver familiaridade);
+- [x] CSS com uso de media query (pode fazer uso de SASS se tiver familiaridade);
-- [] A pagina deve se adaptar a TODOS os tamanhos de tela (telas maiores que 2500px, desktop (entre 2500 e 1025px), tablet e mobile (1024px até 280px - Galaxy Fold - Chrome) - DICA: usem medidas em porcentagem quando necessário.
+- [x] A pagina deve se adaptar a TODOS os tamanhos de tela (telas maiores que 2500px, desktop (entre 2500 e 1025px), tablet e mobile (1024px até 280px - Galaxy Fold - Chrome) - DICA: usem medidas em porcentagem quando necessário.
 
 [<<< TOP](#contents)
 
 ## 📽 Visuals
 
-![Image](./screenshot.jpg)
-
-[<<< TOP](#contents)
-
-### 📽 Gif
-
-![Image](./screenshot.jpg)
-
-[<<< TOP](#contents)
-
 ### 📽 Screenshot
 
-![Image](./screenshot.jpg)
+![Image](./docs/images/screenshot.png)
 
 [<<< TOP](#contents)
 
@@ -89,13 +78,13 @@ Avisos:
 
 ### 📖 What I Learned
 
-Dolor enim sunt irure nostrud nostrud velit aliquip elit adipisicing dolor laboris elit nostrud. Et et dolore pariatur aliqua in nulla. Exercitation do eiusmod amet nostrud eu elit fugiat proident duis eiusmod et reprehenderit deserunt commodo.
+Eu aprendi, a ajudar pessoas com problemas de progamação, gostei bastante do meu desenvolvimento, ajudar quem precisa e gratificante, meu desenvolvimento foi tranquilo acredito que esse é somente o aquecimento, creio que ainda tenho muito a aprender, todos contéudos da M3 Academy são um dos melhores que eu já conheci, acredito que aprenderei muitos conhecimentos novos. Estou ansioso para mais contéudos.
 
 [<<< TOP](#contents)
 
 ### 🏭 Continuous development
 
-Laboris ad tempor consectetur eiusmod consectetur cillum nisi voluptate irure. Cupidatat nisi anim ad tempor fugiat dolore reprehenderit voluptate. Labore Lorem sunt consequat cupidatat occaecat est mollit voluptate exercitation proident eu esse exercitation adipisicing. Ut quis veniam commodo pariatur pariatur velit fugiat adipisicing mollit ex. Duis voluptate labore exercitation quis aliquip laboris nostrud excepteur laboris enim est esse dolore irure. Cillum amet est reprehenderit ex do pariatur velit non ea fugiat ullamco duis excepteur laborum. Labore culpa ex mollit est consectetur.
+Quero revisar o que aprendi ao longo do tempo, conhecer como uma empresa realmente funciona, sempre criei projetos sozinhos digo que a melhor experiencia em auxiliar pessoas e ajuda-las é algo muito bonito visto que sempre fui sozinho somente eu e minhas músicas, apesar de estar a um tempo na área de programação acredito que ainda terei muito o que aprender.
 
 [<<< TOP](#contents)
 
@@ -163,15 +152,11 @@ Caso tenha baixado as extenções no VSCODE, somente clique no arquivo index.htm
 
 ## 💙 Support
 
-...
+Estou a qualquer momento disponivel, para tirar suas duvidas sobre o desafio somente me chame no discord :3
-
-## 🗺️ Roadmap
-
-...
 
 ## 💙 Contributing
 
-...
+Está disponivel para contribuições
 
 ## ✍ Author
 

assets/css/config.css

@@ -1,38 +0,0 @@
-/*=== Por que criei esse arquivo ===*/
-/* Mas organização de cores, estilos, fonts, espaçamentos,etc. isso é um arquivo de configuração*/
-
-:root {
-  --clr-black: #000;
-
-  --bg-clr-black: #000;
-  --bg-clr-gray: #E0E0E0;
-  --bg-clr-white: #fff;
-
-  --body-family: "Inter", Arial, Helvetica, sans-serif;
-  --title-family: "Inter", Arial, Helvetica, sans-serif;
-
-  /*----------------------*\
-  =   Volatile Variables   =
-  \*----------------------*/
-  --hs-flow-space: 1rem;
-  --hs-grid-space: 1rem;
-  --hs-flex-space: 1rem;
-}
-
-/* font styles for all body tags */
-
-body * {
-  font-family: var(--body-family);
-}
-
-
-/* font styles for page titles */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.title {
-  font-family: var(--title-family);
-}

assets/css/main.css

@@ -1,5 +1,57 @@
-/*=== Por que criei esse arquivo ===*/
+/* Mas legível quais tags eu declarei com propriedades padrão */
-/* Este é meu arquivo principal, a metodologia que vou usar será CUBE CSS <3*/
+
+/* reset all tags */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Mas organização de cores, estilos, fonts, espaçamentos,etc. isso é um arquivo de configuração*/
+:root {
+  --clr-black: #000;
+  --clr-gray-100: #BDBDBD;
+
+  --bg-clr-black: #000;
+  --bg-clr-gray: #E0E0E0;
+  --bg-clr-white: #fff;
+
+  --body-family: "Inter", Arial, Helvetica, sans-serif;
+  --title-family: "Inter", Arial, Helvetica, sans-serif;
+
+  /*----------------------*\
+  =   Volatile Variables   =
+  \*----------------------*/
+  --hs-flow-space: 1rem;
+  --hs-grid-space: 1rem;
+  --hs-flex-space: 1rem;
+}
+
+/* font styles for all body tags */
+
+body * {
+  font-family: var(--body-family);
+}
+
+
+/* font styles for page titles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.title {
+  font-family: var(--title-family);
+}
+
+/* a metodologia que vou usar será CUBE CSS <3*/
 
 /* started styles */
 
@@ -18,11 +70,364 @@
   display: flex;
 }
 
+/*-------------*\
+=  MAIN BANNER  =
+\*-------------*/
+.main-banner-image {
+  width: 100%;
+  height: auto;
+}
+
+/*-------------*\
+=  INFORMATION  =
+\*-------------*/
+.information {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4rem;
+  padding: 4.625rem 1.875rem 90px;
+}
+
+.information-texts {
+  text-align: center;
+}
+
+.information-subtitle,
+.information-description {
+  line-height: 1.5rem;
+}
+
+.information-subtitle {
+  font-weight: 400;
+}
+
+.information-title {
+  font-weight: 500;
+  line-height: 3rem;
+}
+
+/*----------*\
+=  SERVICES  =
+\*----------*/
+.services {
+  padding-bottom: 5.625rem;
+}
+
+.services-container {
+  --hs-flex-space: 1.25rem;
+  --hs-flow-space: 1.75rem;
+
+  padding: 0 1.625rem;
+}
+
+.services-container,
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  flex-direction: column;
+  width: 100%;
+  min-height: 288px;
+  padding: 2.25rem 1.625rem 1.75rem;
+}
+
+.card-image {
+  width: 34.5%;
+  height: auto;
+  min-width: 103px;
+}
+
+/*---------*\
+=  GALLERY  =
+\*---------*/
+.gallery {
+  --hs-grid-space: 1.5rem 0.875rem;
+
+  padding: 0 1.5rem;
+  margin-bottom: 7rem;
+}
+
+.gallery-container {
+  position: relative;
+  grid-template-columns: repeat(2, 1fr);
+  justify-content: center;
+  transform: translateY(2rem);
+}
+
+.gallery-image,
+.gallery-image img {
+  width: 100%;
+  height: 100%;
+}
+
+.gallery-image-2 {
+  order: -1;
+}
+
+.gallery-image-3 {
+  grid-column: 1/2 span;
+}
+
+/*----------*\
+=  FEATURES  =
+\*----------*/
+.features {
+  padding: 0 1.5rem;
+}
+
+.features-container {
+  --hs-flex-space: 1rem;
+
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 6rem;
+  margin: 0;
+}
+
+.features .card {
+  width: 100%;
+  min-height: 332px;
+}
+
+/*------*\
+=  BLOG  =
+\*------*/
+.blog {
+  --hs-flex-space: 3.125rem;
+
+  width: 100%;
+  padding-bottom: 5.5rem;
+}
+
+.blog-images-image {
+  width: 100%;
+}
+
+.blog-article {
+  padding: 0 1.5rem;
+}
+
+.blog-title {
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+/*--------*\
+=  FOOTER  =
+\*--------*/
+.footer {
+  flex-direction: column;
+  padding: 2.375rem 0;
+}
+
 /*CUBE CSS styles*/
 
+/*-------------*\
+=  COMPOSITION  =
+\*-------------*/
+.flow *+* {
+  margin-top: var(--hs-flow-space);
+}
+
+.grid-box {
+  display: grid;
+  gap: var(--hs-grid-space);
+}
+
+.flex-box {
+  display: flex;
+  gap: var(--hs-flex-space);
+}
+
+.flex-box[data-type="reversed"] {
+  flex-direction: column-reverse;
+}
+
 /*-------*\
 =  UTILS  =
 \*-------*/
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.text-upper {
+  text-transform: uppercase;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.box-shadow {
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.clr-gray-100 {
+  color: var(--clr-gray-100);
+}
+
 .bg-clr-black {
   background-color: var(--bg-clr-black);
+}
+
+.bg-clr-gray {
+  background-color: var(--bg-clr-gray);
+}
+
+/*---------------*\
+=  MEDIA QUERIES  =
+\*---------------*/
+@media only screen and (max-width: 1024px) {
+  .services-container {
+    flex-direction: column;
+  }
+
+  .image-mobile {
+    display: flex;
+  }
+
+  .image-desktop {
+    display: none;
+  }
+}
+
+/*--------------------------------------*\
+=  MEDIA QUERIES LARGE DEVICES 1025px >  =
+\*--------------------------------------*/
+@media screen and (min-width:1025px) {
+
+  .features,
+  .gallery {
+    padding: 0 4.5rem;
+  }
+
+  .information-texts,
+  .services,
+  .blog-article,
+  .blog-images {
+    margin: 0 auto;
+  }
+
+  .information {
+    padding: 4.675rem 0 9.875rem;
+    gap: 4.675rem;
+  }
+
+  .information-texts {
+    width: 40.5%;
+    text-align: initial;
+  }
+
+  .information-title,
+  .information-subtitle {
+    text-align: center;
+  }
+
+  .information-title {
+    font-size: 200%;
+    margin-bottom: 1.75rem;
+  }
+
+  .information-subtitle {
+    line-height: 2rem;
+  }
+
+  .information-image {
+    width: 17%;
+    height: auto;
+  }
+
+  .information-image img {
+    width: 100%;
+  }
+
+  .services {
+    width: 57%;
+  }
+
+  .services-container {
+    padding: 0;
+  }
+
+  .services .card {
+    width: 34%;
+  }
+
+  .gallery {
+    --hs-grid-space: 2.5rem;
+  }
+
+  .gallery-container {
+    grid-template-columns: repeat(3, 1fr);
+    transform: translateY(4rem);
+  }
+
+  .gallery-image {
+    min-height: 530px;
+  }
+
+  .gallery-image-2 {
+    order: 0;
+  }
+
+  .gallery-image-3 {
+    grid-column: auto;
+  }
+
+  .features-container {
+    flex-direction: row;
+    padding-bottom: 6.75rem;
+  }
+
+  .features-container .card {
+    max-height: 260px;
+  }
+
+  .card-image {
+    width: 29%;
+    height: auto;
+  }
+
+  .blog {
+    padding-bottom: 7.25rem;
+  }
+
+  .blog-title {
+    font-size: 2rem;
+  }
+
+  .blog-images-image {
+    margin: 0;
+  }
+
+  .blog .flex-box[data-type="reversed"] {
+    flex-direction: column;
+  }
+
+  .blog-article {
+    width: 30.5%;
+  }
+
+  .blog-description {
+    line-height: 1.5rem;
+  }
+
+  .blog-images {
+    width: 71%;
+    height: auto;
+  }
+
+  .image-mobile {
+    display: none;
+  }
+
+  .image-desktop {
+    display: flex;
+  }
 }

assets/css/reset.css

@@ -1,15 +0,0 @@
-/*=== Por que criei esse arquivo ===*/
-/* Mas legível quais tags eu declarei com propriedades padrão */
-
-/* reset all tags */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}

assets/images/facebook-logo.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9993 0.0049936L14.887 0C11.3905 0 9.13087 2.31828 9.13087 5.90643V8.62969H6.00163C5.73123 8.62969 5.51226 8.84891 5.51226 9.11932V13.065C5.51226 13.3354 5.73148 13.5544 6.00163 13.5544H9.13087V23.5106C9.13087 23.781 9.34984 24 9.62025 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
+</svg>

assets/images/instagram-logo.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
+<path d="M11.9999 6.05847C8.58992 6.05847 5.81576 8.94822 5.81576 12.5003C5.81576 16.0522 8.58992 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.7642 16.7236 7.94514 14.829 7.94514 12.5002C7.94514 10.1711 9.76406 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
+<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
+</svg>

assets/images/youtube-logo.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.98 5.34C22.329 4.182 21.6225 3.969 20.184 3.888C18.747 3.7905 15.1335 3.75 12.003 3.75C8.8665 3.75 5.2515 3.7905 3.816 3.8865C2.3805 3.969 1.6725 4.1805 1.0155 5.34C0.345 6.4965 0 8.4885 0 11.9955C0 11.9985 0 12 0 12C0 12.003 0 12.0045 0 12.0045V12.0075C0 15.4995 0.345 17.5065 1.0155 18.651C1.6725 19.809 2.379 20.019 3.8145 20.1165C5.2515 20.2005 8.8665 20.25 12.003 20.25C15.1335 20.25 18.747 20.2005 20.1855 20.118C21.624 20.0205 22.3305 19.8105 22.9815 18.6525C23.658 17.508 24 15.501 24 12.009C24 12.009 24 12.0045 24 12.0015C24 12.0015 24 11.9985 24 11.997C24 8.4885 23.658 6.4965 22.98 5.34ZM9 16.5V7.5L16.5 12L9 16.5Z" fill="white"/>
+</svg>

index.html

@@ -13,9 +13,19 @@
       name="keywords"
       content="challenge, m3-academy, landing page, HTML, CSS, development, frontend, desafio, desenvolvimento"
     />
+
+    <!--===== FAVICON =====-->
     <link rel="shortcut icon" href="./assets/images/simple-logo.svg" type="image/svg+xml" />
-    <link rel="stylesheet" href="./assets/css/reset.css" type="text/css" />
+
-    <link rel="stylesheet" href="./assets/css/config.css" type="text/css" />
+    <!--===== GOOGLE FONTS =====-->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <!--===== STYLES =====-->
     <link rel="stylesheet" href="./assets/css/main.css" type="text/css" />
 
     <title>M3 Amazing Landing page | Challenge 1</title>
@@ -29,17 +39,194 @@
     </header>
 
     <!--=============== Main Banner ===============-->
+    <figure class="main-banner">
+      <img
+        class="main-banner-image image-desktop"
+        src="./assets/images/main-banner-desktop.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+      <img
+        class="main-banner-image image-mobile"
+        src="./assets/images/main-banner-mobile.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+    </figure>
 
     <!--=============== Information ===============-->
+    <section class="information">
+      <div class="information-texts">
+        <h2 class="information-subtitle text-upper">Lorem ipusm</h2>
+        <h1 class="information-title text-upper">Dolor sit amet</h1>
+        <p class="information-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>
+      </div>
+      <figure class="information-image">
+        <img
+          src="./assets/images/information-image.png"
+          alt="três computadores juntos conectados por setas"
+        />
+      </figure>
+    </section>
 
     <!--=============== Services ===============-->
+    <section class="services">
+      <div class="services-container flex-box">
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/shop.svg" alt="shop" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/shopping-bag.svg" alt="shopping bag" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/handle-coin.svg" alt="handle coin" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+      </div>
+    </section>
 
     <!--=============== Gallery ===============-->
+    <div class="gallery bg-clr-gray">
+      <div class="gallery-container grid-box">
+        <figure class="gallery-image gallery-image-1">
+          <img
+            src="./assets/images/gallery-1.jpg"
+            alt="notebook em mistura de cores vermelho,roxo,ciano, com fundo preto, visto de frente"
+          />
+        </figure>
+
+        <figure class="gallery-image gallery-image-2">
+          <img
+            src="./assets/images/gallery-2.jpg"
+            alt="notebook em mistura de cores em vermelho,roxo,branco, com reflexo de cores, visto de cima"
+          />
+        </figure>
+
+        <figure class="gallery-image gallery-image-3">
+          <img
+            src="./assets/images/gallery-3.jpg"
+            alt="notebook em cores vibrantes de tonalidades vermelhas laranja, vermelho, amarelo, visto de lateral"
+          />
+        </figure>
+      </div>
+    </div>
 
     <!--=============== Features ===============-->
+    <section class="features">
+      <div class="features-container flex-box center">
+        <figure class="card flow box-shadow">
+          <img class="card-image" src="./assets/images/money.svg" alt="Dinheiro" />
+          <figcaption class="card-description text-center">
+            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="card flow box-shadow">
+          <img
+            class="card-image"
+            src="./assets/images/handle-coin.svg"
+            alt="Mão estendida com uma moeda"
+          />
+          <figcaption class="card-description text-center">
+            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="card flow box-shadow">
+          <img
+            class="card-image"
+            src="./assets/images/laptop.svg"
+            alt="Um laptop aberto em umas de suas páginas do seu ecommerce"
+          />
+          <figcaption class="card-description text-center">
+            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="card flow box-shadow">
+          <img
+            class="card-image"
+            src="./assets/images/phone-notificated.svg"
+            alt="Um celular que contém suas notificações"
+          />
+          <figcaption class="card-description text-center">
+            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>
 
     <!--=============== Blog ===============-->
 
+    <section class="blog">
+      <div class="blog-container flex-box" data-type="reversed">
+        <article class="blog-article flow">
+          <h2 class="blog-title text-center">Lorem ipsum dolor sit amet</h2>
+          <p class="blog-description text-center">
+            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>
+        </article>
+
+        <figure class="blog-images">
+          <img
+            class="blog-images-image image-desktop"
+            src="./assets/images/blog-desktop.jpg"
+            alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
+          />
+          <img
+            class="blog-images-image image-mobile"
+            src="./assets/images/blog-mobile.jpg"
+            alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
+          />
+        </figure>
+      </div>
+    </section>
+
     <!--=============== Footer ===============-->
+    <footer class="footer flex-box center bg-clr-black">
+      <ul class="footer-socials flex-box center">
+        <li>
+          <a target="_blank" href="https://www.instagram.com/m3.ecommerce/" title="Instagram da M3">
+            <img src="./assets/images/instagram-logo.svg" alt="Instagram da M3" />
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://www.facebook.com/digitalm3/" title="Facebook da M3">
+            <img src="./assets/images/facebook-logo.svg" alt="Facebook da M3" />
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" title="Youtube da M3">
+            <img src="./assets/images/youtube-logo.svg" alt="Youtube da M3" />
+          </a>
+        </li>
+      </ul>
+      <p class="text-center text-upper clr-gray-100">
+        Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+      </p>
+    </footer>
   </body>
 </html>