<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 ---------->
<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="http://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>
@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;
}
$('#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
});
});
