Bootstrap snippet: portfolio list

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: portfolio



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <section class="content-item" id="portfolio"> <div class="container"> <div class="content-headline"> <h2>Portfolio</h2> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> </div> <div class="portfolio-filter"> <div class="btn-group btn-group-lg"> <a class="btn btn-normal active" data-filter="*">All</a> <a class="btn btn-normal" data-filter=".design">Design</a> <a class="btn btn-normal" data-filter=".photography">Photography</a> <a class="btn btn-normal" data-filter=".icons">Icons</a> </div> </div> <div class="portfolio-wrapper portfolio-init" style="position: relative; height: 480px;"> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item design icons" style="position: absolute; left: 0px; top: 0px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_01.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_01.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <h4>Experimental Fashion Photo</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item photography" style="position: absolute; left: 285px; top: 0px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_02.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_02.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>Interior Design Photography</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item icons" style="position: absolute; left: 570px; top: 0px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_03.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_03.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>Photorealistic Stationery</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item icons" style="position: absolute; left: 855px; top: 0px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_04.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_04.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>Branding Mockup</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item design icons" style="position: absolute; left: 0px; top: 240px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_05.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_05.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>Gentlemen’s Club</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item design" style="position: absolute; left: 285px; top: 240px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_06.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_06.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>Photorealistic Magazine</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item photography icons" style="position: absolute; left: 570px; top: 240px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_07.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_07.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>Nerdial UI Kit</h4> </div> <!-- PORTFOLIO ITEM - END --> <!-- PORTFOLIO ITEM - START --> <div class="portfolio-item design" style="position: absolute; left: 855px; top: 240px;"> <div class="overlay-wrapper"> <img src="http://demos.pixelized.cz/supreme/v1.1/assets/images/image_08.JPG" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_08.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#"><i class="fa fa-link"></i></a> </span> </div> <h4>The December Bundle</h4> </div> <!-- PORTFOLIO ITEM - END --> </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; } .portfolio-filter { text-align:center; margin:0 0 25px; } .portfolio-filter .btn { margin-right:5px; margin-bottom:5px; } .portfolio-wrapper { margin-bottom:30px; } .portfolio-wrapper .portfolio-item { text-align:center; width:25%; float:left; padding:5px; min-height:240px; } .portfolio-wrapper .portfolio-item h4 { background-color:#333333; color:#F0F0F0; padding:10px 15px; margin:0; font-size:16px; line-height:26px; } .portfolio-item.single { text-align:center; } #portfolio-carousel { padding:0 70px; margin-bottom:30px; } .portfolio-item.single .portfolio-body { padding:0 100px; } .portfolio-body p { font-size:18px; line-height:30px; } .portfolio-body .brands { margin-top:30px; } .portfolio-body .brands li a { background-color:#DDDDDD; } div ul.blog-tags li i, div .box.tags ul li i { color:#FFFFFF; position:relative; top:1px; font-size:14px; } .overlay-wrapper { position:relative; } .overlay-wrapper .overlay { bottom:0; left:0; opacity:0; overflow:hidden; position:absolute; right:0; top:0; text-align:center; padding-top:25%; transition:all 0.4s ease; } .overlay-wrapper .overlay a { font-size:20px; width:50px; height:50px; color:#FFFFFF; display:inline-block; text-align:center; padding-top:12px; border-radius:50%; margin-right:15px; opacity:0.8; } .overlay-wrapper .overlay a:last-child { margin-right:0; } .overlay-wrapper .overlay a:hover { background-color:#333333; color:#FFFFFF; } .overlay-wrapper:hover .overlay { background-color:rgba(0,0,0,0.5); opacity:1; } @media (min-width:992px) and (max-width:1199px) { .portfolio-wrapper .portfolio-item h4 { min-height:72px; } .portfolio-item.single .portfolio-body { padding:0 50px; } } @media (min-width:768px) and (max-width:991px) { .overlay-wrapper .overlay a { font-size:15px; width:40px; height:40px; padding-top:9px; } .portfolio-wrapper .portfolio-item { min-height:195px; } .portfolio-wrapper .portfolio-item h4 { min-height:72px; } .portfolio-item.single .portfolio-body { padding:0; } #about-project .project-feature .row > div:first-child img { margin-bottom:30px; } }
Dey-Dey

portfolio list

Dey-Dey
  Mar 12th, 21:21
89 Views