"pure css box "
Bootstrap 3.3.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- Playlist Wrapper Start --> <div class="wrapper position white shadow cf"> <!-- Header Start --> <div class="row"> <!-- Thumbnail Start --> <div class="col-3 tablet-col-persist shadow2"> <img class="thumbnail" src="https://decorator.io/media/tjb/big.jpg"/> </div> <!-- Thumbnail End --> <!-- About Start --> <div class="col-9 tablet-col-persist padding-20 lh"> <!-- Title Start --> <h4>The Jungle Book <span class="label orange-red border">2016</span></h4> <!-- Title End --> <!-- Rating Start --> <div class="rating"> <span>☆</span><span>☆</span><span class="a">☆</span><span class="a">☆</span><span class="a">☆</span> </div> <!-- Rating End --> <!-- Info Start --> <p><span class="text-strong">Duration:</span> 1h 46min</p> <p><span class="text-strong">Release Date:</span> 15 April 2016 (USA)</p> <p><span class="text-strong">Director:</span> Jon Favreau</p> <p><span class="text-strong">Writers:</span> Justin Marks (screenplay), Rudyard Kipling (book)</p> <p><span class="text-strong">Starts:</span> Neel Sethi, Bill Murray, Ben Kingsley</p> <!-- Info End --> <!-- Genre Start --> <div class="pull-left width-100 margin-top"> <a href="#" class="label orange-red hover-tooltip"> <span class="tooltip top text-capitalize">View Action</span> Action </a> <a href="#" class="label orange-red hover-tooltip"> <span class="tooltip top text-capitalize">View Adventure</span> Adventure </a> <a href="#" class="label orange-red hover-tooltip"> <span class="tooltip top text-capitalize">View Comedy</span> Comedy </a> </div> <!-- Genre End --> </div> <!-- About End --> </div> <!-- Header End --> <!-- Table Start --> <div class="row padding-20"> <table class="hover"> <thead> <tr class="text-13"> <th class="-padding-left">Tmb</th> <th>Cast Name</th> <th>Playing</th> <th></th> </tr> </thead> <tbody> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/1.jpg" /> </td> <td>Neel Sethi</td> <td>Mowgli</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/2.jpg" /> </td> <td>Bill Murray</td> <td>Baloo (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/3.jpg" /> </td> <td>Ben Kingsley</td> <td>Bagheera (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/4.jpg" /> </td> <td>Idris Elba</td> <td>Shere Khan (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/5.jpg" /> </td> <td>Lupita Nyong'o</td> <td>Raksha (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/6.jpg" /> </td> <td>Scarlett Johansson</td> <td>Kaa (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/7.jpg" /> </td> <td>Giancarlo Esposito</td> <td>Akela (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/8.jpg" /> </td> <td>Christopher Walken</td> <td>King Louie (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> <!-- Tr Start --> <tr> <td class="w35 -padding-left"> <img class="thumbnail" src="https://decorator.io/media/tjb/9.jpg" /> </td> <td>Emjay Anthony</td> <td>Young Wolf #1 (voice)</td> <td class="text-right"> <!-- Action Start --> <div class="action"> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">View More</span> <i class="fa fa-external-link"></i> </a> <a href="#" class="btn icon s orange-red border rounded hover-tooltip"> <span class="tooltip top">Bookmark</span> <i class="fa fa-bookmark-o"></i> </a> </div> <!-- Action End --> </td> </tr> <!-- Tr End --> </tbody> </table> </div> <!-- Table End --> <!-- Storyline Start --> <div class="row padding-20 padding-top-10"> <h6 class="text-strong">Related</h6> <div class="row"> <!-- Related Left Start --> <div class="col-6 tablet-col-persist"> <div class="col-gutter-10 cf"> <div class="col-3 tablet-col-persist"> <a class="pull-left" href="#"> <img class="thumbnail" src="https://decorator.io/media/tjb/b-1.jpg" /> </a> </div> <div class="col-3 tablet-col-persist"> <a class="pull-left" href="#"> <img class="thumbnail" src="https://decorator.io/media/tjb/b-4.jpg" /> </a> </div> <div class="col-3 tablet-col-persist"> <a class="pull-left" href="#"> <img class="thumbnail" src="https://decorator.io/media/tjb/b-2.jpg" /> </a> </div> <div class="col-3 tablet-col-persist"> <a class="pull-left" href="#"> <img class="thumbnail" src="https://decorator.io/media/tjb/b-3.jpg" /> </a> </div> </div> </div> <!-- Related Left End --> <!-- Box Office Start --> <div class="col-6 tablet-col-persist padding-left-20"> <h5 class="padding-v-10">Box Office</h5> <p><span class="text-strong text-orange-red">Budget:</span> $175,000,000 (estimated)</p> <p><span class="text-strong text-orange-red">Opening Weekend:</span> $103,261,464 (USA)</p> <p><span class="text-strong text-orange-red">Gross:</span> $202,218,804 (USA) (26 April 2016)</p> </div> <!-- Box Office End --> </div> </div> <!-- Storyline End --> </div> <!-- Playlist Wrapper End -->
/* Modulr.css --------------------- @desc: Modular CSS Framework @author: Decorator.io @twitter: https://www.twitter.com/_uloga @source: http://www.decorator.io/modulr \--------------------------------------------*/ /* __ inspired by google play __ */ body{ background: #eee; } /* __ content edits __ */ .wrapper{ width: 680px; } .thumbnail{ float: left; width: 100%; } .lh p, .lh .margin-top{ padding-left: 2px; } .w35{ width: 35px; } /* __ rating __ */ .rating { unicode-bidi: bidi-override; direction: rtl; text-align: left; margin: 2px 0 5px 0; } .rating a, .rating span{ font-size: 21px; } .rating > span { display: inline-block; position: relative; width: 1em; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: "\2605"; position: absolute; color: #FF5722; cursor: pointer; } .rating .a{ color: #FF5722; } /* __ table edits __ */ .action{ visibility: hidden; } table tr:hover .action{ visibility: visible; } table td, table th { border-top: 1px solid #eee; padding: 8px; } /* __ modifiers __ */ .shadow{ box-shadow: 0 0 6px rgba(0,0,0,0.27); } .shadow2{ box-shadow: 0 0 4px #8d8d8d; } .position{ margin: 50px auto; }

Questions / Comments: