Site versao desktop completo

assets/styles/main.css

@@ -28,7 +28,6 @@ body{
 .top-infocard{
     display: flex;
     align-items: center;
-    justify-content: center;
     flex-direction: column;
     max-width: 100%;
     padding-top: 4%;
@@ -96,6 +95,7 @@ body{
     background-color: #E0E0E0;
     display: flex;
     justify-content: center;
+    margin-bottom: 10.02%
 }
 
 .middle-banners{
@@ -111,3 +111,104 @@ body{
     width: 29.28%;
 }
 
+.botton-cards{
+    display: flex;
+    justify-content: center;
+    width: 92.4%;
+    gap: 1%;
+}
+
+.botton-card{
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.botton-card-img{
+    width: 24%;
+    margin-top: 7.4%;
+    align-self: center;
+}
+
+.botton-card-description{
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 3.3% 7.63% 15%;
+}
+
+.botton-card-img-cell{
+    margin-top: 7.4%;
+    width: 19.5%;
+    align-self: center;
+}
+
+.botton-crd{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 5.68%;
+}
+
+
+.bottom-infocard{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 6.1%;
+}
+
+.bottom-infocard-img{
+    width: 71.5%;
+}
+
+.bottom-infocard-title{
+    font-size: 32px;
+    line-height: 38px;
+    text-align: center;
+}
+
+.bottom-infocard-text{
+    max-width: 29%;
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    padding-bottom: 2.63%;
+}
+
+.bottom-infocard-description{
+    font-size: 16px;
+    line-height: 130%;
+    height: 94%;
+}
+
+.footer{
+    background-color: #000;
+    display: flex;
+    flex-direction: column;
+    padding: 2.23% 0;
+}
+
+.texto-footer{
+    color: #BDBDBD;
+    align-self: center;
+    font-size: 10px;
+}
+
+.logos{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    list-style-type: none;
+    margin-bottom: 0.4%;
+}
+
+.lista-logo{
+    margin: 0 0.5%;
+    display: flex;
+}
+
+.imagens-logo{
+    width: 1.25vw;
+}

index.html

@@ -63,8 +63,56 @@
             </figure>
         </section>
 
+        <section class="botton-crd">
+            <div class="botton-cards">
+                <div class="botton-card">
+                    <img class="botton-card-img" src="./assets/images/money.png" alt="Imagem 1 do card de baixo">
+                    <p class="botton-card-description">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="botton-card">
+                    <img class="botton-card-img" src="./assets/images/coin 2.png" alt="Imagem 2 do card de baixo">
+                    <p class="botton-card-description">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="botton-card">
+                    <img class="botton-card-img" src="./assets/images//laptop 1.png" alt="Imagem 3 do card de baixo">
+                    <p class="botton-card-description">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="botton-card">
+                    <img class="botton-card-img-cell" src="./assets/images/Group.png" alt="Imagem 4 do card de baixo">
+                    <p class="botton-card-description">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">
+                    <div class="bottom-infocard-text">
+                        <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
+                        <p class="bottom-infocard-description">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>
+                    </div>
+                <img class="bottom-infocard-img" src="./assets/images/oculosdesktop.png" alt="Banner do inforcard de baixo">
+        </section>
     </main>
+    <footer class="footer">
+        <ul class="logos">
+            <li class="lista-logo">
+                <a class="logo" href="">
+                <img class="imagens-logo" src="./assets/images/instagram.png" alt="logo instagram">
+                </a>
+            </li>
+            <li class="lista-logo">
+                <a class="logo" href="">
+                <img class="imagens-logo" src="./assets/images/facebook.png" alt="logo facebook">
+                </a>
+            </li>
+            <li class="lista-logo">
+                <a class="logo" href="">
+                <img class="imagens-logo" src="./assets/images/youtube.png" alt="logo youtube">
+                </a>
+            </li>
+        </ul>
+        <p class="texto-footer">Copyright © 2020 - Loja  Comércio Eletrônico  CNPJ: 000.000.000/0001-00</p>
+    </footer>
 </body>
 </html>