diff --git a/Assets/Images/Banner-bottom.png b/Assets/Images/Banner-bottom-desktop.png similarity index 100% rename from Assets/Images/Banner-bottom.png rename to Assets/Images/Banner-bottom-desktop.png diff --git a/Assets/Images/Banner-bottom-mobile.png b/Assets/Images/Banner-bottom-mobile.png new file mode 100644 index 0000000..dcf5c12 Binary files /dev/null and b/Assets/Images/Banner-bottom-mobile.png differ diff --git a/Assets/Images/facebook-logo.svg b/Assets/Images/facebook-logo.svg new file mode 100644 index 0000000..411b9bc --- /dev/null +++ b/Assets/Images/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/Assets/Images/logo-instagram.svg b/Assets/Images/logo-instagram.svg new file mode 100644 index 0000000..517f9e1 --- /dev/null +++ b/Assets/Images/logo-instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Assets/Images/youtube-logo.svg b/Assets/Images/youtube-logo.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/Assets/Images/youtube-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/css/index.css b/css/index.css index bb913dd..7c41ff9 100644 --- a/css/index.css +++ b/css/index.css @@ -30,7 +30,8 @@ body{ } .Banner-principal-mobile, -.banner-midle-mobile{ +.banner-midle-mobile, +.banner-bottom-mobile{ display: none; } @@ -122,22 +123,52 @@ body{ display: flex; padding: 142px 0 179px; gap: 40px; + width: 100%; align-items: center; justify-content: center; } .bottom-infocard-text{ width: 29%; + padding: 0 26px; +} + +.banner-bottom{ + width: 100%; + max-width: 596px; + margin: 0 0 50px; +} + +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + padding: 38px; + background-color: #000; +} + +.footer-icon{ + display: flex; + list-style: none; + margin-bottom: 16px; +} + +.footer-text{ + text-transform: uppercase; + font-size: 10px; + color: #BDBDBD; } @media screen and (max-width: 414px){ .Banner-principal-desktop, - .banner-midle-desktop{ + .banner-midle-desktop, + .banner-bottom-desktop{ display: none; } .Banner-principal-mobile, - .banner-midle-mobile{ + .banner-midle-mobile, + .banner-bottom-mobile{ display: unset; } } @@ -170,9 +201,15 @@ body{ align-items: center; padding: 38px 0; } - .bottom-cards{ - grid-template-columns: min(365px, 90vw); - + .bottom-cards-wrapper{ + grid-template-columns: min(400px, 90vw); + } + .bottom-infocard{ + flex-direction: column; + width: 100%; + } + .bottom-infocard-text{ + width: 100%; } } diff --git a/index.html b/index.html index 3eaba61..aef1186 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@
- icone money + icone money

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. @@ -77,7 +77,7 @@

- icone laptop + icone 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. @@ -85,7 +85,7 @@

- icone coin + icone coin

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. @@ -93,7 +93,7 @@

- icone cellphone + icone cellphone

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. @@ -103,7 +103,8 @@

- banner bottom infocard + +

Lorem ipsum dolor sit amet

@@ -116,5 +117,17 @@
+ + \ No newline at end of file