Instantly share code, notes, and snippets.
Last active
January 30, 2017 21:44
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save educartoons/682a7cfccffe41e6d1771faf3f35d051 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.footer { | |
background-color: #000; | |
} | |
.footer-navigation { | |
padding: 5em 0 0 0; | |
width: 66.66667%; | |
float: left; | |
} | |
@media (max-width: 48em) { | |
.footer-navigation { | |
width: 100%; | |
float: left; | |
display: none; | |
} | |
} | |
.footer-navigation .group { | |
width: 33.33333%; | |
float: left; | |
} | |
@media (max-width: 48em) { | |
.footer-navigation .group { | |
padding: 0 0 0 1em; | |
} | |
} | |
@media (max-width: 40em) { | |
.footer-navigation .group { | |
width: 100%; | |
float: left; | |
margin: 0 0 1.5em 0; | |
} | |
} | |
.footer-navigation .group h5 { | |
color: #ffffff; | |
font-size: 1em; | |
margin: 0 0 2em 0; | |
} | |
.footer-navigation .group ul { | |
margin: 0; | |
padding: 0; | |
} | |
.footer-navigation .group ul li { | |
margin: 0 0 0.275em 0; | |
} | |
.footer-navigation .group ul li a { | |
color: #999999; | |
font-size: 0.9em; | |
} | |
.footer-about { | |
width: 33.33333%; | |
float: left; | |
border-left: 1px solid #333; | |
color: #fff; | |
margin: 2em 0 0 0; | |
padding: 0 2em; | |
} | |
@media (max-width: 48em) { | |
.footer-about { | |
width: 100%; | |
float: left; | |
border-left: 0; | |
padding: 0 1em; | |
} | |
} | |
.footer-about .heading-3 { | |
color: #ffffff; | |
font-size: 2.25em; | |
margin: 0 0 1em 0; | |
} | |
@media (max-width: 48em) { | |
.footer-about .heading-3 { | |
display: none; | |
} | |
} | |
.footer-about .paragraph { | |
font-size: 1.05em; | |
padding: 0 0 1.5em 0; | |
} | |
@media (max-width: 48em) { | |
.footer-about .paragraph { | |
font-size: 1.2em; | |
padding: 0; | |
} | |
} | |
.footer-about .paragraph--alter { | |
margin: 0 0 2.5em 0; | |
} | |
@media (max-width: 48em) { | |
.footer-about .paragraph--alter { | |
display: none; | |
} | |
} | |
.footer-about .border-bottom { | |
border-bottom: 1px solid #333; | |
} | |
@media (max-width: 48em) { | |
.footer-about .newsletter { | |
padding: 0 0 0 0; | |
} | |
} | |
.footer-about .newsletter .text { | |
color: #000; | |
background-color: #fff; | |
border: 0; | |
border-radius: 5px; | |
display: inline-block; | |
height: 36px; | |
padding: 0 1em 0 1em; | |
width: 200px; | |
} | |
@media (max-width: 48em) { | |
.footer-about .newsletter .text { | |
color: #fff; | |
background-color: transparent; | |
border-radius: 0; | |
border-bottom: 1px solid #5099d0; | |
font-size: 1.2em; | |
margin: 0 0 1.5em 0; | |
outline: 0; | |
padding: 0; | |
width: 100%; | |
display: block; | |
} | |
} | |
.footer-about .newsletter .submit { | |
background-color: #5099d0; | |
border-radius: 5px; | |
border: 0; | |
color: #fff; | |
display: inline-block; | |
height: 36px; | |
width: 90px; | |
text-transform: uppercase; | |
vertical-align: top; | |
} | |
@media (max-width: 1111px) { | |
.footer-about .newsletter .submit { | |
margin: 1em 0 0 0; | |
} | |
} | |
@media (max-width: 48em) { | |
.footer-about .newsletter .submit { | |
margin: 0; | |
display: block; | |
height: 40px; | |
line-height: 1; | |
width: 100%; | |
} | |
} | |
.footer-lastline { | |
border-top: 1px solid #333; | |
margin: 2em 0 0 0; | |
padding: 3em 0 3em 0; | |
overflow: hidden; | |
} | |
@media (max-width: 48em) { | |
.footer-lastline { | |
border-top: 0; | |
margin: 0; | |
padding: 1em; | |
} | |
} | |
.footer-lastline .paragraph { | |
color: #999999; | |
font-size: 0.9em; | |
line-height: 1.5; | |
float: left; | |
margin: 0; | |
} | |
@media (max-width: 40em) { | |
.footer-lastline .paragraph { | |
font-size: 0.75em; | |
width: 140px; | |
} | |
} | |
@media (max-width: 40em) { | |
.footer-lastline .paragraph span { | |
display: none; | |
} | |
} | |
.footer-lastline .paragraph a { | |
color: #999999; | |
text-decoration: none; | |
} | |
@media (max-width: 40em) { | |
.footer-lastline .paragraph a { | |
display: none; | |
} | |
} | |
.footer-lastline .social { | |
float: right; | |
margin: 0; | |
padding: 0; | |
} | |
@media (max-width: 40em) { | |
.footer-lastline .social { | |
margin: 0 0 0 0; | |
} | |
} | |
.footer-lastline .social li { | |
display: inline-block; | |
} | |
.icon-facebook { | |
background-image: url("../images/izotope_social_icons.png"); | |
background-position: 0 0; | |
display: inline-block; | |
width: 35px; | |
height: 35px; | |
} | |
.icon-facebook:hover { | |
background-position: 0 35px; | |
} | |
.icon-twitter { | |
background-image: url("../images/izotope_social_icons.png"); | |
background-position: -35px 0; | |
display: inline-block; | |
width: 35px; | |
height: 35px; | |
} | |
.icon-twitter:hover { | |
background-position: -35px 35px; | |
} | |
.icon-youtube { | |
background-image: url("../images/izotope_social_icons.png"); | |
background-position: -74px 0; | |
display: inline-block; | |
width: 35px; | |
height: 35px; | |
} | |
.icon-youtube:hover { | |
background-position: -74px 35px; | |
} | |
.icon-instagram { | |
background-image: url("../images/izotope_social_icons.png"); | |
background-position: -110px 0; | |
display: inline-block; | |
width: 35px; | |
height: 35px; | |
} | |
.icon-instagram:hover { | |
background-position: -110px 35px; | |
} | |
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { | |
.icon-facebook, | |
.icon-twitter, | |
.icon-youtube, | |
.icon-instagram { | |
background-image: url("../images/izotope_social_icons@2x.png"); | |
background-size: 146px 70px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment