"card"
Bootstrap 3.0.0 Snippet by evarevirus

<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/x33q/pen/KdxGRO?depth=everything&order=popularity&page=14&q=pack&show_forks=false" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600); @import url(http://weloveiconfonts.com/api/?family=entypo); /* fontawesome */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; position: relative; top: 8px; left: 50%; margin-left: -6px; } h1, h2, p, ul, li, button, .counter, .likes, #credits { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } html, body { margin: 0; overflow: hidden; height: 100%; background: rgb(236, 223, 230); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(236, 223, 230, 1)), color-stop(100%, rgba(212, 225, 231, 1))); background: -webkit-linear-gradient(-45deg, rgba(236, 223, 230, 1) 0%, rgba(212, 225, 231, 1) 100%); background: -webkit-linear-gradient(315deg, rgba(236, 223, 230, 1) 0%, rgba(212, 225, 231, 1) 100%); background: linear-gradient(135deg, rgba(236, 223, 230, 1) 0%, rgba(212, 225, 231, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ecdfe6', endColorstr='#d4e1e7', GradientType=1); } body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #container { width: 575px; height: 400px; position: relative; overflow: hidden; } #shadow { width: 550px; height: 365px; position: absolute; opacity: 1; filter: alpha(opacity=100); top: 50%; margin-top: -165px; left: 50%; margin-left: -262px; z-index: 0; box-shadow: 16px 16px 22px 2px rgba(74, 94, 127, 0.2); opacity: 0; filter: alpha(opacity=0); -webkit-animation: shadow 1.2s forwards; animation: shadow 1.2s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes shadow { 0% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @keyframes shadow { 0% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } #mainimage { width: 490px; height: 300px; background: #2b3950; background-size: cover; position: absolute; top: -300px; left: 0; z-index: 5; overflow: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-animation: mainimage 0.8s forwards; animation: mainimage 0.8s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes mainimage { 0% { opacity: 0; filter: alpha(opacity=0); top: -300px; } 100% { opacity: 1; filter: alpha(opacity=100); top: 0; } } @keyframes mainimage { 0% { opacity: 0; filter: alpha(opacity=0); top: -300px; } 100% { opacity: 1; filter: alpha(opacity=100); top: 0; } } #sidepanel { width: 85px; height: 180px; background: #4a5e7f; position: absolute; top: 35px; right: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-animation: sidepanel 0.8s forwards; animation: sidepanel 0.8s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes sidepanel { 0% { opacity: 0; filter: alpha(opacity=0); top: 180px; } 100% { opacity: 1; filter: alpha(opacity=100); top: 35px; } } @keyframes sidepanel { 0% { opacity: 0; filter: alpha(opacity=0); top: 180px; } 100% { opacity: 1; filter: alpha(opacity=100); top: 35px; } } #next, #previous { display: block; width: 46px; height: 46px; cursor: pointer; position: absolute; font-size: 1.5em; overflow: hidden; left: 19px; border-radius: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } #next { color: #8799af; border: 2px solid #8799af; top: 25px; padding-left: 3px; opacity: 0; filter: alpha(opacity=0); -webkit-animation: next 0.5s forwards; animation: next 0.5s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes next { 0% { opacity: 0; filter: alpha(opacity=0); left: -85px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 19px; } } @keyframes next { 0% { opacity: 0; filter: alpha(opacity=0); left: -85px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 19px; } } #previous { color: #687ea1; border: 2px solid #687ea1; top: 80px; padding-right: 4px; opacity: 0; filter: alpha(opacity=0); -webkit-animation: previous 0.5s forwards; animation: previous 0.5s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes previous { 0% { opacity: 0; filter: alpha(opacity=0); left: 85px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 19px; } } @keyframes previous { 0% { opacity: 0; filter: alpha(opacity=0); left: 85px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 19px; } } #next:hover, #previous:hover { border-color: #FFF; background: #FFF; color: #4a5e7f; } .entypo-right-open-big, .entypo-left-open-big { display: block; position: absolute; top: 0; } .entypo-right-open-big { left: 20px; } .entypo-left-open-big { left: 16px; } .animnext { left: 19px; opacity: 1; filter: alpha(opacity=100); -webkit-animation: animnext 0.6s forwards; animation: animnext 0.6s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } @-webkit-keyframes animnext { 0% { opacity: 1; filter: alpha(opacity=100); left: 19px; } 33% { opacity: 0; filter: alpha(opacity=0); left: 46px; } 66% { opacity: 0; filter: alpha(opacity=0); left: -46px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 19px; } } @keyframes animnext { 0% { opacity: 1; filter: alpha(opacity=100); left: 19px; } 33% { opacity: 0; filter: alpha(opacity=0); left: 46px; } 66% { opacity: 0; filter: alpha(opacity=0); left: -46px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 19px; } } .animprev { left: 16px; opacity: 1; filter: alpha(opacity=100); -webkit-animation: animprev 0.3s forwards; animation: animprev 0.3s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } @-webkit-keyframes animprev { 0% { opacity: 1; filter: alpha(opacity=100); left: 16px; } 33% { opacity: 0; filter: alpha(opacity=0); left: -46px; } 66% { opacity: 0; filter: alpha(opacity=0); left: 46px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 16px; } } @keyframes animprev { 0% { opacity: 1; filter: alpha(opacity=100); left: 16px; } 33% { opacity: 0; filter: alpha(opacity=0); left: -46px; } 66% { opacity: 0; filter: alpha(opacity=0); left: 46px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 16px; } } #ratingbox { width: 85px; height: 85px; background: #ff5379; position: absolute; bottom: 100px; right: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-animation: ratingbox 0.8s forwards; animation: ratingbox 0.8s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes ratingbox { 0% { opacity: 0; filter: alpha(opacity=0); right: 165px; } 100% { opacity: 1; filter: alpha(opacity=100); right: 0; } } @keyframes ratingbox { 0% { opacity: 0; filter: alpha(opacity=0); right: 165px; } 100% { opacity: 1; filter: alpha(opacity=100); right: 0; } } .counter { font-weight: 300; font-size: 2em; color: #FFF; text-align: center; position: absolute; top: 20px; left: 20px; } #infopanel { width: 550px; height: 100px; background: #FFF; position: absolute; bottom: 0; right: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-animation: infopanel 0.8s forwards; animation: infopanel 0.8s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes infopanel { 0% { opacity: 0; filter: alpha(opacity=0); right: -275px; } 100% { opacity: 1; filter: alpha(opacity=100); right: 0; } } @keyframes infopanel { 0% { opacity: 0; filter: alpha(opacity=0); right: -275px; } 100% { opacity: 1; filter: alpha(opacity=100); right: 0; } } h1, h2 { text-align: left; position: absolute; left: 35px; text-transform: uppercase; opacity: 0; filter: alpha(opacity=0); -webkit-animation: titles 0.8s forwards; animation: titles 0.8s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } @-webkit-keyframes titles { 0% { opacity: 0; filter: alpha(opacity=0); left: -185px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 35px; } } @keyframes titles { 0% { opacity: 0; filter: alpha(opacity=0); left: -185px; } 100% { opacity: 1; filter: alpha(opacity=100); left: 35px; } } h1 { top: 30px; color: #2a394b; font-weight: 600; font-size: 1em; } h2 { top: 52px; color: #9da7b1; font-weight: 400; font-size: 0.7em; } #stars { width: 83px; height: auto; position: absolute; top: 22px; left: 165px; font-size: 1.2em; color: #ff5379; margin: 0; padding: 0; } .entypo-star-empty { float: left; margin: 0 6px 0 0; padding: 0; } button { position: absolute; top: 29px; right: 35px; background: #ff5379; border: 0; border-radius: 4px; text-align: left; padding: 10px 30px 12px 30px; font-weight: 400; color: #FFF; text-transform: uppercase; cursor: pointer; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } button:hover { background: #4a5e7f; color: #FFF; } #heart { display: block; width: 46px; height: 46px; cursor: pointer; position: absolute; z-index: 2; font-size: 1.5em; overflow: hidden; left: 19px; color: #FFF; border: 2px solid rgba(255, 255, 255, 0.5); top: 25px; padding-left: 3px; border-radius: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } #heart:hover { border-color: #FFF; background: #FFF; color: #4a5e7f; } .entypo-heart { display: block; position: absolute; top: 2px; left: 9px; } .animheart { left: 9px; opacity: 1; filter: alpha(opacity=100); -webkit-animation: animheart 0.6s forwards; animation: animheart 0.6s forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } @-webkit-keyframes animheart { 0% { opacity: 1; filter: alpha(opacity=100); top: 2px; } 33% { opacity: 0; filter: alpha(opacity=0); top: -46px; } 66% { opacity: 0; filter: alpha(opacity=0); top: 46px; } 100% { opacity: 1; filter: alpha(opacity=100); top: 2px; } } @keyframes animheart { 0% { opacity: 1; filter: alpha(opacity=100); top: 2px; } 33% { opacity: 0; filter: alpha(opacity=0); top: -46px; } 66% { opacity: 0; filter: alpha(opacity=0); top: 46px; } 100% { opacity: 1; filter: alpha(opacity=100); top: 2px; } } .likes { position: absolute; top: 34px; left: 78px; color: #FFF; font-size: 1.3em; font-weight: 600px; z-index: 2; } #slides { width: 1100px; height: 300px; background: #2b3950; position: absolute; z-index: 1; top: 0; left: 0; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .skipforward { left: -490px; } #credits { width: 310px; height: auto; position: fixed; top: 20px; right: 20px; color: #999; font-weight: 400; font-size: 0.8em; } #credits a { color: #ff5379; font-weight: 600; }</style></head><body> <div id="credits">Work in progress of José Polanco's <a href="https://dribbble.com/shots/2335651-Hotel-profile-widget" title="View on Dribbble">dribbble shot</a></div> <div id="shadow"></div> <div id="container"> <div id="mainimage"> <div id="heart"><span class="entypo-heart"></span></div> <span class="likes">254</span> <div id="slides"><img src="https://s1.postimg.org/j4t3ytrkf/slidestest.jpg" title="image" /></div> </div> <div id="sidepanel"> <div id="next"><span class="entypo-right-open-big"></span></div> <div id="previous"><span class="entypo-left-open-big"></span></div> </div> <div id="ratingbox"><span class="counter">9.5</span> </div> <div id="infopanel"> <h1>La Villa Hotel</span></h1> <div id="stars"> <span class="entypo-star-empty"></span> <span class="entypo-star-empty"></span> <span class="entypo-star-empty"></span> <span class="entypo-star-empty"></span> </div> <h2>Cordoba (Spain)</h2> <button>Visit Hotel</button> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script><script src='https://www.jqueryscript.net/demo/Animating-Numbers-Counting-Up-with-jQuery-Counter-Up-Plugin/jquery.counterup.min.js'></script> <script >$('#next').hover(function() { $('.entypo-right-open-big').addClass('animnext'); }, function() { $('.entypo-right-open-big').removeClass('animnext'); }); $('#previous').hover(function() { $('.entypo-left-open-big').addClass('animprev'); }, function() { $('.entypo-left-open-big').removeClass('animprev'); }); $('#heart').hover(function() { $('.entypo-heart').addClass('animheart'); }, function() { $('.entypo-heart').removeClass('animheart'); }); $(function() { $('#next').hover(function() { $('#slides').css('left', '-490px'); }, function() { // on mouseout, reset the background colour $('#slides').css('left', '0px'); }); }); jQuery(document).ready(function($) { $('.counter').counterUp({ delay: 10, time: 2000 }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: