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;
-- [] NÃO DEVE ser usado javaScript no desenvolvimento;
-- [] 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)
-- [] 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] Repositório PRIVADO no gitTea;
+- [x] NÃO DEVE ser usado javaScript no desenvolvimento;
+- [x] Quantidade de commits feitos deve ser maior que 10;
+- [x] HTML e CSS devem considerar a performance da pagina (código limpo, sem repetições desnecessárias)
+- [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;
-- [] 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;
-- [] 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] Semântica do HTML;
+- [x] Uso de Conventional Commits e GitFlow para fazer as branchs e os commits;
+- [x] Layout deve ser igual ao do figma fornecido acima e deve ser feito por completo;
+- [x] CSS com uso de media query (pode fazer uso de SASS se tiver familiaridade);
+- [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
 
-...
-
-## 🗺️ Roadmap
-
-...
+Estou a qualquer momento disponivel, para tirar suas duvidas sobre o desafio somente me chame no discord :3
 
 ## 💙 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 ===*/
-/* Este é meu arquivo principal, a metodologia que vou usar será CUBE CSS <3*/
+/* Mas legível quais tags eu declarei com propriedades padrão */
+
+/* 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 */
 
@@ -34,77 +86,40 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  gap: 64px;
-  padding: 74px 1.875rem 90px;
+  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;
-  line-height: 24px;
 }
 
 .information-title {
   font-weight: 500;
-  line-height: 48px;
-}
-
-.information-description {
-  line-height: 24px;
-}
-
-
-@media screen and (min-width:1025px) {
-  .information {
-    padding: 74px 0 157px;
-    gap: 74px;
-  }
-
-  .information-texts {
-    width: 40.5%;
-    margin: 0 auto;
-    text-align: initial;
-  }
-
-  .information-title,
-  .information-subtitle {
-    text-align: center;
-  }
-
-  .information-title {
-    font-size: 200%;
-    margin-bottom: 28px;
-  }
-
-  .information-subtitle {
-    line-height: 32px;
-  }
-
-  .information-image {
-    width: 17%;
-    height: auto;
-  }
-
-  .information-image img {
-    width: 100%;
-  }
+  line-height: 3rem;
 }
 
 /*----------*\
 =  SERVICES  =
 \*----------*/
 .services {
-  padding-bottom: 90px;
+  padding-bottom: 5.625rem;
 }
 
 .services-container {
-  --hs-flex-space: 20px;
-  --hs-flow-space: 28px;
+  --hs-flex-space: 1.25rem;
+  --hs-flow-space: 1.75rem;
 
-  padding: 0 26px;
+  padding: 0 1.625rem;
 }
 
 .services-container,
@@ -115,47 +130,26 @@
 }
 
 .card {
-  width: 100%;
   flex-direction: column;
+  width: 100%;
   min-height: 288px;
-  padding: 36px 26px 28px;
+  padding: 2.25rem 1.625rem 1.75rem;
 }
 
 .card-image {
   width: 34.5%;
-  min-width: 103px;
   height: auto;
-}
-
-@media screen and (max-width: 1024px) {
-  .services-container {
-    flex-direction: column;
-  }
-}
-
-@media screen and (min-width:1025px) {
-  .services {
-    width: 57%;
-    margin: 0 auto;
-  }
-
-  .services-container {
-    padding: 0;
-  }
-
-  .services .card {
-    width: 34%;
-  }
+  min-width: 103px;
 }
 
 /*---------*\
 =  GALLERY  =
 \*---------*/
 .gallery {
-  --hs-grid-space: 24px 14px;
+  --hs-grid-space: 1.5rem 0.875rem;
 
-  padding: 0 24px;
-  margin-bottom: 112px;
+  padding: 0 1.5rem;
+  margin-bottom: 7rem;
 }
 
 .gallery-container {
@@ -168,39 +162,22 @@
 .gallery-image,
 .gallery-image img {
   width: 100%;
+  height: 100%;
 }
 
+.gallery-image-2 {
+  order: -1;
+}
 
 .gallery-image-3 {
   grid-column: 1/2 span;
 }
 
-@media screen and (min-width:1025px) {
-  .gallery {
-    --hs-grid-space: 40px;
-
-    padding: 0 72px;
-  }
-
-  .gallery-container {
-    grid-template-columns: repeat(3, 1fr);
-    transform: translateY(4rem);
-  }
-
-  .gallery-image {
-    min-height: 530px;
-  }
-
-  .gallery-image-3 {
-    grid-column: auto;
-  }
-}
-
 /*----------*\
 =  FEATURES  =
 \*----------*/
 .features {
-  padding: 0px 24px;
+  padding: 0 1.5rem;
 }
 
 .features-container {
@@ -208,95 +185,44 @@
 
   flex-direction: column;
   width: 100%;
-  padding-bottom: 98px;
+  padding-bottom: 6rem;
   margin: 0;
 }
 
 .features .card {
   width: 100%;
   min-height: 332px;
-
-}
-
-@media screen and (min-width:1025px) {
-  .features {
-    padding: 0 72px;
-  }
-
-
-  .features-container {
-    flex-direction: row;
-    padding-bottom: 108px;
-  }
-
-  .card-image {
-    width: 29%;
-    height: auto;
-  }
 }
 
 /*------*\
 =  BLOG  =
 \*------*/
 .blog {
+  --hs-flex-space: 3.125rem;
+
   width: 100%;
+  padding-bottom: 5.5rem;
 }
 
 .blog-images-image {
   width: 100%;
-  margin-bottom: 50px;
 }
 
 .blog-article {
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
 .blog-title {
   font-weight: 500;
-  font-size: 24px;
+  font-size: 1.5rem;
 }
 
-@media screen and (min-width: 1025px) {
-  .blog {
-    padding-bottom: 116px;
-  }
-
-  .blog-title {
-    font-size: 32px;
-  }
-
-  .blog-images-image {
-    margin: 0;
-  }
-
-  .blog .flex-box[data-type="reversed"] {
-    flex-direction: column;
-  }
-
-  .blog-article {
-    width: 30.5%;
-    margin: 0 auto;
-    margin-bottom: 50px;
-  }
-
-  .blog-description {
-    line-height: 24px;
-  }
-
-  .blog-images {
-    width: 71%;
-    height: auto;
-    margin: 0 auto;
-  }
-}
-
-
 /*--------*\
 =  FOOTER  =
 \*--------*/
 .footer {
   flex-direction: column;
-  padding: 38px 0;
+  padding: 2.375rem 0;
 }
 
 /*CUBE CSS styles*/
@@ -346,7 +272,6 @@
   color: var(--clr-gray-100);
 }
 
-
 .bg-clr-black {
   background-color: var(--bg-clr-black);
 }
@@ -355,7 +280,14 @@
   background-color: var(--bg-clr-gray);
 }
 
+/*---------------*\
+=  MEDIA QUERIES  =
+\*---------------*/
 @media only screen and (max-width: 1024px) {
+  .services-container {
+    flex-direction: column;
+  }
+
   .image-mobile {
     display: flex;
   }
@@ -365,7 +297,132 @@
   }
 }
 
-@media only screen and (min-width: 1025px) {
+/*--------------------------------------*\
+=  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;
   }

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;
-}

index.html

@@ -26,8 +26,6 @@
     />
 
     <!--===== STYLES =====-->
-    <link rel="stylesheet" href="./assets/css/reset.css" type="text/css" />
-    <link rel="stylesheet" href="./assets/css/config.css" type="text/css" />
     <link rel="stylesheet" href="./assets/css/main.css" type="text/css" />
 
     <title>M3 Amazing Landing page | Challenge 1</title>
@@ -106,15 +104,24 @@
     <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="" />
+          <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="" />
+          <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="" />
+          <img
+            src="./assets/images/gallery-3.jpg"
+            alt="notebook em cores vibrantes de tonalidades vermelhas laranja, vermelho, amarelo, visto de lateral"
+          />
         </figure>
       </div>
     </div>
@@ -202,18 +209,18 @@
     <footer class="footer flex-box center bg-clr-black">
       <ul class="footer-socials flex-box center">
         <li>
-          <a href="/">
-            <img src="./assets/images/instagram-logo.svg" alt="" />
+          <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 href="/">
-            <img src="./assets/images/facebook-logo.svg" alt="" />
+          <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 href="/">
-            <img src="./assets/images/youtube-logo.svg" alt="" />
+          <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>