<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/faaezahmd/pen/vZYbqZ?depth=everything&order=popularity&page=68&q=shop&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Poppins");
.nav-bars, header nav span, .text-clip .divider {
display: block;
height: 2px;
width: 18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-color: #000; }
.nav-bars:not(:last-of-type), header nav span:not(:last-of-type), .text-clip .divider:not(:last-of-type) {
margin-bottom: 4px; }
body {
background-color: #fff;
font-family: Poppins, sans-serif;
font-size: 20px;
overflow-x: hidden; }
img {
max-width: 100%; }
*, *:after, *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; }
ul, li {
list-style-type: none; }
li {
display: inline-block;
width: 100%; }
#logo {
font-size: 1.5rem;
display: inline-block;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
width: 100px;
line-height: 1.5rem; }
header {
position: relative;
height: 50px; }
header nav {
cursor: pointer;
font-size: 0.9rem;
letter-spacing: 2px;
font-weight: 800;
text-transform: uppercase;
display: inline-block; }
header nav #burger-menu {
display: inline-block; }
.user-area {
display: inline-block;
float: right; }
.user-area i {
padding-left: 20px; }
.user-area:after {
content: "";
display: table;
clear: both; }
.text-wrap {
text-align: center; }
#slider {
position: relative;
height: calc(100% - 50px); }
.slides {
padding: 0;
position: relative;
margin: 2em auto;
width: 85%;
height: 100%; }
.slides li {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.65s ease-in-out;
-o-transition: opacity 0.65s ease-in-out;
transition: opacity 0.65s ease-in-out; }
.slides li.active {
opacity: 1;
-webkit-transition: opacity 0.65s ease-in-out;
-o-transition: opacity 0.65s ease-in-out;
transition: opacity 0.65s ease-in-out;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s; }
.slides li.active .animate .from-bottom {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.55s ease;
transition: -webkit-transform 0.55s ease;
-o-transition: transform 0.55s ease;
transition: transform 0.55s ease;
transition: transform 0.55s ease, -webkit-transform 0.55s ease;
-webkit-transition-delay: 0.45s;
-o-transition-delay: 0.45s;
transition-delay: 0.45s; }
.slides li.active .animate .from-left {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: -webkit-transform 0.55s ease;
transition: -webkit-transform 0.55s ease;
-o-transition: transform 0.55s ease;
transition: transform 0.55s ease;
transition: transform 0.55s ease, -webkit-transform 0.55s ease;
-webkit-transition-delay: 0.45s;
-o-transition-delay: 0.45s;
transition-delay: 0.45s; }
.slides .slide-image {
width: 50%;
float: left;
padding: 0 50px;
text-align: center;
overflow: visible; }
.slides .slide-image img {
max-width: 100%;
max-height: 36vw;
vertical-align: middle; }
.slides .slide-content {
max-width: 50%;
display: inline-block;
float: left;
padding-right: 50px;
text-align: right;
-webkit-transform: translateY(25%);
-ms-transform: translateY(25%);
transform: translateY(25%); }
.slides .slide-content h2 {
font-size: 3rem;
line-height: 1.3em;
margin: 0; }
.slides .slide-content p {
padding-left: 40px;
font-size: 12px;
color: #969696;
line-height: 24px; }
.slides .slide-content .product-type {
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 6px;
text-align: right; }
.slides .slide-content a {
font-size: 1rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
display: inline-block;
padding: 5px 20px;
text-decoration: none;
color: #000;
position: relative; }
.slides .slide-content a:hover {
text-decoration: none; }
.slides a.shop-now:before {
content: '';
position: absolute;
height: 100%;
width: 50%;
right: 0;
background-color: #dae6e6;
z-index: -1;
top: 0;
-webkit-transition: width 0.2s ease-out;
-o-transition: width 0.2s ease-out;
transition: width 0.2s ease-out; }
.animate {
position: relative;
overflow: hidden; }
.animate .from-bottom {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.45s ease;
transition: -webkit-transform 0.45s ease;
-o-transition: transform 0.45s ease;
transition: transform 0.45s ease;
transition: transform 0.45s ease, -webkit-transform 0.45s ease; }
.animate .from-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.45s ease;
transition: -webkit-transform 0.45s ease;
-o-transition: transform 0.45s ease;
transition: transform 0.45s ease;
transition: transform 0.45s ease, -webkit-transform 0.45s ease; }
.text-clip {
background: url("http://res.cloudinary.com/faaezahmd/image/upload/v1496575220/bara-slider/3.jpg");
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-size: 100% 100%;
display: inline-block;
font-size: 6rem;
line-height: 100%;
background-position: center;
margin: 0;
margin-left: -80px; }
.text-clip span.small {
font-size: 3rem;
vertical-align: middle; }
.text-clip .divider {
width: 30px;
display: inline-block;
margin-left: 10rem;
margin-right: 3rem;
vertical-align: middle; }
.slide-1 hr.slider-bottom {
display: inline-block;
border-bottom: 0px solid #969696;
width: 320px;
vertical-align: middle;
margin-left: -10em; }
.slide-1 hr.slider-top {
border-bottom: 0px solid #969696;
margin: 3em auto;
width: 125px; }
.slide-1 h4 {
display: inline-block;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 0.7rem;
padding-left: 40px; }
.slider-bottom-area {
margin-top: 100px;
text-align: center; }
#container {
position: relative;
height: 100vh;
padding: 1em; }
.line-two {
padding-left: 10rem; }
.slide-label {
font-size: 0.8rem;
font-weight: 800;
color: #000;
display: inline-block;
position: absolute;
left: -8%;
top: 50%;
z-index: 10; }
.slider-nav {
display: inline-block;
position: absolute;
width: 20px;
right: 0px;
bottom: 50%;
cursor: pointer; }
.slide-nav-up, .slide-nav-down {
display: inline-block;
padding-bottom: 12px;
position: absolute; }
.slide-nav-up {
bottom: 0px;
opacity: 0.5; }
.slide-nav-down {
border-bottom: 1px solid #969696;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.5; }
footer #social-media span {
font-size: 0.9rem;
font-weight: 100;
padding-right: 15px; }
</style></head><body>
<body>
<main id="container">
<header>
<nav>
<div id="burger-menu">
<span></span>
<span></span>
<span></span>
</div>
Menu
</nav>
<h1 id="logo">Mr. <br/> Bara</h1>
<div class="user-area">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</div>
</header>
<div id="slider">
<ul class="slides">
<li class="single-slide slide-1 active">
<hr class="slider-top"/>
<div class="slide-label">Always Innovation</div>
<div class="text-wrap">
<h1 class="text-clip">Fashion <br/>
<span class="line-two">
<span class="divider"></span>
<span class="small">is </span>
Your
<span class="small">passion.</span>
</span>
</h1>
</div>
<div class="slider-bottom-area">
<hr class="slider-bottom" />
<h4>logan cee</h4>
</div>
</li>
<li class="single-slide slide-2">
<div class="slide-label">Apparel</div>
<div class="slide-image animate">
<img src="https://res.cloudinary.com/faaezahmd/image/upload/v1496575114/bara-slider/image-1.jpg" class="from-left" alt="image-1" />
</div>
<div class="slide-content">
<div class="animate">
<div class="product-type from-bottom">new arrival</div>
</div>
<div class="animate">
<h2 class="from-bottom">
Elegant with
</h2>
</div>
<div class="animate">
<h2 class="from-bottom">
Smenley T-shirt
</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<a class="shop-now" href="#">shop now</a>
</div>
</li>
<li class="single-slide slide-3">
<div class="slide-label">Bags</div>
<div class="slide-image animate">
<img src="https://res.cloudinary.com/faaezahmd/image/upload/v1496575114/bara-slider/image-2.jpg" class="from-left" alt="image-2" />
</div>
<div class="slide-content">
<div class="animate">
<div class="product-type from-bottom">giordano brand</div>
</div>
<div class="animate">
<h2 class="from-bottom">
The Canvas
</h2>
</div>
<div class="animate">
<h2 class="from-bottom">
Weekend Bag
</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="shop-now" href="#">shop now</a>
</div>
</li>
<li class="single-slide slide-4">
<div class="slide-label">Shoes</div>
<div class="slide-image animate">
<img src="https://res.cloudinary.com/faaezahmd/image/upload/v1496575114/bara-slider/image-3.jpg" class="from-left" alt="image-3" />
</div>
<div class="slide-content">
<div class="animate">
<div class="product-type from-bottom">oxford style</div>
</div>
<div class="animate">
<h2 class="from-bottom">
The Clark DEO Suede
</h2>
</div>
<div class="animate">
<h2 class="from-bottom">
Boots Men
</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<a class="shop-now" href="#">shop now</a>
</div>
</li>
<li class="single-slide slide-4">
<div class="slide-label">Other Accessories</div>
<div class="slide-image animate">
<img src="https://res.cloudinary.com/faaezahmd/image/upload/v1496575114/bara-slider/image-4.jpg" class="from-left" alt="image-3" />
</div>
<div class="slide-content">
<div class="animate">
<div class="product-type from-bottom">Trend 2016</div>
</div>
<div class="animate">
<h2 class="from-bottom">
New Straw Fedora
</h2>
</div>
<div class="animate">
<h2 class="from-bottom">
Hat Men
</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<a class="shop-now" href="#">shop now</a>
</div>
</li>
</ul>
<div class="slider-nav">
<div class="slide-nav-up"><img src="https://res.cloudinary.com/faaezahmd/image/upload/v1496575114/bara-slider/up-arrow.png" alt="up"></div>
<div class="slide-nav-down"><img src="https://res.cloudinary.com/faaezahmd/image/upload/v1496575114/bara-slider/up-arrow.png" alt="down"></div>
</div>
</div>
<!--<footer>
<div id="social-media">
<span>Facebook</span>
<span>Twitter</span>
<span>Google +</span>
</div>
</footer>-->
</main>
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js'></script>
<script >jQuery(document).ready(function ($) {
'use strict';
var slider = $('#slider');
var slidesWrapper = $('.slides');
var slides = $('.slides li');
var activeSlide = $('.slides.active');
var timer = function() {
setInterval(changeSlide, 7500);
}
function changeSlide() {
var a = slidesWrapper.find('.active');
var b = a.next('li');
if( b.length === 0 ) {
console.log();
a.removeClass('active');
slides.first().addClass('active');
} else {
a.removeClass('active');
b.addClass('active');
}
//
}
timer();
$('.slide-nav-down').click(function(e) {
clearInterval(changeSlide);
changeSlide();
});
$('.slide-nav-down').on('mousedown', function() {
$(this).css({'opacity': 1});
});
$('.slide-nav-down').on('mouseup', function() {
$(this).css({'opacity': 0.5});
});
});
//# sourceURL=pen.js
</script>
</body></html>
