LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
4

Cold pressed juices

shop category
€ 3.00
ster

Booster

In Stock
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
Fuel

Rocket Fuel

In Stock
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
Red

Big Red

In Stock
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
CSS
.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider__slides {
  position: relative;
  width: 300%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  will-change: transform;
}

.slider__slide {
  float: left;
  width: 33.33333%;
  height: 100%;
}
.slider__dots {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  top: 70px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.slider__dot, .slider__indicator {
  display: block;
  margin: 0 0.5em;
  width: 0.5em;
  height: 0.5em;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100px;
}
.slider__indicator {
  position: absolute;
  background: white;
  /*width: auto;*/
}
.slider__indicator--left {
  -webkit-transition: left 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: left 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.slider__indicator--right {
  -webkit-transition: left 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: left 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.content[data-pos="0"] .slider__slides {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.content[data-pos="1"] .slider__slides {
  -webkit-transform: translateX(-33.33333%);
          transform: translateX(-33.33333%);
}
.content[data-pos="2"] .slider__slides {
  -webkit-transform: translateX(-66.66667%);
          transform: translateX(-66.66667%);
}

.content[data-pos="0"] .slider__indicator {
  left: 0em;
  right: 4em;
}
.content[data-pos="1"] .slider__indicator {
  left: 1.5em;
  right: 2em;
}
.content[data-pos="2"] .slider__indicator {
  left: 3em;
  right: 0em;
}

.content[data-pos="0"] .slider__slide:nth-child(1) .picture span {
  left: -160px;
}
.content[data-pos="1"] .slider__slide:nth-child(2) .picture span {
  left: -140px;
}
.content[data-pos="2"] .slider__slide:nth-child(3) .picture span {
  left: -85px;
}

.content[data-pos="0"] .slider__slide:nth-child(1) .buttons {
  display: block;
}
.content[data-pos="1"] .slider__slide:nth-child(2) .buttons {
  display: block;
}
.content[data-pos="2"] .slider__slide:nth-child(3) .buttons {
  display: block;
}

.content[data-pos="0"] .slider__slide:nth-child(1) .dropdown {
  display: block;
}
.content[data-pos="1"] .slider__slide:nth-child(2) .dropdown {
  display: block;
}
.content[data-pos="2"] .slider__slide:nth-child(3) .dropdown {
  display: block;
}

.content[data-pos="0"] > div {
  background-color: rgba(255, 87, 34,.65);
}
.content[data-pos="1"] > div {
  background-color: rgba(13,148,20,.4);
}
.content[data-pos="2"] > div {
  background-color: rgba(209,27,27,.65);
}

body {
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
  background-color: #f3f3f3;
}

.wrapper {
  background-color: #f8f8f8;
  display: flex;
  max-height: 736px;
  height: 736px;
  width: 414px;
  margin: 10px auto;
  /*border: solid 2px #aaa;*/
  box-shadow: 0px 2px 15px #ddd;
  border-radius: 3px;
}

.sidebar {
  max-height: 736px;
  height: 736px;
  width: 250px;
  position: absolute;
  padding: 0 10px;
}

.sidebar .brand {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 3.5em;
  /*http://www.cssmatic.com/es/gradient-generator*/
  background: linear-gradient(to right, 
    rgba(209,27,27,1) 0%, 
    rgba(209,27,27,1) 1%, 
    rgba(248,80,50,1) 20%, 
    rgba(13,148,20,1) 50%, 
    rgba(230,202,60,1) 77%, 
    rgba(230,143,12,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position: absolute;
  top: 10px;
  left: 30px;
}

.sidebar .menu { 
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.sidebar .menu ul {
  padding-left: 0;
}

.sidebar .menu .glyph-icon {
  font-weight: 700;
  margin-right: 20px;
  vertical-align: middle;
}

.sidebar .menu .flaticon-mail {
  font-weight: 400;
}

.sidebar ul li {
  color: #777;
  line-height: 3;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
}

.content {
  flex: 1;
  transform: translateX(0) scale(1);
  animation: shrink-off .4s ease-out;
  background: linear-gradient(to right, #666 0%, #FFEB3B 100%);
}

.content.shrink {
  box-shadow: -2px 2px 20px #ddd;
  transform: translateX(250px) scale(.95);
  animation: shrink-on .4s ease-out;
}

.content > div { 
  position: relative;
  transition: background-color 0.8s ease; 
}

.content #openMenu { 
  cursor: pointer; 
  position: absolute;
  top: 10px;
  left: 10px;
}

.content #openMenu > div { 
  width: 20px; 
  border: solid #fff 1px;
  margin-bottom: 5px; 
}

.content #openMenu > div:nth-child(2) { width: 15px; }

.content #shoppingIcon {
  color: #fff;
  position: absolute;
  top: 10px;
  right: -10px;
  transform: rotateY(180deg);
}

.content .flaticon-cart:before { font-size: 24px }

.content #shoppingIcon span {
  color: #fff;
  background-color: red;
  padding: 1px 6px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  left: 35px;
  top: -4px;
  transform: rotateY(180deg);
}

.content .header {
  color: #fff;
  height: 100px;
  text-align: center;
  padding-top: 5px;
  letter-spacing: 1;
}

.content .header h3 {
  margin: 0;
  margin-bottom: 3px;
  font-weight: 100;
}

.content .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 414px 0 0;
  border-color: transparent #fff transparent transparent;
  margin-top: -1px;
}

.content .product {
  height: 448px;
  width: 100%;
  background-color: #fff;
}

.slider { position: absolute; top: 100px; height: 554px; }
.picture { position: relative; margin: 0 15px; }
.picture img { height: 362px; margin-left: 70px; position: relative; }
.title { position: relative; color: #777; margin: 0 15px; }
.title h3 { margin-bottom: 5px; font-family: 'Montserrat', sans-serif; letter-spacing: 1; }
.title span { color: green; font-weight: bold; margin-right: 5px; }
.description { color: #999; margin: 15px 15px; font-size: 14px; }
.picture span { 
  position: absolute;
    top: 160px;
    left: -20px;
    font-size: 10em;
    color: #ededed;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    letter-spacing: 4;
    text-transform: uppercase;
    transition: all .8s ease-in-out;
}
.buttons {
  display: none;
  position: absolute;
    top: 70px;
    right: 20px;
    animation: scale-up .8s ease;
}
.buttons > div {
  margin-bottom: 30px;
    border: solid 2px #ddd;
    padding: 10px 12px 10px 10px;
    border-radius: 50px;
    cursor: pointer;
}
.buttons > div:before { 
  font-size: 25px;
    font-weight: 600;
    color: #888;
    margin-left: 0;
    transition: color .6s ease-out;
}

.buttons > div:nth-child(1).selected { border-color: #F44336; }
.buttons > div:nth-child(1).selected:before { color: #F44336; }
.buttons > div:nth-child(2).selected { border-color: #2196F3; }
.buttons > div:nth-child(2).selected:before { color: #2196F3; }

.content .price {
  height: 80px;
  width: 100%;
  background-color: #fff;
  border-top: solid #ddd 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content .price > div {
  margin: 0 20px;
}

.content .price span {
  font-size: 30px;
  color: #00BC34;
}

.content .price a {
  font-size: 20px;
  background-color: #00BC34;
  color: #fff;
  text-decoration: none;
  padding: 8px 35px;
  border-radius: 50px;
}

.content .price a:hover { background-color: #00a52e; }

.no-animation {
  animation: none !important;
}

@keyframes shrink-on {
  0% {
    transform: translateX(0) scale(1);
  }
  70% {
    transform: translateX(250px) scale(.9);
  }
  100% {
    transform: translateX(250px) scale(.95);
  }
}

@keyframes shrink-off {
  0% {
    transform: translateX(250px) scale(.95);
  }
  70% {
    transform: translateX(-10px) scale(1.05);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes scale-up {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}


.slider .dropdown { 
  position: absolute; 
  top: 0; 
  right: 20px; 
  font-family: "Montserrat", sans-serif; 
  animation: scale-up .8s ease;
}
/** Dropdown **/
.dropdown {
  display: none;
  position: relative;
  width: 100px;
  color: #fff;
  transform-style: preserve-3d;
  perspective: 1500;
}
.dropdown.flip .front {
  transform: rotateX(180deg);
}
.dropdown.flip .back {
  transform: rotateX(0deg);
}
.dropdown .front,
.dropdown .back {
  transition: all 0.4s ease;
}
.dropdown .front {
  height: 40px;
  width: 90px;
  backface-visibility: hidden;
  cursor: pointer;
  border: solid 2px #ddd;
  border-radius: 50px;
  line-height: 40px;
  text-align: center;
  color: #888;
  margin-left: 5px;
}
.dropdown .front:after {
  content: "";
  position: relative;
  top: 15px;
  left: 4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #888;
}
.dropdown .back {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}
.dropdown ul {
  position: absolute;
  top: -120px;
  z-index: 1;
  width: calc(100% - 40px);
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
  list-style: none;
  border-radius: 3px;
}
.dropdown ul li {
  color: #888;
  line-height: 30px;
  cursor: pointer;
}

JS
/** https://github.com/emoreno911/UI-to-Code/tree/master/juuce_app **/
'use strict';

var dots = 3;
var contentElem = document.querySelector('.content');
var dotElems = document.querySelectorAll('.slider__dot');
var indicatorElem = document.querySelector('.slider__indicator');
Array.prototype.forEach.call(dotElems, function (dotElem) {
    dotElem.addEventListener('click', function (e) {
        var currentPos = parseInt(contentElem.getAttribute('data-pos'));
        var newPos = parseInt(dotElem.getAttribute('data-pos'));
        var newDirection = newPos > currentPos ? 'right' : 'left';
        var currentDirection = newPos < currentPos ? 'right' : 'left';
        indicatorElem.classList.remove('slider__indicator--' + currentDirection);
        indicatorElem.classList.add('slider__indicator--' + newDirection);
        contentElem.setAttribute('data-pos', newPos);
    });
});

// Hammer.js for touch gestures
var hammertime = new Hammer(contentElem);

// listen to touch events...
hammertime.on("swipeleft swiperight", function(evt) {
    var currentPos = parseInt(contentElem.getAttribute('data-pos')),
        newPos;
    
    if(evt.type == 'swipeleft')
        newPos = (currentPos + 1 > 2)? currentPos : currentPos + 1; 
    else if (evt.type == 'swiperight')
        newPos = (currentPos - 1 < 0)? currentPos : currentPos - 1;

    if(newPos != currentPos) {
        var newDirection = newPos > currentPos ? 'right' : 'left';
        var currentDirection = newPos < currentPos ? 'right' : 'left';
        indicatorElem.classList.remove('slider__indicator--' + currentDirection);
        indicatorElem.classList.add('slider__indicator--' + newDirection);
        contentElem.setAttribute('data-pos', newPos);
    }
});

/** Events **/
$('#openMenu').on('click', function(evt) {
	$('.content')
		.removeClass('no-animation') //disable initial animation
		.toggleClass('shrink');
});

$('.buttons > div').on('click', function(evt) {
	$(this).toggleClass('selected');
});


$(".dropdown").on("click", function(){
  $(this).toggleClass("flip");
})

$(".back ul li").on("click", function(){
    var val = $(this).text();
  $(this).closest('.dropdown').find('.front').text(val);
});
Host Instantly Drag and Drop Website Builder

 

Description

First prototype in my UI to Code repo https://github.com/emoreno911/UI-to-Code. Credit for the design to https://dribbble.com/sergiipetakh
Term
Mon, 11/27/2017 - 22:01

Related Codes

Pen ID
Pen ID
Pen ID