-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 10 KB
/
index.html
1
<!DOCTYPE html><html class="page" lang="ru"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HTML Academy: Кэт энерджи</title><link href="css/style.min.css" rel="stylesheet"><link rel="icon" href="favicon/favicon-16x16.ico" sizes="16x16" type="image/vnd.microsoft.icon"><link rel="icon" href="favicon/favicon-32x32.ico" sizes="32x32" type="image/vnd.microsoft.icon"><link rel="icon" href="favicon/favicon.svg" sizes="any" type="image/svg+xml"><link rel="preload" href="/fonts/oswaldregular.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/fonts/oswaldmedium.woff2" as="font" type="font/woff2" crossorigin="anonymous"></head><body class="page-body"><div class="intro"><header class="page-header container"><a class="page-header__logo"><picture><source media="(min-width: 1440px)" srcset="img/logo-desktop.svg"><source media="(min-width: 768px)" srcset="img/logo-tablet.svg"><img class="page-header__logo-image" src="img/logo-mobile.svg" width="34" height="38" alt="Функциональное питание для котов"></picture><img class="page-header__logo-brand" src="img/logo-brandname.svg" width="101" height="18" alt="Cat Energy"></a><nav class="main-nav main-nav--closed main-nav--no-js"><button type="button" class="main-nav__toggle main-nav__toggle--no-js" aria-label="Показать/скрыть меню"></button><div class="main-nav__wrapper"><ul class="main-nav__list"><li class="main-nav__item"><a class="main-nav__link main-nav__link--white main-nav__link--active">Главная</a></li><li class="main-nav__item"><a class="main-nav__link main-nav__link--white" href="catalog.html">Каталог продукции</a></li><li class="main-nav__item"><a class="main-nav__link main-nav__link--white" href="programs.html">Подбор программы</a></li></ul></div></nav></header><section class="hero container"><div class="hero__container"><h1 class="visually-hidden">Cat Energy - Функциональное питание для котов</h1><h2 class="hero__title">Функциональное питание для котов</h2><p class="hero__slogan">Занялся собой? Займись котом!</p><picture><source type="image/webp" media="(min-width: 1440px)" srcset="img/hero/hero-chicken-desktop.webp, img/hero/[email protected] 2x"><source media="(min-width: 1440px)" srcset="img/hero/hero-chicken-desktop.png, img/hero/[email protected] 2x"><source type="image/webp" media="(min-width: 768px)" srcset="img/hero/hero-chicken-tablet.webp, img/hero/[email protected] 2x"><source media="(min-width: 768px)" srcset="img/hero/hero-chicken-tablet.jpg, img/hero/[email protected] 2x"><img class="hero__image" src="img/hero/hero-chicken-mobile.png" srcset="img/hero/[email protected] 2x" width="280" height="270" alt="Еда CAT ENERGY Pro"></picture><a href="/programs.html" class="button button--mobile-wide button--lg">Подобрать программу</a></div></section></div><main class="page-main"><section class="programs container"><h2 class="visually-hidden">Список программ</h2><ul class="programs__list"><li class="programs__item programs__item--lean"><h3 class="programs__title">Похудение</h3><p class="programs__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p><a class="programs__link" href="#">Каталог Slim</a></li><li class="programs__item programs__item--fat"><h3 class="programs__title">Набор массы</h3><p class="programs__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p><a class="programs__link" href="#">Каталог Pro</a></li></ul></section><section class="works container"><h2 class="works__title">Как это работает</h2><ul class="works__list"><li class="works__item works__item--leaf"><p class="works__description">Функциональное питание содержит только полезные питательные вещества.</p></li><li class="works__item works__item--water"><p class="works__description">Выпускается в виде порошка, который нужно лишь залить кипятком и готово.</p></li><li class="works__item works__item--nutrition"><p class="works__description">Замените один-два приема обычной еды на наше функциональное питание.</p></li><li class="works__item works__item--clock"><p class="works__description">Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!</p></li></ul></section><section class="example"><div class="container example__wrapper"><h2 class="example__title">Живой пример</h2><p class="example__description">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p><div class="indicators"><dl class="indicators__list"><div class="indicators__item indicators__item--bordered"><dt class="indicators__number">5 кг</dt><dd class="indicators__description">снижение веса</dd></div><div class="indicators__item indicators__item--bordered"><dt class="indicators__number">60 дней</dt><dd class="indicators__description">затрачено времени</dd></div><div class="indicators__item indicators__item--full"><dt class="indicators__number">15 000 руб.</dt><dd class="indicators__description">Затраты на питание:</dd></div></dl></div><div class="difference slider"><ul class="difference__list slider__list"><li class="difference__item slider__item"><picture><source media="(min-width: 1440px)" srcset="img/example/cat-before-desktop.png, img/example/[email protected] 2x"><source media="(min-width: 768px)" srcset="img/example/cat-before-tablet.png, img/example/[email protected] 2x"><img class="difference__image" src="img/example/cat-before-mobile.png" srcset="img/example/[email protected] 2x" width="311" height="232" alt="Кот до тренеровок"></picture></li><li class="difference__item slider__item"><picture><source media="(min-width: 1440px)" srcset="img/example/cat-after-desktop.png, img/example/[email protected] 2x"><source media="(min-width: 768px)" srcset="img/example/cat-after-tablet.png, img/example/[email protected] 2x"><img class="difference__image difference__image--lean" src="img/example/cat-after-mobile.png" srcset="img/example/[email protected] 2x" width="311" height="232" alt="Кот после тренеровок"></picture></li></ul><div class="difference__toggles slider__toggles"><button class="slider__toggle slider__toggle--current" type="button">Было</button> <input class="slider__range" type="range" aria-label="Переключить фотографию"> <button class="slider__toggle" type="button">Стало</button></div></div></div></section><section class="contact"><div class="contact__container"><div class="contact__block"><h2 class="visually-hidden">Наши контакты</h2><p class="contact__slogan">Приглашаем<br>к сотрудничеству дилеров</p><address class="contact__address"><span>ул. Большая Конюшенная, д. 19/8</span><span>Санкт-Петербург</span></address></div></div><div class="contact__map contact__map--no-js"></div><picture><source type="image/webp" media="(min-width: 1440px)" srcset="img/map/location-desktop.webp, img/map/[email protected] 2x"><source media="(min-width: 1440px)" srcset="img/map/location-desktop.jpg, img/map/[email protected] 2x"><source type="image/webp" media="(min-width: 768px)" srcset="img/map/location-tablet.webp, img/map/[email protected] 2x"><source media="(min-width: 768px)" srcset="img/map/location-desktop.jpg, img/map/[email protected] 2x"><source type="image/webp" srcset="./img/map/location-mobile.webp, img/map/location-mobile.webp 2x"><img class="contact__map-image" src="./img/map/location-mobile.jpg" srcset="img/map/[email protected] 2x" width="320" height="362" alt="Карта"></picture></section></main><footer class="page-footer"><div class="container page-footer__container"><a class="page-footer__logo"><img src="img/logo-brandname.svg" width="128" height="24" alt="Cat Energy"></a><ul class="page-footer__social social-list"><li class="social-list__item"><a class="social-list__link" href="https://vk.com/htmlacademy" aria-label="Facebook"><svg class="social-list__image" width="29" height="18"><use xlink:href="img/sprite.svg#icon-vk"/></svg></a></li><li class="social-list__item"><a class="social-list__link" href="https://instagram.com/htmlacademy" aria-label="Instagram"><svg class="social-list__image" width="23" height="23"><use xlink:href="img/sprite.svg#icon-instagram"/></svg></a></li><li class="social-list__item"><a class="social-list__link" href="https://facebook.com/htmlacademy" aria-label="Вконтакте"><svg class="social-list__image" width="23" height="29"><use xlink:href="img/sprite.svg#icon-facebook"/></svg></a></li></ul><a class="page-footer__copyright" href="https://htmlacademy.ru/intensive/adaptive" aria-label="Сайт HTML Academy"><span class="page-footer__copyright-text">HTML Academy</span> <svg width="27" height="34"><use xlink:href="img/sprite.svg#icon-html-academy"/></svg></a></div></footer><script src="./js/app.min.js"></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEjUDmUCfkNuhtJShA6MPyVSkjtKCx6cs&callback=initMap" async defer="defer"></script></body></html>