<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container-fluid footer"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 instagram"> <img class="logo" src="http://lorempixel.com/64/64"> <h1>A picture is worth a thousand words. Follow us on Instagram.</h1> <img class="button" src="http://lorempixel.com/176/36"> </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 subscribe"> <h1>Don’t miss out on the Latest News</h1> <h3>We won’t spam you and we respect your privacy.</h3> <input placeholder="Your Email"> <button>SUBSCRIBE</button> </div> <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12 twitter"> <img class="logo" src="http://lorempixel.com/24/24"> <h1>Latest from Twitter</h1> <p>Amazon unveiled a new subscription program that delivers toys focusing on science, maths and engineering…</p> <h3>56 minutes ago</h3> <img class="button pull-left" src="http://lorempixel.com/176/36"> </div> <div class="col-lg-6 col-md-7 col-sm-12 col-xs-12 other-medias"> <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4 periscope"> <a href=""><img class="logo pull-left" src="http://lorempixel.com/50/64"></a> <h1>TRT World on Periscope</h1> <p>Catch us live covering the news while it is hapenning real time.</p> </div> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 facebook"> <a href=""><img class="logo" src="http://lorempixel.com/53/53"></a> </div> <div class="col-lg-6 col-md-6 col-sm-4 col-xs-4 youtube pull-right"> <a href=""><img class="logo" src="http://lorempixel.com/64/64"></a> </div> </div> </div> </div> </div>

.footer .instagram{ background:url("http://placehold.it/405x420") no-repeat center; background-size:cover; text-align:center; } .footer .instagram .logo{ margin-top:90px; } .footer .instagram h1{ font-size:20px; font-weight:bold; line-height:32px; color:#f0f0f2; margin:20px auto; max-width:300px; min-height:96px; } .footer .instagram .button{ margin-top:5px; margin-bottom:89px; } .footer .subscribe{ background-color:#00b6ca; text-align:center; } .footer .subscribe h1{ font-size:20px; font-weight:bold; line-height:32px; color:#f0f0f2; margin:0px; padding-top:20px; } .footer .subscribe h3{ font-size:12px; font-weight:bold; line-height:16px; color:#f0f0f2; margin:10px 0px 20px 0px; } .footer .subscribe input{ border:solid 1px rgba(30, 30, 30, 0.2); font-size:14px; line-height:20px; color:#1e1e1e; padding:7px 14px; min-width:245px; margin-bottom:30px; } .footer .subscribe button{ background-color:#005f6a; font-size:14px; line-height:20px; font-weight:bold; color:#f0f0f2; padding:8px 16px; border:none; margin-left:-5px; } .footer .twitter{ background-color:#f0f0f2; margin-top:10px; text-align:left; } .footer .twitter .logo{ display:inline-block; } .footer .twitter h1{ font-size:20px; line-height:32px; font-weight:bold; color:#1da1f2; display:inline-block; margin:20px 0px 10px 8px; } .footer .twitter p{ font-size:14px; line-height:20px; color:#1e1e1e; opacity:0.5; min-height:60px; } .footer .twitter h3{ font-size:12px; line-height:16px; font-weight:bold; color:#1e1e1e; opacity:0.5; margin:0px 0px 30px 0px; } .footer .twitter .button{ margin-bottom:32px; } .footer .other-medias{ margin-top:10px; text-align:left; } .footer .other-medias .periscope{ background-color:#f0f0f2; margin-bottom:10px; text-align:center; } .footer .other-medias .periscope .logo{ margin-top:28px; margin-right:16px; } .footer .other-medias .periscope h1{ font-size:20px; font-weight:bold; line-height:32px; color:#3fa4c4; margin:0px; padding: 20px 0px 5px 0px; } .footer .other-medias .periscope p{ font-size:14px; font-weight:bold; line-height:20px; color:#1e1e1e; opacity:0.5; text-align:center; display:inline-block; margin:0; max-width:235px; margin-bottom:21px; } .footer .other-medias .facebook{ background-color:#f0f0f2; text-align:center; } .footer .other-medias .facebook .logo{ padding:32.5px 0px; } .footer .other-medias .youtube{ background-color:#f0f0f2; text-align:center; } .footer .other-medias .youtube .logo{ padding:27px 0px; } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { .footer .subscribe{ background-color:#f0f0f2; } .footer .subscribe h1{ color:#1e1e1e; opacity:0.87; } .footer .subscribe h3{ color:#1e1e1e; opacity:0.5; } .footer .subscribe button{ background-color:#00b6ca; } } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .footer .subscribe{ background-color:#f0f0f2; text-align:left; } .footer .subscribe h1{ color:#1e1e1e; opacity:0.87; } .footer .subscribe h3{ color:#1e1e1e; opacity:0.5; margin-bottom:17px; } .footer .subscribe input{ margin-bottom:22px; } .footer .subscribe button{ background-color:#00b6ca; } .footer .twitter{ margin-top:15px; } .footer .twitter .logo{ display:none; } .footer .twitter h1{ margin-left:0px; margin-top:10px; font-size:16px; line-height:24px; } .footer .twitter p{ font-size:12px; line-height:16px; font-weight:bold; opacity:0.87; min-height:inherit; } .footer .twitter h3{ margin-bottom:10px; } .footer .twitter .button{ margin-bottom:15px; } .footer .other-medias{ margin-top:15px; } .footer .other-medias .periscope{ margin-bottom:0; } .footer .other-medias .periscope .logo{ float:none !important; margin:0; padding:16px 0px; width:33px; } .footer .other-medias .periscope h1{ display:none; } .footer .other-medias .periscope p{ display:none; } .footer .other-medias .facebook .logo{ width:52px; padding:11px 0px; } .footer .other-medias .youtube .logo{ width:52px; padding:11px 0px; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .footer .instagram{ margin-bottom:20px; } .footer .instagram .logo{ margin-top:18px; } .footer .instagram .button{ margin-bottom:18px; } .footer .subscribe{ text-align:center; } .footer .subscribe h1{ padding-top:22px; } .footer .subscribe h3{ margin:7.5px 0px 17.5px 0px; } .footer .subscribe input{ min-width:inherit; max-width:127px; } .footer .twitter{ margin-top:20px; } .footer .twitter h1{ margin:20px 0px 10px 0px; } .footer .twitter .button{ margin-bottom:20px; } .footer .other-medias{ margin-top:20px; } .footer .other-medias .periscope .logo{ padding:9px 0px; } .footer .other-medias .facebook .logo{ width:46px; padding:6px 0px 8px 0px; } .footer .other-medias .youtube .logo{ width:40px; padding:10px 0px; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { }