Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Адаптивная сетка #4

Merged
merged 7 commits into from
Apr 17, 2024
Merged

Адаптивная сетка #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9d3ea81
Добавляет адаптивную сетку на страницу главной и каталога
posplawone Apr 12, 2024
88279f7
Добавляет мобильную адаптивную сетку для главной страницы
posplawone Apr 14, 2024
ee1caf2
Добавляет мобильную адаптивную сетку для страницы каталога
posplawone Apr 14, 2024
144c563
Добавляет мобильную адаптивную сетку для страницы подбора программы
posplawone Apr 14, 2024
31a725a
Добавляет планшетную адаптивную сетку для всех страниц
posplawone Apr 17, 2024
91b83cf
Добавляет вьюпорт на страницы
posplawone Apr 17, 2024
745ccfe
Merge branch 'master' into module4-task1
DoberBober Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
631 changes: 341 additions & 290 deletions source/catalog.html
View file
Open in desktop

Large diffs are not rendered by default.

63 changes: 35 additions & 28 deletions source/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,36 @@
<meta charset="UTF-8">
<title>Cat Energy</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="page__body">
<header class="site-header">
<a class="site-header__link" href="index.html">
<img class="site-header__link--logo" src="img/logo.svg" width="202" height="59"
<img class="site-header__image" src="img/logo.svg" width="202" height="59"
alt="Логотип «Кэт Энерджи»">
</a>
<nav class="site-header__navigation">
<button class="site-header__toggle visually-hidden" type="button"><span>Открыть меню</span></button>
<div class="site-header__wrapper">
<ul class="site-header__list">
<li class="site-header__item">
<a class="site-header__link" href="index.html">
Главная
</a>
</li>
<li class="site-header__item">
<a class="site-header__link" href="catalog.html">
Каталог продукции
</a>
</li>
<li class="site-header__item site-header__item--current">
<a class="site-header__link" href="#">
Подбор программы
</a>
</li>
</ul>
<button class="main-header__toggle" type="button">
<span class="visually-hidden">Открыть меню</span>
<img class="site-header__image" src="img/header-toogle.svg" width="24" height="24">
</button>
<ul class="site-header__list">
<li class="site-header__item">
<a class="site-header__link" href="index.html">
Главная
</a>
</li>
<li class="site-header__item">
<a class="site-header__link" href="catalog.html">
Каталог продукции
</a>
</li>
<li class="site-header__item site-header__item--current">
<a class="site-header__link" href="#">
Подбор программы
</a>
</li>
</ul>
</nav>
</header>

Expand All @@ -48,11 +51,11 @@ <h1 class="form__title">Подбор программы</h1>
<input class="input-block__field" id="form__phone" name="form__phone" placeholder="Барсик">
</li>
<li class="form__item input-block">
<label class="input-block__label" for="form__weight">Вес (кг):*</label>
<label class="input-block__label" for="form__weight">Вес&nbsp;(кг):*</label>
<input class="input-block__field" id="form__weight" name="form__weight" placeholder="7">
</li>
<li class="form__item input-block">
<label class="input-block__label" for="form__age">Возраст (лет):*</label>
<label class="input-block__label" for="form__age">Возраст&nbsp;(лет):*</label>
<input class="input-block__field" id="form__age" name="form__age" placeholder="7">
</li>
</ul>
Expand All @@ -61,7 +64,7 @@ <h1 class="form__title">Подбор программы</h1>
<ul class="form__list">
<li class="form__item radio-block">
<label class="radio-block__control">
<input class="radio-block__input" type="radio" name="food__program" value="slimming">
<input class="radio-block__input" type="radio" name="food__program" value="slimming" checked>
<span class="radio-block__label">Похудение</span>
</label>
</li>
Expand Down Expand Up @@ -104,7 +107,7 @@ <h2 class="contacts__title">Контактные данные (владельц
<div class="comment__wrapper">
<h2 class="comment__title">Комментарий</h2>
<label class="visually-hidden" for="comment__message"></label>
<textarea class="comment__message--field field" id="comment-message" name="commment-message" placeholder="Расскажите обо всех повадках кота" required></textarea>
<textarea class="comment__message" id="comment-message" name="commment-message" placeholder="Расскажите обо всех повадках кота" required></textarea>
</div>
</section>

Expand Down Expand Up @@ -151,14 +154,15 @@ <h2 class="additionally__title">Дополнительно</h2>
Приглашаем к&nbsp;сотрудничеству дилеров!
</p>
<div class="map__description">
<p class="map__description--address">
<p class="map__address">
ул. Большая Конюшенная,д.&nbsp;19/8
</p>
<span class="map__description--city">
<span class="map__city">
Санкт-Петербург
</span>
</div>
</address>
<img class="map__image" src="img/map-mobile.jpg" width="320" height="362" alt="">
</div>
</section>
</main>
Expand Down Expand Up @@ -191,10 +195,13 @@ <h2 class="additionally__title">Дополнительно</h2>
</div>
<div class="main-footer__copyright copyright">
<a class="copyright__link" href="https://htmlacademy.ru">
<img class="copyright__image" src="img/html-academy.svg" width="168" height="37">
HTML Academy
</a>
<a class="copyright__link-image" href="https://htmlacademy.ru">
<img class="copyright__image" src="img/copyright.svg" width="27" height="34">
</a>
</div>
</div>
</footer>
</body>
</html>
</html>
1 change: 1 addition & 0 deletions source/img/copyright.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions source/img/header-toogle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/img/map-mobile.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 59 additions & 53 deletions source/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,54 @@
<meta charset="UTF-8">
<title>Cat Energy</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="page__body">
<header class="main-header">
<a class="main-header__link" href="index.html">
<img class="main-header__link--logo" src="img/logo.svg" width="202" height="59"
<img class="main-header__logo" src="img/logo.svg" width="202" height="59"
alt="Логотип «Кэт Энерджи»">
</a>
<nav class="main-header__navigation">
<button class="main-header__toggle visually-hidden" type="button"><span>Открыть меню</span></button>
<div class="main-header__wrapper">
<ul class="main-header__list">
<li class="main-header__item main-header__item--current">
<a class="main-header__link" href="#">
Главная
</a>
</li>
<li class="main-header__item">
<a class="main-header__link" href="catalog.html">
Каталог продукции
</a>
</li>
<li class="main-header__item">
<a class="main-header__link" href="form.html">
Подбор программы
</a>
</li>
</ul>
<button class="main-header__toggle" type="button">
<span class="visually-hidden">Открыть меню</span>
<img class="main-header__image" src="img/header-toogle.svg" width="24" height="24">
</button>
<ul class="main-header__list">
<li class="main-header__item main-header__item--current">
<a class="main-header__link" href="#">
Главная
</a>
</li>
<li class="main-header__item">
<a class="main-header__link" href="catalog.html">
Каталог продукции
</a>
</li>
<li class="main-header__item">
<a class="main-header__link" href="form.html">
Подбор программы
</a>
</li>
</ul>
</nav>
</header>

<main class="main-container">

<h1 class="visually-hidden">Кэт Энерджи - функциональное питание для котов.</h1>

<section class="program">
<div class="program__wrapper">
<header class="program__header">
<h2 class="program__title">
<h1 class="program__title">
Функциональное питание&nbsp;для&nbsp;котов
</h2>
</h1>
<p class="program__slogan">
Занялся собой? Займись котом!
</p>
<a class="program__toggle" href="#">
Подобрать программу
</a>
</header>
<img class="program__image" src="img/program-image.png" width="552" height="499" alt="Упаковка корма cо вкусом курицы">
<img class="program__image" src="img/program-image.png" width="280" height="270" alt="Упаковка корма cо вкусом курицы">
<a class="program__toggle" href="#">
Подобрать программу
</a>
</div>
</section>

Expand All @@ -61,9 +61,9 @@ <h2 class="visually-hidden">
Программы питания, которые подойдут Вашему питомцу.
</h2>
<ul class="food__list">
<li class="food__item food__item--slimming">
<li class="food__item">
<h3 class="food__title">
<img class="food__image" src="img/food-slimming.svg" width="100" height="106" alt="Иконка стройной кошки">
<img class="food__image-slimming" src="img/food-slimming.svg" width="100" height="106" alt="Иконка стройной кошки">
Похудение
</h3>
<p class="food__description">
Expand All @@ -74,9 +74,9 @@ <h3 class="food__title">
<img class="food__link" src="img/food-black-arrow.svg" width="24" height="12">
</a>
</li>
<li class="food__item food__item--weight">
<li class="food__item">
<h3 class="food__title">
<img class="food__image" src="img/food-weight.svg" width="134" height="100" alt="Иконка мускулистой кошки">
<img class="food__image-weight" src="img/food-weight.svg" width="134" height="100" alt="Иконка мускулистой кошки">
Набор массы
</h3>
<p class="food__description">
Expand Down Expand Up @@ -137,26 +137,28 @@ <h2 class="example__title">
<p class="example__description">
Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.
</p>
<div class="example__tables">
<div class="example__result">
<p class="example__result--title">5 кг</p>
<span class="example__result--description">снижение веса</span>
<div class="example__total">
<div class="example__tables">
<div class="example__result">
<p class="example__value">5 кг</p>
<span class="example__expenses">снижение веса</span>
</div>
<div class="example__result">
<p class="example__value">60 дней</p>
<span class="example__expenses">затрачено времени</span>
</div>
</div>
<div class="example__result">
<p class="example__result--title">60 дней</p>
<span class="example__result--description">затрачено времени</span>
<div class="example__costs">
<p class="example__food">
Затраты на питание:
</p>
<p class="example__price">
15 000 руб.
</p>
</div>
</div>
<div class="example__costs">
<p class="example__costs--food">
Затраты на питание:
</p>
<p class="example__costs--price">
15 000 руб.
</p>
</div>
</div>
<img class="example__image" src="img/example-cat.png" width="560" height="512" alt="">
<img class="example__image" src="img/example-cat.png" width="280" height="256" alt="">
</div>
</section>

Expand All @@ -167,14 +169,15 @@ <h2 class="example__title">
Приглашаем к&nbsp;сотрудничеству дилеров!
</p>
<div class="map__description">
<p class="map__description--address">
<p class="map__address">
ул. Большая Конюшенная,д.&nbsp;19/8
</p>
<span class="map__description--city">
<span class="map__city">
Санкт-Петербург
</span>
</div>
</address>
<img class="map__image" src="img/map-mobile.jpg" width="320" height="362" alt="">
</div>
</section>
</main>
Expand Down Expand Up @@ -207,10 +210,13 @@ <h2 class="example__title">
</div>
<div class="main-footer__copyright copyright">
<a class="copyright__link" href="https://htmlacademy.ru">
<img class="copyright__image" src="img/html-academy.svg" width="168" height="37">
HTML Academy
</a>
<a class="copyright__link-image" href="https://htmlacademy.ru">
<img class="copyright__image" src="img/copyright.svg" width="27" height="34">
</a>
</div>
</div>
</footer>
</body>
</html>
</html>
Loading
Loading