From 5cfbb00fc75e68c0b13126a82a5bf20ad0d4311f Mon Sep 17 00:00:00 2001
From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com>
Date: Sun, 9 Oct 2022 19:17:30 -0300
Subject: [PATCH] feat(main): adicionei estilos nas sections para
 responsividade desktop

---
 index.html |  94 ++++++++++++++++++---------------
 style.css  | 151 +++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 188 insertions(+), 57 deletions(-)

diff --git a/index.html b/index.html
index 4d05877..b872a15 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,8 @@
                 <p class="info-title">Lorem IPSUM</p>
                 <h1>Dolor Sit Amet</h1>
                 <p class="info-content">
-                    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.
                     Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
                 </p>
 
@@ -80,28 +81,38 @@
 
         </section>
 
-        <section>
+        <section class="info-laptop">
 
-            <figure>
-                <img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
-            </figure>
+            <div class="info-container">
 
-            <figure>
-                <img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
-            </figure>
+                <div class="div-laptop1">
+                    <figure>
+                        <img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
+                    </figure>
+                </div>
 
-            <figure>
-                <img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
-            </figure>
+                <div class="div-laptop2">
+                    <figure>
+                        <img class="img-laptop2" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
+                    </figure>
+                </div>
+
+                <div class="div-laptop3">
+                    <figure>
+                        <img class="img-laptop3" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
+                    </figure>
+                </div>
+
+            </div>
 
 
         </section>
 
         <section>
 
-            <div>
+            <div class="card-information">
 
-                <div>
+                <div class="card-dollar">
                     <figure>
                         <img src="./assets/img/img-dollar.png" alt="Imagem de dinheiro em nota" />
                         <figcaption>
@@ -112,9 +123,9 @@
                     </figure>
                 </div>
 
-                <div>
+                <div class="card-moeda">
                     <figure>
-                        <img" src="./assets/img/img-moeda.png" alt="Imagem de dinheiro em moeda" />
+                        <img src="./assets/img/img-moeda.png" alt="Imagem de dinheiro em moeda" />
                         <figcaption>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
                             interdum. Lorem ipsum dolor sit amet,
@@ -123,7 +134,7 @@
                     </figure>
                 </div>
 
-                <div>
+                <div class="card-laptop">
                     <figure>
                         <img src="./assets/img/img-laptop.png" alt="Imagem de laptop" />
                         <figcaption>
@@ -134,7 +145,7 @@
                     </figure>
                 </div>
 
-                <div>
+                <div class="card-smartphone">
                     <figure>
                         <img src="./assets/img/img-smarthphone.png" alt="Imagem de celular" />
                         <figcaption>
@@ -147,10 +158,14 @@
 
             </div>
 
-            <div>
-                <h2>Lorem ipsum dolor sit amet</h2>
+
+
+
+            <div class="information">
+                <h1>Lorem ipsum dolor sit amet</h1>
                 <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus
+                    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.
@@ -159,9 +174,9 @@
                 </p>
             </div>
 
-            <article>
+            <article class="img-information">
                 <figure>
-                    <img class="img-embacada" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
+                    <img src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
                 </figure>
             </article>
 
@@ -171,28 +186,23 @@
 
     <footer>
 
-        <div>
+        <a>
             <figure>
-
-                <a>
-                    <figure>
-                        <img src="./assets/img/img-instagram.png" alt="Instagram">
-                    </figure>
-                </a>
-
-                <a>
-                    <figure>
-                        <img src="./assets/img/img-facebook.png" alt="Facebook">
-                    </figure>
-                </a>
-
-                <a>
-                    <figure>
-                        <img src="./assets/img/img-youtube.png" alt="Youtube">
-                    </figure>
-                </a>
+                <img src="./assets/img/img-instagram.png" alt="Instagram">
             </figure>
-        </div>
+        </a>
+
+        <a>
+            <figure>
+                <img src="./assets/img/img-facebook.png" alt="Facebook">
+            </figure>
+        </a>
+
+        <a>
+            <figure>
+                <img src="./assets/img/img-youtube.png" alt="Youtube">
+            </figure>
+        </a>
 
         <div>
             <p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
diff --git a/style.css b/style.css
index 55281c3..c7a7ae1 100644
--- a/style.css
+++ b/style.css
@@ -29,28 +29,34 @@
     .info-dolor {
         max-width: 40.26%;
         margin: 0 auto;
-    }.info-title {
+    }
+
+    .info-title {
         font-size: 32px;
         line-height: 39px;
         font-weight: 400px;
         text-transform: uppercase;
         text-align: center;
-    }.info-dolor h1 {
+    }
+
+    .info-dolor h1 {
         font-size: 48px;
         line-height: 58px;
         font-weight: 500;
         text-transform: uppercase;
         text-align: center;
-    }.info-content {
+    }
+
+    .info-content {
         margin: 28px 0px 84px 0px;
         text-align: start;
     }
 
     /* Imagem três monitores */
 
-    .info-monitor{
+    .info-monitor {
         display: flex;
-        max-width: 16,35%;
+        max-width: 16, 35%;
         justify-content: center;
         margin-bottom: 179px;
     }
@@ -58,15 +64,18 @@
     /* Card da primeira section */
 
     .info-card {
-        max-width:56,90%;
         display: flex;
         justify-content: center;
+        margin-bottom: 80px;
     }
-    .info-shop{
+
+    /* Card shopping */
+
+    .info-shop {
         max-width: 350px;
         text-align: center;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-    }.info-shop img{
+    }.info-shop img {
         margin-bottom: 27px;
         margin-top: 35px;
     }.info-shop figcaption {
@@ -74,8 +83,10 @@
         max-width: 299px;
         margin-bottom: 27px;
     }
-    
-    .info-bag{
+
+    /* Card bag */
+
+    .info-bag {
         max-width: 350px;
         text-align: center;
         margin: 0px 21px;
@@ -88,8 +99,10 @@
         max-width: 299px;
         margin-bottom: 27px;
     }
-    
-    .info-coin{
+
+    /* Card coin */
+
+    .info-coin {
         max-width: 350px;
         text-align: center;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
@@ -102,12 +115,120 @@
         margin-bottom: 27px;
     }
 
-    .img-embacada {
-        width: 100%;
+    /* Imagens laptops */
+
+    .info-laptop {
+        background-color: #E0E0E0;
+        max-height: 530px;
+
+    }
+
+    .info-container {
+        display: flex;
+        justify-content: center;
+        margin: 0px 72px;
+        padding-top: 62px;
+    }
+
+    .div-laptop2 {
+        margin-left: 39px;
+        margin-right: 39px;
+
+    }
+
+    .img-laptop1 {
+        max-width: 100%;
+    }
+
+    .img-laptop2 {
+        max-width: 100%;
+    }
+
+    .img-laptop3 {
+        max-width: 100%;
+    }
+
+    /* Último card */
+
+    .card-information {
+        display: flex;
+        justify-content: center;
+        margin: 129px 72px 108px;
+    }
+
+    .card-dollar {
+        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+        margin-right: 16px;
+        text-align: center;
+    }.card-dollar img {
+        margin: 35px 0px 15px;
+    }.card-dollar figcaption {
         font-size: 16px;
         line-height: 24px;
-        margin: 0 auto;
+        margin: 0px 32px 65px 33px;
     }
+
+    .card-moeda {
+        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+        margin-right: 16px;
+        text-align: center;
+    }.card-moeda img {
+        margin: 35px 0px 15px;
+    }.card-moeda figcaption {
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0px 32px 65px 33px;
+    }
+
+    .card-laptop {
+        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+        margin-right: 16px;
+        text-align: center;
+    }.card-laptop img {
+        margin: 35px 0px 15px;
+    }.card-laptop figcaption {
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0px 32px 65px 33px;
+    }
+
+    .card-smartphone {
+        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+        text-align: center;
+    }.card-smartphone img {
+        margin: 35px 0px 15px;
+    }.card-smartphone figcaption {
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0px 32px 65px 33px;
+    }
+
+    /* Informação Final */
+
+    .information {
+        max-width: 28.60%;
+        margin: 0 auto;
+        margin-bottom: 50px;
+    }.information h1 {
+        text-align: center;
+        font-weight: 600;
+        font-size: 32px;
+        line-height: 39px;
+    }.information p {
+        font-size: 16px;
+        line-height: 24px;
+        text-align: center;
+    }
+
+
+    .img-information {
+        max-width: 70.85%;
+        margin: 0 auto;
+    }.img-information img {
+        width: 100%;
+    }
+
+
 }
 
 @media screen and (max-width: 1024px) {
-- 
2.34.1