"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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/arnellebalane/pen/BRxgBj?limit=all&page=56&q=app" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; margin: 0; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 300; color: #222; background-image: linear-gradient(-10deg, #a5c0e8 35%, #9cbae6 35%); } /** App Screen **/ .screen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 365px; height: 650px; background-color: #fff; overflow: hidden; --primary-color: #faaaa1; } /** Blocks **/ .recipe-overview { -ms-flex-negative: 0; flex-shrink: 0; padding-bottom: 80px; position: relative; z-index: 1; background-color: var(--primary-color); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%); -webkit-transition: background-color 200ms ease; transition: background-color 200ms ease; } .recipe-details-wrapper { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding-top: 20px; margin-top: -80px; position: relative; } .recipe-details { width: 200%; padding: 70px 45px 30px 80px; position: relative; overflow: auto; } .recipe-details::-webkit-scrollbar { width: 3px; } .recipe-details::-webkit-scrollbar-thumb { background-color: var(--primary-color); } /** Carousel **/ .carousel { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px calc((100% - 200px) / 2); overflow: hidden; } .carousel__image { width: 200px; height: 270px; border-radius: 3px; cursor: pointer; -webkit-transition: -webkit-transform 200ms ease; transition: -webkit-transform 200ms ease; transition: transform 200ms ease; transition: transform 200ms ease, -webkit-transform 200ms ease; } .carousel__image:not(.carousel__image--current) { opacity: 0.5; -webkit-transform: scale(0.8); transform: scale(0.8); } .carousel__image--current { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } /** Recipe **/ .recipe { padding: 0 60px 0 30px; } .recipe__title { font-family: "Alegreya", serif; font-size: 2.6em; margin: 0; } .recipe__info { display: inline-block; margin: 0.75em 0; font-weight: bold; line-height: 16px; } .recipe__info:not(:last-of-type) { margin-right: 5px; } .recipe__description { margin: 0; } .recipe__icon { width: 40px; height: 40px; position: absolute; top: 70px; left: 25px; fill: var(--primary-color); -webkit-transition: fill 200ms ease; transition: fill 200ms ease; } /** Ingredients **/ .ingredients-title { margin: 0; font-size: inherit; } .ingredients { padding: 0; margin: 0; list-style: none; } .ingredient { padding: 1em 0; } .ingredient:not(:last-child) { border-bottom: 2px dotted #ddd; } /** Like Button **/ .like-btn { width: 50px; height: 50px; border: 0; position: absolute; top: 0; right: 20px; z-index: 2; font-size: 0; border-radius: 50%; background-color: #fff; -webkit-box-shadow: 0 1px 5px var(--primary-color); box-shadow: 0 1px 5px var(--primary-color); -webkit-transition: -webkit-box-shadow 200ms ease, -webkit-transform 200ms ease; transition: -webkit-box-shadow 200ms ease, -webkit-transform 200ms ease; transition: box-shadow 200ms ease, transform 200ms ease; transition: box-shadow 200ms ease, transform 200ms ease, -webkit-box-shadow 200ms ease, -webkit-transform 200ms ease; cursor: pointer; outline: none; } .like-btn:active { -webkit-transform: scale(0.9); transform: scale(0.9); } .like-btn path { fill: var(--primary-color); -webkit-transition: fill 200ms ease; transition: fill 200ms ease; } </style></head><body> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Yummy Food App</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,600"> <link rel="stylesheet" href="main.css"> </head> <body> <main class="screen"> <section class="recipe-overview"> <section class="carousel"> <img class="carousel__image carousel__image--current" src="http://cdn.arnellebalane.com/images/yummy-food-app/01.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/02.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/03.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/04.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/05.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/06.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/07.jpg" alt="Carousel Image"> </section> <header class="recipe"> <h1 class="recipe__title">Drinks in the sun</h1> <span class="recipe__info">4 Servings</span> <span class="recipe__info">10m</span> <p class="recipe__description">Hot days for frosty sips! Try this refreshing drink that will impress all your friends.</p> </header> </section> <div class="recipe-details-wrapper"> <section class="recipe-details"> <svg class="recipe__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path d="M15.5,21L14,8H16.23L15.1,3.46L16.84,3L18.09,8H22L20.5,21H15.5M5,11H10A3,3 0 0,1 13,14H2A3,3 0 0,1 5,11M13,18A3,3 0 0,1 10,21H5A3,3 0 0,1 2,18H13M3,15H8L9.5,16.5L11,15H12A1,1 0 0,1 13,16A1,1 0 0,1 12,17H3A1,1 0 0,1 2,16A1,1 0 0,1 3,15Z" /> </svg> <h2 class="ingredients-title">Ingredients</h2> <ul class="ingredients"> <li class="ingredient">2 cups rose, divided</li> <li class="ingredient">11/4 cups sugar</li> <li class="ingredient">3 cups frozen raspberries</li> </ul> </section> <button class="like-btn"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"> </svg> </button> </div> </main> <script src="main.js"></script> </body> </html> <!-- 365x650 --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >const carousel = (function() { const element = document.querySelector('.carousel'); const items = Array.from(element.querySelectorAll('.carousel__image')); const itemWidth = 200; const currentItemClass = 'carousel__image--current'; let index = 0; function render(index) { items.forEach((item, i) => { const transforms = [`translateX(-${itemWidth * index}px)`]; if (item.classList.contains(currentItemClass)) { item.classList.remove(currentItemClass); } if (index === i) { item.classList.add(currentItemClass); } else { transforms.push('scale(0.8)'); } item.style.transform = transforms.join(' '); }); } function previous() { if (index > 0) { render(--index); } return index; } function next() { if (index < items.length - 1) { render(++index); } return index; } return { render, previous, next }; })(); const data = [{ color: '#faaaa1', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.' }, { color: '#f8cf8b', name: 'Fresh Veggies', description: 'Crunchy and savory, best served with a glass of something cold in good company' }, { color: '#bbd686', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.' }, { color: '#788585', name: 'Fresh Veggies', description: 'Crunchy and savory, best served with a glass of something cold in good company' }, { color: '#508aa8', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.' }, { color: '#f8cf8b', name: 'Fresh Veggies', description: 'Crunchy and savory, best served with a glass of something cold in good company' }, { color: '#faaaa1', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.' }]; document.querySelector('.carousel').addEventListener('click', function(e) { const target = e.target; const currentClass = 'carousel__image--current'; if (target.classList.contains('carousel__image') && !target.classList.contains(currentClass)) { const previous = target.previousElementSibling; const next = target.nextElementSibling; if (previous && previous.classList.contains(currentClass)) { var index = carousel.next(); } else if (next && next.classList.contains(currentClass)) { var index = carousel.previous(); } const item = data[index]; document.querySelector('.screen').style.setProperty('--primary-color', item.color); document.querySelector('.recipe__title').textContent = item.name; document.querySelector('.recipe__description').textContent = item.description; } }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: