diff --git a/assets/facebook-icon.svg b/assets/facebook-icon.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/facebook-icon.svg @@ -0,0 +1,3 @@ + diff --git a/assets/instagram-icon.svg b/assets/instagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/instagram-icon.svg @@ -0,0 +1,5 @@ + diff --git a/assets/youtube-icon.svg b/assets/youtube-icon.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/youtube-icon.svg @@ -0,0 +1,3 @@ + diff --git a/css/style.css b/css/style.css index 15ca361..d6ab448 100644 --- a/css/style.css +++ b/css/style.css @@ -165,6 +165,33 @@ body{ margin-top: 50px; } +/** PAGE FOOTER **/ +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + background-color: #000000; + margin-top: 116px; +} + +.footer-icons{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + text-decoration: none; + margin-top: 38px; +} + +.copyright{ + color: #BDBDBD; + margin: 16px 0 38px; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + text-align: center; + +} + @media screen and (max-width: 1024px){ /*** MAIN BANNER E BOTTOM INFOCARD ***/ .main-banner-desktop, @@ -275,6 +302,21 @@ body{ display: block; width: 100%; } + + /** PAGE FOOTER **/ + .page-footer{ + margin-top: 88px; + } + + .footer-icons{ + margin-top: 32px; + } + + .copyright{ + margin: 16px 0 32px; + width: 64%; + } + } @media screen and (min-width: 1025px){ diff --git a/index.html b/index.html index 1656308..503c867 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@
- - + + @@ -21,12 +21,12 @@ @@ -50,7 +50,7 @@ @@ -60,7 +60,7 @@