"Kiip V3 Footer"
Bootstrap 3.0.0 Snippet by summer1hp

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <footer class="footer"> <div class="container"> <div class="top-footer"> <div class="col-sm-1"> <img class="hidden-xs" src="https://kiip-staging.meteorapp.com/app/assets/icons/icon-contact.svg"> <img class="hidden-lg hidden-md hidden-sm" src="https://kiip-staging.meteorapp.com/app/assets/icons/star.png"> </div> <div class="col-sm-10"> <h3>Let's Talk Moments</h3> <h5>Get in touch to learn how Kiip can help your business.</h5><a href="http://v3.kiip.me/contact/#talk-moments-form" class="btn pull-right">Contact Us</a> </div> </div> <div class="bottom-footer"> <div class="col-md-3 col-sm-4 col-xs-12"> <h6>Kiip</h6><a href="http://www.kiip.me">Homepage</a><a href="http://v3.kiip.me/brands">Brands</a><a href="http://v3.kiip.me/developers">Developers</a><a href="http://v3.kiip.me/selfserve">Performance Marketers</a><a href="http://v3.kiip.me/rewards">Rewards</a> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <h6>About Us</h6><a href="http://v3.kiip.me/about">About Us</a><a href="http://blog.kiip.me">Blog</a><a href="http://v3.kiip.me/careers">Careers</a><a href="http://v3.kiip.me/press">Press</a><a class="hidden" href="http://v3.kiip.me/privacy">Privacy Policy</a> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <h6>Misc</h6> <a href="http://api.kiip.me/register" id="signup-footer-link">Sign Up</a><a href="http://api.kiip.me/login">Sign In</a><a href="http://v3.kiip.me/contact" id="contact-modal-link">Contact Us</a><a href="http://docs.kiip.me">Developer Docs</a><a href="http://help.kiip.me/">Knowledge Base</a> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <h6>Follow Us</h6> <div class="social-links"><a href="https://www.facebook.com/Kiip"><i class="fa fa-facebook"></i></a><a href="https://twitter.com/kiip"><i class="fa fa-twitter"></i></a><a href="http://blog.kiip.me"><i class="fa fa-book"></i></a> <a href="https://www.youtube.com/channel/UCaU81nWGT6w5TsbLx41W6kw/"><i class="fa fa-youtube"></i> </a> <a href="http://www.linkedin.com/company/kiip"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="copyright">Kiip, Inc. © 2017</div> </div> </div> </div> </footer>
.footer { background: #F6F7F8; color: #4a4a4a; } .footer .top-footer { border-bottom: solid 1px #dedada; position: relative; height: 170px; } .footer .top-footer img { background: linear-gradient(to bottom, #fa0e75, #aa26ad 49%, #583fe6); border-radius: 50%; width: 60px; margin: 60px 20px 34px 20px; } .footer .top-footer a { margin-top: 60px; } .footer .bottom-footer a, .footer .bottom-footer a:hover, .footer .bottom-footer a:visited, .footer .bottom-footer a:hover, .footer .bottom-footer a:active { display: flex; flex-direction: column; color: #333333; text-decoration: none; } .footer .bottom-footer .col-md-3 { margin-bottom: 40px; margin-top: 60px; } .footer .bottom-footer .col-md-3 .h6, .footer .bottom-footer .col-md-3 h6 { color: #111; font-size: 14px; } .footer .bottom-footer .social-links { display: flex; flex-direction: row; margin-top: 10px; flex-wrap: wrap; } .footer .top-footer a { margin-top: -58px; } .footer .bottom-footer .social-links a, .footer .bottom-footer .social-links a:hover, .footer .bottom-footer .social-links a:visited, .footer .bottom-footer .social-links a:hover, .footer .bottom-footer .social-links a:active { width: 35px; height: 35px; background: #4a4a4a; border-radius: 50%; margin: 2px 10px 2px 0; } .footer .bottom-footer .copyright { margin-bottom: 30px; } @media (max-width: 1200px) { .footer .top-footer { position: initial; height: auto; } .footer .top-footer img { display: block; margin: 50px auto 0; } .footer .top-footer h3, .footer .top-footer .h3, .footer .top-footer h5, .footer .top-footer .h5 { display: block; text-align: center; } .footer .top-footer .h5, .footer .top-footer h5 { position: initial; top: 0; left: 0; } .footer .top-footer a { display: block; margin: 20px auto 40px; float: none !important; } } footer .btn { width: 220px; height: 42px; border-radius: 2px; background-color: #03dad7; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); font-size: 20px; font-weight: 600; letter-spacing: 0.2px; text-align: center; color: #fafafa; } footer .btn:hover{ color:white; opacity:.9; } .footer .bottom-footer .social-links a, .footer .bottom-footer .social-links a:hover, .footer .bottom-footer .social-links a:visited, .footer .bottom-footer .social-links a:hover, .footer .bottom-footer .social-links a:active { width: 35px; height: 35px; background: #eaeaea; border-radius: 50%; margin: 2px 10px 2px 0; color: #6d6b6b !important; padding: 10px; font-size: 17px; padding-top: 8px; text-align: center; margin: 3px; } .footer hr{ color:lightgrey!important; }.footer .col-sm-10 { margin-top: 44px; } .copyright{ padding-bottom:100px; padding-left:15px; }

Related: See More


Questions / Comments: