"card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/eslamaboudesheesh/pen/ZOdGEp?depth=everything&order=popularity&page=15&q=movie&show_forks=false" /> <style class="cp-pen-styles">@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Lato:400,300,700); @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); body { background: #313131; } @media (max-width: 768px) { .container { width: 250px !important; height: 950px !important; overflow: hidden; } .container .about-movie { display: inline-block !important; } .container .about-movie p { width: 49% !important; padding-left: 15px; padding-right: 15px; } } .movie-card { font: 14px/22px "Lato", Arial, sans-serif; color: #A9A8A3; padding: 40px 0; } .movie-card .container { margin: 0 auto; width: 680px; height: 640px; background: #F0F0ED; border-radius: 5px; position: relative; } .movie-card .container a img { max-width: 550px; max-height: 250px; } .movie-card .container .back-cover { height: 342px; margin: 0; position: relative; overflow: hidden; z-index: 1; border-top-left-radius: 5px; border-top-right-radius: 5px; } .movie-card .container .back-cover:before { content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("http://laughingsquid.com/wp-content/uploads/bbillo2.jpg"); z-index: -1; background-repeat: no-repeat; background-size: cover; transform: skewY(-3.2deg); transform-origin: 0 0; } .movie-card .container .cover { position: absolute; top: 160px; left: 40px; z-index: 2; } .movie-card .container .cover:hover { opacity: 0.9; cursor: pointer; } .movie-card .container .details { padding: 238px 0 0 268px; } .movie-card .container .details .title1 { color: #eee; font-size: 44px; margin-bottom: 16px; position: relative; } .movie-card .container .details .title1 span { position: absolute; top: 3px; margin-left: 12px; background: #C4AF3D; border-radius: 5px; color: #544C21; font-size: 14px; padding: 0px 4px; } .movie-card .container .title2 { color: white; font-size: 15px; font-weight: 600; margin-bottom: 15px; } .movie-card .container .likes { margin-left: 30px; display: inline-block; padding-bottom: 19px; } .movie-card .container .likes:before { content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/icon_like.png"); position: relative; top: 2px; padding-right: 7px; } .movie-card .container .about-movie { display: inline-flex; bottom: 0px; height: 200px; font-size: 16px; line-height: 26px; color: #B1B0AC; } .movie-card .container .about-movie .colum-one { padding-left: 50px; padding-top: 90px; width: 220px; float: left; text-align: left; } .movie-card .container .about-movie .colum-one .colum-catogary { text-align: left; margin-left: -20px; } .movie-card .container .about-movie .colum-one .colum-catogary span { padding: 1px 8px; font-size: 14px; background: white; border-radius: 10px; margin-left: 2px; } .movie-card .container .about-movie .colum-one .colum-catogary span:hover { background: #999; color: white; cursor: pointer; } .movie-card .container .about-movie .colum-second { padding-left: 38px; padding-top: 21px; margin-left: -39px; width: 480px; float: left; } .movie-card .container .about-movie .colum-second p { width: 76%; } .movie-card .container .about-movie .colum-second p a { text-decoration: none; color: #6e6ed8; } /*start rate system style */ fieldset { border-color: #fff; border-style: none; } .starRating { margin-left: -22px; } .starRating > * { float: left; } /* some animtion do when load window */ @-webkit-keyframes pulse { 50% { color: #5e5e5e; text-shadow: 0 0 15px #777777; } } @keyframes pulse { 50% { color: #5e5e5e; text-shadow: 0 0 15px #777777; } } .starRating label { height: 40px; width: 15%; position: relative; cursor: pointer; } .starRatinglabel:nth-of-type(5):after { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .starRating label:nth-of-type(4):after { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .starRating label:nth-of-type(3):after { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .starRating label:nth-of-type(2):after { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .starRating label:nth-of-type(1):after { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; } .starRating label:after { -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; position: absolute; content: "☆"; color: #444; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-size: 40px; -webkit-animation: 1s pulse ease; animation: 1s pulse ease; } .starRating label:hover:after { color: #5e5e5e; text-shadow: 0 0 15px #5e5e5e; } .starRating input { display: none; } /* " +" This will only work on IE7 or above. In IE6, the style will not be applied to any elements so used "~ " this meaning select any element after the input radio button show http://jsfiddle.net/7c05m7tv/ https://css-tricks.com/almanac/selectors/a/adjacent-sibling/ http://jsfiddle.net/7c05m7tv/70/ */ .starRating input:checked + label:after, .starRating input:checked ~ label:after { content: "★"; color: #F9BF3B; text-shadow: 0 0 20px #F9BF3B; } .myName { position: absolute; top: 1em; left: 1em; padding: 5px 15px; color: #FFF; font-family: arial; width: 30%; } .myName a { color: #FFF; text-decoration: none; font-size: 1.3em; font-weight: normal; float: left; margin-top: 3%; margin-left: 3%; } .myName a:hover { text-decoration: underline; } .myName img { width: 50px; border-radius: 50%; float: left; } </style></head><body> <div class="movie-card"> <div class="container"> <a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/454262/MV5BMTQ0ODYzODc0OV5BMl5BanBnXkFtZTgwMDk3OTcyMDE%40._V1_SY1000_CR0%2C0%2C678%2C1000_AL_.jpg" alt="cover" class="cover" /></a> <div class="back-cover"> <div class="details"> <div class="title1">Breaking Bad <span>TV-14</span></div> <div class="title2"> TV Series (2008–2013) </div> </div> <!-- end details --> </div> <div class="about-movie"> <div class="colum-one"> <fieldset class="starRating"> <!--HTML5 Custom Data Attributes (data-*)--> <input id="rating1" type="radio" data-length="1" name="rating" value="1"> <label for="rating1"></label> <input id="rating2" data-length="2" type="radio" name="rating" value="2" checked> <label for="rating2"></label> <input id="rating3" type="radio" data-length="3" name="rating" value="3"> <label for="rating3"></label> <input id="rating4" data-length="4" type="radio" name="rating" value="4"> <label for="rating4"></label> <input id="rating5" data-length="5" type="radio" name="rating" value="5"> <label for="rating5"></label> </fieldset> <span class="likes">90 likes</span> <div class="colum-catogary"> <span class="tag">Crime</span> <span class="tag">Drama</span> <span class="tag">Thriller</span> <div> <!--HTML5 Custom Data Attributes (data-*)--> </div> <!--end colum-one --> </div> </div> <!--end colum-one --> <div class="colum-second"> <p> When chemistry teacher Walter White is diagnosed with Stage III cancer and given only two years to live, he decides he has nothing to lose.A high school chemistry teacher diagnosed with inoperable lung cancer turns to manufacturing and selling methamphetamine in order to secure his family's financial future...<a href="#"> read more </a> </p> </div> </div> <!--end -about-movie --> </div> <!--end container --> </div> <!--end movie-card--> <div class="myName"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/454262/profile/profile-80_2.jpg"> <a href="https://codepen.io/collection/DpbVvq/" target="_blank"> Eslam UI</a> </div> </body></html>

Related: See More

Now UI Dashboard PRO
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: