diff --git a/assets/imgs/footer-face.png b/assets/imgs/footer-face.png new file mode 100644 index 0000000..34769d9 Binary files /dev/null and b/assets/imgs/footer-face.png differ diff --git a/assets/imgs/footer-insta.png b/assets/imgs/footer-insta.png new file mode 100644 index 0000000..a0129a3 Binary files /dev/null and b/assets/imgs/footer-insta.png differ diff --git a/assets/imgs/footer-yt.png b/assets/imgs/footer-yt.png new file mode 100644 index 0000000..397ea3e Binary files /dev/null and b/assets/imgs/footer-yt.png differ diff --git a/index.html b/index.html index def6193..85778b2 100644 --- a/index.html +++ b/index.html @@ -125,10 +125,35 @@ Banner infocard mobile - + + diff --git a/style/colors.css b/style/colors.css index ebbade2..33c72f8 100644 --- a/style/colors.css +++ b/style/colors.css @@ -3,4 +3,5 @@ --white: #fff; --bg-light-gray: #e5e5e5; --middlebg-gray: #e0e0e0; + --letter-footer: #bdbdbd; } diff --git a/style/footer.css b/style/footer.css new file mode 100644 index 0000000..e11fdc9 --- /dev/null +++ b/style/footer.css @@ -0,0 +1,38 @@ +.footer { + display: flex; + align-items: center; + text-align: center; + background: var(--black); + flex-direction: column; + padding: 38px 0; + max-width: 100%; +} + +.container-footer-icons { + display: flex; + list-style: none; + margin-bottom: 16px; + gap: 16px; +} + +.footer-icon { + width: 20%; +} + +.footer-text { + color: var(--letter-footer); + font-size: 10px; + line-height: 12px; + text-transform: uppercase; +} + +@media (max-width: 414px) { + .footer { + max-width: 100%; + padding: 32px 77px; + } + + .footer-text { + width: 63%; + } +} diff --git a/style/style.css b/style/style.css index fbaf916..b8edddc 100644 --- a/style/style.css +++ b/style/style.css @@ -3,3 +3,4 @@ @import url("colors.css"); @import url("header.css"); @import url("main.css"); +@import url("footer.css");