Adaptacao: telas mobile e desktop

css/index.css

@@ -213,3 +213,44 @@ body{
     }
 }
 
+@media screen and (min-width: 1700px) {
+    .top-infocard-subtitulo{
+        font-size: 60px;
+    }
+    .top-infocard-titulo{
+        font-size: 70px;
+    }
+    .top-infocard-descriçao,
+    .top-card-descriçao,
+    .bottom-card-descriçao,
+    .bottom-infocard-descriçao{
+        font-size: 30px;
+    }
+    .top-card{
+        width: 500px;
+        height: 450px;
+    }
+    .top-infocard{
+        padding: 110px 0;
+    }
+    .bottom-card{
+        width: 600px;
+        height: 450px;
+    }
+    .bottom-cards-wrapper{
+        gap: 200px;
+        row-gap: 40px;
+        margin-right: 167px;
+    }
+    .banner-bottom-desktop{
+        max-width: 750px;
+        margin: 37px 0 0px;
+    }
+    .bottom-infocard-titulo{
+        font-size: 38px;
+    }
+    .bottom-infocard-text{
+        padding: unset;
+    }
+}
+

index.html

@@ -30,7 +30,9 @@
         </div>
 
         <section class="top-infocard">
+
             <div class="top-infocard-text">
+
                 <h2 class="top-infocard-subtitulo">Lorem ipsum</h2>
                 <h1 class="top-infocard-titulo">dolor sit amet</h1>
     
@@ -41,24 +43,42 @@
 
             </div>
 
-            <img src="./Assets/Images/infocard-image.svg" alt="banner top infocard"/>
+            <img class="top-infocard-imagem" src="./Assets/Images/infocard-image.svg" alt="banner top infocard"/>
+
         </section>
 
         <section class="top-cards">
-            <div class="top-card">
+
+            <div class="top-card"> 
+
                 <img src="./Assets/Images/card-shop.svg" alt="icone card shop"/>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
+
+                <p class="top-card-descriçao">
+                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+
             </div>
 
             <div class="top-card">
+
                 <img src="./Assets/Images/card-shopping-bag.svg" alt="icone card shopping bag"/>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
+
+                <p class="top-card-descriçao">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+
             </div>
 
             <div class="top-card">
+
                 <img src="./Assets/Images/card-coin.svg" alt="icone card coin"/>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
+
+                <p class="top-card-descriçao">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+
             </div>
+
         </section>
 
         <div class="banner-midle-contener">
@@ -67,49 +87,66 @@
         </div>
 
         <section class="bottom-cards">
+
             <div class="bottom-cards-wrapper">
+
                 <div class="bottom-card">
+
                     <img src="./Assets/Images/card-money.svg" alt="icone money"/>
-                    <p>
+
+                    <p class="bottom-card-descriçao">
                         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="bottom-card">
+
                     <img src="./Assets/Images/card-laptop.svg" alt="icone laptop"/>
-                    <p> 
+
+                    <p class="bottom-card-descriçao"> 
                         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="bottom-card">
+
                     <img src="./Assets/Images/card-coin.svg" alt="icone coin"/>
-                    <p> 
+
+                    <p class="bottom-card-descriçao"> 
                         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="bottom-card">
+
                     <img src="./Assets/Images/card-cellphone.svg" alt="icone cellphone"/>
-                    <p> 
+
+                    <p class="bottom-card-descriçao"> 
                         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>
         </section>
         
         <section class="bottom-infocard">
+
             <img class="banner-bottom banner-bottom-desktop" src="./Assets/Images/Banner-bottom-desktop.png" alt="banner infocard bottom desktop"/>
             <img class="banner-bottom banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="banner infocard bottom mobile"/>
 
             <div class="bottom-infocard-text">
-                <h2>Lorem ipsum dolor sit amet</h2>
+                <h2 class="bottom-infocard-titulo">
+                    Lorem ipsum dolor sit amet
+                </h2>
 
-                <p> 
+                <p class="bottom-infocard-descriçao"> 
                     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. Curabitur venenatis felis vitae sagittis venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
                 </p>
@@ -119,6 +156,7 @@
     </main>
 
     <footer class="page-footer">
+
         <div class="footer-icon"> 
             <img src="./Assets/Images/logo-instagram.svg" alt="logo instagram"/>
             <img src="./Assets/Images/facebook-logo.svg" alt="logo facebook"/>
@@ -128,6 +166,7 @@
         <p class="footer-text">
             Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
         </p>
+
     </footer>
 </body>
 </html>