CodePen Embed - UI to Code #1: Juuce App

<div class="wrapper">
      <div class="sidebar">
        <div class="brand">JUUCE</div>
        <div class="menu">
          <ul>
            <li><i class="glyph-icon flaticon-user"></i> Profile</li>
            <li><i class="glyph-icon flaticon-like"></i> Wish list</li>
            <li><i class="glyph-icon flaticon-like-1"></i> Why buy juuce?</li>
            <li><i class="glyph-icon flaticon-vision"></i> About us</li>
            <li><i class="glyph-icon flaticon-mail"></i> Contact us</li>
            <li><i class="glyph-icon flaticon-info"></i> FAQ</li>
          </ul>
        </div>
      </div>

      <div class="content no-animation" data-pos="0">
        <div>

          <div id="openMenu">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div id="shoppingIcon">
            <span>4</span>
            <i class="glyph-icon flaticon-cart"></i>
          </div>
          <div class="header">
            <h3>Cold pressed juices</h3>
            <small>shop category</small>
          </div>
          <div class="triangle"></div>
          
          <div class="product">
            <div class="slider__dots">
              <a href="#" class="slider__dot" data-pos="0"></a>
              <a href="#" class="slider__dot" data-pos="1"></a>
              <a href="#" class="slider__dot" data-pos="2"></a>
              <a href="#" class="slider__indicator"></a>
            </div>
          </div>
          
          <div class="price">
            <div><span>€ 3.00</span></div>
            <div><a href="#">Add to cart</a></div>  
          </div>

          <div class="slider" data-pos="0">
            <div class="slider__slides">

              <div class="slider__slide">
                <div class="picture">
                  <span>ster</span><img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle3x.png?raw=true">
                  <div class="buttons">
                    <div class="glyph-icon flaticon-like"></div>
                    <div class="glyph-icon flaticon-arrows"></div>
                    <div class="glyph-icon flaticon-share"></div>
                  </div>
                </div>
                <div class="title">
                  <h3>Booster</h3><small><span>&#10004;</span> In Stock</small>
                  <div class="dropdown">
                    <div class="front"> 250 ml </div>
                    <div class="back"> 
                      <ul>
                        <li>250 ml</li>
                        <li>500 ml</li>
                        <li>1 lt</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="description">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</div>
              </div>
              <div class="slider__slide">
                <div class="picture">
                  <span>Fuel</span> <img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle2x.png?raw=true">
                  <div class="buttons">
                    <div class="glyph-icon flaticon-like"></div>
                    <div class="glyph-icon flaticon-arrows"></div>
                    <div class="glyph-icon flaticon-share"></div>
                  </div>
                </div>
                <div class="title">
                  <h3>Rocket Fuel</h3><small><span>&#10004;</span> In Stock</small>
                  <div class="dropdown">
                    <div class="front"> 250 ml </div>
                    <div class="back"> 
                      <ul>
                        <li>250 ml</li>
                        <li>500 ml</li>
                        <li>1 lt</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="description">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</div>
              </div>
              <div class="slider__slide">
                <div class="picture">
                  <span>Red</span><img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle1x.png?raw=true">
                  <div class="buttons">
                    <div class="glyph-icon flaticon-like"></div>
                    <div class="glyph-icon flaticon-arrows"></div>
                    <div class="glyph-icon flaticon-share"></div>
                  </div>
                </div>
                <div class="title">
                  <h3>Big Red</h3><small><span>&#10004;</span> In Stock</small>
                  <div class="dropdown">
                    <div class="front"> 250 ml </div>
                    <div class="back"> 
                      <ul>
                        <li>250 ml</li>
                        <li>500 ml</li>
                        <li>1 lt</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="description">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</div>
              </div>

            </div>
          </div>

        </div>
      </div>
      
    </div>

.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 {
  overflow:hidden;
  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;
}

/** 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);
});

This Pen is owned by Eduardo Moreno on CodePen.

See more by @emoreno911 on CodePen

External CSS

External JavaScript