From d4d48bd3a96a4746e5e0654e0f63d31c8de69678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naian=20F=C3=A9lix?= Date: Sat, 8 Oct 2022 18:26:51 -0300 Subject: [PATCH] Criar o footer desktop e mobile --- assets/images/facebook-icon.svg | 3 +++ assets/images/instagram-icon.svg | 5 ++++ assets/images/youtube-icon.svg | 3 +++ assets/styles/main.css | 45 ++++++++++++++++++++++++++++++++ index.html | 26 ++++++++++++++++++ 5 files changed, 82 insertions(+) create mode 100644 assets/images/facebook-icon.svg create mode 100644 assets/images/instagram-icon.svg create mode 100644 assets/images/youtube-icon.svg diff --git a/assets/images/facebook-icon.svg b/assets/images/facebook-icon.svg new file mode 100644 index 0000000..932e61b --- /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..b4ca66b --- /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/main.css b/assets/styles/main.css index 04285e2..543aef1 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -145,6 +145,38 @@ body { .bottom-infocard-description { line-height: 24px; font-size: 16px; +} + +.page-footer { + flex-direction: column; + align-items: center; + display: flex; + padding: 38px 0; + background: #000000; +} + +.footer-icons { + display: flex; + list-style: none; + margin-bottom: 16px; + +} + +.footer-icon { + margin: 0 8px; +} + +.footer-text { + text-transform: uppercase; + font-family: 'Inter'; + font-weight: 400; + font-size: 10px; + color: #BDBDBD; + + + + + } @media screen and (max-width: 414px) { @@ -181,8 +213,21 @@ body { font-size: 14px; } + + .page-footer { + padding-bottom: 26px; + text-align: center; + + } + + .footer-text { + max-width: 280px; + text-align: center; + } } + + @media screen and (max-width: 992px) { .top-infocard { flex-direction: column; diff --git a/index.html b/index.html index 302ee9f..8ebb7a6 100644 --- a/index.html +++ b/index.html @@ -100,5 +100,31 @@ + \ No newline at end of file