"smashq new layout"
Bootstrap 2.3.2 Snippet by gbdevteam

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> <div class="profile-user"> <div class="row-fluid"> <div class="span6"> <div class="pull-left"> <div class='col-sm-6 col-xs-6 col-md-6 col-lg-6' style = "width: 100%;"> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/667x890.png"> <img class="img-responsive" alt="" src="http://placehold.it/320x426" /> </a> </div> </div> </div> <div class="span6" > <h2>AJ Applegate </h2> <ul class="inline user-counts-list"> <li>Photos <span class="count">100</span></li> <li>Followers <span class="count">50</span></li> <li>Following <span class="count">130</span></li> </ul> <p class = "bio"> <strong>Hey Baby! It's your girl AJ :) This is the place to find all my exclusive content, and get to know the real me. I post on my snapchat everyday, and make sure to give you a fun variety of shows. I love to get naughty, so please send me all the dirty pics/vids you want! We can even direct message! When you send me a special tip, I like to thank you by sending you a personal snap. Talk to you soon! X, AJ Applegate</strong> </p> </div> </div> </div> <div class="feed-photos"> <div class="row-fluid"> <div class="span12"> <ul class="thumbnails user-media-thumbnails"> <li class="span2"> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/667x890.png"> <img class="img-responsive" alt="" src="http://placehold.it/145x194" /> <div class='text-right'> </div> <!-- text-right / end --> </a> </li> <li class="span2"> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/667x890.png"> <img class="img-responsive" alt="" src="http://placehold.it/145x194" /> <div class='text-right'> </div> <!-- text-right / end --> </a> </li> <li class="span2"> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/667x890.png"> <img class="img-responsive" alt="" src="http://placehold.it/145x194" /> <div class='text-right'> </div> <!-- text-right / end --> </a> </li> <li class="span2"> <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/667x890.png"> <img class="img-responsive" alt="" src="http://placehold.it/145x194" /> <div class='text-right'> </div> <!-- text-right / end --> </a> </li> </ul> </div> </div> </div>
.feed-photos { max-width: 968px; margin: 0 auto; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .feed-photos { ul.thumbnails{ margin: 15px 10px; } .thumbnail{ background: #fff; } } /*sizing for thumbnails*/ .profile-user { position: relative; max-width: 964px; min-height: 75px; margin: 0 auto; padding: 10px 0px 15px; } .compContainer { position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin-left: 0; margin-top: 1px; background-color: #000; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .compNoComp .compContainer, .compContainerLoading { background-color: #444; } .compPhoto { position: absolute; height: 50%; width: 20%; margin: 0 0 0 -1px; .compFrontside, .compFlipside { bottom: 1px; left: 1px; position: absolute; right: 0; top: 0; -webkit-transition: opacity .6s ease-out; -moz-transition: opacity .6s ease-out; -o-transition: opacity .6s ease-out; transition: opacity .6s ease-out; } } .compPhotoShadow { border: 1px solid rgba(255, 255, 255, 0.15); bottom: 0; display: block; left: 0; position: absolute; right: 0; top: 0; } .meta{ text-align:center; color: #999; } a:hover{ text-decoration: none !important; } } .gallery { display: inline-block; margin-top: 20px; } .bio{ font-size: 16px; line-height: 24px; color: #252525; font-weight: 400; display: inline-block; display: -moz-inline-box; *display: inline; /* For IE7 */ zoom: 1; /* Trigger hasLayout */ width: 100%; font-family: museo_sans_cyrl_500, Arial, sans-serif; text-align: left; } ul.thumbnails li{ margin: 15px !important; }
$(document).ready(function(){ //FANCYBOX //https://github.com/fancyapps/fancyBox $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); });

Related: See More


Questions / Comments: