"layout profile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
<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 ---------->
<!-- FONTS --><!-- Roboto, Yellowtail, and Montserrat --><link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto:300,400|Yellowtail" rel="stylesheet"><!-- PAGE STUFF --><div class="overlay"><div class="abs-center overlay-card"><div class="close">X</div><div class="floated overlay-image"><div class="abs-center post-image"></div></div><div class="floated overlay-desc"><div class="rela-block desc-title"></div><div class="rela-block desc-author"></div><div class="rela-block desc-desc"></div></div></div></div><div class="nav-bar"><div class="horz-center nav-container"><div class="floated logo">control flow</div><ul class="floated nav-div nav-links"><li class="rela-inline">Shots</li><li class="rela-inline">Designers</li><li class="rela-inline">Teams</li><li class="rela-inline">Community</li><li class="rela-inline">Jobs</li></ul><ul class="floated nav-div"><li class="rela-inline menu-toggle">•••</li></ul><div class="floated right nav-div search-container"><div class="rela-inline icon search-icon"></div><input type="text" placeholder="Search" class="rela-inline nav-search"/></div><ul class="floated right nav-div sign-div"><li class="rela-inline">Sign-Up</li><li class="rela-inline">Sign-In</li></ul><div class="menu-card"><div class="abs-center menu-background"></div><div class="menu-content"><ul class="menu-links sub-nav-links"><li class="rela-block">Shots</li><li class="rela-block">Designers</li><li class="rela-block">Teams</li><li class="rela-block">Community</li><li class="rela-block">Jobs</li></ul><ul class="menu-links"><li class="rela-block">About</li><li class="rela-block">Shop</li><li class="rela-block">Support</li><li class="rela-block">Tags</li><li class="rela-block">Contact</li></ul><ul class="menu-links sign-links"><li class="rela-block">Sign-Up</li><li class="rela-block">Sign-In</li></ul></div></div></div></div><div class="rela-block container"><div class="rela-block profile-card"><div class="profile-pic" id="profile_pic"></div><div class="rela-block profile-name-container"><div class="rela-block user-name" id="user_name">User Name Here</div><div class="rela-block user-desc" id="user_description">User Description Here</div></div><div class="rela-block profile-card-stats"><div class="floated profile-stat works" id="num_works">28<br></div><div class="floated profile-stat followers" id="num_followers">112<br></div><div class="floated profile-stat following" id="num_following">245<br></div></div></div><div class="rela-block content"><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div><div class="rela-inline image"></div></div><div class="rela-inline button more-images" onclick="add_images(); inf_scroll = true;">More Images</div></div><div class="rela-block footer"><p>FOOTER</p><br><p>Classic deluxe custom designer luxury prestige high-quality premium select gourmet pocket pencil sharpener.<br><br>Yours for the asking, no purchase necessary. It's our way of saying thank you.</p></div>
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
* {
box-sizing: border-box;
-webkit-transition: 0.3s cubic-bezier(0.75, 0, 0.2, 1), color 0.3s ease;
transition: 0.3s cubic-bezier(0.75, 0, 0.2, 1), color 0.3s ease;
}
.rela-block {
display: block;
position: relative;
margin: auto;
top: ;
left: ;
right: ;
bottom: ;
}
.rela-inline {
display: inline-block;
position: relative;
margin: auto;
top: ;
left: ;
right: ;
bottom: ;
}
.floated {
display: inline-block;
position: relative;
margin: false;
top: ;
left: ;
right: ;
bottom: ;
float: left;
}
.floated.right {
float: right;
}
.abs-center {
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
//https://d13yacurqjgara.cloudfront.net/users/1387536/screenshots/3115905/dribbble_20161126.png
//https://s-media-cache-ak0.pinimg.com/564x/5f/cc/e4/5fcce4b2de8e80e1364146be06b1c015.jpg
//http://abload.de/img/gta_sa2015-09-1323-33pgunm.png
//http://inspiring.online/
// https://d13yacurqjgara.cloudfront.net/users/1014040/screenshots/3134277/softwood_sky_za_animaciju_2.gif
var inf_scroll = false;
// Database for the page - Will be populated by the API Call
var db = {img:{}};
// Assign pictures to the initial images
function init_images() {
var total_images = $('.image').length;
for(var i = 0; i < total_images; i++) {
$('.image').eq(i).addClass('image'+i);
$('.image'+i).css('background','url("'+db.img[i].src+'") center no-repeat')
}
}
// Add more images and assigning the background images
function add_images() {
var total_images = $('.image').length; // Getting total number of images on the page.
for(var i = 1; i < 13; i++){
var this_num = total_images + i;
// Check for end of images
if(this_num > Object.keys(db.img).length) {$('.more-images').addClass('inactive'); inf_scroll = false; return false;};
$('.content').append('<div class="rela-inline image image'+this_num+'"></div>');
$('.image'+this_num).css('background','url("'+db.img[this_num - 1].src+'") center no-repeat')
};
if((total_images + 7) > Object.keys(db.img).length) {
$('.more-images').addClass('inactive');
inf_scroll = false;
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 PRO
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: