From 9c0f2d36cdd1f10740bd07a86418291647cd497c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Mon, 31 Oct 2022 17:08:48 -0300
Subject: [PATCH] refactor: ajusta tags e css

---
 assets/styles/main.css |  99 +++++++++++++++++---------------
 index.html             | 124 +++++++++++++++++++++++------------------
 2 files changed, 124 insertions(+), 99 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index bc14502..d748c14 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -12,12 +12,15 @@ body{
 .page-header{
     display: flex;
     justify-content: center;
-    padding: 28px 0;
+    padding: 29px 0;
     background: #000;
 }
 
 .logo-header{
-    display: block;
+    display: contents;
+}
+
+.m3{
     width: 12%;
 }
 
@@ -95,7 +98,7 @@ body{
 
 .card-icon{
     width: 29%;
-    margin-bottom: 30px;
+    margin-bottom: 27px;
 }
 
 .notebooks{
@@ -104,52 +107,47 @@ body{
     margin-top: 80px;
     display: flex;
     justify-content: center;
-    gap: 29px;
+    gap: 39px;
+}
+
+.figures{
+    display: contents;
 }
 
 .notebook1, .notebook2, .notebook3{
-    width: 29.50%;
+    width: 29.47%;
     bottom: -62px;
     position: relative;
 }
 
-.notebook1{
-    order: 1;
-}
-
-.notebook2{
-    order: 2;
-}
-
-.notebook3{
-    order: 3;
-}
-
 .cards-bottom{
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 190px;
+    margin-top: 191px;
     gap: 16px;
 }
 
 .card-bottom{
-    width: 22.35%;
+    width: 22.50%;
     text-align: center;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
-    padding: 40px 26px 65px 32px;
+    padding: 35px 32px 65px 33px;
 }
 
 .card-bottom-text{
     font-size: 16px;
     line-height: 24px;
-    width: 95%;
-    display: inline-block;
 }
 
-.card-bottom-icon{
+.card-bottom-icon1, .card-bottom-icon3, .card-bottom-icon4{
     width: 29%;
-    margin-bottom: 17px;
+    margin-bottom: 15px;
+}
+
+.card-bottom-icon2{
+    width: 29%;
+    margin-bottom: 14px;
 }
 
 .smartphone{
@@ -207,7 +205,6 @@ body{
 }
 
 .footer-content{
-    width: 20.67%;
     margin-bottom: 38px;
     margin-top: 38px;
 }
@@ -215,7 +212,7 @@ body{
 .social-medias{
     display: flex;
     flex-direction: row;
-    gap: 18px;
+    gap: 21px;
     justify-content: center;
 }
 
@@ -224,7 +221,7 @@ body{
 }
 
 .icon-social-media{
-    width: 7%;
+    width: 6%;
 }
 
 .footer-text{
@@ -285,8 +282,8 @@ body{
 
 /*MOBILE*/
 @media screen and (max-width: 1024px) {
-    .logo-header{
-        width: 55%;
+    .m3{
+        width: 54,62%;
     }
 
     .banner-main-desktop{
@@ -333,28 +330,30 @@ body{
     }
 
     .notebooks{
-        display: block;
-        text-align: center;
-        row-gap: 14px;
+        display: grid;
+        grid-template-areas: "notebook2 notebook1"
+                             "notebook3 notebook3";
+        grid-template-columns: 42.75% 42.75%;
+        row-gap: 24px;
+        column-gap: 14px;
     }
     
     .notebook1{
-        margin-top: 25px;
-        width: 43.52%;
-        bottom: -7px;
-        margin-left: 7px;
+        grid-area: notebook1;
+        width: 100%;
+        bottom: -32px;
     }
 
     .notebook2{
-        margin-top: 25px;
-        width: 43.52%;
-        bottom: -7px;
-        margin-right: 7px;
+        grid-area: notebook2;
+        width: 100%;
+        bottom: -32px;
     }
 
     .notebook3{
-        width: 90.80%;
-        bottom: -32px;  
+        grid-area: notebook3;
+        width: 100%;
+        bottom: -32px;
     }
 
     .cards-bottom{
@@ -364,6 +363,11 @@ body{
 
     .card-bottom{
         width: 88.88%;
+        padding-right: 33px;
+    }
+
+    .card-bottom-icon1{
+        margin-bottom: 10px;
     }
 
     .card-bottom-text{
@@ -390,7 +394,6 @@ body{
     .article-title{
         font-size: 24px;
         line-height: 29px;
-        margin-bottom: 9px;
     }
 
     .article-description{
@@ -399,10 +402,13 @@ body{
     }
 
     .footer-content{
-        width: 63%;
         margin-bottom: 32px;
         margin-top: 32px;
     }
+
+    .icon-social-media{
+        width: 9.19%;
+    }
     
 }
 
@@ -415,4 +421,9 @@ body{
     .article-figure-mobile{
         display: none;
     }
+
+    .break{
+        display: none;
+    }
+
 }
diff --git a/index.html b/index.html
index 66b1302..681783c 100644
--- a/index.html
+++ b/index.html
@@ -18,16 +18,18 @@
     </head>
     <body>
         <header class="page-header">            
-            <img class="logo-header" src="/assets/images/logo-m3.svg" alt="Logo M3 Academy" />            
+            <a class="logo-header" href="/">
+                <img class="m3" src="/assets/images/logo-m3.svg" alt="Logo M3 Academy" /> 
+            </a>          
         </header>
 
         <main>
 
-            <div>
+            <picture>
                 <img class="main-banner banner-main-desktop" src="/assets/images/banner-top-desktop.png" alt="Banner principal desktop" />
 
                 <img class="main-banner banner-main-mobile" src="/assets/images/banner-top-mobile.png" alt="Banner principal mobile" />
-            </div>
+            </picture>
 
             <section class="top-infocard">
                 <div class="top-infocard-text">
@@ -45,65 +47,75 @@
                 </div>
             </section>
 
-            <div class="network">
+            <figure class="network">
                 <img class="network-image" src="assets/images/network.svg" alt="Ilustração de computadores" />
-            </div>
-
-            <div class="cards">
-                <div class="card">
-                    <img class="card-icon" src="/assets/images/shop.svg" alt="Icone de loja" />
-
-                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
-                </div>
-                <div class="card">
-                    <img class="card-icon" src="/assets/images/bag.svg" alt="Icone de sacola de compras" />
-
-                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
-                </div>
-                <div class="card">
-                    <img class="card-icon" src="/assets/images/coin.svg" alt="Icone de pagamento" />
-
-                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
-                </div>
-            </div>
-
-            <figure class="notebooks">
-                <img class="notebook2" src="/assets/images/notebook2.png" alt="Notebook 2" />
-
-                <img class="notebook1" src="/assets/images/notebook1.png" alt="Notebook 1" />                
-                                
-                <img class="notebook3" src="/assets/images/notebook3.png" alt="Notebook 3" />
             </figure>
 
-            <div class="cards-bottom">
-                <div class="card-bottom">
-                    <img class="card-bottom-icon" src="/assets/images/money.svg" alt="Icone de dinheiro" />
+            <div class="cards">
 
-                    <p class="card-bottom-text">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="card-bottom">
-                    <img class="card-bottom-icon" src="/assets/images/coin2.svg" alt="Icone de pagamento" />
+                <figure class="card">
+                    <img class="card-icon" src="/assets/images/shop.svg" alt="Icone de loja" />
 
-                    <p class="card-bottom-text">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="card-bottom">
-                    <img class="card-bottom-icon" src="/assets/images/laptop.svg" alt="Icone de laptop" />
+                    <figcaption class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+                </figure>
 
-                    <p class="card-bottom-text">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="card-bottom">
-                    <img class="card-bottom-icon smartphone" src="/assets/images/smartphone.svg" alt="Icone de smartphone" />
+                <figure class="card">
+                    <img class="card-icon" src="/assets/images/bag.svg" alt="Icone de sacola de compras" />
 
-                    <p class="card-bottom-text">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>
+                    <figcaption class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+                </figure>
+
+                <figure class="card">
+                    <img class="card-icon" src="/assets/images/coin.svg" alt="Icone de pagamento" />
+
+                    <figcaption class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+                </figure>
+                
             </div>
 
-            <article class="article">
+            <div class="notebooks">
+                <figure class="figures">
+                    <img class="notebook1" src="/assets/images/notebook1.png" alt="Notebook 1" />    
+                </figure>
+
+                <figure class="figures">
+                    <img class="notebook2" src="/assets/images/notebook2.png" alt="Notebook 2" />
+                </figure>
+                                
+                <figure class="figures">
+                    <img class="notebook3" src="/assets/images/notebook3.png" alt="Notebook 3" />
+                </figure>       
+            </div>
+
+            <div class="cards-bottom">
+                <figure class="card-bottom">
+                    <img class="card-bottom-icon1" src="/assets/images/money.svg" alt="Icone de dinheiro" />
+
+                    <figcaption class="card-bottom-text">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-bottom">
+                    <img class="card-bottom-icon2" src="/assets/images/coin2.svg" alt="Icone de pagamento" />
+
+                    <figcaption class="card-bottom-text">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-bottom">
+                    <img class="card-bottom-icon3" src="/assets/images/laptop.svg" alt="Icone de laptop" />
+
+                    <figcaption class="card-bottom-text">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-bottom">
+                    <img class="card-bottom-icon4 smartphone" src="/assets/images/smartphone.svg" alt="Icone de smartphone" />
+
+                    <figcaption class="card-bottom-text">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>
+
+            <div class="article">
                 <figure class="article-figure-mobile">
                     <img class="article-banner-mobile" src="/assets/images/banner-article-mobile.png" alt="Banner de computadores" />
                 </figure>
 
-                <div class="article-text">
+                <section class="article-text">
                     <h3 class="article-title">
                         Lorem ipsum dolor sit amet
                     </h3>
@@ -113,31 +125,33 @@
                         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>
+                </section>
 
                 <figure class="article-figure">
                     <img class="article-banner-desktop" src="/assets/images/banner-article-desktop.png" alt="Banner de computadores" />
                 </figure>
-            </article>
+            </div>
 
         </main>
 
         <footer class="footer">
             <div class="footer-content">
                 <div class="social-medias">
-                    <a class="social-media" href="#">
+                    <a class="social-media" href="/">
                         <img class="icon-social-media" src="/assets/images/instagram.svg" alt="Icone do Instagram" />
                     </a>
-                    <a class="social-media" href="#">
+                    <a class="social-media" href="/">
                         <img class="icon-social-media" src="/assets/images/facebook.svg" alt="Icone do Facebook" />
                     </a>
-                    <a class="social-media" href="#">
+                    <a class="social-media" href="/">
                         <img class="icon-social-media" src="/assets/images/youtube.svg" alt="Icone do Youtube" />
                     </a>
                 </div>
 
                 <div class="footer-text">
-                    <p class="footer-copyright">Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
+                    <p class="footer-copyright">
+                        Copyright © 2020 - Loja  Comércio Eletrônico<br class="break"> CNPJ: 000.000.000/0001-00
+                    </p>
                 </div>
             </div>
         </footer>