diff --git a/assets/images/facebook-icon.svg b/assets/images/facebook-icon.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/images/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/instagram-icon.svg b/assets/images/instagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/images/instagram-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/youtube-icon.svg b/assets/images/youtube-icon.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/images/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/styles.css b/assets/styles.css index 3b61ee1..7a8f141 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -96,6 +96,7 @@ body { padding: 26px 26px 34px; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: 100%; } .top__card-image { @@ -211,6 +212,33 @@ body { line-height: 24px; } +/* ---------- FOOTER ----------- */ + +.footer { + display: flex; + flex-direction: column; + align-items: center; + background: #000000; + padding: 38px 0; +} + +.footer__icons { + display: flex; + list-style-type: none; + margin-bottom: 16px; +} + +.footer__icon { + margin: 0 8px; +} + +.footer__text { + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + color: #BDBDBD; +} + /* ---------- MEDIAS QUERIES ---------- */ @@ -278,8 +306,12 @@ body { flex-direction: column; align-items: center; padding: 26px 26px 34px; + width: 100%; + } + + .top__card-image { + max-width: 34%; } - /* ---------- BOTTOM CARDS ---------- */ .bottom__cards { @@ -305,7 +337,6 @@ body { grid-row: 1; } - /* ---------- BOTTOM INFOCARDS ---------- */ .bottom__infocards { display: grid; @@ -320,11 +351,14 @@ body { flex-direction: column; align-items: center; padding: 26px 26px 34px; + width: 100%; } + .bottom__infocard-image { + max-width: 34%; + } /* ---------- BOTTOM BANNER CONTAINER ---------- */ - .bottom__banner-container { display: flex; flex-direction: column-reverse; @@ -347,6 +381,16 @@ body { display: block; margin-bottom: 50px; } + + /* ---------- FOOTER ---------- */ + .page__footer { + padding-bottom: 26px; + } + + .footer__text { + max-width: 280px; + text-align: center; + } } diff --git a/index.html b/index.html index 9c0f42b..972d721 100644 --- a/index.html +++ b/index.html @@ -34,18 +34,18 @@
-
+
Imagem de um shop icon do primeiro card do topo -

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.
+ +
Imagem de um shopping bag do segundo card do topo -

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.
+ +
Imagem de uma coin icon do terceiro card do topo -

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.
+
@@ -97,6 +97,30 @@
+ \ No newline at end of file