Line 3: | Line 3: | ||
<html> | <html> | ||
<style> | <style> | ||
− | .footer- | + | .footer-basic-centered{ |
− | background-color: | + | background-color: #292c2f; |
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); | ||
box-sizing: border-box; | box-sizing: border-box; | ||
width: 100%; | width: 100%; | ||
− | |||
text-align: center; | text-align: center; | ||
− | padding: | + | font: normal 18px sans-serif; |
− | margin-top: | + | |
+ | padding: 45px; | ||
+ | margin-top: 80px; | ||
} | } | ||
− | . | + | |
− | + | .footer-basic-centered .footer-company-motto{ | |
− | + | color: #8d9093; | |
− | + | font-size: 24px; | |
− | + | margin: 0; | |
− | + | } | |
− | + | ||
+ | .footer-basic-centered .footer-company-name{ | ||
+ | color: #8f9296; | ||
+ | font-size: 14px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .footer-basic-centered .footer-links{ | ||
+ | list-style: none; | ||
+ | font-weight: bold; | ||
+ | color: #ffffff; | ||
+ | padding: 35px 0 23px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .footer-basic-centered .footer-links a{ | ||
+ | display:inline-block; | ||
+ | text-decoration: none; | ||
+ | color: inherit; | ||
+ | } | ||
+ | |||
+ | /* If you don't want the footer to be responsive, remove these media queries */ | ||
+ | |||
+ | @media (max-width: 600px) { | ||
+ | |||
+ | .footer-basic-centered{ | ||
+ | padding: 35px; | ||
+ | } | ||
+ | |||
+ | .footer-basic-centered .footer-company-motto{ | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | .footer-basic-centered .footer-company-name{ | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | .footer-basic-centered .footer-links{ | ||
+ | font-size: 14px; | ||
+ | padding: 25px 0 20px; | ||
+ | } | ||
+ | |||
+ | .footer-basic-centered .footer-links a{ | ||
+ | line-height: 1.8; | ||
+ | } | ||
} | } | ||
Line 25: | Line 70: | ||
</style> | </style> | ||
− | <footer class=" | + | <footer class="basic-centered"> |
Revision as of 12:24, 24 September 2017