"mobile"
Bootstrap 4.0.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <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>✔</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>✔</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>✔</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> <script> /** 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); }); </script>
.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; }

Related: See More


Questions / Comments: