"Social Boxes"
Bootstrap 3.2.0 Snippet by serhatkaraca

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
37
<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>
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
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: