Skip to content

Commit

Permalink
добавление мабольной версии
Browse files Browse the repository at this point in the history
  • Loading branch information
@eldarsarkynov
eldarsarkynov committed May 3, 2024
1 parent 6ad6175 commit f3ace1e
Show file tree
Hide file tree
Showing 21 changed files with 471 additions and 139 deletions.
2 changes: 1 addition & 1 deletion source/icons/icon-eat.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion source/icons/icon-slider.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
97 changes: 45 additions & 52 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,44 +70,36 @@ <h1 class="promo__title">Функциональное<br> питание для
<header class="promo__header">
<h2 class="visually-hidden">Реклама подбора программы питания</h2>
<p class="promo__slogan">Занялся собой? Займись котом!</p>
<!-- <picture>
<source media="(min-width: 1200px)" width="720" height="694" type="image/png" srcset="images/index-background-desktop@1x.png, images/index-background-desktop@2x.png 2x">
<img class="promo__background" src="images/index-background-mobile@1x.png" width="320" height="302" srcset="images/index-background-mobile@2x.png 2x" alt="Задний фон на зеленом цвете, кот облизывающий свои усы">
</picture> -->
<picture>
<source media="(min-width: 1200px)" width="552" height="499" type="image/jpeg" srcset="images/index-can-deskstop@1x.png, images/index-can-deskstop@2x.png 2x">
<source media="(min-width: 768px)" width="709" height="609" type="image/jpeg" srcset="images/index-can-tablet@1x.png, images/index-can-tablet@2x.png 2x">
<img class="promo__background" src="images/index-can-mobile@1x.png" width="280" height="270" srcset="images/index-can-mobile@2x.png 2x" alt="Задний фон на зеленом цвете, кот облизывающий свои усы">
</picture>
</header>
</div>
<div class="promo__link">
<a class="promo__item promo__item--more" href="catalog.html">Подобрать программу</a>
</div>
</header>
</div>
</section>
<div class="program">
<div class="program__wrapper">
<a class="program__link" href="catalog.html">Подобрать программу</a>
</div>
</div>
<section class="preview">
<div class="preview__wrapper">
<h2 class="visually-hidden">Описание программы питания</h2>
<div class="preview__container">
<div class="preview__block"></div>

<h3 class="preview__title preview__title--narrow">Похудение</h3>
<p class="preview__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
<div class="preview__link">
<a class="preview__item preview__item--catalog" href="catalog.html">каталог slim</a>
<a class="preview__item preview__item--slim" href="catalog.html">каталог slim</a>
</div>
</div>
<div class="preview__container">
<picture>
<source media="(min-width: 1440px)" srcset="images/cat-wide-deskstop.svg" type="image/svg+xml">
<source media=" (min-width: 768px)" srcset="images/cat-wide-tablet.svg" type="image/svg+xml">
<img class="cat-wide" src="images/cat-wide-mobile.svg" width="67" height="28" alt="Изображение упитанной черной фигуры кота">
</picture>
<h3 class="preview__title preview__title--wide">Набор массы</h3>
<p class="preview__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
<div class="preview__link">
<a class="preview__item preview__item--catalog" href="catalog.html">каталог pro</a>
<a class="preview__item preview__item--pro" href="catalog.html">каталог pro</a>
</div>
</div>
</div>
Expand All @@ -117,26 +109,22 @@ <h3 class="preview__title preview__title--wide">Набор массы</h3>
<h2 class="advantages__title">Как это работает</h2>
<ul class="advantages__list">
<li class="advantages__item">
<div class="advantages__block advantages__block--eco"></div>
<p class="advantages__description">Функциональное питание
<p class="advantages__description advantages__description--eco">Функциональное питание
содержит только полезные
питательные вещества.</p>
</li>
<li class="advantages__item">
<div class="advantages__block advantages__block--cooking"></div>
<p class="advantages__description">Выпускается в виде порошка,
<p class="advantages__description advantages__description--cooking">Выпускается в виде порошка,
который нужно лишь залить
кипятком и готово.</p>
</li>
<li class="advantages__item">
<div class="advantages__block advantages__block--eat"></div>
<p class="advantages__description">Замените один-два приема
<p class="advantages__description advantages__description--eat">Замените один-два приема
обычной еды на наше
функциональное питание.</p>
</li>
<li class="advantages__item">
<div class="advantages__block advantages__block--time"></div>
<p class="advantages__description">Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!</p>
<p class="advantages__description advantages__description--time">Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!</p>
</li>
</ul>
</div>
Expand All @@ -146,14 +134,16 @@ <h2 class="advantages__title">Как это работает</h2>
<h2 class="example__title">Живой пример</h2>
<p class="example__description">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
<div class="meta">
<fieldset class="meta-information">
<legend class="meta__information meta__information--title">снижение веса</legend>
<label class="meta__information meta__information--text">5 кг</label>
</fieldset>
<fieldset class="meta__information">
<legend class="meta__information meta__information--title">затрачено времени</legend>
<label class="meta__information meta__information--text">60 дней</label>
</fieldset>
<div class="meta__block">
<dl class="meta__information">
<dt class="meta__content meta__content--text">5 кг</dt>
<dd class="meta__content meta__content--title">снижение<br> веса</dd>
</dl>
<dl class="meta__information">
<dt class="meta__content meta__content--text">60 дней</dt>
<dd class="meta__content meta__content--title">затрачено<br> времени</dd>
</dl>
</div>
<div class="meta__price">
<p class="meta__price meta__price--text">Затраты на питание: 15 000 РУБ.</p>
</div>
Expand All @@ -163,23 +153,30 @@ <h2 class="example__title">Живой пример</h2>
<section class="slider">
<div class="slider__wrapper">
<h2 class="visually-hidden">Слайдер кота до и после</h2>
<div class="slider__wrapper">
<div class="slider__bar">
<div class="slider__before">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<img class="slider__cat" src="images/cat-before-mobile@1x.png" srcset="images/cat-before-mobile@2x.png 2x" width="280" height="256" alt="Фото толстого кота до питания">
</picture>
</div>
<div class="slider__after">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<img class="slider__cat" src="images/cat-after-mobile@1x.png" srcset="images/cat-after-mobile@2x.png 2x" width="280" height="256" alt="Фото стройного кота после питания">
</picture>
<div class="slider__bar">
<div class="slider__before">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<img class="slider__cat" src="images/cat-before-mobile@1x.png" srcset="images/cat-before-mobile@2x.png 2x" width="280" height="256" alt="Фото толстого кота до питания">
</picture>
</div>
<div class="slider__group">
<div class="slider__scale">
<div class="slider__button">
<button class="slider__toggle" type="button">
<span class="visually-hidden">кнопка уменьшения цены</span>
</button>
</div>
</div>
</div>
<div class="slider__after">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<img class="slider__cat" src="images/cat-after-mobile@1x.png" srcset="images/cat-after-mobile@2x.png 2x" width="280" height="256" alt="Фото стройного кота после питания">
</picture>
</div>
</div>
</div>
</section>
Expand All @@ -194,11 +191,7 @@ <h2 class="contacts__title">Приглашаем к сотрудничеству
</section>
<section class="location">
<h2 class="visually-hidden">расположение магазина на карте</h2>
<picture>
<source media="(min-width: 1200px)" width="1440" height="400" type="image/png" srcset="images/map-deskstop@1x.png 1x, images/map-deskstop@2x.png 2x">
<source media="(min-width: 768px)" width="768" height="400" type="image/png" srcset="images/map-tablet@1x.png 1x, images/map-tablet@2x.png 2x">
<img class="map-mobile" src="images/map-mobile@1x.png" srcset="images/map-mobile@2x.png 2x" width="320" height="362" alt="Карта Санкт-Петербурга, с маркером кота Энерджи на карте">
</picture>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6037999040354!2d30.322010416394033!3d59.938716271971415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca5ba729%3A0xea9c53d4493c879f!2sBolshaya+Konyushennaya+ul.%2C+19%2C+Sankt-Peterburg%2C+Russia%2C+191186!5e0!3m2!1sen!2s!4v1441888483426" width="320" height="362" allowfullscreen title="Офис компании по адресу набережная реки Карповки, 5, литера П, Санкт-Петербург"></iframe>
</section>
<footer class="main-footer">
<div class="main-footer__wrapper">
Expand Down
78 changes: 59 additions & 19 deletions source/styles/blocks/advantages.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,117 @@

}

.advantages__wrapper{

.advantages__wrapper {
width: 280px;
margin: 0 auto;
}

.advantages__title {
font-family: "Oswald", sans-serif;
font-size: 36px;
line-height: 40px;
color: $base-color-title;
margin: 20px 0 0;
}

.advantages__list {
display: flex;
flex-direction: column;
gap: 20px;
gap: 18px;
margin: 40px 0 0;
padding: 0;
font-family: "Lato";
font-size: 14px;
font-weight: 400;
line-height: 18px;
text-align: left;
}

.advantages__item {
display: flex;
gap: 20px;
list-style: none;
}

.advantages__block{
.advantages__description {
}

.advantages__description--eco {
position: relative;
margin: 4px 0 4px 80px;
width: 200px;
}

.advantages__block--eco {
.advantages__description--eco::before {
content: "";
background-color: $base-color-background;
display: block;
width: 60px;
height: 60px;
background-image: url("../../icons/stack.svg#icon-eco");
background-size: 25px 28px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: -80px;
top: -2px;
}

.advantages__block--cooking {
.advantages__description--cooking {
position: relative;
margin: 4px 0 4px 80px;
width: 200px;
}

.advantages__description--cooking::before {
content: "";
background-color: $base-color-background;
display: block;
width: 60px;
height: 60px;
background-image: url("../../icons/stack.svg#icon-cooking");
background-size: 26px 29px;
background-size: 26px 30px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: -80px;
top: -2px;
}

.advantages__description--eat {
position: relative;
margin: 4px 0 4px 80px;
width: 200px;
}

.advantages__block--eat {
.advantages__description--eat::before {
content: "";
background-color: $base-color-background;
display: block;
width: 60px;
height: 60px;
background-image: url("../../icons/stack.svg#icon-eat");
background-size: 25px 30px;
background-size: 26px 30px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: -80px;
top: -2px;
}

.advantages__description--time {
position: relative;
margin: 4px 0 4px 80px;
width: 200px;
}

.advantages__block--time {
.advantages__description--time::before {
content: "";
background-color: $base-color-background;
display: block;
width: 60px;
height: 60px;
background-image: url("../../icons/stack.svg#icon-time");
background-size: 26px 31px;
background-size: 26px 30px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: -80px;
top: -2px;
}

.advantages__description{

}
20 changes: 16 additions & 4 deletions source/styles/blocks/contacts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
.contacts{

.contacts {
padding: 26px 0;
}

.contacts__wrapper{

.contacts__wrapper {
width: 280px;
margin: 0 auto;
display: flex;
padding: 0;
justify-content: space-between;
}

.contacts__title {
Expand All @@ -12,8 +16,16 @@
line-height: 20px;
text-transform: uppercase;
color: $base-color-title;
width: 140px;
margin: 0;
}

.contacts__description {
font-family: "Lato";
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;
width: 140px;
margin: 0;
}
20 changes: 19 additions & 1 deletion source/styles/blocks/copyright.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,28 @@
.copyright {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}

.copyright::before {
content: " ";
position: absolute;
top: -23px;
left: -24px;
background: #d9d9d9;
width: 322px;
height: 1px;
}

.copyright__link {
line-height: 20px;
text-decoration: none;
font-family: "Lato";
font-size: 16px;
font-weight: 400;
line-height: 20px;
text-align: left;
color: $base-color-title;
}

.copyright__logo {
Expand Down

0 comments on commit f3ace1e

Please sign in to comment.