Bootstrap snippet: gallery item

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: images,gallery



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <section class="content-item grey" id="gallery-item"> <div class="container"> <div class="row"> <div class="col-sm-8"> <img src="http://lorempixel.com/550/350/nature/5/" class="img-responsive" alt=""> </div> <div class="col-sm-4"> <h2>Landscape of Lake</h2> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="box"> <ul class="list-unstyled"> <li><i class="fa fa-calendar"></i>26/02/2014</li> <li><i class="fa fa-eye"></i>125 Views</li> <li><i class="fa fa-comment"></i>4 Comments</li> </ul> </div> <a href="#" class="btn btn-normal show-image">Full Size</a> <a href="#comments" class="btn btn-normal scroll">Add Comment</a> </div> </div> </div> </section>
body{margin-top:20px;} .content-item { padding:30px 0; background-color:#FFFFFF; } .content-item.grey { background-color:#F0F0F0; padding:50px 0; height:100%; } .content-item h2 { font-weight:700; font-size:35px; line-height:45px; text-transform:uppercase; margin:20px 0; } .content-item h3 { font-weight:400; font-size:20px; color:#555555; margin:10px 0 15px; padding:0; } .content-headline { height:1px; text-align:center; margin:20px 0 70px; } .content-headline h2 { background-color:#FFFFFF; display:inline-block; margin:-20px auto 0; padding:0 20px; } .grey .content-headline h2 { background-color:#F0F0F0; } .content-headline h3 { font-size:14px; color:#AAAAAA; display:block; } /* BOXES */ .box { background-color:#FFFFFF; padding:10px 20px; box-shadow:0 1px 2px 0 rgba(0,0,0,0.1); margin-bottom:20px; } .box h3 { margin:30px 0 5px; font-weight:bold; } .box ul { margin:0; } .box ul li { font-size:13px; border-bottom:1px dashed #DDDDDD; padding:10px 0; font-weight:600; } .box ul li:last-child { border-bottom:0; } .box ul li i { font-size:18px; margin-right:20px; } .box.categories ul li i { color:#BBBBBB; position:relative; top:2px; width:20px; } .posts ul li a { font-size:14px; line-height:23px; } .posts ul li a:hover { color:#333333; } .posts ul li div { font-size:13px; color:#999999; font-weight:bold; text-align:right; margin-top:5px; } .box.posts ul li i { color:#333333; font-size:14px; margin-right:10px; } .box.tags ul.blog-tags li { border:0; } ul.blog-tags li { padding:7px 0; } div ul.blog-tags li i, div .box.tags ul li i { color:#FFFFFF; position:relative; top:1px; font-size:14px; } #gallery .row { margin:0; } #gallery .row > div { padding:0; } #gallery .overlay-wrapper:hover .overlay { background-color:rgba(0,0,0,0.7); } #gallery-item h2 { font-size:20px; margin-top:0; } #gallery-item img { background-color:#FFFFFF; border:3px solid #999999; padding:7px; }
Dey-Dey

gallery item

Dey-Dey
  Apr 9th, 21:53
1.3K Views