Bootstrap snippet: portfolio content

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,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-9 content bootstrap snippets"> <div style="position: relative; overflow: hidden; height: 1980px;" class="portfolio-wrapper isotope"> <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px); width: 250px;" class="card film art isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-1.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2> <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Art</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 0px); width: 250px;" class="card music social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-1.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Elephants Dream</a></h2> <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Music</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 0px); width: 250px;" class="card film social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-1.png" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Big Buck Bunny</a></h2> <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 396px); width: 250px;" class="card film art isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-2.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Sintel Review</a></h2> <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Art</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 396px); width: 250px;" class="card film social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-3.png" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Big Buck Bunny In CG Magazine From China</a></h2> <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 396px); width: 250px;" class="card music social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-2.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Singapore, CGOverdrive And 3dsense</a></h2> <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Music</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 792px); width: 250px;" class="card film art isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-3.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2> <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Art</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 792px); width: 250px;" class="card film social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-2.png" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Studio Harddisk Online</a></h2> <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 792px); width: 250px;" class="card music social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-3.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">High Frame Rate, 4K And Stereo 3D Release</a></h2> <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Music</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 1188px); width: 250px;" class="card film art isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-4.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2> <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Art</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 1188px); width: 250px;" class="card film social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-1.png" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Big Buck Bunny</a></h2> <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 1188px); width: 250px;" class="card music social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-2.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Elephants Dream</a></h2> <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Music</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 1584px); width: 250px;" class="card film art isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-3.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2> <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Art</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 1584px); width: 250px;" class="card film social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-3.png" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">BBB Goes Hollywood!</a></h2> <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Film</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 1584px); width: 250px;" class="card music social isotope-item"> <a href="#portfolio-item.html" class="thumb"> <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-1.jpg" alt="" title=""> <span class="overlay"><span class="fa fa-search"></span></span> </a> <div class="card-body"> <h2><a href="#portfolio-item.html">Elephants Dream</a></h2> <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p> <p><a href="#portfolio-item.html">Read More</a></p> </div><!-- end card-body --> <div class="card-footer"> <ul class="list-inline filters"> <li><a href="##none">Music</a></li> <li><a href="##none">Social</a></li> </ul> </div><!-- end card-footer --> </div><!-- end card --> </div><!-- end portfolio-wrapper --> <div class="pagination-wrapper"> <ul class="pagination"> <li class="disabled"><span>Prev</span></li> <li class="active"><a href="##none">1</a></li> <li><a href="##none">2</a></li> <li><a href="##none">3</a></li> <li><a href="##none">4</a></li> <li><a href="##none">5</a></li> <li><a href="##none">Next</a></li> </ul> </div><!-- end pagination-wrapper --> </div>
body{margin-top:20px;} .card { margin: 0 30px 30px 0; width: 250px; display: block; float: left; position: relative; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .card .thumb { display: block; position: relative; } .card .thumb img { width: 100%; height: auto; position: relative; z-index: 1; border-bottom: 1px solid #e6e6e6; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .card .thumb .overlay { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; text-align: center; background: #000; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; background: rgba(0, 0, 0, 0.65); -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .card .thumb .overlay .fa { position: relative; top: 38%; font-size: 32px; text-align: center; color: #fff; } .card .thumb:hover .overlay { display: block; } .card .card-body { padding: 10px 15px 15px; } .card .card-body h2 { margin: 0 0 3px; height: 55px; overflow: hidden; font-size: 20px; line-height: 1.4; } .card .card-body h2 a { font-weight: 500; } .card .card-body p { margin: 0; font-size: 13px; } .card .card-body .post-meta { margin: 0 0 10px; padding: 5px 0 10px; font-size: 13px; border-bottom: 1px solid #e6e6e6; color: #898989; } .card .card-body .post-meta li { margin-right: 15px; } .card .card-footer { padding: 8px 15px; background: #f6f6f6; border-top: 1px solid #e6e6e6; text-shadow: 0 1px 0 #fff; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .card .card-footer .list-inline { margin: 0; } .card .card-footer .list-inline li { font-size: 13px; color: #787878; } .card .card-footer .list-inline li a { color: #787878; } .card .card-footer .list-inline li a:hover { color: #1abc9c; } .card .card-footer .list-inline li .fa { margin-right: 5px; } .portfolio-wrapper { overflow: visible !important; } .portfolio .card h2 { margin-bottom: 10px; height: 65px; border-bottom: 1px solid #e6e6e6; }
Dey-Dey

portfolio content

Dey-Dey
  Apr 15th, 22:07
124 Views