<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 lang='en' 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/Skupienski/pen/EZZZeZ?depth=everything&order=popularity&page=24&q=product&show_forks=false" />
<style class="cp-pen-styles">@import 'https://fonts.googleapis.com/css?family=Playfair+Display:400,700';
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 90%;
line-height: 1.6;
color: #3c3c3c;
}
h1,
h2,
h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: #000;
margin: 0;
padding: 0;
}
h1 {
font-size: 3em;
}
h2 {
font-family: 'Lato';
font-size: 1.7em;
font-weight: 300;
}
h3 {
font-size: 1.6em;
}
p,
span,
ul,
li {
color: #999;
font-weight: 100;
line-height: 1.8;
}
.page-container {
width: 100%;
position: relative;
display: block;
}
.nav {
position: fixed;
top: 0px;
background-color: #fff;
width: 100%;
padding: 1em 0 .7em 0;
z-index: 1;
transition: all 0.45s ease-in-out 0.2s;
}
.nav-active {
transition: all 0.40s ease-in-out 0s;
transform: translateY(-200px);
}
.noscroll {
transition: all 0.40s ease-in-out 0s;
overflow-y: hidden;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
visibility: hidden;
background: black;
transition: all 350ms ease-in 0.2s;
}
.overlay-show {
opacity: 0.5;
visibility: visible;
transition: opacity 260ms ease-in 0.3s;
overflow: hidden;
}
.sidenav {
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100%;
opacity: 0.6;
background-color: #fff;
z-index: 3;
overflow-y: scroll;
transition: right 300ms ease-in-out 0s, opacity 150ms ease 0.4s;
}
.sidenav-inner ul,
.sidenav-inner h3 {
padding: 0;
text-align: center;
}
.sidenav ul li,
.footer-column ul li {
font-size: 0.9em;
list-style-type: none;
}
.snav-active {
display: block;
right: 0px;
opacity: 1;
transition: right 160ms ease-in-out 0.3s, opacity 150ms ease 0.4s;
}
.column {
padding: 0 3em;
}
.nav .logo {
width: 86px;
float: left;
}
.nav .logo img {
width: 6em;
}
.menu span,
.wishlist span {
color: #999;
font-size: 11px;
}
.nav .menu,
.nav .wishlist {
float: right;
}
.nav .wishlist {
font-size: 1.3em;
margin: 0;
padding: 9px 0;
color: #444;
text-align: center;
}
.wishlist span {
font-size: 11px;
display: block;
margin-top: -7px;
}
svg#Icons {
width: 32px;
height: 42px;
height: auto;
}
svg#Icons path {
fill: #111;
}
.icon-menu-open,
icon-menu-close {
margin: 10px 0;
display: inline-block;
cursor: pointer;
}
.icon-menu-open .bar1,
.icon-menu-close .bar1,
.icon-menu-open .bar2,
.icon-menu-close .bar2,
.icon-menu-open .bar3,
.icon-menu-close .bar3 {
height: 2px;
background-color: #444;
margin: 4px 0;
transition: 0.4s;
}
.icon-menu-open .bar1 {
width: 20px;
}
.icon-menu-open .bar2 {
width: 30px;
}
.icon-menu-open .bar3 {
width: 20px;
}
.icon-menu-close .bar1,
.icon-menu-close .bar2,
.icon-menu-close .bar3 {
width: 22px;
}
.icon-menu-open .bar3 {
margin: 0
}
.icon-menu-close {
margin: 22px 15px;
}
.icon-menu-close .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 4px);
transform: rotate(-45deg) translate(-3px, 4px);
}
.icon-menu-close .bar2 {
opacity: 0;
}
.icon-menu-close .bar3 {
-webkit-transform: rotate(45deg) translate(-7px, -7px);
transform: rotate(45deg) translate(-4px, -6px);
}
.hero-image {
position: relative;
background: url(http://artskidesign.com/archive/wp-content/uploads/2016/09/rolex-hero-1.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: 400px;
z-index: 0;
}
.breadcrumb {
margin: 2em 0;
list-style: none;
overflow: hidden;
}
.breadcrumb li:before {
font-family: FontAwesome;
content: "\f105";
font-size: 10px;
line-height: 4;
padding: 0 0.8em;
color: #ccc;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
font-size: 0.86em;
font-weight: 100;
color: #bbb;
text-decoration: none;
padding: 10px 0 10px 6px;
position: relative;
display: block;
float: left;
}
.wrapper {
display: table;
max-width: 1200px;
margin: 0 auto;
padding-top: 10em;
}
.inner {
display: table-cell;
padding: 0 4em;
max-width: 400px;
float: left;
text-align: center;
}
.inner span {
font-size: .9em;
color: #aaa;
}
.imageView {
border-style: solid;
border-color: #eee;
border-width: thin;
width: 400px;
height: 510px;
z-index: 0;
left: 100px;
top: 100px;
overflow: hidden;
text-align: center;
}
.description {
max-width: 600px;
float: left;
}
.product-name {
font-size: 1.4em;
font-weight: 700;
color: #cb8f0f;
}
.price h2 {
color: #cb8f0f;
letter-spacing: 1px;
}
.basket-btn {
display: table;
width: 200px;
height: 60px;
background-color: #222;
color: #fff;
margin: 3em 0;
border: 1px solid #222;
cursor: pointer;
box-shadow: inset 0 0 0 0 #fff;
-webkit-transition: all ease-out 0.2s;
-moz-transition: all ease-out 0.2s;
transition: all ease-out 0.2s;
}
.basket-btn:after {}
.basket-btn:hover {
box-shadow: inset 0 100px 0 0 #fff;
}
.basket-btn span:hover {
color: #111;
}
.basket-btn span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.image {
background-size: cover;
width: 100%;
height: 100%;
z-index: 2;
left: 0px;
top: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transition: transform 0.35s cubic-bezier(.35, .06, .52, .91);
-moz-transition: transform 0.35s cubic-bezier(.35, .06, .52, .91);
-o-transition: transform 0.35s cubic-bezier(.35, .06, .52, .91);
-ms-transition: transform 0.35s cubic-bezier(.35, .06, .52, .91);
transition: transform 0.35s cubic-bezier(.35, .06, .52, .91);
}
.imageView:hover {
cursor: zoom-in;
}
img {
width: 350px
}
.full-description {
position: relative;
clear: both;
margin: 0 auto;
padding: 7em;
}
.full-description img {
width: 100%;
}
.full-description h1 {
font-size: 7.6vw;
text-align: center;
color: #f3f3f3;
white-space: nowrap;
}
.full-description h3 {
position: relative;
top: 25px;
font-size: 2.5em;
padding: 1em 0 0 0;
text-align: left;
}
.col-left {
width: 48%;
float: left;
clear: both;
}
.col-right {
width: 48%;
float: right;
}
.strip {
position: relative;
margin-top: 200px;
width: 100%;
height: 600px;
background-color: #121212;
z-index: -1;
}
.feature-image img {
position: relative;
width: 100%;
transform: rotate(180deg);
}
.footer {
background: url(http://artskidesign.com/archive/wp-content/uploads/2016/11/crown.svg) center center no-repeat;
background-size: 450px;
clear: both;
margin: 5em 0 0 0;
padding: 6em 0;
width: 100%;
height: 500px;
background-color: #fafafa;
}
.footer-column-wrapper {
max-width: 1000px;
margin: 0 auto;
}
.footer-column {
float: left;
overflow: hidden;
width: 33.33333%;
}
.footer-column-inner {
padding: 0 3em;
}
.footer-column h3 {
font-size: 1em;
font-style: italic;
font-weight: normal;
color: #cb8f0f;
padding-bottom: 1px;
border-bottom: 1px solid #e6e6e6;
padding: 0.5em 0;
}
.footer-column ul {
margin: 1em 0;
padding: 0.5em 0;
}
span.signature {
font-size: 0.8em;
color: #ccc;
display: block;
clear: both;
text-align: center;
padding-top: 5em;
}</style></head><body>
<div class="page-container">
<header>
<div class="nav">
<div class="column logo"><img src="http://artskidesign.com/archive/wp-content/uploads/2016/09/rolex-logo.svg" /></div>
<div class="column menu icon-menu-open" onclick="openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<span>MENU</span>
</div>
<div class="column wishlist">
<i class="fa fa-heart fa" aria-hidden="true"></i><span>WISHLIST</span>
</div>
</header>
<aside class="sidenav">
<div class=" icon-menu-close" onclick="closeNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="sidenav-inner">
<h3>Home</h3>
<ul>
<li>-</li>
</ul>
<h3>Watches</h3>
<ul>
<li>All Rolex watches</li>
<li>New 2016 watches</li>
<li>Featured selections</li>
<li>Watchmaking</li>
<li>Men's watches</li>
<li>Women's watches</li>
</ul>
<h3>The Collection</h3>
<ul>
<li>Air-King</li>
<li>Oyster Perpetual</li>
<li>Cosmograph Daytona</li>
<li>Datejust</li>
<li>Day-Date</li>
<li>Explorer</li>
<li>Explorer II</li>
<li>GMT-Master II</li>
<li>Lady-Datejust</li>
<li>Milgauss</li>
</ul>
<h3>Services</h3>
<ul>
<li>Guided Search</li>
<li>Your wishlist</li>
<li>Find a Retailer</li>
<li>Servicing your Rolex</li>
</ul>
<h3>Downloads</h3>
<ul>
<li>Wallpapers</li>
<li>E-Brochures</li>
<li>iPad apps</li>
</ul>
<h3>Pressroom</h3>
<ul>
<li>Visit our Pressroom</li>
</ul>
</div>
</aside>
<div class="hero-image"></div>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Watches</a></li>
<li><a href="#">Yach-Master II</a></li>
<li><a href="#">116680</a></li>
</ul>
<div class="wrapper">
<div class="inner">
<div class="imageView">
<div class="image"><img src="http://artskidesign.com/archive/wp-content/uploads/2016/09/rolex-product-hover-0.jpg" /></div>
</div> <span>Hold to zoom</span>
</div>
<div class="description">
<div class="content">
<span class="product-name">OYSTER PERPETUAL</span>
<h1>YACHT-MASTER II</h1>
<p>
The Yacht-Master II is designed to meet the needs of professional sailors. This regatta chronograph features the world's first programmable countdown with a mechanical memory. It provides precise synchronization with the crucial starting sequence of a
yacht race.</p>
<div class="price">
<h2>£ 12,000</h2></div>
<div class="basket-btn"><span>BUY THIS WATCH</span</div>
</div>
</div>
</div>
<div class="full-description">
<h1>Model features</h1>
<div class="col-left">
<h3>904L Stainless Steel</h3>
<img src="http://artskidesign.com/archive/wp-content/uploads/2016/09/material_904l_steel_0002_640x540.jpg"/>
<p>Rolex uses 904L stainless steel for its steel watch cases. 904L is mainly used in the high technology, aerospace and chemical industries, where maximum resistance to corrosion is essential. A superalloy, 904L is extremely resistant and highly polishable. It maintains its beauty even in the harshest environments.</p>
</div>
<div class="col-right">
<h3>White Dial</h3>
<img src="http://artskidesign.com/archive/wp-content/uploads/2016/09/model_page_dial_asset_background.jpeg"/>
<p>The Yacht-Master II’s red-contoured countdown arrow and the seconds hand are readable at a glance against the dedicated 10‑minute countdown graduation on the dial and the graduations on the bezel.</p>
</div>
</div>
<div class="strip"></div>
<div class="feature-image"><img src="http://artskidesign.com/archive/wp-content/uploads/2016/09/rolex-hero-1.jpg"/></div>
</div>
<div class="footer">
<div class="footer-column-wrapper">
<div class="footer-column">
<div class="footer-column-inner">
<h3>Rolex Watches</h3>
<ul>
<li>All Rolex watches</li>
<li>New 2016 watches</li>
<li>Featured selections</li>
<li>Watchmaking</li>
<li>Men's watches</li>
<li>Women's watches</li>
</ul>
</div>
</div>
<div class="footer-column">
<div class="footer-column-inner">
<h3>The Collection</h3>
<ul>
<li>Air-King</li>
<li>Oyster Perpetual</li>
<li>Cosmograph Daytona</li>
<li>Datejust</li>
<li>Day-Date</li>
<li>Explorer</li>
<li>Explorer II</li>
<li>GMT-Master II</li>
<li>Lady-Datejust</li>
<li>Milgauss</li>
</ul>
</div>
</div>
<div class="footer-column">
<div class="footer-column-inner">
<h3>Services</h3>
<ul>
<li>Guided Search</li>
<li>Your wishlist</li>
<li>Find a Retailer</li>
<li>Servicing your Rolex</li>
</ul>
<h3>Downloads</h3>
<ul>
<li>Wallpapers</li>
<li>E-Brochures</li>
<li>iPad apps</li>
</ul>
<h3>Pressroom</h3>
<ul>
<li>Visit our Pressroom</li>
</ul>
</div>
</div>
</div>
<span class="signature">Designed by Art Skupienski</span>
</div>
<div class="overlay"></div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://use.fontawesome.com/048010cf41.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script >function mouseMoveMatrix() {
var train = $('.image');
train.on('mousedown', function() {
train.css({
'transform': 'scale(2.2)'
})
})
.on('mouseup', function() {
train.css({
'transform': 'scale(1)'
})
})
.on('mousemove', function(e) {
$('.image').css({
'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 50 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 50 + '%'
});
});
$('.image').on('dragstart', function(event) {
event.preventDefault();
});
}
mouseMoveMatrix();
// function myFunction(x) {
// x.classList.toggle("change");
// }
// Parallax images
$(window).scroll(function(e) {
parallax();
});
function parallax() {
var scrolled = $(window).scrollTop();
$('.strip').css('top', -(scrolled * 0.1) + 'px');
$('.feature-image img').css('top', -(scrolled * 0.1) + 'px');
$('.hero-image').css('top', -(scrolled * 0.1) + 'px');
}
function openNav() {
$('body').addClass('noscroll');
$('.nav').addClass('nav-active');
$('.overlay').addClass('overlay-show');
$('.sidenav').addClass('snav-active');
}
function closeNav() {
$('body').removeClass('noscroll');
$('.nav').removeClass('nav-active');
$('.overlay').removeClass('overlay-show');
$('.sidenav').removeClass('snav-active');
}
//# sourceURL=pen.js
</script>
</body></html>
