"Instagram Profile Flat Style"
Bootstrap 2.3.2 Snippet by manuelruiz

Post to Facebook Tweet this

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/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
rel="stylesheet" />
<header class="clearfix feed-header" data-role="banner">
<div class="compWrapper">
<div class="compInnerWrapper">
<div class="compContainer" id="cycler1">
<div class="compPhoto compPhoto1"> <a href="#">
<div class="Image iWithTransition">
<img src="http://placehold.it/225x225/FF00FF/fff&text=photo1" class="img-responsive" />
<b class="compPhotoShadow"></b>
</div>
</a>
</div>
<div class="compPhoto compPhoto2"> <a href="#">
<div class="Image iLoaded iWithTransition">
<img src="http://placehold.it/225x225/545454/fff&text=photo2" class="img-responsive" />
<b class="compPhotoShadow"></b>
</div>
</a>
</div>
<div class="compPhoto compPhoto3"> <a href="#" class="">
<div class="Image iWithTransition">
<img src="http://placehold.it/425x425/1E90FF/fff&text=photo3" class="img-responsive" />
<b class="compPhotoShadow"></b>
</div>
</a>
</div>
<div class="compPhoto compPhoto4"> <a href="#">
<div class="Image iWithTransition">
<img src="http://placehold.it/250x250/00FF7F/fff&text=photo4" class="img-responsive" />
<b class="compPhotoShadow"></b>
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
.feed-header {
margin: 0;
padding: 32px 0 0;
background: #333333 url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/profile/noise-black.png") 50% 50%;
background-image: url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/profile/profile-header-gradient.png"), url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/profile/noise-black.png");
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.5) inset;
position: relative;
overflow: hidden;
}
.profile-user {
position: relative;
max-width: 964px;
min-height: 75px;
margin: 0 auto;
padding: 10px 30px 15px;
border-bottom: 1px solid #d9d9d9;
background: #eeeeee url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/bg/white-gradient-200px.png") repeat-x 50% 50%;
-webkit-box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05), -1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05), -1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05), -1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.compWrapper {
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 720px;
border: 1px solid #000;
border-top: none;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function cycleImages(container){
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
setInterval(function(){cycleImages($('#cycler1'))}, 2000);
setInterval(function(){cycleImages($('#cycler2'))}, 3000);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard PRO React
Instagram Style User Online
Tabs style 1
Hover Effect Style

Questions / Comments: