<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/robinsavemark/pen/GpxQZV?limit=all&page=19&q=food" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,700);
*,
*:before,
*:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
overflow-x: hidden;
overflow-y: auto;
}
h1,
.h1,
h2,
.h2 {
font-weight: 300;
}
h1,
.h1 {
font-size: 30px;
}
.lighter {
font-weight: 100;
}
.light {
font-weight: 300;
}
.normal {
font-weight: 400;
}
.lowercase {
text-transform: lowercase;
}
.bold {
font-weight: 700;
}
.big {
font-size: 80px;
text-align: center;
}
@media (max-width: 767px) {
.big {
font-size: 40px;
}
}
.header {
font-weight: 200;
font-size: 50px;
}
@media (max-width: 767px) {
.header {
font-size: 30px;
}
}
h2,
.h2 {
font-size: 25px;
}
h3,
.h3 {
font-size: 12px;
font-weight: 700;
}
p {
font-size: 16px;
}
.link {
color: #ECB517;
}
.link:hover {
color: #f0c446;
text-decoration: none;
}
.blue {
color: #50788C;
}
.orange {
color: #ECB517;
}
.green {
color: #1FB725;
}
.black {
color: #333;
}
.black-lighter {
color: #595959;
}
.white {
color: #FFF;
}
.bg-orange {
background-color: #ECB517;
}
.bg-blue {
background-color: #50788C;
}
.pd-t {
padding-top: 100px;
}
@media (max-width: 767px) {
.pd-t {
padding-top: 20px;
}
}
.pd-b {
padding-bottom: 100px;
}
@media (max-width: 767px) {
.pd-b {
padding-bottom: 20px;
}
}
.air {
padding: 20px 0 20px 0;
}
.air-up {
padding-top: 20px;
padding-bottom: 0;
}
.air-down {
padding-bottom: 20px;
padding-top: 0;
}
.pd {
padding: 40px 0 40px 0;
}
.navigation {
margin: 0;
border-radius: 0;
height: 0;
}
.button {
outline: none;
border: 2px solid #FFF;
padding: 12px 16px;
margin-bottom: 20px;
width: 100%;
white-space: nowrap;
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
vertical-align: middle;
line-height: 18px;
text-align: center;
box-sizing: border-box;
text-decoration: none;
color: #50788C;
background-color: #FFF;
border-radius: 2rem;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.button:hover,
.button:focus {
text-decoration: none;
}
.button-primary-blue {
background-color: #50788C;
color: #FFF;
border-color: #50788C;
}
.button-primary-blue:hover,
.button-primary-blue:focus {
background-color: #6792a8;
color: #FFF;
border-color: #6792a8;
}
.button-primary-orange {
background-color: #ECB517;
color: #FFF;
border-color: #ECB517;
}
.button-primary-orange:hover,
.button-primary-orange:focus {
background-color: #f0c446;
color: #FFF;
border-color: #f0c446;
}
.button-primary-blue-hollow {
background-color: transparent;
border-color: #50788C;
color: #FFF;
}
.button-primary-blue-hollow:hover,
.button-primary-blue-hollow:focus {
background-color: transparent;
border-color: #6792a8;
color: #FFF;
}
.button-primary-orange-hollow {
background-color: transparent;
border-color: #ECB517;
color: #FFF;
}
.button-primary-orange-hollow:hover,
.button-primary-orange-hollow:focus {
background-color: transparent;
border-color: #f0c446;
color: #FFF;
}
.social-list li:nth-child(4):hover {
background-color: #00aced;
}
.social-list li:nth-child(3):hover {
background-color: #007bb5;
}
.social-list li:nth-child(2):hover {
background-color: #3b5998;
}
.social-list li:nth-child(1):hover {
background-color: #125688;
}
.thin-line {
margin: 30px 0 30px 0;
width: 100%;
height: 1px;
background-color: #50788c 0%;
background-image: -webkit-gradient(linear, left top, right top, from(#50788c 0%), to(#ecb517 100%));
background-image: -webkit-linear-gradient(left, #50788c 0%, #ecb517 100%);
background-image: -moz-linear-gradient(left, #50788c 0%, #ecb517 100%);
background-image: -ms-linear-gradient(left, #50788c 0%, #ecb517 100%);
background-image: -o-linear-gradient(left, #50788c 0%, #ecb517 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ECB517, endColorstr=#50788C, GradientType=1);
}
.outer-site {
overflow: hidden;
}
.inner-site {
-webkit-transition: all 850ms ease-in-out;
-moz-transition: all 850ms ease-in-out;
transition: all 850ms ease-in-out;
}
.inner-site.slide-right {
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);
}
.inner-site.slide-left {
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
.hamburger {
cursor: pointer;
position: relative;
padding: 20px 14px;
z-index: 1001;
float: left;
}
.hamburger div {
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
width: 40px;
height: 3px;
background-color: #FFF;
margin-bottom: 4px;
}
.hamburger.active div:nth-child(1) {
-webkit-transform: rotate(-45deg) translate3d(-5px, 7px, 0);
-moz-transform: rotate(-45deg) translate3d(-5px, 7px, 0);
transform: rotate(-45deg) translate3d(-5px, 7px, 0);
}
.hamburger.active div:nth-child(2) {
display: none;
}
.hamburger.active div:nth-child(3) {
-webkit-transform: rotate(45deg) translate3d(3px, 0, 0);
-moz-transform: rotate(45deg) translate3d(3px, 0, 0);
transform: rotate(45deg) translate3d(3px, 0, 0);
}
.pause {
position: fixed;
display: none;
padding: 20px;
color: #FFF;
z-index: 999999;
cursor: pointer;
}
.logo {
cursor: pointer;
position: relative;
padding: 15.38461538px 6.66666667px;
z-index: 998;
}
.logo a {
font-weight: 400;
font-size: 20px;
color: #FFF;
text-decoration: none;
}
.top-banner {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center center;
width: 100%;
height: 100vh;
min-height: 100%;
margin: 0 auto;
position: relative;
}
.top-banner-video {
z-index: 10000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
display: none;
}
.top-banner-header {
display: table;
height: 50vh;
margin: 0 auto;
min-height: 100%;
}
@media (max-width: 768px) {
.top-banner-header {
width: 100%;
}
}
.top-banner-header .inner {
display: table-cell;
vertical-align: middle;
padding: 1.5rem;
}
.top-banner-header .inner header {
padding: 1rem;
margin-bottom: 1rem;
}
.top-banner-header .inner header:before,
.top-banner-header .inner header:after {
content: "";
display: block;
height: 1px;
}
.top-banner-header .inner header.header {
background-color: #FFF;
opacity: .6;
mix-blend-mode: lighten;
text-align: center;
}
.top-banner-header .inner header.header h1 {
margin: 0;
font-weight: 300;
font-size: 8rem;
color: initial;
}
@media (max-width: 768px) {
.top-banner-header .inner header.header h1 {
font-size: 2.6rem;
}
}
.box {
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin-top: -100px;
width: 100%;
padding: 20px;
background-color: #FFF;
position: relative;
box-shadow: 0px 16px 36px -7px rgba(51, 51, 51, 0.855);
z-index: 9999;
}
@media (max-width: 1200px) {
.box {
margin-top: 40px;
}
}
.box-gradient {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.555);
z-index: 0;
}
.box header {
position: relative;
padding: 5px;
background-color: #FFF;
opacity: .6;
mix-blend-mode: lighten;
margin-bottom: 10px;
}
.box header h2 {
font-size: 33px;
}
.box p {
position: relative;
color: #FFF;
z-index: 9999;
}
.box ul {
position: relative;
padding: 10px 0;
z-index: 9999;
}
.box ul li {
margin-top: 8px;
}
.box ul li.mg-l {
margin-left: 10px;
padding-left: 10px;
}
#search {
height: 50px;
width: 100%;
position: relative;
}
@media (max-width: 767px) {
#search {
width: auto;
}
}
#search input {
box-sizing: border-box;
width: 50px;
height: 50px;
border: 1px solid #FFF;
border-radius: 100%;
background: transparent;
color: #333;
font-size: 16px;
font-weight: 400;
outline: none;
-webkit-transition: width 100ms ease-in-out;
-moz-transition: width 100ms ease-in-out;
transition: width 100ms ease-in-out;
}
#search input::-webkit-input-placeholder {
color: transparent;
}
#search input:-moz-placeholder {
color: transparent;
}
#search input::-moz-placeholder {
color: transparent;
}
#search input:-ms-input-placeholder {
color: transparent;
}
#search .search {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
padding: 0;
border-radius: 100%;
outline: none;
border: 0;
color: #FFF;
cursor: pointer;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#search .search:before,
#search .search:after {
content: "";
position: absolute;
width: 20px;
height: 4px;
background-color: #FFF;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
margin: 26px 0 0 17px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#search .close {
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
right: 0;
left: inherit;
}
#search .close:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #FFF;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#search .close:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #FFF;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#search .square {
box-sizing: border-box;
padding: 0 40px 0 10px;
width: 100%;
height: 50px;
border: 1px solid #FFF;
border-radius: 0;
color: #333;
background-color: transparent;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#search .square::-webkit-input-placeholder {
color: #333;
}
#search .square:-moz-placeholder {
color: #333;
}
#search .square::-moz-placeholder {
color: #333;
}
#search .square:-ms-input-placeholder {
color: #333;
}
#search .square.active #search .square:hover,
#search .square:focus,
#search .square:active {
border-color: #ECB517;
}
.menu {
-webkit-transition: all 850ms ease-in-out;
-moz-transition: all 850ms ease-in-out;
transition: all 850ms ease-in-out;
box-shadow: inset -2px 0px 10px 1px rgba(0, 0, 0, 0.555);
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
position: fixed;
overflow: auto;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #333;
}
.menu.open {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.menu.open .badge {
background-color: #50788C;
-webkit-animation: up 800ms 4 ease;
-moz-animation: up 800ms 4 ease;
-ms-animation: up 800ms 4 ease;
animation: up 800ms 4 ease;
}
.menu-container {
padding: 15px;
}
.menu-list li {
margin: 13.33333333px 0;
}
.menu-list li a {
color: #666666;
padding: 10px 6.66666667px 10px 0;
}
.menu-list li a.active {
color: #50788C;
}
.menu-list li a.active:hover {
color: #50788C;
}
.menu-list li a:hover {
color: #FFF;
text-decoration: none;
}
.list-horizontal li {
display: inline-block;
}
.social-list li {
border-radius: 4px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
width: 30px;
height: 30px;
padding: 5px 7px;
}
.social-list li:hover a {
color: #FFF;
}
.social-list li:first-child {
margin-left: -5px;
}
.newsfeed-box {
cursor: pointer;
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 360px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
box-shadow: 0px 16px 36px -7px rgba(51, 51, 51, 0.855);
}
.newsfeed-box-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
background-color: rgba(51, 51, 51, 0.655);
color: #FFF;
}
.newsfeed-box-content:before,
.newsfeed-box-content:after {
content: attr(data-rating-score);
position: absolute;
display: block;
right: -39px;
bottom: -8px;
width: 115px;
height: 50px;
background-color: #FFF;
font-size: 16px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
color: #50788C;
padding: 6px;
text-align: center;
font-weight: 700;
}
.newsfeed-box-content-inner {
padding-bottom: 10px;
}
.newsfeed-box-reviews {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(51, 51, 51, 0.655);
color: #FFF;
padding: 20px;
-webkit-transform: translate3d(0, -200%, 0);
-moz-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.newsfeed-box-reviews-inner {
padding-bottom: 10px;
}
.newsfeed-box:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.555);
}
.newsfeed-box:hover .newsfeed-box-content {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.newsfeed-box.active {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
box-shadow: 0px 16px 36px -7px rgba(51, 51, 51, 0.855);
}
.newsfeed-box.active .newsfeed-box-content {
-webkit-transform: translate3d(0, 200%, 0);
-moz-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
.newsfeed-box.active .newsfeed-box-reviews {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.explore-image {
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 320px;
}
.form-control {
box-sizing: border-box;
width: 100%;
height: 50px;
border: 1px solid #333;
border-radius: 0;
background: transparent;
color: #333;
font-size: 16px;
font-weight: 400;
outline: none;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.form-control::-webkit-input-placeholder {
color: #333;
}
.form-control:-moz-placeholder {
color: #333;
}
.form-control::-moz-placeholder {
color: #333;
}
.form-control:-ms-input-placeholder {
color: #333;
}
.form-control-sibling {
border-top: 1px solid transparent;
}
.form-control.active .form-control:hover,
.form-control:focus,
.form-control:active {
border-color: #ECB517;
}
.input-group-addon-holder {
position: relative;
}
.input-group-addon-holder .number-icon {
position: absolute;
top: 16px;
right: 15px;
}
.input-group-addon-holder .number-icon > i {
display: none;
color: #50788C;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.input-group-addon-holder .cvv-icon {
position: absolute;
top: 66px;
right: 15px;
}
.input-group-addon-holder .cvv-icon > i {
display: none;
color: #50788C;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.input-group-addon {
color: #333;
border-color: #333;
background-color: #FFF;
border-radius: 0;
}
.ch-inline {
width: 100%;
height: auto;
position: relative;
margin: 5px 15px 10px 0;
display: block;
}
.ch-inline.ch-inline-orange label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFF;
border-radius: 0;
border: 1px solid #4d4d4d;
}
.ch-inline.ch-inline-orange label:after {
position: absolute;
content: "";
width: 12px;
height: 12px;
top: 3px;
left: 3px;
background-color: #ECB517;
opacity: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.ch-inline input[type="checkbox"] {
visibility: hidden;
}
.ch-inline input[type="checkbox"]:checked + label:after {
opacity: 1;
}
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #333;
width: 100%;
height: 50px;
}
.select-styled {
box-sizing: border-box;
width: 100%;
height: 50px;
border: 1px solid #333;
border-radius: 0;
background: transparent;
padding: 13px 12px;
color: #333;
font-size: 16px;
font-weight: 400;
outline: none;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.select-styled:hover,
.select-styled.active {
border-color: #ECB517;
}
.select-options {
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 9999;
margin: 0;
padding: 0;
background-color: #FFF;
border-left: 1px solid #ECB517;
border-right: 1px solid #ECB517;
border-bottom: 1px solid #ECB517;
}
.select-options li {
margin: 0;
height: 50px;
padding: 13px 12px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.select-options li:first-child {
display: none;
}
.select-options li:hover {
background-color: #f0c446;
color: #FFF;
}
.fly-away {
-webkit-animation: airplane 800ms 1 ease;
-moz-animation: airplane 800ms 1 ease;
-ms-animation: airplane 800ms 1 ease;
animation: airplane 800ms 1 ease;
}
.modal {
z-index: 10000;
}
.modal-content {
border-radius: 0;
}
.modal-header {
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-369258.jpg');
background-position: center center;
width: 100%;
height: 100%;
position: relative;
}
.modal-header-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-color: rgba(236, 181, 23, 0.355) 0%;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(236, 181, 23, 0.355) 0%), to(rgba(80, 120, 140, 0.855) 100%));
background-image: -webkit-linear-gradient(left, rgba(236, 181, 23, 0.355) 0%, rgba(80, 120, 140, 0.855) 100%);
background-image: -moz-linear-gradient(left, rgba(236, 181, 23, 0.355) 0%, rgba(80, 120, 140, 0.855) 100%);
background-image: -ms-linear-gradient(left, rgba(236, 181, 23, 0.355) 0%, rgba(80, 120, 140, 0.855) 100%);
background-image: -o-linear-gradient(left, rgba(236, 181, 23, 0.355) 0%, rgba(80, 120, 140, 0.855) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ECB517, endColorstr=#50788C, GradientType=1);
}
.modal-header h2,
.modal-header p {
position: relative;
z-index: 1;
}
@media (max-width: 992px) {
.newsfeed-box-content {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 767px) {
.inner-site {
-webkit-transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
-moz-transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
}
.inner-site.slide-right {
-webkit-transform: translate3d(80%, 0, 0);
-moz-transform: translate3d(80%, 0, 0);
transform: translate3d(80%, 0, 0);
}
.inner-site.slide-left {
-webkit-transform: translate3d(-80%, 0, 0);
-moz-transform: translate3d(-80%, 0, 0);
transform: translate3d(-80%, 0, 0);
}
.top-banner {
background-size: cover;
background-attachment: initial;
width: 100%;
height: 100%;
min-height: 400px;
}
.top-banner-header {
height: auto;
min-height: 400px;
}
.menu {
width: 80%;
-webkit-transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
-moz-transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.menu.open {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.friends {
width: 80%;
-webkit-transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
-moz-transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
transition: all 300ms cubic-bezier(0.1, 0.3, 0.3, 1.45);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.friends.open {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.explore-image {
height: 280px;
}
}
@-webkit-keyframes up {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
75% {
-webkit-transform: translate3d(0, 4px, 0);
-moz-transform: translate3d(0, 4px, 0);
transform: translate3d(0, 4px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-moz-keyframes up {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
75% {
-webkit-transform: translate3d(0, 4px, 0);
-moz-transform: translate3d(0, 4px, 0);
transform: translate3d(0, 4px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes up {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
75% {
-webkit-transform: translate3d(0, 4px, 0);
-moz-transform: translate3d(0, 4px, 0);
transform: translate3d(0, 4px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes airplane {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(-30px, 30px, 0);
-moz-transform: translate3d(-30px, 30px, 0);
transform: translate3d(-30px, 30px, 0);
}
100% {
-webkit-transform: translate3d(500px, -500px, 0) scale(1.8);
-moz-transform: translate3d(500px, -500px, 0) scale(1.8);
transform: translate3d(500px, -500px, 0) scale(1.8);
}
}
@-moz-keyframes airplane {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(-30px, 30px, 0);
-moz-transform: translate3d(-30px, 30px, 0);
transform: translate3d(-30px, 30px, 0);
}
100% {
-webkit-transform: translate3d(500px, -500px, 0) scale(1.8);
-moz-transform: translate3d(500px, -500px, 0) scale(1.8);
transform: translate3d(500px, -500px, 0) scale(1.8);
}
}
@keyframes airplane {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(-30px, 30px, 0);
-moz-transform: translate3d(-30px, 30px, 0);
transform: translate3d(-30px, 30px, 0);
}
100% {
-webkit-transform: translate3d(500px, -500px, 0) scale(1.8);
-moz-transform: translate3d(500px, -500px, 0) scale(1.8);
transform: translate3d(500px, -500px, 0) scale(1.8);
}
}
</style></head><body>
<!-- Markup by Robin Savemark -->
<div class="outer-site">
<div class="inner-site" id="content">
<nav class="navigation clearfix">
<!-- HAMBURGER -->
<div class="hamburger" id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div id="pause-video" class="pause">
<i class="fa fa-pause"></i>
</div>
<div class="logo"><a href="#">Logotype here</a></div>
<!-- END OF HAMBURGER -->
</nav>
<div class="container-fluid">
<div class="row">
<!-- TOP BANNER -->
<div class="top-banner" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-369258.jpg');">
<video id="video" class="top-banner-video" loop preload="metadata">
<source src="//vimeo-hp-videos.global.ssl.fastly.net/2/2-vp9.webm" type="video/webm; codecs=vp9">
<source src="//vimeo-hp-videos.global.ssl.fastly.net/2/2-vp8.webm" type="video/webm">
<source src="//vimeo-hp-videos.global.ssl.fastly.net/2/2.mp4" type="video/mp4">
</video>
<div class="top-banner-header">
<div class="inner">
<header id="header-container" class="middle">
<h2 class="white big text-center">Into the Wild</h2>
</header>
<p class="air-up">
<button id="play-video" class="button button-primary-orange-hollow"><i class="fa fa-play"></i> Play video <span data-video-duration="0">0</span><span class="lowercase">s</span></button>
</p>
</div>
</div>
</div>
</div>
<!-- END OF TOP BANNER -->
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-979.jpg');">
<div class="box-gradient"></div>
<header>
<h2 class="text-center" id="strategy-1">Free</h2>
<h3 class="lead text-center">$ 0</h3>
</header>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="list-unstyled orange">
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">See cool mountains</li>
</ul>
<p class="text-center">
<a href="#" class="button button-primary-orange" data-toggle="modal" data-target="#modal" data-modal-toggle="1">Sign up now</a>
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-276637.jpg');">
<div class="box-gradient"></div>
<header>
<h2 class="text-center" id="strategy-2">Basic</h2>
<h3 class="lead text-center">$ 7 / mo</h3>
</header>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="list-unstyled orange">
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">See cool mountains</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">Explore mountain caves</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">All inclusive</li>
</ul>
<p class="text-center">
<a href="#" class="button button-primary-orange" data-toggle="modal" data-target="#modal" data-modal-toggle="2">Sign up now</a>
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-205753.jpg');">
<div class="box-gradient"></div>
<header>
<h2 class="text-center" id="strategy-3">Pro</h2>
<h3 class="lead text-center">$ 12 / mo</h3>
</header>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="list-unstyled orange">
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">See cool mountains</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">Explore mountain caves</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">All inclusive</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">Fly with eagles at the top</li>
</ul>
<p class="text-center">
<a href="#" class="button button-primary-orange" data-toggle="modal" data-target="#modal" data-modal-toggle="3">Sign up now</a>
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-178599.jpg');">
<div class="box-gradient"></div>
<header>
<h2 class="text-center" id="strategy-4">Unlimited</h2>
<h3 class="lead text-center">$ 15 / mo</h3>
</header>
<p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="list-unstyled orange">
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">See cool mountains</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">Explore mountain caves</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">All inclusive</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">Fly with eagles at the top</li>
<li class="pull-left"><i class="fa fa-check"></i> </li>
<li class="white mg-l">Get a cool hippie guide</li>
</ul>
<p class="text-center">
<a href="#" class="button button-primary-orange" data-toggle="modal" data-target="#modal" data-modal-toggle="4">Sign up now</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row pd-t">
<!-- TOP BANNER -->
<div class="top-banner" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-24753.jpg');">
<div class="top-banner-header">
<div class="inner">
<header id="middle-container" class="middle">
<h2 class="white big text-center">Explore Nature</h2>
</header>
</div>
</div>
</div>
</div>
<div class="row pd">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h1 class="header text-center">Our products</h1>
<div class="thin-line"></div>
</div>
</div>
</div>
</div>
<!-- ROW FOR EXPLORE PLACES -->
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<!-- FIRST ROW OF TOP 6 PLACES -->
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<h2 class="black-lighter">Mountain I</h2>
<div class="newsfeed-box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-280027.jpg')">
<div class="newsfeed-box-content" data-rating-score="9.5">
<div class="newsfeed-box-content-inner">
<h2 class="white">Mountain Island</h2>
<p>It's convenient because you can get everything you need at the resort.</p>
</div>
<p><a href="#" class="button button-primary-blue">Read review</a>
</p>
</div>
<div class="newsfeed-box-reviews">
<div class="newsfeed-box-reviews-inner">
<h2 class="orange">9.5 <i class="fa fa-star"></i></h2>
<p class="white">"I didn't know that these kind of islands exist!" - Gordon</p>
<p class="white">"Relaxing and beautiful!" - Claire</p>
<p class="white">"Rock trees, pure white mountains, crystal clear mountain water! Wow!" - Scott</p>
</div>
<p>
<a href="#" class="button button-primary-orange">Close review</a>
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<h2 class="black-lighter">Mountain II</h2>
<div class="newsfeed-box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-280025.jpg')">
<div class="newsfeed-box-content" data-rating-score="7.15">
<div class="newsfeed-box-content-inner">
<h2 class="white">Mountain Beach</h2>
<p>Railay is accessible only by boat from Ao Nang or Krabi.</p>
</div>
<p><a href="#" class="button button-primary-blue">Read review</a>
</p>
</div>
<div class="newsfeed-box-reviews">
<div class="newsfeed-box-reviews-inner">
<h2 class="orange">7.15 <i class="fa fa-star"></i></h2>
<p class="white">"Fantastic place!" - Alex</p>
<p class="white">"I just want to go back!" - Xavier</p>
<p class="white">"Great mountain for having a good time." - Charlie</p>
</div>
<p>
<a href="#" class="button button-primary-orange">Close review</a>
</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-4 col-xs-12">
<h2 class="black-lighter">Mountain III</h2>
<div class="newsfeed-box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-279692.jpg')">
<div class="newsfeed-box-content" data-rating-score="8.23">
<div class="newsfeed-box-content-inner">
<h2 class="white">White Mountain</h2>
<p>Strolling along the beach lines is an unforgettable experience.</p>
</div>
<p><a href="#" class="button button-primary-blue">Read review</a>
</p>
</div>
<div class="newsfeed-box-reviews">
<div class="newsfeed-box-reviews-inner">
<h2 class="orange">8.23 <i class="fa fa-star"></i></h2>
<p class="white">"Amazing and beautiful!" - Haley</p>
<p class="white">"Great mountain if you don't have any kids!" - Vanessa</p>
<p class="white">"Ever thought of learning how to climb? This is the place!" - Dennis</p>
</div>
<p>
<a href="#" class="button button-primary-orange">Close review</a>
</p>
</div>
</div>
</div>
</div>
<!-- END OF FIRST ROW -->
<!-- SECOND ROW OF TOP 6 PLACES -->
<div class="row pd">
<div class="col-md-6 col-sm-4 col-xs-12">
<h2 class="black-lighter">Mountain IV</h2>
<div class="newsfeed-box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-279694.jpg')">
<div class="newsfeed-box-content" data-rating-score="9.2">
<div class="newsfeed-box-content-inner">
<h2 class="white">Mountain of CSS3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>
</div>
<p>
<a href="#" class="button button-primary-blue">Read review</a>
</p>
</div>
<div class="newsfeed-box-reviews">
<div class="newsfeed-box-reviews-inner">
<h2 class="orange">9.2 <i class="fa fa-star"></i></h2>
<p class="white">"CSS3 is such a cool place" - Robert</p>
<p class="white">"Riding eagles on the top of a mountain was a great experience" - Hanna</p>
<p class="white">"Never thought it would be this amazing, amazing place" - Fred</p>
</div>
<p>
<a href="#" class="button button-primary-orange">Close review</a>
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<h2 class="black-lighter">Mountain V</h2>
<div class="newsfeed-box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-279696.jpg')">
<div class="newsfeed-box-content" data-rating-score="8.62">
<div class="newsfeed-box-content-inner">
<h2 class="white">Mountain City</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>
</div>
<p>
<a href="#" class="button button-primary-blue">Read review</a>
</p>
</div>
<div class="newsfeed-box-reviews">
<div class="newsfeed-box-reviews-inner">
<h2 class="orange">8.62 <i class="fa fa-star"></i></h2>
<p class="white">"Rock food is so good" - Sarah</p>
<p class="white">"I love this mountain, such a cool place" - Greg</p>
<p class="white">"The homeland of rocks, yummi" - Christian</p>
</div>
<p>
<a href="#" class="button button-primary-orange">Close review</a>
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<h2 class="black-lighter">Mountain VI</h2>
<div class="newsfeed-box" style="background-image: url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-280048.jpg')">
<div class="newsfeed-box-content" data-rating-score="9.0">
<div class="newsfeed-box-content-inner">
<h2 class="white">DOM Mountain</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>
</div>
<p>
<a href="#" class="button button-primary-blue">Read review</a>
</p>
</div>
<div class="newsfeed-box-reviews">
<div class="newsfeed-box-reviews-inner">
<h2 class="orange">9.0 <i class="fa fa-star"></i></h2>
<p class="white">"Such a cool mountain, lots of things to do" - Toni</p>
<p class="white">"Relaxing and nice to just walk around the mountain" - Holly</p>
<p class="white">"Great mountains and rocks" - Alexandra</p>
</div>
<p>
<a href="#" class="button button-primary-orange">Close review</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF SECOND ROW -->
<!-- EXPLORE BANNER -->
</div>
</div>
<div class="row">
<!-- TOP BANNER -->
<div class="top-banner" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-369259.jpg');">
<div class="top-banner-header">
<div class="inner">
<header id="bottom-container" class="middle">
<h2 class="white big text-center">Free of use</h2>
<span id="strategy-5" class="hidden">Free</span>
<p class="lead white normal text-center">Use this template for free, I don't mind :)</p>
</header>
<div class="col-md-4 col-md-offset-2 col-sm-12">
<button class="button button-primary-orange" data-toggle="modal" data-target="#modal" data-modal-toggle="5">Sign up now</button>
</div>
<div class="col-md-4 col-sm-12">
<button class="button button-primary-orange-hollow" id="scroll-top">Back to top</button>
</div>
</div>
</div>
</div>
</div>
<!-- END OF TOP BANNER -->
<!-- MENU -->
<aside class="menu" id="menu">
<div class="menu-container">
<h2 class="orange">Menu</h2>
<ul class="menu-list list-unstyled">
<li>
<a href="#" class="active"><i class="fa fa-home"></i> Start</a>
</li>
<li>
<a href="#"><i class="fa fa-globe"></i> Explore</a>
</li>
<li>
<a href="#"><i class="fa fa-feed"></i> News</a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i> Reviews</a>
</li>
<li>
<a href="#"><i class="fa fa-group"></i> Find travelmates</a>
</li>
</ul>
<h2 class="orange">My account</h2>
<ul class="menu-list list-unstyled">
<li>
<a href="#"><i class="fa fa-user"></i> My profile</a>
</li>
<li>
<a href="#"><i class="fa fa-envelope"></i> Message <span class="badge">1</span></a>
</li>
<li>
<a href="#"><i class="fa fa-group"></i> My friends</a>
</li>
<li>
<a href="#"><i class="fa fa-gear"></i> Settings</a>
</li>
<li>
<a href="#"><i class="fa fa-sign-out"></i> Log out</a>
</li>
</ul>
<h2 class="orange">Social</h2>
<ul class="menu-list list-unstyled list-horizontal social-list">
<li>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
</li>
</ul>
<h2 class="orange">Search</h2>
<ul class="menu-list list-unstyled">
<li>
<div id="search">
<input type="text" name="input" class="input" placeholder="What are you looking for?" />
<button type="reset" class="search" id="search-button"></button>
</div>
</li>
</ul>
</div>
</aside>
<!-- END OF MENU -->
<!-- BEGIN MODAL -->
<aside id="modal" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header-gradient"></div>
<div class="row">
<h2 class="white text-center">Sign up</h2>
<p data-modal-id class="text-center white"></p>
</div>
<div class="thin-line"></div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<form id="modal-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<select>
<option value="">Choose gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<input type="text" class="form-control form-control-sibling" placeholder="First name" />
<input type="text" class="form-control form-control-sibling" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="E-mail" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" placeholder="Password" />
<input type="password" class="form-control form-control-sibling" placeholder="Repeat password" />
</div>
</div>
<div id="payment-option">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-home"></i></span>
<input type="text" class="form-control" placeholder="Address" />
<input type="text" class="form-control form-control-sibling" placeholder="Zip code" />
<input type="text" class="form-control form-control-sibling" placeholder="City" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="credit-icon"><i class="fa fa-credit-card"></i></span>
<select>
<option value="">Choose credit card</option>
<option value="1">American Express</option>
<option value="2">Visa</option>
<option value="3">MasterCard</option>
<option value="4">Capital One</option>
<option value="5">U.S Bank</option>
<option value="6">USAA</option>
</select>
<div class="input-group-addon-holder">
<input type="text" class="form-control form-control-sibling" placeholder="0000 0000 0000 0000" id="credit-card-number" />
<span class="number-icon">
<i class="fa fa-check"></i>
</span>
</div>
<div class="input-group-addon-holder">
<input type="password" class="form-control form-control-sibling" placeholder="CVV" id="credit-card-cvv" />
<span class="cvv-icon">
<i class="fa fa-check"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<ul class="list-unstyled list-horizontal">
<li>
<div class="ch-inline ch-inline-orange">
<input type="checkbox" value="0" id="ch-1" />
<label for="ch-1"></label>
</div>
</li>
<li>
<p>I have read the <a href="#" class="link">terms and conditions</a></p>
</li>
</ul>
<p>
<button type="submit" class="button button-primary-orange" id="sign-me-up">Sign up</button>
</p>
<p>
<button type="reset" class="button button-primary-blue" data-dismiss="modal" id="cancel">Cancel</button>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</aside>
</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='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script><script src='https://codepen.io/MrFace/pen/yYxppx.js'></script><script src='https://codepen.io/MrFace/pen/WQaYwV.js'></script><script src='https://codepen.io/MrFace/pen/EVdOyW.js'></script><script src='https://codepen.io/MrFace/pen/ojaQpd.js'></script>
<script >// JavaScript by Robin Savemark
$(function() {
var video = document.getElementById("video");
var showVideo = $(".top-banner-video");
var playVideo = $("#play-video");
var pauseVideo = $("#pause-video");
var body = $("html, body");
playVideo.on("click", function(e) {
e.preventDefault();
pauseVideo.fadeIn();
showVideo.fadeIn();
video.play();
body.css({
"overflow": "hidden"
});
});
pauseVideo.on("click", function(e) {
e.preventDefault();
pauseVideo.fadeOut();
showVideo.fadeOut();
video.pause();
body.css({
"overflow": "auto"
});
});
function updateProgressbar() {
var progress = document.getElementById("progress-bar");
var progressBar = $(".progress-bar");
var percentage = Math.floor((100 / video.duration) * video.currentTime);
progressBar.attr("value", percentage);
progressBar.width(percentage + "%");
}
video.addEventListener('timeupdate', updateProgressbar, false);
window.setInterval(function(time) {
if (video.readyState > 0) {
var duration = $("[data-video-duration]").get(0);
var videoDuration = Math.round(video.duration);
duration.firstChild.nodeValue = videoDuration;
clearInterval(time);
}
}, 1000);
});
$('#hamburger').on("click", function(e) {
e.preventDefault();
var $menu, $this, $content;
$this = $(this);
$menu = $("#menu");
$content = $("#content");
if ($this.hasClass("active")) {
$this.removeClass("active");
$menu.removeClass("open");
$content.removeClass("slide-right");
} else {
$this.addClass("active");
$menu.addClass("open");
$content.addClass("slide-right");
}
});
(function() {
var clickOrTouch = "click touchstart";
var $scroll = $("#scroll-top");
var $body = $("html, body");
$scroll.on(clickOrTouch, function() {
$body.animate({
scrollTop: 0
}, 1200);
return false;
});
}.call(this));
(function() {
var clickOrTouch = "click touchstart";
$("[data-toggle]").on(clickOrTouch, function() {
var $this = $(this);
var $nrId = $this.attr("data-modal-toggle");
var $strategyId = $("[data-modal-id]").html('You have chosen <span class="orange bold text-center">' + $('#strategy-' + $nrId + '').html() + '</span>');
if ($nrId === "1" || $nrId === "5") {
$("#payment-option").hide();
} else {
$("#payment-option").show();
}
});
}.call(this));
(function() {
var clickOrTouch = "click touchstart"
$(".newsfeed-box > .newsfeed-box-content > p > a, .newsfeed-box > .newsfeed-box-reviews > p > a").on(clickOrTouch, function(e) {
e.preventDefault();
e.stopPropagation();
var $this;
$this = $(this).parent().parent().parent(".newsfeed-box");
if ($this.hasClass("active")) {
$this.removeClass("active");
} else {
$this.addClass("active");
}
});
return;
}.call(this));
(function() {
var $boxHeight = $(".box"),
$newsfeedHeight = $(".newsfeed-box");
$boxHeight.matchHeight({
byRow: true,
property: "height",
target: null,
remove: false
});
$newsfeedHeight.matchHeight({
byRow: true,
property: "height",
target: null,
remove: false
});
}.call(this));
(function() {
var clickOrTouch = "click or touchstart";
$("#sign-me-up").on(clickOrTouch, function(e) {
e.preventDefault(); // I don't want to submit the form, we want to see the animation.
var $this;
$this = $(this);
$this.html('Welcome on board <span class="white text-center"><i class="fly-away fa fa-send"></i></span>');
});
$("#cancel").on(clickOrTouch, function(e) {
$("#sign-me-up").html('Sign up');
});
}.call(this));
function expand() {
var $search = $(".search"),
$input = $(".input");
if ($search.hasClass("close")) {
$search.removeClass("close");
$input.removeClass("square");
} else {
$search.addClass("close");
$input.addClass("square");
}
if ($search.hasClass("close")) {
$input.focus();
} else {
$input.blur();
}
}
$(function() {
var clickOrTouch = "click touchstart";
var $button = $("#search-button");
$button.on(clickOrTouch, expand);
});
// Client Side Validation
function validateCredit(event, input) {
var reg = /^\d+$/;
if (input.val().length === 0) {
return 2;
}
if (reg.test(input.val())) {
return 1;
}
if (!reg.test(input.val())) {
return 2;
}
}
function setCreditStatus(check, input, valid) {
if (input.val() != "") {
var value = input.val();
}
if (valid === 1) {
(check).addClass("fa-check").removeClass("fa-times");
(check).css({
"display": "block",
"color": "#50788C"
});
} else if (valid === 3) {
(check).addClass("fa-times").removeClass("fa-check");
(check).css({
"color": "#ECB517"
});
if (input.val().length == 0) {
(check).css({
"display": "none",
});
}
} else if (valid === 2) {
(check).css({
"display": "none",
"color": "#ECB517"
});
}
}
$(function() {
$("#credit-card-number").keyup(function(event) {
var check = $(".number-icon > i");
var input = $("#credit-card-number");
var vc = validateCredit(event, input);
if (vc !== 2 && $(this).val().length === 16 || $(this).val().length === 19) {
setCreditStatus(check, input, 1);
} else if (vc === 2) {
setCreditStatus(check, input, 2);
} else if (vc === 3 || vc === 1) {
setCreditStatus(check, input, 3);
}
});
$("#credit-card-cvv").keyup(function(event) {
var check = $(".cvv-icon > i");
var input = $("#credit-card-cvv");
var vc = validateCredit(event, input);
if (vc !== 2 && $(this).val().length === 3) {
setCreditStatus(check, input, 1);
} else if (vc === 2) {
setCreditStatus(check, input, 2);
} else if (vc === 3 || vc === 1) {
setCreditStatus(check, input, 3);
}
});
});
// Select
$("select").each(function() {
var $this = $(this),
$options = $(this).children("option").length;
$this.addClass("select-hidden");
$this.wrap("<div class='select'></div>");
$this.after("<div class='select-styled'></div>");
var $styledSelect = $this.next("div.select-styled");
$styledSelect.text($this.children("option").eq(0).text());
var $list = $("<ul />", {
"class": "select-options"
}).insertAfter($styledSelect);
for (var i = 0; i < $options; i++) {
$("<li />", {
text: $this.children("option").eq(i).text(),
rel: $this.children("option").eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children("li");
$styledSelect.on("click", function(e) {
e.stopPropagation();
$("div.select-styled.active").each(function() {
$(this).removeClass("active").next("ul.select-options").hide();
});
$(this).toggleClass("active").next("ul.select-options").toggle();
});
$listItems.on("click", function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass("active");
$this.val($(this).attr("rel"));
$list.hide();
});
$(document).on("click", function() {
$styledSelect.removeClass("active");
$list.hide();
});
});
$(function() {
var skroller = skrollr.init();
});
//# sourceURL=pen.js
</script>
</body></html>
