diff --git a/index.html b/index.html index 300725a..3890234 100644 --- a/index.html +++ b/index.html @@ -23,43 +23,52 @@
-
Logo de uma loja -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ Logo de uma loja +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Logo de uma sacola de compras -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ Logo de uma sacola de compras +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Logo de uma moeda -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ Logo de uma moeda +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
- - - +
+
+ + +
Logo de dinheiro -

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.

+

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.

Logo de uma moeda -

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.

+

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.

Logo de um laptop -

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.

+

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.

-
Logo de um telefone celular -

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.

+
Logo de um telefone celular +

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.

+
+ +
+

Lorem ipsum dolor sit amet

+

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.

+
-
-

Lorem ipsum dolor sit amet

-

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.

-
+
+ +
@@ -69,7 +78,7 @@
-

Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00

+ \ No newline at end of file diff --git a/styles.css b/styles.css index 0882c9b..55442e2 100644 --- a/styles.css +++ b/styles.css @@ -68,4 +68,157 @@ header { .computadores { width: 315.5; height: 315; + margin-bottom: 178.5px; +} +/* -------------------------- */ + +.cards-1 { + display: flex; + gap: 21px +} + +.card-1-1, .card-1-2, .card-1-3 { + display: flex; + flex-direction: column; + width: 18.23%; + max-width: 350px; + height: 287px; + gap: 21px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + margin-bottom: 80px; +} + +.card-logo-1-1, .card-logo-1-2, .card-logo-1-3 { + display: block; + width: 103px; + height: 103px; +} + +.card-1-text { + font-size: 16px; + font-weight: 400; + width: 15,57%; + max-width: 299px; + height: 95px; + text-align: center; +} + +/* -------------------------- */ + +.laptops-background { + display: flex; + width: 100%; + height: 530px; + margin-bottom: -468px; + background-color: #E0E0E0; +} + +.laptops-img-div { + display: flex; + margin-left: 72px; + margin-right: 72px; + gap: 39px; +} + +.laptop-img { + width: 566px; + height: 530px; + margin-bottom: 129px; +} + +/* -------------------------- */ + +.cards-2 { + display: flex; + justify-content: center; + gap: 16px +} + +.card-2-1, .card-2-2, .card-2-3, .card-2-4 { + display: flex; + flex-direction: column; + width: 432px; + height: 332px; + gap: 21px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + margin-bottom: 108px; +} + +.card-logo-2-1, .card-logo-2-2, .card-logo-2-3, .card-logo-2-4{ + display: block; + width: 104px; + height: 104px; +} + +.card-2-text { + font-size: 16px; + font-weight: 400; + width: 367px; + height: 95px; + line-height: 24px; + text-align: center; +} + +/* -------------------------- */ + +.info-2 { + display: flex; + flex-direction: column; +} + +.titulo-2 { + font-weight: 600; + font-size: 32px; +} + +.titulo-2-texto { + font-weight: 400; + font-size: 16px; + width: 550px; + text-align: center; + margin-bottom: 50px; +} + +.end-image-div { + display: flex; +} + +.end-image { + margin-top: 50px; + width: 70.83%; + height: 276px; + margin-bottom: 116px; +} + +footer { + display: flex; + height: 128px; + width: 100%; + background: black; + flex-direction: column; +} + +.footer-imgs { + display: flex; + width: 104px; + height: 24px; + gap: 16px; + margin-bottom: 17px; +} + +.facebook-logo, .youtube-logo, .instagram-logo { + width: 25px; + height: 25px; + gap: 16px; +} + +.footer-text { + font-weight: 400; + width: fit-content; + height: 11px; + color: #BDBDBD; + size: 10px; + line-height: 12.1px; } \ No newline at end of file