Skip to content

Commit

Permalink
Исправляет ошибки и исправляет pixel perfect (#17)
Browse files Browse the repository at this point in the history 
* Доделывает проект для сдачи

* поправляет карту каталога

* исправляет по pixelperfect
  • Loading branch information
@karlaabdraeva
karlaabdraeva authored Dec 6, 2024
1 parent 587dca6 commit d42b380
Show file tree
Hide file tree
Showing 23 changed files with 228 additions and 198 deletions.
8 changes: 5 additions & 3 deletions source/catalog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
<link rel="apple-touch-icon" href="favicons/180.png">
<link rel="manifest" href="manifest.webmanifest">
<script src="scripts/index.js" defer></script>
<link rel="preload" href="fonts/lato/Lato-Regular.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="fonts/oswald/oswaldregular.woff2" as="font" crossorigin="anonymous">
</head>

<body class="page__body nojs">
Expand All @@ -25,7 +27,7 @@
</picture>
</a>
<a class="header__logo-text logo " href="index.html" aria-current="page">
<img class="logo__image" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
<img class="logo__image logo__image--text" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
</a>
<button class="header__toggle button-toggle button-toggle--closed" type="button" id="button">
<span class="visually-hidden">Меню</span>
Expand Down Expand Up @@ -90,10 +92,10 @@ <h3 class="card__title">Cat Energy PRO 500&nbsp;г</h3>
<a class="card__link" href="#" tabindex="-1">
<picture>
<source media="(min-width: 1440px)" srcset="images/[email protected], images/[email protected] 2x" width="172" height="196" type="image/webp">
<source media="(min-width: 768px)" srcset="images/[email protected], images/[email protected] 2x" width="168" height="206" type="image/webp">
<source media="(min-width: 768px)" srcset="images/[email protected], images/[email protected] 2x" width="200" height="206" type="image/webp">
<source media="(min-width: 320px)" srcset="images/[email protected], images/[email protected] 2x" width="84" height="100" type="image/webp">
<source media="(min-width: 1440px)" srcset="images/[email protected], images/[email protected] 2x" width="172" height="196" type="image/png">
<source media="(min-width: 768px)" srcset="images/[email protected], images/[email protected] 2x" width="168" height="206" type="image/png">
<source media="(min-width: 768px)" srcset="images/[email protected], images/[email protected] 2x" width="200" height="206" type="image/png">
<img class="card__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="84" height="100" alt="Продукт со вкусом курицы 1000 г">
</picture>
</a>
Expand Down
1 change: 1 addition & 0 deletions source/icons/arrow-big.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion source/icons/arrow.svg
View file

This file was deleted.

62 changes: 31 additions & 31 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
<link rel="apple-touch-icon" href="favicons/180.png">
<link rel="manifest" href="manifest.webmanifest">
<script src="scripts/index.js" defer></script>
<link rel="preload" href="fonts/lato/Lato-Regular.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="fonts/oswald/oswaldregular.woff2" as="font" crossorigin="anonymous">
</head>

<body class="page__body nojs">
Expand All @@ -25,7 +27,7 @@
</picture>
</a>
<a class="header__logo-text logo " href="index.html" aria-current="page">
<img class="logo__image" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
<img class="logo__image logo__image--text" src="images/logo-text.svg" width="101" height="18" alt="Логотип cat energy надписью">
</a>
<button class="header__toggle button-toggle button-toggle--closed" type="button" id="button">
<span class="visually-hidden">Меню</span>
Expand All @@ -50,8 +52,7 @@
<main class="main">
<section class="hero">
<div class="hero__wrapper wrapper">
<h1 class="hero__title">Функциональное
питание для котов</h1>
<h1 class="hero__title">Функциональное<br>питание для котов</h1>
<p class="hero__subtitle">Занялся собой? Займись котом!</p>
<div class="hero__image">
<picture>
Expand All @@ -67,19 +68,19 @@ <h1 class="hero__title">Функциональное
</div>
</section>

<section class="programms">
<div class="programms__wrapper wrapper">
<section class="programs">
<div class="programs__wrapper wrapper">
<h2 class="visually-hidden">Выбор программы</h2>
<ul class="programms__list">
<li class="programms__item programms__item--slim">
<h3 class="programms__title">Похудение</h3>
<p class="programms__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
<a class="programms__link" href="#">Каталог Slim</a>
<ul class="programs__list">
<li class="programs__item programs__item--slim">
<h3 class="programs__title">Похудение</h3>
<p class="programs__description">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
<a class="programs__link" href="#">Каталог Slim</a>
</li>
<li class="programms__item programms__item--pro">
<h3 class="programms__title">Набор массы</h3>
<p class="programms__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
<a class="programms__link" href="#">Каталог Pro</a>
<li class="programs__item programs__item--pro">
<h3 class="programs__title">Набор массы</h3>
<p class="programs__description">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
<a class="programs__link" href="#">Каталог Pro</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -115,20 +116,20 @@ <h2 class="instructions__title">Как это работает</h2>
<div class="example__wrapper wrapper">
<h2 class="example__title">Живой пример</h2>
<p class="example__subtitle">Борис сбросил 5&nbsp;кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
<div class="example__stats-container">
<dl class="example__list example__list--weight">
<dt class="example__number example__number--weight">5&nbsp;КГ</dt>
<dd class="example__description example__description--weight">снижение веса</dd>
</dl>
<dl class="example__list example__list--time">
<dt class="example__number example__number--time">60 ДНЕЙ</dt>
<dd class="example__description example__description--time">затрачено времени</dd>
</dl>
<dl class="example__list example__list--cost">
<dl class="example__list">
<div class="example__item example__item--weight">
<dt class="example__description example__description--weight">Снижение веса</dt>
<dd class="example__number example__number--weight">5&nbsp;кг</dd>
</div>
<div class="example__item example__item--time">
<dt class="example__description example__description--time">Затрачено времени</dt>
<dd class="example__number example__number--time">60 дней</dd>
</div>
<div class="example__item example__item--cost">
<dt class="example__expenses">Затраты на питание:</dt>
<dd class="example__total">15 000&nbsp;РУБ.</dd>
</dl>
</div>
<dd class="example__total">15 000&nbsp;руб.</dd>
</div>
</dl>
<div class="example__demonstration demonstration">
<picture>
<source media="(min-width: 768px)" srcset="images/[email protected], images/[email protected] 2x" width="560" height="512" type="image/webp">
Expand All @@ -153,14 +154,13 @@ <h2 class="example__title">Живой пример</h2>

<section class="location" data-test="contacts">
<div class="location__wrapper wrapper">
<h2 class="location__title">Приглашаем к сотрудничеству дилеров!</h2>
<h2 class="location__title">Приглашаем<br>к сотрудничеству<br>дилеров!</h2>
<address class="location__address">
<p class="location__street">ул.&nbsp;Большая
Конюшенная, д.&nbsp;19/8</p>
<p class="location__street">ул.&nbsp;Большая<br>Конюшенная, д.&nbsp;19/8</p>
<p class="location__city">Санкт-Петербург</p>
</address>
</div>
<div class="location-map">
<div class="location__map">
<h2 class="visually-hidden">Карта</h2>
<div class="location__image-container">
<picture>
Expand Down
1 change: 1 addition & 0 deletions source/styles/blocks/additionals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,6 @@

@media (min-width: $desktop-width) {
margin: 0;
padding: 5px 0;
}
}
2 changes: 1 addition & 1 deletion source/styles/blocks/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

&:active {
color: rgba($base-color-white, 0.3);
color: rgba($base-color-white, 0.4);
}
}

Expand Down
2 changes: 1 addition & 1 deletion source/styles/blocks/card-more.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}

@media (min-width: $desktop-width) {
margin-top: 81px;
margin-top: 88px;
width: 243px;
}
}
Expand Down
7 changes: 4 additions & 3 deletions source/styles/blocks/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
border-top: 1px solid $decor-color-light;

@media (min-width: $tablet-width) {
padding: 0;
display: flex;
border-top: none;
}
Expand All @@ -20,7 +21,7 @@
grid-template-columns: repeat(2, 50%);
width: 280px;
margin: 0 auto;
padding: 20px 0 25px;
padding: 21px 0 25px;
row-gap: 14px;

@media (min-width: $tablet-width) {
Expand All @@ -29,7 +30,7 @@
display: grid;
grid-template-columns: 37px 250px 37px;
grid-template-rows: 69px 150px 1fr max-content min-content 28px;
row-gap: 12px;
row-gap: 13px;

&::before {
content: "";
Expand All @@ -45,7 +46,7 @@
width: 245px;
grid-template-columns: 38px 169px 38px;
grid-template-rows: 63px 129px 1fr max-content min-content 23px;
row-gap: 17px;
row-gap: 20px;
}
}

Expand Down
17 changes: 12 additions & 5 deletions source/styles/blocks/catalog.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.catalog {
@media (min-width: $tablet-width) {
padding: 40px 0 74px;
padding: 0;
}

@media (min-width: $desktop-width) {
padding: 45px 0 71px;
padding: 0;
}
}

Expand All @@ -29,13 +29,14 @@
font-weight: $primary-font-weight;
color: $base-color-text-dark;
width: 280px;
margin: 27px auto 40px;
margin: 16px auto 30px;

@media (min-width: $tablet-width) {
width: unset;
margin: 0 0 84px;
padding: 40px 0;
font-size: 60px;
line-height: 1;
margin: 0;
}
}

Expand All @@ -49,9 +50,15 @@
flex-wrap: wrap;
gap: 60px;
margin: 0;
padding: 40px 0 71px;
}

@media (min-width: $desktop-width) {
gap: 63px 80px;
gap: 55px 80px;
padding: 40 0 64px;
}
}

.catalog__item {
padding: 0;
}
5 changes: 5 additions & 0 deletions source/styles/blocks/demonstration.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
@media (min-width: $tablet-width) {
margin-inline: auto;
}

@media (min-width: $desktop-width) {
margin-inline: auto;
margin-top: 59px;
}
}

.demonstration__image {
Expand Down
20 changes: 14 additions & 6 deletions source/styles/blocks/example.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.example__wrapper {
padding: 25px 0 40px;
padding: 15px 0 40px;

@media (min-width: $tablet-width) {
padding: 45px 0 101px;
Expand Down Expand Up @@ -53,13 +53,14 @@
}

@media (min-width: $desktop-width) {
margin: 0 0 76px;
margin: 57px 0 76px;
grid-column: 1 / 2;
}
}

.example__subtitle {
margin: 0 0 20px;
margin: 0;
line-height: 1.3;

@media (min-width: $tablet-width) {
margin: 0 0 55px;
Expand All @@ -68,19 +69,22 @@
}

@media (min-width: $desktop-width) {
margin: 70px 0 69px;
margin: 70px 0;
grid-column: 1 / 2;
padding: 0 2px;
}
}

.example__stats-container {
.example__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 32px;
margin: 19px 0;

@media (min-width: $tablet-width) {
display: flex;
column-gap: 0;
margin: 0;
margin-bottom: 99px;
}

Expand All @@ -94,7 +98,7 @@
}
}

.example__list {
.example__item {
display: flex;
flex-direction: column;
justify-content: center;
Expand Down Expand Up @@ -154,6 +158,7 @@
justify-self: flex-start;
max-width: 440px;
margin: 0;
gap: 66px;
}
}
}
Expand All @@ -168,6 +173,7 @@
font-weight: 400;
line-height: 12px;
order: 1;
z-index: 1;

&--weight {
background-color: $base-color-dark-grey;
Expand Down Expand Up @@ -206,6 +212,7 @@
}
}


.example__number {
position: relative;
width: 124px;
Expand All @@ -220,6 +227,7 @@
line-height: 1;
border: 1px solid $decor-color-dark;
border-radius: 4px;
box-sizing: border-box;

@media (min-width: $tablet-width) {
width: 162px;
Expand Down
4 changes: 3 additions & 1 deletion source/styles/blocks/form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
display: flex;
flex-direction: column;
row-gap: 16px;
box-sizing: border-box;

@media (min-width: $tablet-width) {
width: 632px;
Expand All @@ -19,11 +20,12 @@
font-family: $secondary-font;
font-size: 20px;
line-height: 1.5;
height: 56px;
font-weight: $primary-font-weight;
text-transform: uppercase;
color: $base-color-text;
padding: 12px;

box-sizing: border-box;
border: solid 1px $decor-color-medium;

&:hover {
Expand Down
7 changes: 7 additions & 0 deletions source/styles/blocks/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,10 @@
margin-right: 0;
}
}

.logo__image--text {
@media (min-width: $desktop-width) {
min-width: 118px;
min-height: 21px;
}
}
Loading

0 comments on commit d42b380

Please sign in to comment.