From c91d79c476a5312cb718f24777a85ae3a4a43772 Mon Sep 17 00:00:00 2001 From: ElenaLisavina Date: Fri, 13 Dec 2024 19:27:37 +0300 Subject: [PATCH] =?UTF-8?q?Task5=20=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?= =?UTF-8?q?=D1=82=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/catalog.html | 37 ++++++++----- .../icons/{black-cat..svg => black-cat.svg} | 0 source/index.html | 19 ++++--- source/styles/blocks/example.scss | 12 +++-- source/styles/blocks/logotype.scss | 7 --- source/styles/blocks/main-futer.scss | 13 +++++ source/styles/blocks/program.scss | 54 +++++++++++++++---- source/styles/blocks/social.scss | 29 ++++++++++ source/styles/styles.scss | 1 + 9 files changed, 130 insertions(+), 42 deletions(-) rename source/icons/{black-cat..svg => black-cat.svg} (100%) create mode 100644 source/styles/blocks/main-futer.scss diff --git a/source/catalog.html b/source/catalog.html index 12168bd..d250942 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -311,21 +311,30 @@

Витамины

Заказать -

Закажите все
и получите чехол для
кота в подарок!

- -
-
-

Акции и новинки

-

Подпишитесь на наши новости и не пропустите ни одного предложения!

-
-
- - - -
-
+ +
+

Закажите все
и получите чехол для
кота в подарок!

+ + + + + Кот в чехле +
-
+ +
+
+

Акции и новинки

+

Подпишитесь на наши новости и не пропустите ни одного предложения!

+
+
+ + + +
+
+
+
diff --git a/source/styles/blocks/example.scss b/source/styles/blocks/example.scss index 025df58..1694028 100644 --- a/source/styles/blocks/example.scss +++ b/source/styles/blocks/example.scss @@ -5,12 +5,16 @@ display: block; background-color: $dark-grey; position: absolute; - top: 1700px; - left: -2px; + top: 0; + left: 50%; border-radius: 2px; border: none; } +.slider { + position: relative; +} + .slider__button::before { content: ""; width: 40px; @@ -31,8 +35,8 @@ background-color: $white; border-radius: 50%; position: absolute; - top: 53%; - left: 53%; + top: 52%; + left: 50%; transform: translate(-50%, -50%); background-image: url("../../icons/stack.svg#slider-button"); } diff --git a/source/styles/blocks/logotype.scss b/source/styles/blocks/logotype.scss index d713b9a..9877000 100644 --- a/source/styles/blocks/logotype.scss +++ b/source/styles/blocks/logotype.scss @@ -1,13 +1,6 @@ .logotype__name { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - fill: #111111; - @media (min-width: $tablet-width) { position: relative; - transform: translate(0); margin-left: 14px; left: 0; } diff --git a/source/styles/blocks/main-futer.scss b/source/styles/blocks/main-futer.scss new file mode 100644 index 0000000..adddef4 --- /dev/null +++ b/source/styles/blocks/main-futer.scss @@ -0,0 +1,13 @@ +.copyright { + display: flex; + color: inherit; + justify-content: space-between; + align-items: center; + font-family: $primary-font; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + text-decoration: none; + transition: all, all 1.3s; +} diff --git a/source/styles/blocks/program.scss b/source/styles/blocks/program.scss index 6f65112..8f7f295 100644 --- a/source/styles/blocks/program.scss +++ b/source/styles/blocks/program.scss @@ -14,21 +14,53 @@ position: relative; } -.program__item::before { - content: ""; - background-color: $basic-green; - border-radius: 50%; - width: 50px; - height: 50px; - display: block; -} .program__item-title--slim::after { content: ""; background-image: url("../../icons/stack.svg#black-pantere"); background-repeat: no-repeat; - background-size: 36px 50px; position: absolute; - top: -3px; - left: 7px; + width: 67px; + height: 28px; + top: 21px; + left: -33px; +} + +.program__icon--pro::after { + content: ""; + background-image: url("../../icons/stack.svg#black-cat"); + background-repeat: no-repeat; + position: absolute; + width: 36px; + height: 50px; + top: -28px; + left: -16px; +} + +.program__icon { + position: relative; + display: inline-block; +} + +.program__icon--slim { + margin-right: 35px; +} + +.program__icon--pro { + margin-right: 35px; +} + + +.program__icon::before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: $basic-green; + border-radius: 50%; + width: 50px; + height: 50px; + display: block; + z-index: -1; } diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss index e69de29..04df878 100644 --- a/source/styles/blocks/social.scss +++ b/source/styles/blocks/social.scss @@ -0,0 +1,29 @@ +.social__link { + background-position: 50%; + background-repeat: no-repeat; + min-width: 28px; + min-height: 28px; + transition: all 1.3s; + display: block; +} + +.social__link--vkontakte { + background-color: #666666; + mask-repeat: no-repeat; + mask-size: 28px 22px; + mask-image: url("../../icons/stack.svg#vkontakte-mobile"); +} + +.social__link--telegram { + background-color: #666666; + mask-repeat: no-repeat; + mask-size: 28px 22px; + mask-image: url("../../icons/stack.svg#telegram-mobile"); +} + +.social__link--youtube { + background-color: #666666; + mask-repeat: no-repeat; + mask-size: 28px 22px; + mask-image: url("../../icons/stack.svg#youtube-mobile"); +} diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 6a54ae0..a0dd5c5 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -25,3 +25,4 @@ @import "./blocks/button.scss"; @import "./blocks/container.scss"; @import "./blocks/actions.scss"; +@import "./blocks/main-futer.scss";