From cf23b89c943597be08756312bab34c116506cbe9 Mon Sep 17 00:00:00 2001 From: hackerboyalex <59591652+hackerboyalex@users.noreply.github.com> Date: Mon, 4 Oct 2021 09:59:32 +0530 Subject: [PATCH 1/3] Create footer.html Responsive Footer with HTML+CSS --- Responsive-Footer/footer.html | 69 +++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 Responsive-Footer/footer.html diff --git a/Responsive-Footer/footer.html b/Responsive-Footer/footer.html new file mode 100644 index 0000000..66269ec --- /dev/null +++ b/Responsive-Footer/footer.html @@ -0,0 +1,69 @@ + + + + + + + Footer 2 + + + + + + + + + From 5f5530b21cd19da6f3e3027626f60c54d4b83ea3 Mon Sep 17 00:00:00 2001 From: hackerboyalex <59591652+hackerboyalex@users.noreply.github.com> Date: Mon, 4 Oct 2021 10:03:27 +0530 Subject: [PATCH 2/3] Create style.css CSS for footer.index --- Responsive-Footer/style.css | 80 +++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 Responsive-Footer/style.css diff --git a/Responsive-Footer/style.css b/Responsive-Footer/style.css new file mode 100644 index 0000000..2d6781d --- /dev/null +++ b/Responsive-Footer/style.css @@ -0,0 +1,80 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.footer { + position: fixed; + width: 100%; + bottom: 0; + left: 0; +} + +.footer .heading { + max-width: 1010px; + width: 90%; + text-transform: uppercase; + margin: 0 auto; + margin-bottom: 3rem; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.footer .content { + display: flex; + justify-content: space-evenly; + margin: 1.5rem; +} + +.footer .content p { + margin-bottom: 1.3rem; + color: rgba(0, 0, 0, 0.829); +} + +.footer .content a { + text-decoration: none; + color: rgb(0, 0, 0, 0.829); +} + +.footer .content a:hover { + border-bottom: 1px solid rgba(0, 0, 0, 0.829); +} + +.footer .content h4 { + margin-bottom: 1.3rem; + font-size: 19px; +} + +footer { + text-align: center; + margin-bottom: 2rem; +} + +footer hr { + margin: 2rem 0; +} + +@media (max-width: 767px) { + .footer .content { + display: flex; + flex-direction: column; + font-size: 14px; + } + + .footer { + position: unset; + } +} + +@media (min-width: 768px) and (max-width: 1024px) { + .footer .content, + .footer { + font-size: 14px; + } +} + +@media (orientation: landscape) and (max-height: 500px) { + .footer { + position: unset; + } +} From 8119c54c1e614e8b63820572e42d70311f6e90fa Mon Sep 17 00:00:00 2001 From: hackerboyalex <59591652+hackerboyalex@users.noreply.github.com> Date: Mon, 4 Oct 2021 10:04:06 +0530 Subject: [PATCH 3/3] Update footer.html --- Responsive-Footer/footer.html | 1 + 1 file changed, 1 insertion(+) diff --git a/Responsive-Footer/footer.html b/Responsive-Footer/footer.html index 66269ec..f9a1d93 100644 --- a/Responsive-Footer/footer.html +++ b/Responsive-Footer/footer.html @@ -7,6 +7,7 @@ Footer 2 +