похудение
Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.
каталог slimFrom 1a5c72caa18052dd59827b2883e6fc055d1422f4 Mon Sep 17 00:00:00 2001
From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com>
Date: Sun, 17 Dec 2023 15:51:01 +0300
Subject: [PATCH 01/31] $color-primary-500--opacity
---
source/styles/blocks/hero.scss | 8 ++++----
source/styles/blocks/page.scss | 3 +++
source/styles/blocks/proposal.scss | 8 ++++----
source/styles/global/variables.scss | 2 ++
4 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/source/styles/blocks/hero.scss b/source/styles/blocks/hero.scss
index 0faa95e..2915665 100644
--- a/source/styles/blocks/hero.scss
+++ b/source/styles/blocks/hero.scss
@@ -7,13 +7,13 @@
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-mobile@1x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/index-background-mobile@1x.jpg");
}
@media (min-resolution: 2dppx) {
background-repeat: no-repeat;
background-size: cover;
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-mobile@2x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/index-background-mobile@2x.jpg");
}
@media (min-width: $tablet-width) {
@@ -37,11 +37,11 @@
background-color: $color-primary-800;
background-position: 0 100%;
background-repeat: no-repeat;
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-desktop@1x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/index-background-desktop@1x.jpg");
// @media (min-resolution: 2dppx) {
// background-size: auto 700px;
- // background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-desktop@2x.jpg");
+ // background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/index-background-desktop@2x.jpg");
// }
}
}
diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss
index 2b8c7c3..4fd5986 100644
--- a/source/styles/blocks/page.scss
+++ b/source/styles/blocks/page.scss
@@ -1,4 +1,7 @@
.page__body {
+ min-width: 320px;
+ height: 100%;
+
font-family: $font-body;
font-size: 14px;
line-height: 18px;
diff --git a/source/styles/blocks/proposal.scss b/source/styles/blocks/proposal.scss
index 68efaa8..3d86086 100644
--- a/source/styles/blocks/proposal.scss
+++ b/source/styles/blocks/proposal.scss
@@ -5,21 +5,21 @@
background-color: $color-primary-500;
padding: 140px 140px;
background-repeat: no-repeat;
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-mobile-desktop@1x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-mobile-desktop@1x.jpg");
@media (min-resolution: 2dppx) {
background-repeat: no-repeat;
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-mobile-desktop@2x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-mobile-desktop@2x.jpg");
background-size: 280px 290px;
}
@media (min-width: $tablet-width) {
background-repeat: no-repeat;
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-tablet@1x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-tablet@1x.jpg");
background-size: 707px 200px;
@media (min-resolution: 2dppx) {
- background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-tablet@2x.jpg");
+ background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-tablet@2x.jpg");
}
}
}
diff --git a/source/styles/global/variables.scss b/source/styles/global/variables.scss
index de38666..055b338 100644
--- a/source/styles/global/variables.scss
+++ b/source/styles/global/variables.scss
@@ -16,6 +16,8 @@ $color-gray-850: #222222;
$color-gray-900: #111111;
$color-primary-500: #68b738;
$color-primary-800: #63a63b;
+
+$color-primary-500--opacity: rgba($color-primary-500, 0.85);
$color-error-500: #ff8282;
// background switcher
$color-gray-150: #eaeaea;
From cda382d264077c69285b10f6c4dbcc9aac89372e Mon Sep 17 00:00:00 2001
From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com>
Date: Tue, 19 Dec 2023 19:25:46 +0300
Subject: [PATCH 02/31] =?UTF-8?q?=D0=9C=D0=B5=D0=BD=D1=8E=20=D0=BE=D1=82?=
=?UTF-8?q?=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=B7?=
=?UTF-8?q?=D0=B0=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
source/index.html | 14 ++++----
source/scripts/index.js | 15 ++++++++-
source/styles/blocks/common-heading.scss | 1 +
source/styles/blocks/page-header.scss | 43 +++++++++++++++++++++---
source/styles/blocks/page-main.scss | 13 -------
source/styles/blocks/page.scss | 11 ++++--
source/styles/blocks/site-menu.scss | 6 +++-
source/styles/global/variables.scss | 2 +-
8 files changed, 76 insertions(+), 29 deletions(-)
diff --git a/source/index.html b/source/index.html
index 5293ca3..9bc70bd 100644
--- a/source/index.html
+++ b/source/index.html
@@ -16,7 +16,7 @@
Ваш кот весит больше собаки и почти утратил способность лазить по деревьям?
Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес. Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro
поможет вашему коту нарастить необходимые мышцы!
Функциональное питание
содержит только полезные
питательные вещества.
Выпускается в виде порошка,
который нужно лишь залить
кипятком и готово.
Замените один-два приема
обычной еды на наше
функциональное питание.
Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!Функциональное
Разделы каталога.
похудение
Набор массы
Набор м
Как это работает
-
@@ -203,7 +233,7 @@ Контакты.
Контакты.
Разработано в
HTML Academy
+
-
+
+
+
+
Контакты.
Разработано в
HTML Academy
-
+
diff --git a/source/scripts/index.js b/source/scripts/index.js
index e49dd93..9168cf3 100644
--- a/source/scripts/index.js
+++ b/source/scripts/index.js
@@ -1,11 +1,11 @@
-const opened = document.querySelector('.page-header__button--opened');
+const opened = document.querySelector('.page-header__togler--opened');
const site = document.querySelector('.page-header__nav');
const togler = document.querySelector('.page-header__togler');
opened.onclick = function () {
- opened.classList.toggle('page-header__button--opened');
- opened.classList.toggle('page-header__button--closed');
- if (togler.classList.contains('page-header__button--opened')) {
+ opened.classList.toggle('page-header__togler--opened');
+ opened.classList.toggle('page-header__togler--closed');
+ if (togler.classList.contains('page-header__togler--opened')) {
site.classList.add('page-header__nav-closed');
} else {
site.classList.remove('page-header__nav-closed');
diff --git a/source/styles/blocks/page-header.scss b/source/styles/blocks/page-header.scss
index 0b216ac..fb5bc2c 100644
--- a/source/styles/blocks/page-header.scss
+++ b/source/styles/blocks/page-header.scss
@@ -2,6 +2,12 @@
display: flex;
flex-direction: column;
position: relative;
+
+ @media (min-width: $tablet-width) {
+ display: flex;
+ flex-direction: row;
+ width: 710px;
+ }
}
.page-header__container-header {
@@ -13,9 +19,10 @@
.page-header__logo-sign {
text-decoration: none;
- padding: 10px;
+ padding: 23px 20px 24px;
align-self: center;
+
@media (min-width: $tablet-width) {
display: none;
}
@@ -25,7 +32,36 @@
}
}
-.page-header__button--opened {
+.page-header__menu {
+ font-family: $font-heading;
+ font-size: 20px;
+ line-height: 20px;
+ font-weight: 500;
+ text-transform: uppercase;
+ list-style: none;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ gap: 10px;
+
+ @media (min-width: $tablet-width) {
+ display: flex;
+ }
+}
+
+.page-header__item {
+ border-top: 1px solid $color-gray-100;
+}
+
+.page-header__link {
+
+ display: block;
+ text-decoration: none;
+ color: $color-black;
+ padding: 22px 10px 24px;
+}
+
+.page-header__togler--opened {
display: none;
width: 40px;
@@ -33,6 +69,7 @@
mask-position: 50% 50%;
mask-repeat: no-repeat;
+ mask-size: 24px 16px;
mask-image: url("../../images/icons/stack.svg#burger");
background-color: $color-black;
border: 0;
@@ -42,13 +79,15 @@
}
}
-.page-header__button--closed {
+.page-header__togler--closed {
display: none;
align-self: center;
- width: 18px;
- height: 18px;
+ width: 40px;
+ height: 40px;
mask-position: 50% 50%;
+ transform: translateY(-4px);
+ mask-size: 18px 18px;
mask-repeat: no-repeat;
mask-image: url("../../images/icons/stack.svg#close");
background-color: $color-black;
diff --git a/source/styles/blocks/site-menu.scss b/source/styles/blocks/site-menu.scss
deleted file mode 100644
index fbc41cc..0000000
--- a/source/styles/blocks/site-menu.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.site-menu {
-
- font-family: $font-heading;
- font-size: 20px;
- line-height: 20px;
- text-transform: uppercase;
- list-style: none;
- text-align: center;
- padding: 0;
- margin: 0;
-}
-
-.site-menu__link {
- display: block;
- text-decoration: none;
- color: $color-black;
- padding: 22px 20px 24px;
-}
diff --git a/source/styles/global/variables.scss b/source/styles/global/variables.scss
index 894046b..b3efb0d 100644
--- a/source/styles/global/variables.scss
+++ b/source/styles/global/variables.scss
@@ -5,7 +5,7 @@ $font-body: "Lato", sans-serif;
$color-black: #000000;
$color-white: #ffffff;
$color-gray-50: #f2f2f2;
-$color-gray-100: #ebebeb;
+$color-gray-100: #e6e6e6;
$color-gray-180: #dcdcdc;
$color-gray-200: #d9d9d9;
$color-gray-250: #cdcdcd;
diff --git a/source/styles/styles.scss b/source/styles/styles.scss
index 8637dcb..bf5005a 100644
--- a/source/styles/styles.scss
+++ b/source/styles/styles.scss
@@ -5,13 +5,11 @@
@import "./global/global.scss";
@import "./global/visually-hidden";
-
/* BLOCKS */
@import "./blocks/page";
@import "./blocks/page-header";
@import "./blocks/button.scss";
@import "./blocks/logo";
-@import "./blocks/site-menu.scss";
@import "./blocks/page-main";
@import "./blocks/common-heading.scss";
@import "./blocks/hero";
From ec3b138cd908042083382cb25cc770fc7dfbd4bf Mon Sep 17 00:00:00 2001
From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com>
Date: Sat, 23 Dec 2023 15:28:22 +0300
Subject: [PATCH 05/31] nav
---
source/form.html | 6 ++--
source/index.html | 39 ++++++++++----------
source/styles/blocks/logo.scss | 10 ++++++
source/styles/blocks/page-header.scss | 52 ++++++++++++++++++++++++---
4 files changed, 81 insertions(+), 26 deletions(-)
diff --git a/source/form.html b/source/form.html
index b62bcc9..ff85dde 100644
--- a/source/form.html
+++ b/source/form.html
@@ -16,7 +16,7 @@
Контакты.
Показать еще 100500 товаров
На самом деле вкусов гораздо больше!
- показать все + показать все