<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="header__left-block">
<div class="header__logo">
<img src="icons/logo.svg" alt="Логотип">
</div>
<nav class="header__links">
<a href="#" class="header__link">Доставка питания</a>
<a href="#" class="header__link">Второй пункт</a>
</nav>
</div>
<div class="header__right-block">
<button data-modal class="btn btn_white">Связаться с нами</button>
</div>
</header>
<div class="sidepanel">
<div class="sidepanel__text"><span>Социальные сети</span></div>
<div class="sidepanel__divider"></div>
<a href="#" class="sidepanel__icon">
<img src="icons/instagram.svg" alt="instagram">
</a>
<a href="#" class="sidepanel__icon">
<img src="icons/facebook.svg" alt="facebook">
</a>
</div>
<div class="preview">
<div class="bgc_blue"></div>
<div class="container">
<div class="tabcontainer">
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
</div>
</div>
<!-- <div class="tabcontent">
<img src="img/tabs/elite.jpg" alt="elite">
<div class="tabcontent__descr">
Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!
</div>
</div> -->
<!-- <div class="tabcontent">
<img src="img/tabs/post.jpg" alt="post">
<div class="tabcontent__descr">
Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
</div>
</div> -->
<div class="tabheader">
<h3>Выберите стиль питания</h3>
<div class="tabheader__items">
<div class="tabheader__item tabheader__item_active">Фитнес</div>
<div class="tabheader__item">Премиум</div>
<div class="tabheader__item">Постное</div>
<div class="tabheader__item">Сбалансированное</div>
</div>
</div>
</div>
<div class="preview__life">Живи полной жизнью!</div>
</div>
</div>
<div class="divider"></div>
<div class="offer">
<div class="bgc_y"></div>
<div class="container">
<div class="offer__text">
<h2 class="title">Что мы можем вам предложить?</h2>
<div class="offer__descr">
Наша основная идея - это правильное питание. Оно может быть простым и вкусным. Мы не просто доставка, мы сервис! Мы взяли на себя все расчеты БЖУ, калорийности, объемов порций и прочие важные, но скучные аспекты. Вам остается только полезная, сытная и правильная еда, которую мы привозим прямо под дверь.
</div>
</div>
<div class="offer__action">
<button data-modal class="btn btn_dark">Связаться с нами</button>
</div>
</div>
<div class="container">
<div class="offer__advantages">
<h2>Быстро и полезно</h2>
<div class="offer__advantages-text">
Готовка дома занимает много сил, времени и нервов. Мы привозим еду сразу на целый день, и ты можешь действовать так, как тебе удобно, не подстраиваясь ни под кого и будучи уверенным в качестве продукта!
</div>
<h2>Правильный рацион</h2>
<div class="offer__advantages-text">
Мы разработали специальное меню, где учтены все нюансы правильного питания, от баланса БЖУ до их приготовления и дробления рациона.
</div>
</div>
<div class="offer__slider">
<div class="offer__slider-counter">
<div class="offer__slider-prev">
<img src="icons/left.svg" alt="prev">
</div>
<span id="current">03</span>
/
<span id="total">04</span>
<div class="offer__slider-next">
<img src="icons/right.svg" alt="next">
</div>
</div>
<div class="offer__slider-wrapper">
<div class="offer__slide">
<img src="img/slider/pepper.jpg" alt="pepper">
</div>
<!-- <div class="offer__slide">
<img src="img/slider/food-12.jpg" alt="food">
</div>
<div class="offer__slide">
<img src="img/slider/olive-oil.jpg" alt="oil">
</div>
<div class="offer__slide">
<img src="img/slider/paprika.jpg" alt="paprika">
</div> -->
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="calculating">
<div class="container">
<h2 class="title">Рассчитаем вашу потребность в калориях?
</h2>
<div class="calculating__field">
<div class="calculating__subtitle">
Ваш пол
</div>
<div class="calculating__choose" id="gender">
<div class="calculating__choose-item calculating__choose-item_active">Женщина</div>
<div class="calculating__choose-item">Мужчина</div>
</div>
<div class="calculating__subtitle">
Ваша конституция
</div>
<div class="calculating__choose calculating__choose_medium">
<input type="text" id="height" placeholder="Введите рост" class="calculating__choose-item">
<input type="text" id="weight" placeholder="Введите вес" class="calculating__choose-item">
<input type="text" id="age" placeholder="Введите возраст" class="calculating__choose-item">
</div>
<div class="calculating__subtitle">
Выберите вашу физическая активность
</div>
<div class="calculating__choose calculating__choose_big">
<div id="low" class="calculating__choose-item">Низкая активность </div>
<div id="small" class="calculating__choose-item calculating__choose-item_active">Невысокая активность</div>
<div id="medium" class="calculating__choose-item">Умеренная активность</div>
<div id="high" class="calculating__choose-item">Высокая активность</div>
</div>
<div class="calculating__divider"></div>
<div class="calculating__total">
<div class="calculating__subtitle">
Ваша суточная норма калорий:
</div>
<div class="calculating__result">
<span>2700</span> ккал
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="menu">
<h2 class="title">Наше меню на день</h2>
<div class="menu__field">
<div class="container">
<div class="menu__item">
<img src="img/tabs/vegy.jpg" alt="vegy">
<h3 class="menu__item-subtitle">Меню "Фитнес"</h3>
<div class="menu__item-descr">Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Продукт активных и здоровых людей. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Цена:</div>
<div class="menu__item-total"><span>229</span> грн/день</div>
</div>
</div>
<div class="menu__item">
<img src="img/tabs/elite.jpg" alt="elite">
<h3 class="menu__item-subtitle">Меню “Премиум”</h3>
<div class="menu__item-descr">В меню “Премиум” мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Цена:</div>
<div class="menu__item-total"><span>550</span> грн/день</div>
</div>
</div>
<div class="menu__item">
<img src="img/tabs/post.jpg" alt="post">
<h3 class="menu__item-subtitle">Меню "Постное"</h3>
<div class="menu__item-descr">Меню “Постное” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения, молоко из миндаля, овса, кокоса или гречки, правильное количество белков за счет тофу и импортных вегетарианских стейков. </div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Цена:</div>
<div class="menu__item-total"><span>430</span> грн/день</div>
</div>
</div>
</div>
</div>
</div>
<div class="order">
<div class="container">
<div class="title">Заказывай пробный день прямо сейчас!</div>
<form action="#" class="order__form">
<input required placeholder="Ваше имя" name="name" type="text" class="order__input">
<input required placeholder="Ваш номер телефона" name="phone" type="phone" class="order__input">
<img src="icons/right.svg" alt="right">
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
<div class="divider"></div>
<div class="promotion">
<div class="bgc_y"></div>
<div class="container">
<div class="promotion__text">
<div class="title">Акция для новых клиентов!</div>
<div class="promotion__descr">
Мы ценим каждого клиента и предлагаем вам стать одним из них на очень выгодных условиях.
Каждому, кто закажет доставку питание на неделю, будет предоставлена скидка в размере <span>20%!</span>
<br><br>
Акция закончится 20 мая в 00:00
</div>
</div>
<div class="promotion__timer">
<div class="title">Осталось до конца акции:</div>
<div class="timer">
<div class="timer__block">
<span id="days">12</span>
дней
</div>
<div class="timer__block">
<span id="hours">20</span>
часов
</div>
<div class="timer__block">
<span id="minutes">56</span>
минут
</div>
<div class="timer__block">
<span id="seconds">20</span>
секунд
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="social">
<div class="subtitle">Мы в социальных сетях:</div>
<a href="#" class="link">instagram</a>
<a href="#" class="link">facebook</a>
</div>
<div class="pepper">
<img src="icons/veg.svg" alt="pepper">
</div>
<div class="call">
<div class="subtitle">Или позвоните нам</div>
<a href="#" class="link">+380678341034</a>
<a href="#" class="link">+380500941356</a>
</div>
</div>
</footer>
<div class="modal">
<div class="modal__dialog">
<div class="modal__content">
<form action="#">
<div data-close class="modal__close">×</div>
<div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
<input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
<input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext);*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif}a{text-decoration:none}.btn{width:220px;height:65px;display:flex;justify-content:center;align-items:center;background-color:#fff;font-size:18px;font-weight:700;border:1px solid rgba(0,0,0,.2);box-shadow:0 4px 15px rgba(0,0,0,.2);cursor:pointer;transition:.3s all;outline:0}.btn_white{background-color:#fff}.btn_dark{background-color:#303030;color:#fff;border:none}.btn_min{height:50px}.btn:hover{box-shadow:0 4px 30px rgba(0,0,0,.3)}.container{max-width:1200px;margin:0 auto}.divider{width:330px;height:1px;margin:0 auto;background-color:rgba(0,0,0,.5)}.title{font-size:36px;font-weight:400}.header{display:flex;justify-content:space-between;align-items:center;height:150px;padding:0 100px}.header__left-block{display:flex;justify-content:space-between;min-width:550px}.header__logo{max-width:170px}.header__logo img{width:100%}.header__links{display:flex;align-items:center}.header__link{position:relative;margin-right:45px;font-weight:700;font-size:18px;color:#303030}.header__link:after{content:'';position:absolute;display:block;width:110%;left:-5%;bottom:-1px;z-index:-1;height:8px;background:#54ed39}.header__link:last-child{margin-right:0}.sidepanel{position:fixed;left:60px;top:240px;height:400px;width:25px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.sidepanel__text{width:120px;height:120px;font-size:14px}.sidepanel__text span{display:flex;transform:rotate(-90deg) translateX(-50px)}.sidepanel__divider{width:1px;height:165px;background-color:#000}.sidepanel__icon{width:24px;height:24px}.sidepanel__icon img{width:100%}.preview{padding:28px 0 100px 0;position:relative}.preview__life{font-weight:700;font-size:20px;margin-left:35px;margin-top:35px}.bgc_blue{position:absolute;right:0;top:-155px;width:50vw;height:900px;background:rgba(146,242,255,.15);z-index:-1}.tabcontainer{display:flex;width:1130px;margin:0 auto;box-shadow:0 4px 30px rgba(0,0,0,.25)}.tabcontent{width:850px;position:relative}.tabcontent img{width:100%;height:100%;object-fit:cover}.tabcontent__descr{position:absolute;top:300px;right:-177px;width:550px;height:359px;background:rgba(251,254,93,.8);padding:50px;font-size:24px;font-weight:300;line-height:36px;color:rgba(0,0,0,.7)}.tabheader{width:280px;padding:35px 30px;background-color:#fff}.tabheader h3{font-weight:700;font-size:16px}.tabheader__items{margin-top:35px;padding-left:26px;border-left:1px solid #000}.tabheader__item{font-weight:700;font-size:18px;font-weight:300;margin-top:10px;color:rgba(0,0,0,.6);cursor:pointer;transition:.3s all}.tabheader__item_active{color:#000;font-size:22px;font-weight:700}.offer{padding:70px 0 100px 0;position:relative}.offer .container{display:flex;justify-content:space-between}.offer .bgc_y{position:absolute;width:1109px;height:780px;background:rgba(243,255,222,.45);z-index:-1;top:50px}.offer__text{width:580px}.offer__descr{font-size:18px;margin-top:30px;font-weight:300;line-height:24px}.offer__action{display:flex;align-items:center;justify-content:flex-end}.offer__advantages{width:330px;margin-top:50px}.offer__advantages h2{font-weight:700;font-size:20px;margin-top:20px}.offer__advantages h2:first-child{margin-top:70px}.offer__advantages-text{margin-top:20px;font-size:18px;font-weight:300;line-height:21px}.offer__slider{width:650px;margin-top:50px;display:flex;flex-direction:column;align-items:flex-end}.offer__slider-counter{display:flex;width:180px;align-items:center;font-size:24px;color:rgba(0,0,0,.5)}.offer__slider-wrapper{width:100%;margin-top:15px;box-shadow:0 4px 30px rgba(0,0,0,.25)}.offer__slider-prev{margin-right:10px;cursor:pointer}.offer__slider-next{margin-left:10px;cursor:pointer}.offer__slider #current{font-size:48px;font-weight:700;color:#000}.offer__slide{width:100%;height:390px}.offer__slide img{width:100%;height:100%;object-fit:cover}.calculating{padding:50px 0}.calculating .title{text-align:center}.calculating__field{width:100%;margin-top:50px;background:rgba(146,242,255,.15);padding:30px 0 40px 0}.calculating__subtitle{text-align:center;font-size:18px;font-weight:700;margin-top:30px}.calculating__subtitle:first-child{margin-top:0}.calculating #gender:after{content:'';position:absolute;top:50%;transform:translateY(-50%);display:block;width:16px;height:16px;background:url(../icons/switch.svg) center center/cover no-repeat}.calculating__choose{position:relative;display:flex;margin-top:30px;justify-content:center}.calculating__choose-item{display:flex;align-items:center;justify-content:center;width:170px;height:50px;padding:0 10px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);border:none;text-align:center;font-size:14px;cursor:pointer;outline:0;transition:.3s all}.calculating__choose-item_active{color:#fff;background-color:#54ed39}.calculating__choose_medium{width:743px;justify-content:space-between;margin:30px auto 0 auto}.calculating__choose_big{width:930px;justify-content:space-between;margin:30px auto 0 auto}.calculating__choose_big .calculating__choose-item{width:200px}.calculating__divider{width:490px;height:1px;margin:40px auto;background-color:rgba(0,0,0,.2)}.calculating__total{width:490px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.calculating__result{font-size:18px;font-weight:700}.calculating__result span{font-size:42px}.menu{padding:40px 0 50px 0}.menu .container{display:flex;justify-content:space-between;align-items:flex-start}.menu .title{text-align:center}.menu__field{margin-top:50px;padding:50px 0;width:100%;background:rgba(249,254,126,.25)}.menu__item{width:320px;min-height:450px;background:#fff;box-shadow:0 4px 25px rgba(0,0,0,.25);font-size:16px;font-weight:300}.menu__item img{width:100%;height:200px;object-fit:cover}.menu__item-subtitle{font-weight:700;font-size:18px;padding:0 20px;margin-top:20px}.menu__item-descr{margin-top:20px;padding:0 20px}.menu__item-divider{width:100%;height:1px;background-color:rgba(0,0,0,.25);margin-top:40px}.menu__item-price{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.menu__item-price span{font-size:24px;font-weight:700}.order{padding-bottom:80px}.order .title{text-align:center}.order__form{margin-top:70px;padding:0 100px;display:flex;justify-content:space-between;align-items:center}.order__form img{transform:scale(1.5)}.order__input{width:280px;height:50px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);border:none;font-size:18px;text-align:center;padding:0 20px;outline:0}.promotion{padding:70px 0 240px 0;position:relative}.promotion .container{display:flex}.promotion .bgc_y{position:absolute;width:50%;height:499px;background:rgba(243,255,222,.35);z-index:-1;top:-50px;left:0}.promotion__text{width:50%}.promotion__descr{margin-top:40px;font-size:20px;line-height:24px;font-weight:300}.promotion__descr span{font-weight:700;font-size:26px}.promotion__timer{width:50%}.promotion__timer .title{text-align:right}.promotion__timer .timer{margin-top:60px;padding-left:95px;display:flex;justify-content:space-between;align-items:center}.promotion__timer .timer__block{width:102px;height:120px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.25);font-size:16px;font-weight:300;text-align:center}.promotion__timer .timer__block span{display:block;margin-top:20px;margin-bottom:5px;font-size:56px;font-weight:700}.footer{min-height:180px;background-color:#303030;padding:45px 0 50px 0;color:#fff}.footer .container{height:100%;display:flex;justify-content:space-between;align-items:flex-end}.footer .subtitle{font-size:20px}.footer .link{display:block;margin-top:15px;font-size:16px;color:#fff}.footer .call{text-align:right}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;background-color:rgba(0,0,0,.5)}.modal__dialog{max-width:500px;margin:40px auto}.modal__content{position:relative;width:100%;padding:40px;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px;max-height:80vh;overflow-y:auto}.modal__close{position:absolute;top:8px;right:14px;font-size:30px;color:#000;opacity:.5;font-weight:700;border:none;background-color:transparent;cursor:pointer}.modal__title{text-align:center;font-size:22px;text-transform:uppercase}.modal__input{display:block;margin:20px auto 20px auto;width:280px;height:50px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);border:none;font-size:18px;text-align:center;padding:0 20px;outline:0}.modal .btn{display:block;width:280px;margin:0 auto}
.modal.show {
display: block;
}
const modalTrigger = document.querySelector("[data-modal]"),
modal = document.querySelector(".modal"),
modalCloseBtn = document.querySelector("[data-close]");
modalTrigger.addEventListener("click", () => {
console.log('modalTrigger', modal);
modal.classList.add("show");
modal.classList.remove("hide");
});
modalCloseBtn.addEventListener("click", () => {
modal.classList.add("hide");
modal.classList.remove("show");
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.