"Social Test"
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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="footer1"> <div class="grid-row"> <div class="grid-col-1"> </div> <div class="grid-col-2"> <div class="team-logo"> <span class="icon-logo footer-logo">CFL</span> </div> </div> <div class="grid-col-6"> <h3 class="footer-title"> Follow the CFL</h3> <h4 class="footer-sub-title ">Stay connected on</h4> <ul class="social-icons"> <li class="twitter"><a data-ga-category="Clicks - Footer" data-ga-action="footer-social-icons-1" data-ga-opt-label="Twitter" href="https://twitter.com/CFL"><span class="icon-social-twitter">Twitter</span></a></li> <li class="facebook"><a data-ga-category="Clicks - Footer" data-ga-action="footer-social-icons-2" data-ga-opt-label="Facebook" href="https://www.facebook.com/CFL"><span class="icon-social-facebook">Facebook</span></a></li> <li class="instagram"><a data-ga-category="Clicks - Footer" data-ga-action="footer-social-icons-3" data-ga-opt-label="Instagram" href="https://www.instagram.com/cfl"><span class="icon-social-instagram">Instagram</span></a></li> <li class="g_plus"><a data-ga-category="Clicks - Footer" data-ga-action="footer-social-icons-4" data-ga-opt-label="Google Plus" href="https://plus.google.com/109857320196426414017/posts"><span class="icon-social-google">Google+</span></a></li> <li class="y_tube"><a data-ga-category="Clicks - Footer" data-ga-action="footer-social-icons-5" data-ga-opt-label="YouTube" href="http://www.youtube.com/CFL"><span class="icon-social-youtube">You Tube</span></a></li> <li class="s_chat"><a data-ga-category="Clicks - Footer" data-ga-action="footer-social-icons-7" data-ga-opt-label="SnapChat" href="http://www.thesnap.ca/the-cfl-on-snapchat/"><span class="icon-social-snapchat">Snapchat</span></a></li> </ul></div> <div class="grid-col-3"> </div> </div> </div>
.footer1 {background: #aa2630 url(https://www.cfl.ca/wp-content/themes/cfl.ca/images/footer_league_bckg.jpg) no-repeat bottom right;background-size:auto auto;background-size:cover;padding: 50px 0;} * {box-sizing: border-box;} .footer .grid-row {margin: 0 auto;} .grid-row::after, .grid-row::before {content: "";display: table;} *, ::after, ::before {box-sizing: border-box;} .grid-col-1 {width: calc(8.333333333333334% - 10px);min-height: 1px;} [class*=" grid-col"], [class^="grid-col"] {margin-left: 10px;float: left;} .grid-col-2 {width: calc(16.666666666666668% - 10px);min-height: 1px;} .footer1 .team-logo {margin-top: -7px;} .icon-logo-alt.footer-logo, .icon-logo-fr.footer-logo, .icon-logo.footer-logo {display: inline-block;width: 110px;height: 110px;} .icon-logo {background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%2032.5%20149.4%20136.4%22%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M74.7%2032.5C42.6%2032.9%2018.2%2043.6%200%2057.1v87.2c18.2%2013.5%2042.6%2024.2%2074.7%2024.6%2032.1-.4%2056.5-11.1%2074.7-24.6V57.1c-18.2-13.5-42.6-24.2-74.7-24.6%22%20fill%3D%22%23E5E5E5%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M52%20130.5H36c-8.7%200-11.4-3.6-11.4-11.5V89c0-6.7%201.9-11.4%2010.8-11.4h16.5l.5.5v10.1H37.9v31.5h14.5v10.2l-.4.6zm22.4-41.9V99h13.5v10.7H74.4v20.6H61.1V77.9h28.4v10.7zm23.8%2041.7V77.9h13.3v41.7h15.1v10.7z%22%20fill%3D%22%23202020%22%2F%3E%3Cpath%20class%3D%22st2%22%20d%3D%22M82.2%20152l-.9-2.1-3.1%203.6s1.2-6.8%201.2-7c-.1.1-2.4%201.2-2.4%201.2l-2.3-4.6-2.3%204.6s-2.3-1.2-2.4-1.2c.1.1%201.2%207%201.2%207l-3.1-3.6-.9%202.1-3.4-.7%201%204.2-1%20.5c2%20.5%205.5%201.1%2011.1%201.1%205.2%200%208.4-.6%2010.4-1.2l-.9-.5%201-4.2-3.2.8z%22%20fill%3D%22%23C42127%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M114.3%2058.5c-8.7-2.2-18-3.8-27.9-4.6-.1-3.1-1-4.8-1.4-5.4-.4.6-1.2%202.2-1.4%205.2-2.4-.2-4.9-.3-7.5-.3-.2-2.8-1-4.3-1.4-4.9-.4.6-1.2%202.1-1.4%204.9l-7.5.3c-.2-3-1-4.6-1.4-5.2-.4.7-1.2%202.4-1.4%205.5-9.9.8-19.2%202.4-27.9%204.6%209-1.1%2018.4-1.9%2027.9-2.3.2%202.8%201%204.2%201.4%204.9.4-.6%201.2-2.2%201.4-5%202.5-.1%205-.2%207.5-.2.2%203%201%204.5%201.4%205.2.4-.6%201.2-2.2%201.4-5.2%202.5%200%205%20.1%207.5.2.2%202.8%201%204.4%201.4%205%20.4-.6%201.2-2.1%201.4-4.9%209.5.3%2018.8%201.1%2027.9%202.2%22%20fill%3D%22%23202020%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat;} .icon-logo, .icon-logo-alt, .icon-logo-fr {width: 63px;height: 70px;} .icon-logo, .icon-logo-alt, .icon-logo-fr {width: 50px;height: 50px;background-position: center center;} [class*="icon-"] {display: inline-block;vertical-align: middle;background-size: contain;text-indent: -9999em;} .grid-col-6 {width: calc(50% - 10px);min-height: 1px;} .footer-title {font-size: 18px;} .footer-sub-title, .footer-title {color: #fff;font-family: Hind,sans-serif;font-weight: 600;line-height: 18px;text-transform: uppercase;} .footer-sub-title {color: #fff;font-size: 12px;opacity: .6;} .social-icons {margin-top: 10px;} .social-icons, .social-icons-small {font-size: 0;list-style: none;position: relative;} .social-icons li {height: 40px;width: 40px;} .social-icons-small li, .social-icons li {background-color: #2b2b2b;border-radius: 50%;display: inline-block;list-style: none;margin-top: 10px;margin-right: 8px;padding: 0;position: relative;transition: all .2s ease-out;} .social-icons-small li a, .social-icons li a {display: block;height: 100%;position: absolute;width: 100%;} .social-icons-small li span[class*="icon-social-"], .social-icons li span[class*="icon-social-"] {background-position: center center;background-size: 20px;height: 100%;width: 100%;} [class*="icon-social-"] {height: 32px;width: 32px;} [class*="icon-"] {display: inline-block;vertical-align: middle;background-size: contain;text-indent: -9999em;} .icon-social-twitter {background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M40%207.6c-1.5.7-3.1%201.1-4.7%201.3%201.7-1%203-2.6%203.6-4.5-1.6.9-3.3%201.6-5.2%202-1.5-1.6-3.6-2.6-6-2.6-4.5%200-8.2%203.7-8.2%208.2%200%20.6.1%201.3.2%201.9-6.8-.3-12.9-3.6-16.9-8.6-.7%201.2-1.1%202.6-1.1%204.1%200%202.8%201.4%205.4%203.7%206.8-1.3%200-2.6-.4-3.7-1v.1c0%204%202.8%207.3%206.6%208-.7.2-1.4.3-2.2.3-.5%200-1-.1-1.5-.1%201%203.3%204.1%205.6%207.7%205.7-3%202.2-6.5%203.5-10.3%203.5-.7%200-1.3%200-2-.1%203.6%202.3%207.9%203.7%2012.6%203.7%2015.1%200%2023.3-12.5%2023.3-23.3v-1.1c1.6-1.2%203-2.7%204.1-4.3z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat;} .icon-social-facebook {background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M14.3%2022.1V40H23V22.2h5.9l1.4-7.4H23V9.4c0-.8.4-1.8%201.6-1.8h4.2V0h-7.9c-2.7%200-6.7%203.4-6.7%206.9v7.6H9.7V22l4.6.1z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E');background-repeat: no-repeat;} .footer1 .grid-col-3 {margin-left: 0;} .grid-col-3 {width: calc(25% - 10px);min-height: 1px;} .grid-row::after {clear: both;} .div {margin:0;margin-left:0px;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

Related: See More


Questions / Comments: