<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>
