Created
May 15, 2013 20:25
-
-
Save joseph-turner/5587074 to your computer and use it in GitHub Desktop.
A CodePen by Joseph Turner.
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
| <body> | |
| <div class="filler-content"> | |
| <p>body filler content...</p> | |
| <p>more content...</p> | |
| <p>more content...</p> | |
| </div> | |
| <footer> | |
| <div class="linkFooterWrapper"> | |
| <nav class="linkFooterContainer"> | |
| <ul> | |
| <li><a href="#">Host a Party</a></li> | |
| <li><a href="#">Join Grace Adele</a></li> | |
| <li><a href="#">Look Book</a></li> | |
| <li><a href="#">Grace Adele Concept</a></li> | |
| </ul> | |
| </nav> | |
| <div class="cmsFooterContainer"> | |
| <div class="footer_cms"></div> | |
| <div class="footer_cms"></div> | |
| </div> | |
| </div> | |
| <nav class="bottomFooterContainer"> | |
| <ul id="socialRow"> | |
| <li class="socialIcon"><a href="#"></a></li> | |
| <li class="socialIcon"><a href="#"></a></li> | |
| <li class="socialIcon"><a href="#"></a></li> | |
| <li class="socialIcon"><a href="#"></a></li> | |
| <li class="socialIcon"><a href="#"></a></li> | |
| <li class="socialIcon"><a href="#"></a></li> | |
| </ul> | |
| <ul id="linkRow"> | |
| <li class="linkText"><a href="#">Careers</a></li> | |
| <li class="linkText"><a href="#">Privacy Policy</a></li> | |
| <li class="linkText"><a href="#">Disclaimer</a></li> | |
| <li class="linkText"><a href="#">Site Map</a></li> | |
| <li class="linkText"><a href="#">Consultant Login</a></li> | |
| </ul> | |
| <small id="companyInfo">Grace Adele is a Scentsy Family Company © 2013 SIP, LLC</small> | |
| </nav> | |
| </footer> | |
| </body> |
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
| @import "compass"; | |
| /*base styles*/ | |
| body { | |
| background: #37939b; | |
| min-width: 320px; | |
| font-size: 12px; | |
| } | |
| nav { | |
| ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| li { | |
| display: inline-block; | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| /*module styles*/ | |
| .filler-content { | |
| max-width: 960px; | |
| height: 100px; | |
| margin: 0 auto; | |
| background: white; | |
| } | |
| footer > nav { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| } | |
| .linkFooterWrapper { | |
| background: #f3f2ec; | |
| border-top: 1px solid #c6c2b2; | |
| border-bottom: 1px solid #c6c2b2; | |
| } | |
| .linkFooterContainer, | |
| .cmsFooterContainer { | |
| max-width: 768px; | |
| margin: 0 auto; | |
| } | |
| .linkFooterContainer { | |
| display: none; /*hides links at smaller widths*/ | |
| margin-top: 16px; | |
| } | |
| .footer_cms { | |
| width: 300px; | |
| height: 100px; | |
| margin: 0px auto 15px auto; | |
| background: #a8ccd1; | |
| } | |
| .footer_cms:nth-of-type(1) { | |
| margin-top: 15px; | |
| } | |
| .bottomFooterContainer { | |
| width: 100%; | |
| max-width: 960px; | |
| min-height: 155px; | |
| margin: 0 auto; | |
| } | |
| .bottomFooterContainer ul li { | |
| margin-top: 20px; | |
| } | |
| li.socialIcon { | |
| width: 24px; | |
| height: 24px; | |
| margin: 0px 6px; | |
| } | |
| li.socialIcon:nth-of-type(1) { | |
| width: 44px; | |
| } | |
| /*social icons' sprite rules*/ | |
| li.socialIcon { | |
| background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat 0px 0px; } | |
| li.socialIcon:nth-of-type(1):hover { background-position: -44px 0px; } | |
| li.socialIcon:nth-of-type(2) { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat 0px -24px; } | |
| li.socialIcon:nth-of-type(2):hover { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat -24px -24px; } | |
| li.socialIcon:nth-of-type(3) { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat 0px -48px; } | |
| li.socialIcon:nth-of-type(3):hover { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat -24px -48px; } | |
| li.socialIcon:nth-of-type(4) { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat 0px -72px; } | |
| li.socialIcon:nth-of-type(4):hover { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat -24px -72px; } | |
| li.socialIcon:nth-of-type(5) { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat 0px -96px; } | |
| li.socialIcon:nth-of-type(5):hover { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat -24px -96px; } | |
| li.socialIcon:nth-of-type(6) { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat 0px -120px; } | |
| li.socialIcon:nth-of-type(6):hover { background: url(http://s7.postimg.org/smlkbo2dz/social_Sprite.png) no-repeat -24px -120px; } | |
| li.socialIcon:hover { cursor: pointer; } | |
| ul#linkRow li a { | |
| color: white; | |
| padding: .9em; | |
| } | |
| ul#linkRow li + li::before { | |
| color: white; | |
| content: " | "; | |
| } | |
| .bottomFooterContainer #companyInfo { | |
| clear: both; /*prevents overlap when floats are applied at larger widths*/ | |
| text-align: center; | |
| margin: 0px; | |
| padding: 0px; | |
| color: white; | |
| padding: 20px 0px; | |
| } | |
| /*media queries*/ | |
| @media all and (min-width: 768px) { | |
| .linkFooterContainer { | |
| display: block; | |
| } | |
| .footer_cms { | |
| display: inline-block; | |
| } | |
| .footer_cms:nth-of-type(1) { | |
| margin-right: 35px; | |
| margin-left: 66px; | |
| } | |
| .bottomFooterContainer { | |
| height: 100px; | |
| } | |
| .bottomFooterContainer { | |
| min-height: 100px; | |
| } | |
| #socialRow { | |
| float: right; | |
| margin-right: 20px; | |
| } | |
| #linkRow { | |
| float: left; | |
| } | |
| #companyInfo { | |
| float: left; | |
| padding-left: 11px !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment