Merge pull request 'feat(main): adicionei responsividade deskot na primeira section do main' (#6) from feature/main-sections into main

Reviewed-on: #6

index.html

@@ -25,32 +25,29 @@
 
     <main>
 
-        <div>
+        <figure>
-            <figure>
+            <img class="banner" src="./assets/img/banner1.png" alt="banner" />
-                <img class="banner" src="./assets/img/banner1.png" alt="banner" />
+        </figure>
-            </figure>
-        </div>
 
         <section>
 
-            <div>
+            <div class="info-dolor">
-                <h1>Lorem IPSUM</h1>
+                <p class="info-title">Lorem IPSUM</p>
                 <h1>Dolor Sit Amet</h1>
-                <p>
+                <p class="info-content">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-                    interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
+                    Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
-                    dui.
                 </p>
-            </div>
 
-            <div>
+                <figure class="info-monitor">
-                <figure>
                     <img src="./assets/img/img-3monitores.png" alt="" />
                 </figure>
+
             </div>
 
-            <div>
+            <div class="info-card">
-                <div>
+
+                <div class="info-shop">
                     <figure>
                         <img src="./assets/img/img-shop.png" alt="Imagem de shopping" />
                         <figcaption>
@@ -60,7 +57,7 @@
                     </figure>
                 </div>
 
-                <div>
+                <div class="info-bag">
                     <figure>
                         <img src="./assets/img/img-bag.png" alt="Imagem de mochila" />
                         <figcaption>
@@ -70,7 +67,7 @@
                     </figure>
                 </div>
 
-                <div>
+                <div class="info-coin">
                     <figure>
                         <img src="./assets/img/img-coin.png" alt="Imagem de dinheiro" />
                         <figcaption>
@@ -162,8 +159,8 @@
                 </p>
             </div>
 
-            <article >
+            <article>
-                <figure >
+                <figure>
                     <img class="img-embacada" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
                 </figure>
             </article>

style.css

@@ -4,58 +4,149 @@
     font-family: "Inter", sans-serif;
 }
 
-/* Header */
-
-
 @media screen and (max-width: 2500px) {
 
-    .container-header{
+    /* Header */
+    .container-header {
         background-color: #000000;
     }
+
     .logo-m3 {
         display: flex;
         padding: 29px 0px;
         justify-content: center;
     }
+
+    /* Banner */
     .banner {
         display: flex;
         width: 100%;
+        margin-bottom: 76px;
     }
-    .img-embacada {
+
+    /*Fisrt section */
+
+    .info-dolor {
+        max-width: 40.26%;
+        margin: 0 auto;
+    }.info-title {
+        font-size: 32px;
+        line-height: 39px;
+        font-weight: 400px;
+        text-transform: uppercase;
+        text-align: center;
+    }.info-dolor h1 {
+        font-size: 48px;
+        line-height: 58px;
+        font-weight: 500;
+        text-transform: uppercase;
+        text-align: center;
+    }.info-content {
+        margin: 28px 0px 84px 0px;
+        text-align: start;
+    }
+
+    /* Imagem três monitores */
+
+    .info-monitor{
         display: flex;
+        max-width: 16,35%;
+        justify-content: center;
+        margin-bottom: 179px;
+    }
+
+    /* Card da primeira section */
+
+    .info-card {
+        max-width:56,90%;
+        display: flex;
+        justify-content: center;
+    }
+    .info-shop{
+        max-width: 350px;
+        text-align: center;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    }.info-shop img{
+        margin-bottom: 27px;
+        margin-top: 35px;
+    }.info-shop figcaption {
+        line-height: 24px;
+        max-width: 299px;
+        margin-bottom: 27px;
+    }
+    
+    .info-bag{
+        max-width: 350px;
+        text-align: center;
+        margin: 0px 21px;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    }.info-bag img {
+        margin-bottom: 27px;
+        margin-top: 35px;
+    }.info-bag figcaption {
+        line-height: 24px;
+        max-width: 299px;
+        margin-bottom: 27px;
+    }
+    
+    .info-coin{
+        max-width: 350px;
+        text-align: center;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    }.info-coin img {
+        margin-bottom: 27px;
+        margin-top: 35px;
+    }.info-coin figcaption {
+        line-height: 24px;
+        max-width: 299px;
+        margin-bottom: 27px;
+    }
+
+    .img-embacada {
         width: 100%;
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0 auto;
     }
 }
 
 @media screen and (max-width: 1024px) {
-    .container-header{
+
+    /* HEADER */
+    .container-header {
         background-color: #000000;
     }
+
     .logo-m3 {
         display: flex;
         padding: 29px 0px;
         justify-content: center;
     }
 
+    /* BANNER */
+
     .banner {
         display: flex;
         width: 100%;
     }
+
     .img-embacada {
         display: flex;
         width: 100%;
     }
+
     .img-laptop {
         display: flex;
         width: 100%;
     }
-    
+
 }
 
 @media screen and (min-width: 2501px) {
-    .container-header{
+    .container-header {
         background-color: #000000;
     }
+
     .logo-m3 {
         display: flex;
         padding: 29px 0px;
@@ -66,8 +157,9 @@
         display: flex;
         width: 100%;
     }
+
     .img-embacada {
         display: flex;
         width: 100%;
     }
-}
+}