"Footer"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <footer id="mainFooter"> <div class="footer-left"> <a class="vertical-logo-container" href="https://media.netflix.com/en/"> <img class="vertical-logo" src="https://d2ygrtdi28m8fp.cloudfront.net/header-footer-logos/Netflix-Footer-Logo.png"> </a> </div> <div class="footer-right"> <ul class="social-nav"> <li>Follow Us</li> <li class="icon-bubble"><a href="https://www.facebook.com/netflixus" target="_blank"><i class="fa fa-facebook"></i><span class="hidden">Netflix on Facebook</span></a></li> <li class="icon-bubble"><a href="https://twitter.com/netflix" target="_blank"><i class="fa fa-twitter"></i><span class="hidden">Netflix on Twitter</span></a></li> <li class="icon-bubble"><a href="https://instagram.com/netflix" target="_blank"><i class="fa fa-instagram"></i><span class="hidden">Netflix on Instagram</span></a></li> </ul> <ul class="legal-nav"> <li><a href="https://media.netflix.com/en/contact-us">About Us</a></li> <li><a href="https://partner.netflix.com/en/node/52" target="_blank">Ad Choices</a></li> <li><a href="https://www.netflix.com/Privacy" target="_blank">Terms Of Service</a></li> <li><a href="https://help.netflix.com/legal/privacy#cookies" target="_blank">Contact Us</a></li> <li><a href="https://help.netflix.com/legal/privacy#cookies" target="_blank">Privacy Policy</a></li> <li>© 2017 Sparkk TV</li> </ul> </div> </footer>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); #mainFooter {background:#fff;padding:2.2em;display:flex;align-items:center;z-index:8000;flex:none;} #mainFooter .footer-left {width: 126px;display: block;float: left;} .vertical-logo-container {width: 126px;padding-top: 55px;position: relative;display: inline-block;} .vertical-logo {margin: 0;padding: 0;transition: all 150ms linear;max-height: 100%;position: absolute;top: 0;left: 0;} #mainFooter .footer-right {width: calc(100% - 126px);display: block;float: right;text-align: right;} .social-nav {margin-bottom: 2.5em;list-style:none;padding: 0;margin: 0;} .social-nav li:first-child {text-transform: uppercase;font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 700;font-style: normal;font-size: 1em;vertical-align: middle;word-wrap: initial;} .social-nav li, .legal-nav li {display: inline-block;margin-left: 2.8em;color: #221f1f;transition: all 150ms linear;line-height: 1;font-size: 1em;margin-bottom: 0;} .social-nav .icon-bubble {width: 3em;height: 3em;border-radius: 50%;text-align: center;margin-left: 1.25em;border: none;background: none;vertical-align: middle;position: relative;z-index: 1;backface-visibility:hidden;transition: color 0.3s;font-size: 1.25em;line-height: 3em;} .social-nav .icon-bubble::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;z-index: -1;box-shadow: inset 0 0 0 35px #221f1f;transform: scale3d(0.9, 0.9, 1);transition: box-shadow 0.2s, transform 0.2s;} .social-nav .icon-bubble a {display: block;color: #fff;outline: 0;} .social-nav li a, .legal-nav li a {color:#8c8c8c;text-decoration: none;padding-bottom: 1em;} .hidden {display: none !important;} .legal-nav li:last-child {font-weight:700;border-left: 1px solid #8c8c8c;padding-left: 2.8em;} .legal-nav li:last-child a {color:#221f1f;} .social-nav li:hover a, .legal-nav li:hover a {color: #e50914;border-bottom: 1px solid #e50914;} .legal-nav li:last-child:hover a {color: #e50914;} .social-nav {margin-bottom: 2.5em;} .social-nav .icon-bubble:hover:before {box-shadow: inset 0 0 0 2px #e50914;transform: scale3d(1, 1, 1);} .social-nav .icon-bubble:hover a {border-bottom: none;color: #e50914;} @media screen and (max-width: 767px) { #mainFooter {box-lines: multiple;flex-wrap: wrap;box-align: start;flex-align: start;align-items: flex-start;padding: 2.2em 2.2em 5rem;} #mainFooter .footer-left, #mainFooter .footer-right {width: 50%;}} @media screen and (max-width: 767px) { #mainFooter .social-nav {display: none;} #mainFooter .legal-nav {margin-top: -5px;} #mainFooter .legal-nav li {display: block;margin: 0 auto;text-align: right;font-size: 1.25em;line-height: 2;}} @media screen and (max-width: 767px) {.legal-nav li:last-child {border-left: none;padding-left: 0;}}

Related: See More


Questions / Comments: