index.html

@@ -167,16 +167,16 @@
                 <figure>
                     <img class="img-oculos" src="./assets/img/img-mobile/img-oculos.png" alt="Imagem de um óculos">
                 </figure>
-
+                <div class="information-text">
-                <h1>Lorem ipsum dolor sit amet</h1>
+                    <h1>Lorem ipsum dolor sit amet</h1>
-                <p>
+                    <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
-                    faucibus interdum. In eget tincidunt ipsum.
+                        faucibus interdum. In eget tincidunt ipsum.
-                    Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
+                        Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
-                    venenatis felis vitae sagittis venenatis.
+                        venenatis felis vitae sagittis venenatis.
-                    Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                        Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
-                </p>
+                    </p>
-
+                </div>
                 <figure>
                     <img class="img-information" src="./assets/img/img-embacada.png"
                         alt="Imagem de programação embaçada">
@@ -193,19 +193,19 @@
             <div class="img-footer">
                 <a>
                     <figure>
-                        <img src="./assets/img/img-instagram.png" alt="Instagram">
+                        <img class="font-instagram" src="./assets/img/img-instagram.png" alt="Instagram">
                     </figure>
                 </a>
 
                 <a class="img-facebook">
                     <figure>
-                        <img src="./assets/img/img-facebook.png" alt="Facebook">
+                        <img class="font-facebook" src="./assets/img/img-facebook.png" alt="Facebook">
                     </figure>
                 </a>
 
                 <a>
                     <figure>
-                        <img src="./assets/img/img-youtube.png" alt="Youtube">
+                        <img class="font-youtube" src="./assets/img/img-youtube.png" alt="Youtube">
                     </figure>
                 </a>
             </div>

style.css

@@ -35,7 +35,7 @@
     .info-title {
         font-size: 32px;
         line-height: 39px;
-        font-weight: 400px;
+        font-weight: 400;
         text-transform: uppercase;
         text-align: center;
     }
@@ -52,6 +52,7 @@
     .info-content {
         margin: 28px 0px 84px 0px;
         text-align: start;
+        line-height: 24px;
     }
 
     /* Imagem três monitores */
@@ -81,7 +82,9 @@
         margin-bottom: 27px;
         margin-top: 35px;
     }.info-shop figcaption {
+        font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         max-width: 299px;
         margin-bottom: 27px;
     }
@@ -97,7 +100,9 @@
         margin-bottom: 27px;
         margin-top: 35px;
     }.info-bag figcaption {
+        font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         max-width: 299px;
         margin-bottom: 27px;
     }
@@ -112,7 +117,9 @@
         margin-bottom: 27px;
         margin-top: 35px;
     }.info-coin figcaption {
+        font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         max-width: 299px;
         margin-bottom: 27px;
     }
@@ -165,6 +172,7 @@
     }.card-dollar figcaption {
         font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         margin: 0px 32px 65px 33px;
     }
 
@@ -177,6 +185,7 @@
     }.card-moeda figcaption {
         font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         margin: 0px 32px 65px 33px;
     }
 
@@ -189,6 +198,7 @@
     }.card-laptop figcaption {
         font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         margin: 0px 32px 65px 33px;
     }
 
@@ -200,6 +210,7 @@
     }.card-smartphone figcaption {
         font-size: 16px;
         line-height: 24px;
+        font-weight: 400;
         margin: 0px 32px 65px 33px;
     }
 
@@ -218,10 +229,10 @@
         text-align: center;
     }.information p {
         margin: 0 auto;
+        text-align: center;
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
-        text-align: center;
         width: 40.80%;
     }.img-information {
         width: 100%;
@@ -264,6 +275,7 @@
     }.info-footer p {
         text-align: center;
         color: #BDBDBD;
+        font-weight: 400;
     }
 
     .img-facebook {
@@ -377,12 +389,31 @@
         padding: 0px 25.35px 27.50px 26px;
     }
     
+    .info-laptop{
+        width: 100%;
+        margin-bottom: 112px;
+    }
+    .grid-laptop1{
+        grid-area: laptop1;
+    }
+    .grid-laptop2{
+        grid-area: laptop2;
+    }
+    .grid-laptop3{
+        grid-area: laptop3;
+    }
 
-
+    .info-container{
-
+       display: grid;
-
+       grid-template-areas:
-
+            "laptop2 laptop1"
-
+            "laptop3 laptop3"
+       ;
+       column-gap: 14px;
+       row-gap: 24px;
+       grid-template-columns: unset;
+       width: 88.90%;
+    }
 
     .container-card{
         padding: 0px 23px 0px 23px;
@@ -473,7 +504,6 @@
         width: 84.54%;
         margin: 0px 32px 87px;
         margin: 0 auto;
-        text-align: center;
         font-size: 16px;
         line-height: 24px;
         text-align: center;
@@ -485,38 +515,13 @@
         margin-bottom: 50px;
     }
     
-
-    .info-laptop{
-        width: 100%;
-    }
-    .grid-laptop1{
-        grid-area: laptop1;
-    }
-    .grid-laptop2{
-        grid-area: laptop2;
-    }
-    .grid-laptop3{
-        grid-area: laptop3;
-    }
-
-    .info-container{
-       display: grid;
-       grid-template-areas:
-            "laptop2 laptop1"
-            "laptop3 laptop3"
-       ;
-       column-gap: 14px;
-       row-gap: 24px;
-       grid-template-columns: unset;
-    }
-    
-
     .info-footer{
         padding: 32px 77px 32px;
     }
 }
 
 @media screen and (min-width: 2501px) {
+    /* Header */
     .container-header {
         background-color: #000000;
     }
@@ -525,15 +530,275 @@
         display: flex;
         padding: 29px 0px;
         justify-content: center;
+    }.logo-m3 img{
+        width: 452px;
     }
 
+    /* Banner */
+    .banner-mobile{display: none;}
     .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: 62px;
+        line-height: 78px;
+        font-weight: 400px;
+        text-transform: uppercase;
+        text-align: center;
+    }
+
+    .info-dolor h1 {
+        font-size: 96px;
+        line-height: 116px;
+        font-weight: 500;
+        text-transform: uppercase;
+        text-align: center;
+    }
+
+    .info-monitor-mobile{display: none;}
+    .info-content {
+        margin: 28px 0px 84px 0px;
+        text-align: start;
+        font-size: 32px;
+    }
+
+    /* Imagem três monitores */
+
+    .info-monitor {
         display: flex;
+        margin: 0 auto;
+        justify-content: center;
+        margin-bottom: 179px;
+    }
+
+    /* Card da primeira section */
+
+    .info-card {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 80px;
+    }
+
+    /* Card shopping */
+
+    .info-shop {
+       width: 18.25%;
+        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 {
+        font-size: 32px;
+        line-height: 48px;
+        margin-bottom: 27px;
+        text-align: center;
+    }
+
+    /* Card bag */
+
+    .info-bag {
+        width: 18.25%;
+        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 {
+        font-size: 32px;
+        line-height: 48px;
+        margin-bottom: 27px;
+        text-align: center;
+    }
+
+    /* Card coin */
+
+    .info-coin {
+        width: 18.25%;
+        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 {
+        font-size: 32px;
+        line-height: 48px;
+        margin-bottom: 27px;
+        text-align: center;
+    }
+
+    /* Imagens laptops */
+
+    .info-laptop {
+        background-color: #E0E0E0;
+        margin-bottom: 130px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+
+    .info-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        gap: 39px;
+        position: relative;
+        bottom: -32px;
+        width: 92.5%;
+    }
+
+    .grid-laptop1,
+    .grid-laptop2,
+    .grid-laptop3{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .img-laptop{
         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: 32px;
+        line-height: 48px;
+        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: 32px;
+        line-height: 48px;
+        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: 32px;
+        line-height: 48px;
+        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: 32px;
+        line-height: 48px;
+        margin: 0px 32px 65px 33px;
+    }
+
+    /* Informação Final */
+    .container-information {
+        width: 100%;
+    }
+    .information {
+        width: 70.85%;
+        margin: 0 auto;
+    }.information h1 {
+        text-align: center;
+        font-weight: 600;
+        font-size: 62px;
+        line-height: 78px;
+        text-align: center;
+    }.information p {
+        margin: 0 auto;
+        font-size: 32px;
+        line-height: 48px;
+        font-weight: 400;
+        text-align: center;
+        width: 40.80%;
+    }.img-information {
+        width: 100%;
+        margin-top: 50px;
+    }
+    @media screen and (min-width: 1025px) {
+        .img-oculos{
+            display: none;
+        }
+    }
+
+    /* Footer */
+
+    .container-footer{
+        background-color: #000000;
+        margin-top: 116px;
+    }.container-footer p {
+        text-align: center;
+        color: #BDBDBD;
+        line-height: 12px;
+        font-size: 20px;
+        text-transform: uppercase;
+    }
+
+    .info-footer{
+        padding: 38px 0px;
+    }
+    
+    .img-footer {
+        display: flex;
+        margin: 0 auto;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 17px;
+        width: 20.60%;
+    }
+
+    .info-footer a {
+        text-decoration: none;
+        color: #FFFFFF;
+    }.info-footer p {
+        text-align: center;
+        color: #BDBDBD;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 400;
+    }
+
+    .img-facebook {
+        margin: 0px 42px;
+    }.font-facebook {
+        width: 26px;
+    }.font-youtube{
+        width: 39px;
+    }.font-instagram {
+        width: 39px;
+    }
+
 }