"Footer"
Bootstrap 3.3.0 Snippet by sparkktv

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@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;}}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: