<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/Momciloo/pen/epwXVV?limit=all&page=31&q=shop" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">/*---------- libraries
------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Karla:400,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/*---------- style
------------------------------------------------------------------------------*/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: relative;
background-color: #263238;
font-family: 'Karla', sans-serif;
}
body .wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 35px 15px 0;
}
body .wrapper a {
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
header {
width: 100%;
float: left;
}
header a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-size: 12px;
padding: 0 17px;
}
header a:hover, header a.active {
color: #fdc6a0;
}
header .logo {
display: inline-block;
float: left;
text-transform: uppercase;
color: #fff;
line-height: 15px;
}
header .logo span {
padding-left: 20px;
}
header .logo img {
position: absolute;
}
header nav ul {
display: inline-block;
float: right;
}
header nav ul li {
float: left;
position: relative;
}
header nav ul li.dd ul li {
float: left;
display: block;
clear: left;
position: relative;
}
header nav ul li.dd ul li:not(:first-of-type) {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
line-height: 20px;
}
header nav ul li.dd:hover ul li {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
header nav ul li.search input {
position: absolute;
right: 0;
width: 0;
height: 25px;
top: -2px;
border: 0;
background-color: #263238;
border-bottom: 1px solid #263238;
padding-bottom: 3px;
color: #fff;
font-family: 'Karla', sans-serif;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
header nav ul li.search input::-webkit-input-placeholder {
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-family: 'Karla', sans-serif;
}
header nav ul li.search input:-moz-placeholder {
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-family: 'Karla', sans-serif;
}
header nav ul li.search input::-moz-placeholder {
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-family: 'Karla', sans-serif;
}
header nav ul li.search input:-ms-input-placeholder {
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-family: 'Karla', sans-serif;
}
header nav ul li.search input:focus {
outline: none;
}
header nav ul li.search input::-webkit-search-cancel-button {
display: none;
}
header nav ul li.search.active input {
width: 423px;
border-color: #fff;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.slider {
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
width: 100%;
float: left;
margin-top: 17.7vh;
padding-left: 5%;
overflow: hidden;
}
.slider .slide {
width: 100%;
float: left;
-moz-transition: all 0s;
-o-transition: all 0s;
-webkit-transition: all 0s;
transition: all 0s;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.slider .slide.active {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.slider .slide.active .part {
position: relative;
float: left;
height: 51vh;
}
.slider .slide.active .part.title {
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
margin: 0;
width: 25%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.slider .slide.active .part.image {
width: 48%;
}
.slider .slide.active .part.description {
margin: 0;
width: 27%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.slider .slide.active .part h2 {
font-size: 36px;
color: #fff;
}
.slider .slide.active .part img {
display: block;
margin: 0 auto;
height: 100%;
width: auto;
}
.slider .slide.active .part .description-wrap {
width: 100%;
display: block;
float: left;
}
.slider .slide.active .part .description-wrap p {
max-width: 340px;
color: #999999;
font-size: 14px;
text-align: left;
line-height: 20px;
display: block;
margin-bottom: 30px;
}
.slider .slide.active .part .description-wrap p span {
font-weight: 700;
color: #fdc6a0;
}
.slider .slide.active .part .description-wrap .btn {
display: block;
clear: left;
border: 1px solid #fdc6a0;
height: 42px;
width: 130px;
line-height: 42px;
font-size: 14px;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px;
text-align: center;
text-transform: lowercase;
color: #fff;
text-decoration: none;
}
.slider .slide.active .part .description-wrap .btn:hover {
color: #fdc6a0;
}
.slider .slide .part.title {
margin-left: -500px;
}
.slider .slider-nav {
float: left;
width: 100%;
margin-top: 8.8vh;
text-align: center;
display: block;
}
.slider .slider-nav a {
display: inline-block;
color: #fdc6a0;
text-decoration: none;
}
.slider .slider-nav a.prev {
padding-right: 25px;
}
.slider .slider-nav a.next {
padding-left: 25px;
}
.slider .slider-nav a:hover {
color: #fff;
}
.slider .slider-nav span {
color: #fff;
font-size: 17px;
}
.down {
padding: 50px 0 0 5%;
display: block;
width: 100%;
float: left;
text-align: center;
}
.down a {
margin-top: 40px;
color: #fdc6a0;
padding: 15px;
text-decoration: none;
}
.down a:hover {
color: #fff;
}
</style></head><body>
<body>
<div class="wrapper">
<header>
<a href="#link" class="logo">
<img src="https://s14.postimg.org/6hgoobch9/watch.png" alt="Nikon">
<span>Nixon</span>
</a>
<nav>
<ul>
<li><a href="javascript:;">New</a></li>
<li><a href="javascript:;">Men</a></li>
<li><a href="javascript:;">Women</a></li>
<li><a href="javascript:;">Watches</a></li>
<li><a href="javascript:;">Collections</a></li>
<li class="search">
<a href="javascript:;">
<img src="https://s30.postimg.org/volsaef2l/search.png" alt="Search">
</a>
<input type="search" placeholder="Search ..."></li>
</li>
<li class="dd">
<ul>
<li><a href="javascript:;">En</a></li>
<li><a href="javascript:;">Fr</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="slider">
<div class="slide active">
<div class="part title">
<h2>Superior Functionality</h2>
</div>
<div class="part image">
<img src="https://s12.postimg.org/ejohj1l7x/watch_img.png" alt="">
</div>
<div class="part description">
<div class="description-wrap">
<p>Good looks, brains and brawn combined The
<span>51-30 Chrono</span> rates second-to-none. Featuring
a 6 hand Japanese quartz movement, a second
subdial, chrono and date means you're
equipped for any mission.
</p>
<a href="#link" class="btn">Shop now</a>
</div>
</div>
</div>
<div class="slide">
<div class="part title">
<h2>Superior Functionality 2</h2>
</div>
<div class="part image">
<img src="https://s12.postimg.org/ejohj1l7x/watch_img.png" alt="">
</div>
<div class="part description">
<div class="description-wrap">
<p>Good looks, brains and brawn combined The
<span>51-30 Chrono</span> rates second-to-none. Featuring
a 6 hand Japanese quartz movement, a second
subdial, chrono and date means you're
equipped for any mission.
</p>
<a href="#link" class="btn">Shop now</a>
</div>
</div>
</div>
<div class="slide">
<div class="part title">
<h2>Superior Functionality 3</h2>
</div>
<div class="part image">
<img src="https://s12.postimg.org/ejohj1l7x/watch_img.png" alt="">
</div>
<div class="part description">
<div class="description-wrap">
<p>Good looks, brains and brawn combined The
<span>51-30 Chrono</span> rates second-to-none. Featuring
a 6 hand Japanese quartz movement, a second
subdial, chrono and date means you're
equipped for any mission.
</p>
<a href="#link" class="btn">Shop now</a>
</div>
</div>
</div>
<div class="slide">
<div class="part title">
<h2>Superior Functionality 4</h2>
</div>
<div class="part image">
<img src="https://s12.postimg.org/ejohj1l7x/watch_img.png" alt="">
</div>
<div class="part description">
<div class="description-wrap">
<p>Good looks, brains and brawn combined The
<span>51-30 Chrono</span> rates second-to-none. Featuring
a 6 hand Japanese quartz movement, a second
subdial, chrono and date means you're
equipped for any mission.
</p>
<a href="#link" class="btn">Shop now</a>
</div>
</div>
</div>
<div class="slider-nav">
<a href="javascript:;" class="prev"><</a>
<span>1 / 4</span>
<a href="javascript:;" class="next">></a>
</div>
</div>
<div class="down">
<a href="javascript:;">↓</a>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$('.search').click(function(){
$(this).addClass('active');
$(this).find('input').focus();
$(document).mouseup(function (e)
{
var searchInpt = $('.search');
if (!searchInpt.is(e.target) && searchInpt.has(e.target).length === 0) {
searchInpt.removeClass('active');
}
});
});
$('nav li a').click(function(){
$('nav li a').removeClass('active');
$(this).addClass('active');
});
$('.slider .slide').not(':first-child').hide();
$('.slider .slider-nav .next').click(function() {
if ($('.slide.active').next('.slide').length === 0 ) {
$('.slide:last').removeClass('active').hide();
$('.slide:first').addClass('active').fadeIn();
} else {
$('.slide.active').hide().removeClass('active').next('.slide').fadeIn().addClass('active');
}
});
$('.slider .slider-nav .prev').click(function() {
if ($('.slide.active').prev('.slide').length === 0 ) {
$('.slide:first').removeClass('active').hide();
$('.slide:last').addClass('active').fadeIn();
} else {
$('.slide.active').hide().removeClass('active').prev('.slide').fadeIn().addClass('active');
}
});
//# sourceURL=pen.js
</script>
</body></html>
