diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html index 4808026..12ca151 100644 --- a/src/layouts/partials/footer.html +++ b/src/layouts/partials/footer.html @@ -5,7 +5,7 @@
diff --git a/src/static/css/footer.css b/src/static/css/footer.css index 5eb54a4..87a2971 100644 --- a/src/static/css/footer.css +++ b/src/static/css/footer.css @@ -1,72 +1,396 @@ /* Footer Styling */ -.footer-email{ - font-family: "pp-neue-machina", sans-serif; - text-transform: uppercase; - font-size: 2.121vw; - line-height: 2.121vw; - padding: 1.953vw 0vw; - background: none; - border: none; +@media only screen and (min-width: 1200px) { + + .footer-email{ + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + line-height: 2.121vw; + padding: 1.953vw 0vw; + background: none; + border: none; + } + + .footer-email:focus{ + background-color: #1a1a1a; + color: #fff; + outline: none !important; + box-shadow: none !important; + } + + .social-box{ + border-radius: 0px !important; + border: 2px solid #949494; + background-color: none; + } + + .list-group{ + border-radius: 0px !important; + } + + .list-group-item{ + background-color: #1a1a1a !important; + padding: 1.116vw; + font-size: 1.562vw; + color: #fff; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + border-bottom: 2px solid #949494; + transition: 0.2s ease-in-out; + } + + .list-group-item:hover{ + padding-left: 2.232vw; + background-color: #00ffd0 !important; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + color: #1a1a1a !important; + } + + .footer-content{ + padding-right: 5.580vw; + } + + .email-btn{ + width: 16%; + border-left: 2px solid #949494; + border-right: none !important; + border-radius: 0px; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + } + + .email-btn:hover{ + background-color: #00ffd0; + color: #1a1a1a; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + } + + .social-icon{ + margin-right: 1.116vw !important; + position: relative; + top: 0.167vw; + } + + .footer-grid{ + width:50.223vw; + } + } -.footer-email:focus{ - background-color: #1a1a1a; - color: #fff; - outline: none !important; - box-shadow: none !important; +@media only screen and (min-width: 992px) and (max-width: 1200px) { + + .footer-email{ + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + line-height: 2.121vw; + padding: 1.953vw 0vw; + background: none; + border: none; + } + + .footer-email:focus{ + background-color: #1a1a1a; + color: #fff; + outline: none !important; + box-shadow: none !important; + } + + .social-box{ + border-radius: 0px !important; + border: 2px solid #949494; + background-color: none; + } + + .list-group{ + border-radius: 0px !important; + } + + .list-group-item{ + background-color: #1a1a1a !important; + padding: 1.116vw; + font-size: 1.562vw; + color: #fff; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + border-bottom: 2px solid #949494; + transition: 0.2s ease-in-out; + } + + .list-group-item:hover{ + padding-left: 2.232vw; + background-color: #00ffd0 !important; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + color: #1a1a1a !important; + } + + .footer-content{ + padding-right: 5.580vw; + } + + .email-btn{ + width: 16%; + border-left: 2px solid #949494; + border-right: none !important; + border-radius: 0px; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + } + + .email-btn:hover{ + background-color: #00ffd0; + color: #1a1a1a; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + } + + .social-icon{ + margin-right: 1.116vw !important; + position: relative; + top: 0.167vw; + } + + .footer-grid{ + width:50.223vw; + } + } -.social-box{ - border-radius: 0px !important; - border: 2px solid #949494; - background-color: none; +@media only screen and (min-width: 768px) and (max-width: 992px) { + + .footer-email{ + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + line-height: 2.121vw; + padding: 1.953vw 0vw; + background: none; + border: none; + } + + .footer-email:focus{ + background-color: #1a1a1a; + color: #fff; + outline: none !important; + box-shadow: none !important; + } + + .social-box{ + border-radius: 0px !important; + border: 2px solid #949494; + background-color: none; + } + + .list-group{ + border-radius: 0px !important; + } + + .list-group-item{ + background-color: #1a1a1a !important; + padding: 1.116vw; + font-size: 1.562vw; + color: #fff; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + border-bottom: 2px solid #949494; + transition: 0.2s ease-in-out; + } + + .list-group-item:hover{ + padding-left: 2.232vw; + background-color: #00ffd0 !important; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + color: #1a1a1a !important; + } + + .footer-content{ + padding-right: 5.580vw; + } + + .email-btn{ + width: 16%; + border-left: 2px solid #949494; + border-right: none !important; + border-radius: 0px; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + } + + .email-btn:hover{ + background-color: #00ffd0; + color: #1a1a1a; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + } + + .social-icon{ + margin-right: 1.116vw !important; + position: relative; + top: 0.167vw; + } + + .footer-grid{ + width:50.223vw; + } + } -.list-group{ - border-radius: 0px !important; +@media only screen and (min-width: 576px) and (max-width: 768px){ + + .footer-email{ + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + line-height: 2.121vw; + padding: 1.953vw 0vw; + background: none; + border: none; + } + + .footer-email:focus{ + background-color: #1a1a1a; + color: #fff; + outline: none !important; + box-shadow: none !important; + } + + .social-box{ + border-radius: 0px !important; + border: 2px solid #949494; + background-color: none; + } + + .list-group{ + border-radius: 0px !important; + } + + .list-group-item{ + background-color: #1a1a1a !important; + padding: 1.116vw; + font-size: 1.562vw; + color: #fff; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + border-bottom: 2px solid #949494; + transition: 0.2s ease-in-out; + } + + .list-group-item:hover{ + padding-left: 2.232vw; + background-color: #00ffd0 !important; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + color: #1a1a1a !important; + } + + .footer-content{ + padding-right: 5.580vw; + } + + .email-btn{ + width: 16%; + border-left: 2px solid #949494; + border-right: none !important; + border-radius: 0px; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2.121vw; + } + + .email-btn:hover{ + background-color: #00ffd0; + color: #1a1a1a; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + } + + .social-icon{ + margin-right: 1.116vw !important; + position: relative; + top: 0.167vw; + } + + .footer-grid{ + width:50.223vw; + } + } -.list-group-item{ - background-color: #1a1a1a !important; - padding: 1.116vw; - font-size: 1.562vw; - color: #fff; - font-family: "pp-neue-machina", sans-serif; - text-transform: uppercase; - border-bottom: 2px solid #949494; - transition: 0.2s ease-in-out; -} +@media only screen and (max-width: 576px) { -.list-group-item:hover{ - padding-left: 2.232vw; - background-color: #00ffd0 !important; - box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; - color: #1a1a1a !important; -} + .footer-email{ + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 4vw; + line-height: 2.121vw; + padding: 6vw 0vw; + background: none; + border: none; + } -.footer-content{ - padding-right: 5.580vw; -} + .footer-email:focus{ + background-color: #1a1a1a; + color: #fff; + outline: none !important; + box-shadow: none !important; + } -.email-btn{ - width: 16%; - border-left: 2px solid #949494; - border-right: none !important; - border-radius: 0px; - font-family: "pp-neue-machina", sans-serif; - text-transform: uppercase; - font-size: 2.121vw; -} + .social-box{ + border-radius: 0px !important; + border: 2px solid #949494; + background-color: none; + } -.email-btn:hover{ - background-color: #00ffd0; - color: #1a1a1a; - box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; -} + .list-group{ + border-radius: 0px !important; + } + + .list-group-item{ + background-color: #1a1a1a !important; + padding: 3.5vw; + font-size: 4vw; + color: #fff; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + border-bottom: 2px solid #949494; + transition: 0.2s ease-in-out; + } + + .list-group-item:hover{ + padding-left: 7vw; + background-color: #00ffd0 !important; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + color: #1a1a1a !important; + } + + .footer-content{ + padding-right: 5.580vw; + } + + .email-btn{ + width: 16%; + border-left: 2px solid #949494; + border-right: none !important; + border-radius: 0px; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 4vw; + } + + .email-btn:hover{ + background-color: #00ffd0; + color: #1a1a1a; + box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important; + } + + .social-icon{ + margin-right: 2vw !important; + position: relative; + top: 0.167vw; + } + + .footer-grid{ + width:100%; + } -.social-icon{ - margin-right: 1.116vw !important; - position: relative; - top: 0.167vw; }