diff --git a/README.md b/README.md index 26c6369..8cc02e1 100644 --- a/README.md +++ b/README.md @@ -2,35 +2,7 @@ ### **С точки зрения веб-разработки:** * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) -* соблюдаем Scope-ориентированный подход: - - каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта. - - - пример:
- - HTML: - ``` -
-

Новый заголовок

- -
- ``` - - CSS: - - ``` - .my-namespace h1 { - font-size: 24px; - color: #333; - } - - .my-namespace .my-button { - background-color: #007BFF; - color: #fff; - } - ``` - - -* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: +* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: `block-name__elem-name--mod-name--mod-val` + имена записываются латиницей в нижнем регистре + для разделения слов в именах БЭМ-сущностей используется дефис (-) @@ -40,9 +12,8 @@ * из конечного HTML-файла убрать все комментарии, если такие имеются * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) * **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. -* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы -* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил. -* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*) +* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы + ### **С точки зрения SEO:** * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. diff --git a/articles.html b/articles.html new file mode 100644 index 0000000..5659391 --- /dev/null +++ b/articles.html @@ -0,0 +1,962 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + + +
+
+
+ RU + +
+
+ + + + + + +
+
+
+ + +
+ + +
+
+ Главная / + Блог / + Статья +
+
+ + + + +
+
+

Сколько корма нужно именно вашей
собаке?

+
+ +

21.10.24

+

время чтения: 5 минут

+

+ + 22 +

+

+ + 5 +

+
+ + Ольга М. +
+
+
+ +
+
+
+ + + +
+
+ + +
+

Узнайте о нас больше и получите скидку!

+ + +
+ + + +
+
+

Подписываясь на рассылка, я даю согласие на обработку персональных данных, на получение рекламных сообщений и новостей о товарах и услугах

+

Подпишитесь, чтобы быть в курсе деятельности Cosmopet и узнавать о наших предложениях. Обещаем не заваливать вас бесполезными письмами. А за подписку дарим -25% на весь ассортимент нашей продукции

+
+
+ + + +
+

Удобный инструмент - калькулятор, который поможет вам определить дневную дозировку корма непосредственно для вашего котика и пёсика.

+ Калькулятор рациона +
+ + + +
+

ЗАГОЛОВОК 2

+

ЗАГОЛОВОК 3

+
+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+

+ Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large +

+

+ Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large +

+
+
    +
  1. +

    1

    +

    Нумерованный список

    +
    2. +
  2. +

    2

    +

    Нумерованный список

    +
    3. +
  3. +

    3

    +

    Нумерованный список

    +
    4. +
  4. +

    4

    +

    Нумерованный список

    +
    5. +
  5. +

    5

    +

    Нумерованный список

    +
    6. +
+
    +
  • Маркированный список
    • +
  • Маркированный список
    • +
  • Маркированный список
    • +
  • Маркированный список
    • +
  • Маркированный список
    • +
+
+ + +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + +
+
+ +

Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.

+ +
+
+ +

Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.

+
+
+ +

Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.

+
+
+ +

Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.

+
+
+ + + +
+
+
+
    +
  • Масса собаки, кг
    • +
  • 0,8
    • +
  • 0,8
    • +
  • 0,8
    • +
  • 0,8
    • +
+
    +
  • ПЕ в день, ккал
    • +
  • 118
    • +
  • 118
    • +
  • 118
    • +
  • 118
    • +
+
+
+
    +
  • Масса собаки, кг
    • +
  • 0,8
    • +
  • 0,8
    • +
  • 0,8
    • +
  • 0,8
    • +
+
    +
  • ПЕ в день, ккал
    • +
  • 118
    • +
  • 118
    • +
  • 118
    • +
  • 118
    • +
+
+
+
    +
  • Масса собаки, кг
    • +
  • 0,8
    • +
  • 0,8
    • +
  • 0,8
    • +
  • 0,8
    • +
+
    +
  • ПЕ в день, ккал
    • +
  • 118
    • +
  • 118
    • +
  • 118
    • +
  • 118
    • +
+
+
+
+ + + +
+
+
+

ЗАГОЛОВОК 3

+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+
+
+ +
+
+
+
+
+

ЗАГОЛОВОК H3

+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+
    +
  • + +

    Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small

    +
    • +
  • + +

    Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small

    +
    • +
+
+
+ +
+
+
+
+ +
+
+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+
    +
  • + +

    Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small

    +
    • +
  • + +

    Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small

    +
    • +
+
+
+
+
+ + + +
+
+ +
+

ЗАГОЛОВОК H3

+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+
+
+
+ +

Кстати: экологически чистые картонные когтеточки можно получить в подарок при покупке корма для кошек Cosmocat в упаковках 2 кг.

+
+
+ +
+

Взрослая кошка (1-7 лет)

+

Как правило, в этом возрасте питомцу нужно просто поддерживать вес – исходя из уровня его активности и особых указаний ветеринара (если они будут).

+
+
+
+ + + +
+

ЗАГОЛОВОК H2 ЗАГОЛОВОК H2 ЗАГОЛОВОК H2

+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+
    +
  • + +
    +

    ЗАГОЛОВОК H3

    +

    Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

    +
    +
    • +
  • + +
    +

    ЗАГОЛОВОК H3

    +

    Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

    +
    +
    • +
  • + +
    +

    ЗАГОЛОВОК H3

    +

    Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

    +
    +
    • +
+

Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large

+
+ + + +
+ +
+ + + + +
+
+ +
+

+ ЗАГОЛОВОК H3 +

+

+ Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large +

+
+
+
+ +
+

+ Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large +

+
+
+
+ +
+

+ Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large +

+
+
+
+ +
+

+ Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large +

+
+
+
+ +
+ +
+ +
+
+ + + 22 + +
+
+

+ КОММЕНТАРИИ (5) +

+
+

+ Войдите, чтобы оставлять комментарии +

+
+
+
+
+ +
+
+ Ольга М. +
+ + 15 января 2025 + +
+
+

+ Лучший обзор на когтеточки! +

+
+ + +
+
+ +
+
+
+ +
+
+ Дед +
+ + 15 января 2025 + +
+
+

+ Помню в 1937 году когтеточки были лучше +

+
+ + +
+
+
+
+ +
+
+ Чжон Д. +
+ + 15 января 2025 + +
+
+

+ 关于挠痒柱的最佳评论 +

+
+ + +
+
+
+
+
+ +
+
+ Пётр Ш. +
+ + 15 января 2025 + +
+
+

+ А расскажите как самому сделать когтеточки? +

+
+ + +
+
+ +
+
+
+ +
+
+ Дед +
+ + 15 января 2025 + +
+
+

+ Помню в 1937 году когтеточки были лучше +

+
+ + +
+
+
+
+
+ +
+
+ Ира О. +
+ + 15 января 2025 + +
+
+

+ Классный обзор когтеточек! +

+
+ + +
+
+ +
+
+
+ +
+
+ Дед +
+ + 15 января 2025 + +
+
+

+ Помню в 1937 году когтеточки были лучше +

+
+ + +
+
+
+
+ +
+
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ +
+
+

Как выбрать когтеточку: обзор мастхевов для вашей кошки

+

Простая с виду задача «купить когтеточку» может оказаться утомительным и дорогим занятием. Типичная ситуация: вы приобрели сразу несколько вариантов ...

+
+
    +
  • Обзоры
    • +
  • Тренды
    • +
+
21.10.24
+
время чтения: 5 минут
+
+
+ + 22 +
+
+ + 22 +
+
+ +
+
+ читать статью +
+
+
+
+
+
+
+ +
+
+

Краткая история кормов: от хлебных корок до лечебных рационов

+

Современный мир сложно представить без готовых кормов для собак и кошек. И сложно поверить, что это относительно современная концепция, существующая менее 150 лет. Поэтапно о том ...

+
+
    +
  • Обзоры
    • +
  • Тренды
    • +
+
21.10.24
+
время чтения: 5 минут
+
+
+ + 22 +
+
+ + 22 +
+
+ +
+
+ читать статью +
+
+
+
+
+
+
+ +
+
+

Пищевая аллергия у собак. Причины и пути решения

+

Даже привычный рацион может вызвать у питомца нежелательную реакцию – зуд, расстройства ЖКТ, изменения в поведении. Хорошая новость: с этой проблемой можно справиться. Рассказываем, как ...

+
+
    +
  • Обзоры
    • +
  • Тренды
    • +
+
21.10.24
+
время чтения: 5 минут
+
+
+ + 22 +
+
+ + 22 +
+
+ +
+
+ читать статью +
+
+
+
+
+
+
+
+
+ + +
+ + + + + +
+ + + + + + diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 5f160ef..94b40f8 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -1,16 +1,119 @@ -/* Переменные, шрифты, UI kit */ +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf'); + font-weight: 400; +} +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf'); + font-weight: 500; +} +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf'); + font-weight: 600; +} +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf'); + font-weight: 700; +} -/* - -ШАБЛОН использования глобальных переменных: +@font-face { + font-family: "Abel"; + src: url('../fonts/Abel/Abel-Regular.ttf'); + font-weight: 400; +} :root { - --main-text: #e1667c; - --main-color: #8da6cb; - --font-family: "Craftwork Grotesk", sans-serif; -} + /* Colors */ + --radial: radial-gradient(261.43% 263.03% at 124% -28.000000000000004%,rgb(15, 88, 129),rgb(30, 164, 156) 36.979%,rgb(118, 206, 117) 66.667%,rgb(236, 243, 159) 91.146%); + --accent-1: radial-gradient(142.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%); + --accent-2: radial-gradient(2700.48% 141.42% at 100% 0%,rgb(122, 217, 231),rgb(126, 231, 225) 25%,rgb(181, 228, 180) 80%,rgb(215, 238, 170) 100%); + --accent-3: linear-gradient(6deg, rgb(244, 66, 66) 7.584%,rgb(86, 158, 240) 72.371%); + --linear: linear-gradient(-7.39deg, rgb(244, 241, 240) 23.643%,rgba(244, 241, 240, 0.3) 59.827%); + --btn-bg: radial-gradient(100% 174.56% at 100% 0%, #7AD9E7 0%, #7EE7E1 25%, #B5E4B4 80%, #D7EEAA 100%); + + + --main_white: #FFFFFF; + --creme-white: #F4F1F0; + --grey-f5: #F5F5F5; + --main_black: #121212; + --grey-black: #121212; + --bg-light-grey: #F5F5F5; + --interface_title: #333333; + --interface_hover: #666666; + --orange_80: #FFDF99; + --green_90: #D9FFCC; + --green-dark: #76CE75; + --violet_90: #E7CAFF; + --blue_90: #CCE2FF; + --background: #F4F1F0; + --placeholder: #999999; + /* Fonts */ + --font-craftwork: 'Craftwork Grotest', sans-serif; + --font-abel: 'Abel', serif; +} + +body { + background: var(--radial); + font-family: var(--font-craftwork); + font-weight: 500; +} + +.container { + max-width: 1232px; + margin: 0 auto; + + @media (max-width: 1264px) { + max-width: calc(100% - 32px); + } +} + +.form-inp { + height: 48px; + width: 100%; + border: 1px solid var(--placeholder); + border-radius: 20px; + background: var(--main_white); + padding: 0 16px; + color: var(--main_black); + font-size: 20px; + font-weight: 400; + line-height: 24px; +} + +.form-inp::placeholder { + color: var(--placeholder); +} + +.form-inp:hover, +.form-inp:focus { + border-color: var(--main_black); +} + +.form-textarea { + height: 96px; + width: 100%; + resize: none; + background: var(--main_white); + border: 1px solid var(--placeholder); + padding: 12px 16px; + border-radius: 20px; + color: var(--main_black); + font-size: 20px; + font-weight: 400; + line-height: 24px; +} + +.form-textarea::placeholder { + color: var(--placeholder); +} -*/ +.form-textarea:hover, +.form-textarea:focus { + border-color: var(--main_black); +} diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 631a1a2..0e01461 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -1,18 +1,1909 @@ /* Основные стили для компьютера */ +/* Header */ +.header { + background: var(--main_white); + border-bottom: 1px solid var(--interface_title); + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 4; +} +.header-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 0; +} -/* писать сюда... */ +.header-bars { + display: none; +} +.header-logo { + display: flex; + align-items: center; + gap: 8px; +} +.header-logo span { + color: var(---main_black); + font-size: 20px; + text-transform: uppercase; +} +.header-navs { + display: flex; + align-items: center; + gap: 24px; +} +.header-navs__link { + padding: 8px 12px; + font-size: 16px; + font-weight: bold; + text-transform: uppercase; + line-height: 20px; +} +.header-accordion {} +.header-accordion__btn { + display: flex; + align-items: center; + gap: 4px; + padding: 8px 12px; + border-radius: 24px; + background: var(--accent-2); + cursor: pointer; + user-select: none; + font-size: 16px; + font-weight: bold; + line-height: 20px; + color: var(---main_black); +} +.header-right { + display: flex; + align-items: center; + gap: 8px; +} +.header-lang__btn { + display: flex; + align-items: center; + cursor: pointer; + user-select: none; + gap: 4px; + padding: 12px 15px; + color: var(---main_black); + font-size: 16px; + font-weight: bold; + line-height: 20px; +} -/* Стили для лептопов */ -/* @media only screen and (min-width: 992px) and (max-width: 1400px) { +/* Header end */ -} */ \ No newline at end of file + +/* Home */ +.home { + padding: 140px 0 68px; +} + +.home-title { + font-size: 82px; + font-weight: bold; + line-height: 96px; + color: var(--main_white); + margin-bottom: 16px; +} + +.home-description { + font-size: 32px; + font-weight: bold; + line-height: 40px; + color: var(--main_white); + text-transform: uppercase; + margin-bottom: 68px; +} + +.home-swp { + position: relative; +} + +.home-swp__btn { + position: absolute; + bottom: 22px; + left: 50%; + transform: translateX(-50%); + z-index: 2; + display: flex; + align-items: center; + gap: 24px; +} + +.home-swp__btn button { + border: 1px solid var(--main_black); + background: var(--main_white); + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 20px; +} + +.home-swp .swiper-slide:not(.swiper-slide-active) { + height: 0; + overflow: hidden; +} + +.home-card { + border-radius: 60px; + overflow: hidden; + display: flex; + align-items: flex-start; + gap: 24px; + position: relative; +} + +.home-card.bg-yellow { + background: var(--orange_80); +} + +.home-card.bg-green { + background: var(--green_90); +} + +.home-card.bg-violet { + background: var(--violet_90); +} + +.home-card__img { + width: 395px; + border-radius: 60px; + overflow: hidden; + height: 393px; + flex-shrink: 0; +} + +.home-card__img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.home-card__content { + padding: 32px 79px 0 0; +} + +.home-card__content-title { + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + max-width: 660px; + margin-bottom: 10px; + color: var(--interface_title); +} + +.home-card__content-description { + color: var(--interface_title); + margin-bottom: 10px; + font-size: 20px; + font-weight: 500; + line-height: 24px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.home-card__content-body { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} + +.home-card__content-body__alerts { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} + +.home-card__content-body__alerts li { + background: var(--interface_hover); + color: var(--background); + border-radius: 16px; + padding: 6px 8px; + font-size: 16px; + font-weight: 500; + line-height: 20px; +} + +.home-card__content-body__day { + color: var(--interface_hover); + font-size: 14px; + font-weight: 500; + line-height: 16px; +} + +.home-card__content-body__time { + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); +} + +.home-card__content-body__data { + display: flex; + align-items: center; + gap: 12px; +} + +.home-card__content-body__data>div { + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); +} + +.home-card__content-body__data>div .main-img { + width: 32px; + height: 32px; + border-radius: 50%; + object-fit: cover; +} + +.home-card__content-body__link { + border: 1px solid #000000; + border-radius: 28px; + background: var(--main_white); + position: absolute; + right: 37px; + bottom: 26px; + padding: 8.5px 16px 12.5px; + font-style: 20px; + font-weight: 500; + line-height: 24px; +} +/* Home end */ + + +/* Anons */ +.anons { + background: var(--main_white); + border-radius: 60px; + padding: 51px 0; +} + +.anons-theme__title { + color: var(--main_black); + font-size: 24px; + font-weight: bold; + line-height: 28px; + text-transform: uppercase; + margin-bottom: 20px; +} + +.anons-theme { + margin-bottom: 60px; +} + +.anons-theme ul { + max-width: 1022px; + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.anons-theme ul a { + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: var(--main_black); + padding: 4px 24px; + border: 1px solid #000; + border-radius: 20px; +} + +.anons-theme ul a:hover, +.anons-theme ul a.active { + background: var(--main_black); + color: var(--main_white); +} + +.anons-best { + margin-bottom: 60px; +} + +.anons-best__title { + font-size: 36px; + line-height: 40px; + font-weight: bold; + color: var(--main_black); + margin-bottom: 20px; +} + +.anons-best__card-wrap { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.anons-best__card { + padding-top: 293px; + border-radius: 48px; + overflow: hidden; + position: relative; + z-index: 1; +} + +.anons-best__card.light { + padding-top: 0; + border-radius: 0; +} + +.anons-best__card .main-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 360px; + z-index: -1; +} + +.anons-best__card .main-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anons-best__card.light .main-img { + position: static; + height: 265px; +} +.anons-best__card.light .main-img img { + border-radius: 30px; +} + +.anons-best__card-alerts { + position: absolute; + top: 21px; + left: 17px; + width: calc(100% - 34px); + display: flex; + flex-wrap: wrap; + gap: 7px; + z-index: 1; +} + +.anons-best__card-alerts li { + padding: 6px 8px; + font-size: 16px; + line-height: 20px; + font-weight: 500; + color: var(--background); + background: var(--main_black); + border-radius: 30px; +} + +.anons-best__card-body { + background: var(--accent-1); + padding: 30px 17px 22px; + border-radius: 48px 48px 0 0; + color: var(--main_white); + position: relative; + height: 100%; +} + +.anons-best__card.light .anons-best__card-body { + background: transparent; + color: var(--main_black); + padding: 12px 0 34px; +} + +.anons-best__card-body__title { + font-size: 28px; + font-weight: bold; + line-height: 32px; + text-transform: uppercase; + margin-bottom: 14px; +} + +.anons-best__card.light .anons-best__card-body__title { + font-size: 26px; +} + +.anons-best__card-body__datas { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px 10px; + max-width: 264px; +} + +.anons-best__card.light .anons-best__card-body__datas { + color: var(--placeholder); +} + +.anons-best__card-body__datas p { + font-size: 14px; + line-height: 16px; + font-weight: 500; +} + +.anons-best__card-body__datas ul { + display: flex; + align-items: center; + gap: 10px; +} + +.anons-best__card-body__datas ul li { + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + line-height: 16px; + font-weight: 500; +} + +.anons-best__card-body__datas ul .logo img { + width: 24px; + height: 24px; + border-radius: 50%; + object-fit: cover; +} + +.anons-article { + margin-bottom: 40px; +} + +.anons-article__title { + font-size: 36px; + line-height: 40px; + font-weight: bold; + color: var(--main_black); + margin-bottom: 20px; +} + +.anons-article__card-wrap { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 40px 25px; +} + +.anons-article__more-link { + display: flex; + align-items: center; + justify-content: center; +} + +.anons-article__more-link a { + background: var(--accent-3); + color: var(--main_white); + border-radius: 20px; + border: 1px solid var(--main_white); + padding: 16px 24px; + font-size: 20px; + font-weight: 600; + line-height: 24px; + text-transform: uppercase; +} +/* Anons end */ + +/* Author */ +.author { + padding: 111px 0 105px; +} + +.author-content { + max-width: 1022px; + margin: 0 auto; + background: #CAFF81; + border-radius: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 35px 42px 35px 209px; + position: relative; + box-shadow: 6px 9px 20px rgba(0, 0, 0, 15%); +} + +.author-content__star-1 { + position: absolute; + width: 74px; + top: 18px; + left: -15px; + transform: translateX(-100%); +} + +.author-content__star-2 { + position: absolute; + top: 28px; + right: -24px; + transform: translateX(100%); + width: 37px; +} + +.author-content__img { + position: absolute; + left: 9px; + top: -43px; + width: 167px; +} + +.author-content__img.mb { + display: none; +} + +.author-content__title { + color: var(--main_black); + font-size: 36px; + font-weight: bold; + line-height: 40px; +} + +.author-content__link { + border-radius: 20px; + background: var(--main_black); + border: 1px solid var(--main_white); + padding: 15px 24px; + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: var(--main_white); + flex-shrink: 0; +} +/* Author end */ + +/* Editorial */ +.editorial { + padding-bottom: 68px; +} + +.editorial-head { + position: relative; + z-index: 1; + max-width: 841px; + margin-bottom: 37px; +} + +.editorial-head__title { + font-size: 82px; + line-height: 96px; + font-weight: bold; + color: var(--main_white); + text-transform: uppercase; +} + +.editorial-head__img { + position: absolute; + z-index: -1; + top: -14px; + right: -20px; + width: 221px; +} + +.editorial-head__star { + position: absolute; + top: 8.26px; + right: -13.5px; + transform: translateX(100%); + width: 87.5px; +} + +.editorial-card__wrap { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 31px 25px; + position: relative; + z-index: 1; +} + +.editorial-card { + border: 2px solid var(--creme-white); + border-radius: 30px; + display: flex; + align-items: stretch; + overflow: hidden; + background: var(--linear); + backdrop-filter: blur(28px); +} + +.editorial-card .main-img { + min-height: 282px; + width: 207px; + border-radius: 29px; + overflow: hidden; + flex-shrink: 0; +} + +.editorial-card .main-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.editorial-card__content { + padding: 42px 19px 19px 35px; +} + +.editorial-card__content-alerts { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 7px; + margin-bottom: 17px; +} + +.editorial-card__content-alerts a { + background: var(--main_black); + border-radius: 16px; + padding: 6px 8px; + font-size: 16px; + font-weight: 500; + line-height: 20px; + color: var(--background); +} + +.editorial-card__content-title { + font-size: 28px; + font-weight: bold; + line-height: 32px; + color: var(--grey-black); + text-transform: uppercase; + margin-bottom: 17px; +} + +.editorial-card__content-data { + display: flex; + flex-wrap: wrap; + gap: 5px 16px; + color: var(--interface_hover); + font-size: 16px; + font-weight: 500; + line-height: 20px; +} + +.editorial-card__content-data ul { + display: flex; + align-items: center; + gap: 16px; +} + +.editorial-card__content-data li { + display: flex; + align-items: center; + gap: 5px; +} + +.editorial-card__content-data .logo img { + width: 24px; + height: 24px; + border-radius: 50%; + object-fit: cover; +} +/* Editorial end */ + +/* Footer */ +.footer { + background: var(--main_black); + padding: 40px 0 38px; + color: var(--main_white); +} + +.footer-top { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: 48px; +} + +.footer-top .logo { + display: flex; + align-items: center; + gap: 10px; + font-size: 20px; + font-weight: 500; + text-transform: uppercase; + background: var(--accent-1); + color: transparent; + -webkit-background-clip: text; + background-clip: text; + margin-bottom: 24px; +} + +.footer-content__address { + font-size: 24px; + font-weight: 500; + line-height: 32px; + margin-bottom: 32px; +} + +.footer-content { + width: 100%; +} + +.footer-content ul { + display: flex; + flex-direction: column; + gap: 24px; +} + +.footer-content ul li { + display: flex; + flex-direction: column; + gap: 4px; +} + +.footer-content ul p { + font-size: 16px; + font-weight: bold; + line-height: 20px; +} + +.footer-content ul a { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +.footer-content__wrap { + display: flex; + align-items: flex-end; + justify-content: space-between; + width: 100%; +} + +.footer-top__link { + display: flex; + flex-direction: column; + gap: 24px; +} + +.footer-top__link .link-black { + padding: 7px 15px; + color: var(--main_white); + font-size: 24px; + line-height: 32px; + font-weight: 500; + white-space: nowrap; + border: 1px solid var(--main_white); + border-radius: 24px; +} + +.footer-top__link .link-white { + width: 100%; + text-align: center; + background: var(--main_white); + color: var(--main_black); + font-size: 20px; + font-weight: 600; + line-height: 24px; + padding: 12px; + border-radius: 20px; +} + +.footer-contact { + width: 364px; + flex-shrink: 0; + background: var(--accent-1); + border-radius: 24px; + padding: 24px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.footer-contact__title { + color: var(--main_black); + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +.footer-contact__submit { + width: 100%; + text-align: center; + height: 48px; + border-radius: 16px; + background: var(--main_black); + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: var(--main_white); +} + +.footer-bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 17px; + margin-top: 19px; + border-top: 1px solid var(--main_white); +} + +.footer-network { + display: flex; + align-items: center; + gap: 32px; +} + +.footer-bottom a { + font-size: 16px; + line-height: 20px; + font-weight: 500; + color: var(--main_white); + opacity: 0.6; + text-decoration: underline; +} +/* Footer end */ + +/* Breadcrumb */ +.breadcrumb { + padding: 108px 0 24px; +} + +.breadcrumb .container { + color: var(--main_white); + font-size: 14px; + font-weight: 500; + line-height: 16px; +} + +.breadcrumb a { + display: inline; +} +/* Breadcrumb end */ + +/* Article home */ +.article-home { + padding-bottom: 36px; +} + +.article-home h1 { + font-size: 64px; + font-weight: bold; + line-height: 120%; + color: var(--main_white); + margin-bottom: 17px; + text-transform: uppercase; +} + +.article-home__data { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 24px; + margin-bottom: 17px; +} + +.article-home__data-alerts { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; +} + +.article-home__data-alerts a { + font-size: 16px; + line-height: 20px; + font-weight: 500; + color: var(--background); + padding: 6px 8px; + border-radius: 20px; + background: var(--main_black); +} + +.article-home__data p { + font-size: 14px; + line-height: 16px; + font-weight: 500; + color: var(--main_white); + display: flex; + align-items: center; + gap: 4px; +} + +.article-home__data .user { + display: flex; + align-items: center; + gap: 7px; + font-size: 14px; + line-height: 16px; + font-weight: 500; + color: var(--main_white); +} + +.article-home__data .user img { + width: 32px; + height: 32px; + border-radius: 50px; + object-fit: cover; +} + +.article-home__card { + width: 100%; + height: 500px; +} + +.article-home__card img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 64px; +} + +@media (min-width: 992px) { + .article-home.position-1 .container { + position: relative; + z-index: 1; + } + + .article-home.position-1 .article-home__card { + width: calc(50% - 12px); + position: absolute; + top: 0; + right: 0; + height: 100%; + z-index: -1; + } + + .article-home.position-1 h1 { + width: calc(50% - 12px); + } + + .article-home.position-1 .article-home__data { + max-width: 406px; + } + + .article-home.position-2 .container { + position: relative; + z-index: 1; + height: 695px; + padding: 45px 42px; + } + + .article-home.position-2 .article-home__card { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + overflow: hidden; + } + + .article-home.position-2 .article-home__card::before { + content: ""; + width: 100%; + height: 100%; + background: linear-gradient(282.92deg, rgba(255, 255, 255, 0) 50.1%, #FFFFFF 77.26%); + position: absolute; + top: 0; + left: 0; + border-radius: 50px; + } + + .article-home.position-2 h1 { + color: var(--main_black); + max-width: 838px; + } + + .article-home.position-2 .article-home__data { + width: 304px; + } + + .article-home.position-2 .article-home__data p { + color: var(--main_black); + } + + .article-home.position-2 .article-home__data p img { + filter: brightness(0) invert(0) + } + + .article-home.position-2 .article-home__data .user { + color: var(--main_black); + } +} + +.article-content { + background: var(--main_white); + border-radius: 64px; + max-width: 1232px; + margin: 0 auto; + padding: 64px 0 116px; +} + +.article-container { + max-width: 1022px; + margin: 0 auto; + + @media (max-width: 1054px) { + max-width: calc(100% - 32px); + } +} +/* Article home end */ + +/* Discount */ +.discount { + background: radial-gradient(122% 156.56% at 100% 0%, #7E90FF 0%, #8187FF 45%, #F8A6FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; + border-radius: 32px; + padding: 32px; + position: relative; + z-index: 1; + margin-bottom: 48px; +} + +.discount-title { + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + max-width: 517px; + color: var(--main_black); + margin-bottom: 15px; +} + +.discount-bg { + position: absolute; + top: 4px; + right: 8px; + width: 369px; + z-index: -1; +} + +.discount-bg.mb { + display: none; +} + +.discount-title span { + color: var(--main_white); +} + +.discount-form { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 15px; +} + +.discount-form input { + width: 280px; + height: 50px; + border: 2px solid var(--main_black); + border-radius: 48px; + background: #F5F5F5; + padding: 0 18px; + font-size: 24px; + font-weight: 500; + color: var(--main_black); +} + +.discount-form button { + border: 2px solid var(--main_black); + background: transparent; + height: 50px; + padding: 0 30px; + font-size: 24px; + font-weight: 500; + color: var(--main_black); + border-radius: 50px; +} + +.discount-form button:hover { + background: var(--interface_title); + color: var(--main_white); +} + +.discount-description__1 { + font-size: 14px; + font-weight: 500; + color: var(--main_black); + max-width: 621px; + margin-bottom: 15px; +} + +.discount-description__2 { + font-size: 20px; + font-weight: 500; + color: var(--main_black); +} +/* Discount end */ + +/* Diet */ +.diet { + background: var(--violet_90); + border-radius: 32px; + padding: 36px 49px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 32px; + margin-bottom: 48px; +} + +.diet p { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: var(--grey-black); +} + +.diet a { + padding: 12px 24px; + text-align: center; + border: 1px solid var(--main_black); + background: var(--main_white); + border-radius: 20px; + font-size: 20px; + line-height: 24px; + font-weight: 600; +} + +.diet a:hover { + background: var(--interface_title); + color: var(--main_white) +} +/* Diet end */ + +/* Texts */ +.texts { + display: flex; + flex-direction: column; + gap: 48px; +} + +.texts h2 { + font-size: 36px; + line-height: 40px; + font-weight: bold; + color: var(--grey-black); + text-transform: uppercase; +} + +.texts h3 { + font-size: 24px; + line-height: 28px; + font-weight: bold; + color: var(--grey-black); + text-transform: uppercase; +} + +.texts-description { + display: flex; + flex-direction: column; + gap: 48px; +} + +.texts-description p { + color: var(--grey-black); + font-size: 24px; + line-height: 32px; + font-weight: 500; +} + +.texts-description a { + display: inline; + text-decoration: underline; +} + +.texts ol { + display: flex; + flex-direction: column; + gap: 12px; + font-size: 24px; + line-height: 32px; + font-weight: 500; + color: #191919; +} + +.texts ol li { + display: flex; + align-items: center; + gap: 12px; +} + +.texts ol h4 { + background: var(--accent-1); + border-radius: 5.2px; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + line-height: 32px; + font-weight: 500; + color: white; +} + +.texts ul { + display: flex; + flex-direction: column; + gap: 12px; +} + +.texts ul li { + padding-left: 22px; + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: #191919; + position: relative; +} + +.texts ul li::before { + content: ""; + width: 10px; + height: 10px; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + background: var(--accent-1); + border-radius: 3px; +} + +.texts-swp { + position: relative; +} + +.texts-swp__prev { + position: absolute; + z-index: 2; + top: 50%; + transform: translateY(-50%); + left: 10px; + background: var(--main_white); + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 20px; +} + +.texts-swp__next { + position: absolute; + z-index: 2; + top: 50%; + transform: translateY(-50%); + right: 10px; + background: var(--main_white); + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 20px; +} + +.texts-swp .swiper-slide img { + height: 517px; + width: 100%; + object-fit: cover; + border-radius: 50px; +} + +.texts-swp .swiper-slide:not(.swiper-slide-active) { + height: 0; + overflow: hidden; +} + +.texts-swp__pagination { + position: absolute; + top: auto !important; + bottom: 20px !important; + right: auto; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + gap: 11px; +} + +.texts-swp__pagination span { + opacity: 0.5; + background: var(--main_white); + width: 40px; + height: 6px; + border-radius: 6px; + margin: 0 !important; + padding: 0 !important; +} + +.texts-swp__pagination span.swiper-pagination-bullet-active { + opacity: 1; +} +/* Texts end */ + +/* Alerts */ +.alerts { + display: flex; + flex-direction: column; + gap: 48px; + margin: 48px 0; +} + +.alerts-grey { + padding: 32px 98px; + border-radius: 32px; + background: var(--bg-light-grey); + position: relative; +} + +.alerts-grey p { + color: #191919; + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +.alerts-grey .icon-1 { + position: absolute; + top: 32px; + left: 32px; +} + +.alerts-grey .icon-2 { + position: absolute; + bottom: 32px; + right: 32px; +} + +.alerts-violet { + background: #FAEAE9; + border-radius: 32px; + padding: 32px; + display: flex; + align-items: center; + gap: 32px; +} + +.alerts-violet img { + flex-shrink: 0; +} + +.alerts-violet p { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: #191919; +} + +.alerts-yellow { + display: flex; + align-items: center; + background: #FEF8E6; + border-radius: 32px; + padding: 32px; + gap: 32px; +} + +.alerts-yellow img { + flex-shrink: 0; +} + +.alerts-yellow p { + font-size: 24px; + line-height: 32px; + font-weight: 500; + color: #191919; +} + +.alerts-green { + background: #E9F8EB; + border-radius: 32px; + padding: 32px; + display: flex; + align-items: center; + gap: 32px; +} + +.alerts-green img { + flex-shrink: 0; +} + +.alerts-green p { + color: #191919; + font-size: 24px; + font-weight: 500; + line-height: 32px; +} +/* Alerts end */ + +/* Article table */ +.article-table__wrap { + background: var(--accent-3); + border-radius: 24px; + overflow: hidden; + padding: 2px; + margin-bottom: 48px; +} + +.article-table { + background: var(--main_white); + border-radius: 22px; + overflow: hidden; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 18px; +} + +.article-table__item { + display: flex; + width: calc(100% / 3 - 36px / 3); + align-items: stretch; + border: 1px solid #E1E1E1; + text-align: center; + font-size: 20px; + line-height: 24px; + font-weight: 500; +} + +.article-table__item ul { + width: 50%; + flex-shrink: 0; +} + +.article-table__item li { + padding: 8px; +} + +.article-table__item li:not(:last-child) { + border-bottom: 1px solid #E1E1E1; +} + +.article-table__item li:first-child { + background: #E1E1E1; +} + +.article-table__item ul:first-child li:first-child { + border-right: 1px solid var(--main_white); +} + +.article-table__item ul:not(:last-child) li { + border-right: 1px solid #E1E1E1; +} +/* Article table end */ + +/* Article block */ +.article-block__head { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin-bottom: 48px; + gap: 30px; +} + +.article-block__head-left { + display: flex; + flex-direction: column; + gap: 23px; +} + +.article-block__head-left h3 { + font-size: 24px; + font-weight: bold; + left: 28px; + text-transform: uppercase; + color: var(--grey-black); +} + +.article-block__head-left p { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: var(--grey-black); +} + +.article-block__head-right img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50px; +} + +.article-block__item-wrap { + display: flex; + flex-direction: column; + gap: 72px; +} + +.article-block__item { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: 32px; +} + +.article-block__item-content { + display: flex; + flex-direction: column; + width: 100%; + gap: 23px; +} + +.article-block__item-content h3 { + font-size: 26px; + font-weight: bold; + color: var(--grey-black); +} + +.article-block__item-content p { + font-size: 24px; + line-height: 32px; + font-weight: 500; +} + +.article-block__item-content ul { + width: 100%; + background: var(--bg-light-grey); + border-radius: 24px; + display: flex; + align-items: center; + padding: 20px; + gap: 24px; +} + +.article-block__item-content ul li { + display: flex; + align-items: center; + gap: 20px; + font-size: 20px; + line-height: 24px; + color: var(--grey-black); +} + +.article-block__item-content ul li img { + flex-shrink: 0; +} + +.article-block__item-img { + width: 315px; + flex-shrink: 0; +} + +.article-block__item-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50px; +} +/* Article block end */ + +/* Block accent */ +.block-accent { + margin: 48px 0 100px; + display: flex; + flex-direction: column; + gap: 48px; +} + +.block-accent__card { + padding: 36px 63px 36px 49px; + border-radius: 32px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 32px; + width: 100%; +} + +.block-accent .card-violet { + flex-direction: row-reverse; + background: var(--violet_90); +} + +.block-accent__card-content { + width: 100%; + display: flex; + flex-direction: column; + gap: 21px; +} + +.block-accent__card h3 { + font-size: 26px; + font-weight: bold; + color: var(--grey-black); + text-transform: uppercase; +} + +.block-accent__card p { + font-size: 24px; + line-height: 32px; + font-weight: 500; + color: var(--grey-black); +} + +.block-accent__card img { + flex-shrink: 0; +} + +.block-accent .card-orange { + background: var(--orange_80); +} + +.block-accent .card-blue { + background: #E0FDFF; +} +/* Block accent end */ + +/* Indent */ +.indent { + background: #E2F3FF; + border-radius: 32px; + padding: 36px 49px; + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 48px; +} + +.indent ul { + display: flex; + flex-direction: column; + gap: 32px; +} + +.indent-title { + max-width: 661px; + font-size: 36px; + line-height: 40px; + font-weight: bold; + text-transform: uppercase; + color: var(--grey-black); +} + +.indent p { + font-size: 24px; + line-height: 32px; + font-weight: 500; + color: var(--grey-black); +} + +.indent li { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.indent li h3 { + font-size: 26px; + font-weight: bold; + text-transform: uppercase; + color: var(--grey-black); + margin-bottom: 16px; +} + +.indent li img { + flex-shrink: 0; +} +/* Indent end */ + +/* Product card */ +.product-card { + display: flex; + align-items: center; + gap: 50px; + justify-content: center; + background: var(--blue_90); + padding: 32px; + border-radius: 50px; +} + +.product-card img { + max-width: 740px; + max-height: 512px; +} +/* Product card end */ + +/* block_lists */ +.block-lists { + margin: 48px 0; + display: flex; + flex-direction: column; + gap: 48px; +} + +.block-list_block { + display: flex; + align-items: start; + gap: 25px; +} + +.block-list_block img { + width: 145px; + flex-shrink: 0; +} + +.block-list_block h3 { + font-size: 24px; + font-weight: 700; + line-height: 28px; + color: var(--main_black); + margin-bottom: 24px; +} + +.block-list_block p { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: var(--main_black); +} +/* block_lists */ + +/* comment */ +.comment { + border-top: 1px solid var(--placeholder); + padding-top: 48px; + margin-top: 100px; +} + +.comment .comment-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +.comment .comment-btn button { + padding: 12px 24px; + border-radius: 20px; + display: flex; + align-items: center; + gap: 8px; + background: var(--btn-bg); + font-size: 20px; + font-weight: 600; + line-height: 24px; + font-family: var(--font-craftwork); +} + +.comment .comment-btn span { + font-family: var(--font-craftwork); + font-size: 20px; + font-weight: 500; + line-height: 24px; +} + +.comment .comment-title { + font-family: var(--font-craftwork); + font-size: 24px; + font-weight: 700; + line-height: 28px; + color: var(--grey-black); + margin: 48px 0 0 0; +} + +.comment .comment-in { + max-width: 816px; + margin: 0 auto; +} + +.comment .comment-block { + margin-top: 40px; + padding: 28px 48px; + border-radius: 24px; + background: var(--grey-f5); +} + +.comment .comment-block p { + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black); +} + +.comment .comment-block p a { + color: var(--green-dark); + text-decoration: underline; +} + +.comment .comment-user { + display: flex; + align-items: center; + gap: 12px; +} + +.comment .comment-user img { + width: 48px; + height: 48px; + border-radius: 50%; + flex-shrink: 0; +} + +.comment .comment-user h6 { + font-size: 20px; + font-weight: 700; + line-height: 24px; + color: var(---main_black); + margin-bottom: 5px; +} + +.comment .comment-user span { + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); +} + +.comment .comment-block p { + margin: 15px 0; + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(---main_black); +} + +.comment .comment-btns { + display: flex; + align-items: center; + gap: 33px; +} + +.comment .comment-btns button { + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); + display: flex; + align-items: center; + gap: 5px; +} + +.comment .answer-btn { + margin-bottom: 10px; + font-family: var(--font-craftwork); + font-size: 16px; + font-weight: 700; + line-height: 20px; + color: var(--green-dark); + display: flex; + align-items: center; + gap: 8px; + padding: 6px 24px; + text-transform: lowercase; +} + +.comment .answer-btn svg { + transition: .2s ease; +} + +.comment .answer-btn svg.active { + transform: rotate(180deg); +} + +.comment .answer-block { + display: none; + margin: 0 0 0 54px; +} + +.comment .answer-block.active { + display: block; +} + +.comment .comment-block_text { + margin: 0 !important; +} + +.video_block { + display: flex; + align-items: center; + justify-content: center; +} + +.other-home { + padding-top: 36px !important; +} +/* comment */ diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 0cf51d3..cd97fb4 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -1,5 +1,133 @@ /* Стили для мобильных устройств */ @media only screen and (max-width: 576px) { + .anons-best__title { + font-size: 26px; + line-height: 32px; + margin-bottom: 12px; + } + .anons-best__card { + padding-top: 205px; + } + .anons-best__card .main-img { + height: 300px; + } + + .anons-best__card-body { + padding: 20px 17px; + } + + .anons-best__card-body__title { + font-size: 20px; + line-height: 24px; + margin-bottom: 16px; + } + + .anons-best__card.light .main-img { + height: 197px; + } + + .anons-best__card.light .anons-best__card-body__title { + font-size: 20px; + line-height: 24px; + } + + .editorial-card { + flex-direction: column; + border-radius: 30px; + position: relative; + } + + .editorial-card .main-img { + width: 100%; + height: 203px; + } + + .editorial-card__content { + padding: 17px 13px 24px; + } + + .editorial-card__content-alerts { + position: absolute; + top: 13px; + left: 8px; + width: calc(100% - 16px); + } + + .editorial-card__content-title { + font-size: 20px; + line-height: 24px; + margin-bottom: 17px; + } + + .editorial-card__content-data { + gap: 5px 16px; + } + + .footer { + padding: 24px 0 58px; + } + + .footer-top { + align-items: flex-start; + text-align: left; + gap: 24px; + } + + .footer-content__wrap { + align-items: flex-start; + gap: 24px; + } + + .footer-content { + align-items: flex-start; + } + + .footer-content .logo { + font-size: 20px; + margin-bottom: 24px; + } + + .footer-content__address { + font-size: 18px; + line-height: 24px; + margin-bottom: 32px; + } + + .footer-content ul { + gap: 24px; + } + + .footer-content ul p { + font-size: 16px; + line-height: 20px; + } + + .footer-content ul a { + font-size: 24px; + line-height: 32px; + } + + .footer-top__link .link-white { + display: none; + } + + .footer-contact { + width: 100%; + padding: 16px; + border-radius: 24px; + } + + .footer-contact__title { + color: var(--main_white); + } + + .footer-bottom { + margin-top: 0; + padding-top: 24px; + border: 0; + align-items: flex-start; + gap: 17px; + } } \ No newline at end of file diff --git a/assets/css/gp-style-normalize.css b/assets/css/gp-style-normalize.css new file mode 100644 index 0000000..ce8476b --- /dev/null +++ b/assets/css/gp-style-normalize.css @@ -0,0 +1,78 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent !important; +} + +a { + text-decoration: none; + color: inherit; + display: inline-block; + cursor: pointer; +} + +img { + max-width: 100%; +} + +span, +label { + display: inline-block; +} + +html { + scroll-behavior: smooth; +} + +input, +textarea { + outline: none; + border: 0; + background: transparent; +} + +button, +select { + border: none; + cursor: pointer; + background: transparent; + outline: 0; +} + +address { + font-style: normal; +} + +.wrapper { + width: 100%; + overflow: hidden; + min-height: 100svh; +} + +ul, +ol, +dl { + list-style: none; + padding: 0; + margin: 0; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; + margin: 0; + font-weight: 500; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + margin: 0; +} \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 32a3ef6..3642522 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -1,5 +1,666 @@ /* Стили для планшетов */ @media only screen and (max-width: 992px) { + .header-navs { + display: none; + } + .header-container { + height: 56px; + padding: 0; + } + + .header-bars { + display: flex; + align-items: center; + justify-content: center; + } + + .header-logo { + font-size: 16px; + line-height: 20px; + gap: 8px; + } + + .header-logo img { + width: 31px; + flex-shrink: 0; + } + + .header-lang { + display: none; + } + + .home { + padding: 92px 0 36px; + } + + .home-title { + font-size: 32px; + line-height: 38px; + margin-bottom: 36px; + } + + .home-description { + font-size: 20px; + line-height: 24px; + margin-bottom: 36px; + } + + .home-swp__btn { + bottom: auto; + top: 93px; + left: -10px; + width: calc(100% + 20px); + justify-content: space-between; + transform: translateX(0); + } + + .home-swp__btn button { + width: 48px; + height: 48px; + border-radius: 20px; + } + + .home-card { + flex-direction: column; + border-radius: 24px; + gap: 17px; + } + + .home-card__img { + height: 234px; + width: 100%; + border-radius: 24px; + } + + .home-card__content { + padding: 0 16px 89px; + } + + .home-card__content-title { + font-size: 20px; + line-height: 24px; + margin-bottom: 15px; + } + + .home-card__content-description { + font-size: 16px; + line-height: 20px; + margin-bottom: 15px; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + + .home-card__content-body { + gap: 7px; + } + + .home-card__content-body__alerts { + gap: 7px; + } + + .home-card__content-body__alerts li { + font-size: 14px; + line-height: 16px; + padding: 8px; + } + + .home-card__content-body__day { + font-size: 14px; + line-height: 16px; + } + + .home-card__content-body__time { + font-size: 14px; + line-height: 16px; + } + + .home-card__content-body__data { + gap: 7px; + } + + .home-card__content-body__data>div { + gap: 4px; + font-size: 14px; + line-height: 16px; + } + + .home-card__content-body__data .main-img { + width: 32px; + height: 32px; + } + + .home-card__content-body__link { + right: 50%; + bottom: 27px; + transform: translateX(50%); + } + + .anons { + border-radius: 24px; + } + + .anons-article__title { + font-size: 26px; + line-height: 32px; + } + + .anons-theme { + margin-bottom: 60px; + } + + .anons-theme__title { + margin-bottom: 20px; + font-size: 20px; + line-height: 24px; + } + + .anons-theme ul { + gap: 12px; + } + + .anons-theme ul a { + font-size: 16px; + line-height: 20px; + padding: 6px 24px; + } + + .anons-best__card-wrap { + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 24px; + } + + .anons-article__card-wrap { + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 20px; + } + + .author { + padding: 188px 0 36px; + } + + .author-content { + padding: 109px 42px 35px; + flex-direction: column; + align-items: flex-start; + } + + .author-content__start-1, + .author-content__start-2 { + display: none; + } + + .author-content__img { + display: none; + left: 50%; + transform: translateX(-50%); + top: -180px; + width: 235px; + } + + .author-content__img.mb { + display: block; + } + + .author-content__title { + width: 100%; + font-size: 26px; + line-height: 32px; + margin-bottom: 16px; + } + + .author-content__title br { + display: none; + } + + .author-content__link { + width: 100%; + text-align: center; + padding: 11px; + } + + .editorial { + padding-bottom: 36px; + } + + .editorial-head { + margin-bottom: 36px; + max-width: 313px; + } + + .editorial-head__title { + font-size: 32px; + line-height: 38px; + } + + .editorial-head__img { + width: 100px; + top: -14px; + right: -22.5px; + } + + .editorial-head__star { + display: none; + } + + .editorial-card__wrap { + gap: 31px; + } + + .breadcrumb { + padding: 92px 0 15px; + } + + .article-home { + padding-bottom: 36px; + } + + .article-home .container { + display: flex; + flex-direction: column; + } + + .article-home h1 { + order: 1; + font-size: 32px; + line-height: 38px; + margin-bottom: 15px; + } + + .article-home__card { + order: 2; + height: 199px; + } + + .article-home__card img { + border-radius: 32px; + } + + .article-home__data { + gap: 8px 16px; + order: 3; + margin: 15px 0 0; + } + + .article-home__data-alerts { + gap: 16px; + } + + .article-home__data-alerts a { + padding: 6px 8px; + } + + .article-content { + padding: 48px 0; + border-radius: 64px; + } + + .discount { + padding: 32px 24px; + border-radius: 32px; + margin-bottom: 48px; + } + + .discount-title { + font-size: 26px; + line-height: 32px; + margin-bottom: 21px; + } + + .discount-bg { + display: none; + } + + .discount-bg.mb { + display: inline-block; + position: static; + margin-bottom: 21px; + } + + .discount-form { + flex-direction: column; + gap: 21px; + margin-bottom: 21px; + } + + .discount-form img { + display: none; + } + + .discount-form input { + width: 100%; + text-align: center; + } + + .discount-form button { + width: 100%; + text-align: center; + } + + .discount-descriptions { + display: flex; + flex-direction: column-reverse; + } + + .discount-description__2 { + font-size: 18px; + line-height: 24px; + font-weight: 500; + grid-area: 21px; + margin-bottom: 21px; + } -} \ No newline at end of file + .discount-description__1 { + margin-bottom: 0; + font-size: 12px; + } + + .diet { + padding: 36px 24px; + border-radius: 32px; + flex-direction: column; + margin-bottom: 48px; + } + + .diet p { + width: 100%; + font-size: 18px; + line-height: 24px; + } + + .diet a { + width: 100%; + } + + .texts h2 { + font-size: 28px; + line-height: 32px; + } + + .texts h3 { + font-size: 20px; + line-height: 24px; + } + + .texts-description p { + font-size: 18px; + line-height: 24px; + } + + .texts ol { + gap: 12px; + } + + .texts ol li { + font-size: 18px; + line-height: 24px; + } + + .texts ol li h4 { + font-size: 18px; + line-height: 24px; + } + + .texts ul { + gap: 12px; + } + + .texts ul li { + font-size: 18px; + line-height: 24px; + } + + .alerts-grey { + padding: 32px 48px; + } + + .alerts-grey .icon-1 { + width: 24px; + top: 32px; + left: 16px; + } + + .alerts-grey .icon-2 { + width: 24px; + right: 16px; + bottom: 32px; + } + + .alerts-grey p { + font-size: 18px; + line-height: 24px; + } + + .alerts-violet, + .alerts-yellow, + .alerts-green { + padding: 32px 24px; + flex-direction: column; + } + + .alerts-violet p, + .alerts-yellow p, + .alerts-green p { + font-size: 18px; + line-height: 24px; + } + + .article-table { + flex-direction: column; + gap: 0px; + } + + .article-table__item { + width: 100%; + } + + .article-table__item:not(:first-child) li:first-child { + display: none; + } + + .article-table__item:not(:first-child) { + border-top: 0; + } + + .article-table__item ul li { + font-size: 16px; + line-height: 20px; + font-weight: 500; + } + + .article-block__head { + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 32px; + } + + .article-block__head-left { + order: 2; + } + + .article-block__head-left h3 { + font-size: 20px; + line-height: 24px; + } + + .article-block__head-left p { + font-size: 18px; + line-height: 24px; + } + + .article-block__head-right { + order: 1; + height: 319px; + } + + .article-block__item-wrap { + gap: 48px; + } + + .article-block__item { + flex-direction: column; + gap: 32px; + } + + .article-block__item-img { + order: 1; + width: 100%; + height: 450px; + border-radius: 50px; + } + + .article-block__item-content { + order: 2; + } + + .article-block__item-content h3 { + font-size: 20px; + line-height: 24px; + } + + .article-block__item-content p { + font-size: 18px; + line-height: 24px; + } + + .article-block__item-content ul { + flex-direction: column; + padding: 20px 14px 20px 20px; + gap: 28px; + border-radius: 24px; + } + + .article-block__item-content ul li { + gap: 19px; + } + + .article-block__item-content ul li p { + font-size: 16px; + line-height: 20px; + } + + .block-accent__card { + padding: 36px 24px; + gap: 32px; + flex-direction: column !important; + } + + .block-accent__card-content { + gap: 27px; + } + + .block-accent__card-content h3 { + font-size: 20px; + line-height: 24px; + text-align: center; + } + + .block-accent__card-content p { + font-size: 18px; + line-height: 24px; + } + + .indent { + padding: 36px 24px; + gap: 24px; + } + + .indent-title { + font-size: 26px; + line-height: 32px; + } + + .indent p { + font-size: 18px; + line-height: 24px; + } + + .indent ul { + gap: 24px; + } + + .indent ul li { + gap: 16px; + } + + .indent ul li img { + width: 37px; + } + + .indent ul li h3 { + font-size: 20px; + line-height: 24px; + gap: 16px; + } + + .product-card { + padding: 11px; + gap: 40px; + } + + .product-card img { + max-width: 242px; + max-height: 167px; + } + /* Alohida */ + + .block-list_block img { + flex-shrink: 0; + width: 66px; + height: 45px; + } + + .block-list_block h3 { + font-size: 20px; + line-height: 24px; + } + + .block-list_block p { + font-size: 18px; + line-height: 24px; + } + + .comment .comment-block { + padding: 20px 24px; + margin-top: 28px; + } + + .comment .comment-title { + padding-bottom: 20px; + } + + .comment .answer-block { + margin: 10px 0 0 42px; + } + + .comment .comment-user h6 { + font-size: 16px; + line-height: 24px; + } + + .comment .comment-block p { + font-size: 16px; + line-height: 24px; + } + + .comment .comment-btns { + gap: 14px; + } + + .comment .comment-btns button { + font-size: 12px; + line-height: 16px; + } + + .comment .comment-user span { + font-size: 12px; + line-height: 16px; + } + + .video_block iframe { + width: 100%; + height: 587px; + } +} diff --git a/assets/css/gp-style-xl.css b/assets/css/gp-style-xl.css new file mode 100644 index 0000000..4c0f0ea --- /dev/null +++ b/assets/css/gp-style-xl.css @@ -0,0 +1,44 @@ +@media (max-width: 1200px) { + .header-navs { + gap: 12px; + } + + .header-navs__link { + font-size: 14px; + } + + .header-right { + gap: 4px; + } + + .anons-article__card-wrap { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .editorial-card__wrap { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .footer-top { + flex-direction: column; + align-items: center; + text-align: center; + } + + .footer-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .footer-content__wrap { + flex-direction: column; + align-items: center; + gap: 48px; + } + + .footer-bottom { + flex-direction: column; + gap: 24px; + } +} \ No newline at end of file diff --git a/assets/css/normalize.min.css b/assets/css/normalize.min.css deleted file mode 100644 index 87aa24d..0000000 --- a/assets/css/normalize.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} -/*# sourceMappingURL=normalize.min.css.map */ \ No newline at end of file diff --git a/assets/css/reset.min.css b/assets/css/reset.min.css deleted file mode 100644 index af3f06c..0000000 --- a/assets/css/reset.min.css +++ /dev/null @@ -1 +0,0 @@ -*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} \ No newline at end of file diff --git a/assets/fonts/Abel/Abel-Regular.ttf b/assets/fonts/Abel/Abel-Regular.ttf new file mode 100644 index 0000000..5245501 Binary files /dev/null and b/assets/fonts/Abel/Abel-Regular.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf new file mode 100644 index 0000000..9c62ebc Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf new file mode 100644 index 0000000..b8629fc Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf new file mode 100644 index 0000000..7298891 Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf new file mode 100644 index 0000000..926c24f Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf differ diff --git a/assets/img/anons-article-card-1.png b/assets/img/anons-article-card-1.png new file mode 100644 index 0000000..8e51c02 Binary files /dev/null and b/assets/img/anons-article-card-1.png differ diff --git a/assets/img/anons-article-card-2.png b/assets/img/anons-article-card-2.png new file mode 100644 index 0000000..dbadb6d Binary files /dev/null and b/assets/img/anons-article-card-2.png differ diff --git a/assets/img/anons-article-card-3.png b/assets/img/anons-article-card-3.png new file mode 100644 index 0000000..d24bd61 Binary files /dev/null and b/assets/img/anons-article-card-3.png differ diff --git a/assets/img/anons-article-card-4.png b/assets/img/anons-article-card-4.png new file mode 100644 index 0000000..25af243 Binary files /dev/null and b/assets/img/anons-article-card-4.png differ diff --git a/assets/img/anons-article-card-5.png b/assets/img/anons-article-card-5.png new file mode 100644 index 0000000..a42b3bd Binary files /dev/null and b/assets/img/anons-article-card-5.png differ diff --git a/assets/img/anons-article-card-6.png b/assets/img/anons-article-card-6.png new file mode 100644 index 0000000..a13f766 Binary files /dev/null and b/assets/img/anons-article-card-6.png differ diff --git a/assets/img/anons-best-card-1.png b/assets/img/anons-best-card-1.png new file mode 100644 index 0000000..6dd47cb Binary files /dev/null and b/assets/img/anons-best-card-1.png differ diff --git a/assets/img/anons-best-card-2.png b/assets/img/anons-best-card-2.png new file mode 100644 index 0000000..1becac9 Binary files /dev/null and b/assets/img/anons-best-card-2.png differ diff --git a/assets/img/anons-best-card-3.png b/assets/img/anons-best-card-3.png new file mode 100644 index 0000000..57ddc7e Binary files /dev/null and b/assets/img/anons-best-card-3.png differ diff --git a/assets/img/arrow-down.svg b/assets/img/arrow-down.svg new file mode 100644 index 0000000..be8f47a --- /dev/null +++ b/assets/img/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/articke-block-card-3.png b/assets/img/articke-block-card-3.png new file mode 100644 index 0000000..dd31f81 Binary files /dev/null and b/assets/img/articke-block-card-3.png differ diff --git a/assets/img/article-block-card-1.png b/assets/img/article-block-card-1.png new file mode 100644 index 0000000..22ac71d Binary files /dev/null and b/assets/img/article-block-card-1.png differ diff --git a/assets/img/article-block-card-2.png b/assets/img/article-block-card-2.png new file mode 100644 index 0000000..5197e5f Binary files /dev/null and b/assets/img/article-block-card-2.png differ diff --git a/assets/img/article-block-card-3.png b/assets/img/article-block-card-3.png new file mode 100644 index 0000000..dd31f81 Binary files /dev/null and b/assets/img/article-block-card-3.png differ diff --git a/assets/img/article-home-card.png b/assets/img/article-home-card.png new file mode 100644 index 0000000..309e536 Binary files /dev/null and b/assets/img/article-home-card.png differ diff --git a/assets/img/author-card-mb.png b/assets/img/author-card-mb.png new file mode 100644 index 0000000..d374fd6 Binary files /dev/null and b/assets/img/author-card-mb.png differ diff --git a/assets/img/author-card.png b/assets/img/author-card.png new file mode 100644 index 0000000..4bdad1d Binary files /dev/null and b/assets/img/author-card.png differ diff --git a/assets/img/bars.svg b/assets/img/bars.svg new file mode 100644 index 0000000..0ff9b2e --- /dev/null +++ b/assets/img/bars.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/basket-icon.svg b/assets/img/basket-icon.svg new file mode 100644 index 0000000..6ee2bce --- /dev/null +++ b/assets/img/basket-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/block-accent-icon-1.svg b/assets/img/block-accent-icon-1.svg new file mode 100644 index 0000000..1b53625 --- /dev/null +++ b/assets/img/block-accent-icon-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/block-accent-icon-2.svg b/assets/img/block-accent-icon-2.svg new file mode 100644 index 0000000..f668e50 --- /dev/null +++ b/assets/img/block-accent-icon-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/block-accent-icon-3.svg b/assets/img/block-accent-icon-3.svg new file mode 100644 index 0000000..e6d500c --- /dev/null +++ b/assets/img/block-accent-icon-3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/block-list-icon-1.svg b/assets/img/block-list-icon-1.svg new file mode 100644 index 0000000..8482da5 --- /dev/null +++ b/assets/img/block-list-icon-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/block-list-icon-2.svg b/assets/img/block-list-icon-2.svg new file mode 100644 index 0000000..050d6d7 --- /dev/null +++ b/assets/img/block-list-icon-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/block-list-icon-3.svg b/assets/img/block-list-icon-3.svg new file mode 100644 index 0000000..6d33a2a --- /dev/null +++ b/assets/img/block-list-icon-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/block-list-icon-4.svg b/assets/img/block-list-icon-4.svg new file mode 100644 index 0000000..7094bd0 --- /dev/null +++ b/assets/img/block-list-icon-4.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/discount-bg-sm.png b/assets/img/discount-bg-sm.png new file mode 100644 index 0000000..4a2e4d3 Binary files /dev/null and b/assets/img/discount-bg-sm.png differ diff --git a/assets/img/discount-bg.png b/assets/img/discount-bg.png new file mode 100644 index 0000000..1679df3 Binary files /dev/null and b/assets/img/discount-bg.png differ diff --git a/assets/img/editorial-card.png b/assets/img/editorial-card.png new file mode 100644 index 0000000..5e4777b Binary files /dev/null and b/assets/img/editorial-card.png differ diff --git a/assets/img/editorial-head-icon.png b/assets/img/editorial-head-icon.png new file mode 100644 index 0000000..a41c483 Binary files /dev/null and b/assets/img/editorial-head-icon.png differ diff --git a/assets/img/editorial-head-star.png b/assets/img/editorial-head-star.png new file mode 100644 index 0000000..5ca8dbb Binary files /dev/null and b/assets/img/editorial-head-star.png differ diff --git a/assets/img/footer-network-1.svg b/assets/img/footer-network-1.svg new file mode 100644 index 0000000..8a88433 --- /dev/null +++ b/assets/img/footer-network-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/footer-network-2.svg b/assets/img/footer-network-2.svg new file mode 100644 index 0000000..b7f36f4 --- /dev/null +++ b/assets/img/footer-network-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/footer-network-3.svg b/assets/img/footer-network-3.svg new file mode 100644 index 0000000..19e914a --- /dev/null +++ b/assets/img/footer-network-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/header-red.svg b/assets/img/header-red.svg new file mode 100644 index 0000000..95c7ae6 --- /dev/null +++ b/assets/img/header-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/heart-grey.svg b/assets/img/heart-grey.svg new file mode 100644 index 0000000..81573c3 --- /dev/null +++ b/assets/img/heart-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/heart-white.svg b/assets/img/heart-white.svg new file mode 100644 index 0000000..7250c70 --- /dev/null +++ b/assets/img/heart-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/heart.svg b/assets/img/heart.svg new file mode 100644 index 0000000..95c2899 --- /dev/null +++ b/assets/img/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/home-card-2.png b/assets/img/home-card-2.png new file mode 100644 index 0000000..95ca80c Binary files /dev/null and b/assets/img/home-card-2.png differ diff --git a/assets/img/home-card-3.png b/assets/img/home-card-3.png new file mode 100644 index 0000000..c22853d Binary files /dev/null and b/assets/img/home-card-3.png differ diff --git a/assets/img/home-card.png b/assets/img/home-card.png new file mode 100644 index 0000000..8aa4941 Binary files /dev/null and b/assets/img/home-card.png differ diff --git a/assets/img/icon-1.svg b/assets/img/icon-1.svg new file mode 100644 index 0000000..f40bd80 --- /dev/null +++ b/assets/img/icon-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icon-2.svg b/assets/img/icon-2.svg new file mode 100644 index 0000000..aa390bd --- /dev/null +++ b/assets/img/icon-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icon-3.svg b/assets/img/icon-3.svg new file mode 100644 index 0000000..3d6a8b4 --- /dev/null +++ b/assets/img/icon-3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/icon-4.svg b/assets/img/icon-4.svg new file mode 100644 index 0000000..a0d3f64 --- /dev/null +++ b/assets/img/icon-4.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/icon-5.svg b/assets/img/icon-5.svg new file mode 100644 index 0000000..cdf8ab8 --- /dev/null +++ b/assets/img/icon-5.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/img/indent-icon-1.svg b/assets/img/indent-icon-1.svg new file mode 100644 index 0000000..80d233c --- /dev/null +++ b/assets/img/indent-icon-1.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/img/logo-green.svg b/assets/img/logo-green.svg new file mode 100644 index 0000000..4b64e3b --- /dev/null +++ b/assets/img/logo-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 0000000..d3929b8 --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/long-arrow.svg b/assets/img/long-arrow.svg new file mode 100644 index 0000000..6a3baa3 --- /dev/null +++ b/assets/img/long-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/minus-icon.svg b/assets/img/minus-icon.svg new file mode 100644 index 0000000..b4d504c --- /dev/null +++ b/assets/img/minus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/msg-green.svg b/assets/img/msg-green.svg new file mode 100644 index 0000000..9e521bc --- /dev/null +++ b/assets/img/msg-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/msg-grey.svg b/assets/img/msg-grey.svg new file mode 100644 index 0000000..b126087 --- /dev/null +++ b/assets/img/msg-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/msg-white.svg b/assets/img/msg-white.svg new file mode 100644 index 0000000..b920033 --- /dev/null +++ b/assets/img/msg-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/msg.svg b/assets/img/msg.svg new file mode 100644 index 0000000..7471b49 --- /dev/null +++ b/assets/img/msg.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/plus-icon.svg b/assets/img/plus-icon.svg new file mode 100644 index 0000000..6066429 --- /dev/null +++ b/assets/img/plus-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/img/product-card-1.png b/assets/img/product-card-1.png new file mode 100644 index 0000000..0d57c25 Binary files /dev/null and b/assets/img/product-card-1.png differ diff --git a/assets/img/product-card-2.png b/assets/img/product-card-2.png new file mode 100644 index 0000000..81bea75 Binary files /dev/null and b/assets/img/product-card-2.png differ diff --git a/assets/img/product-card.png b/assets/img/product-card.png new file mode 100644 index 0000000..5c258cb Binary files /dev/null and b/assets/img/product-card.png differ diff --git a/assets/img/star-1.png b/assets/img/star-1.png new file mode 100644 index 0000000..3fdc219 Binary files /dev/null and b/assets/img/star-1.png differ diff --git a/assets/img/star-2.png b/assets/img/star-2.png new file mode 100644 index 0000000..8b32afb Binary files /dev/null and b/assets/img/star-2.png differ diff --git a/assets/img/swp-next.svg b/assets/img/swp-next.svg new file mode 100644 index 0000000..6393610 --- /dev/null +++ b/assets/img/swp-next.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/swp-prev.svg b/assets/img/swp-prev.svg new file mode 100644 index 0000000..b886a4f --- /dev/null +++ b/assets/img/swp-prev.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/texts-card-1.png b/assets/img/texts-card-1.png new file mode 100644 index 0000000..85150de Binary files /dev/null and b/assets/img/texts-card-1.png differ diff --git a/assets/img/texts-card-2.png b/assets/img/texts-card-2.png new file mode 100644 index 0000000..178fe5c Binary files /dev/null and b/assets/img/texts-card-2.png differ diff --git a/assets/img/texts-card-3.png b/assets/img/texts-card-3.png new file mode 100644 index 0000000..6aef7d1 Binary files /dev/null and b/assets/img/texts-card-3.png differ diff --git a/assets/img/user-icon.svg b/assets/img/user-icon.svg new file mode 100644 index 0000000..4b9a9a9 --- /dev/null +++ b/assets/img/user-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/user-logo.png b/assets/img/user-logo.png new file mode 100644 index 0000000..152510b Binary files /dev/null and b/assets/img/user-logo.png differ diff --git a/assets/img/user_img.png b/assets/img/user_img.png new file mode 100644 index 0000000..3edc4a2 Binary files /dev/null and b/assets/img/user_img.png differ diff --git a/assets/img/user_img2.png b/assets/img/user_img2.png new file mode 100644 index 0000000..62f420b Binary files /dev/null and b/assets/img/user_img2.png differ diff --git a/assets/img/user_img3.png b/assets/img/user_img3.png new file mode 100644 index 0000000..11ac220 Binary files /dev/null and b/assets/img/user_img3.png differ diff --git a/assets/img/user_img4.png b/assets/img/user_img4.png new file mode 100644 index 0000000..e3daf05 Binary files /dev/null and b/assets/img/user_img4.png differ diff --git a/assets/img/user_img5.png b/assets/img/user_img5.png new file mode 100644 index 0000000..90c5d58 Binary files /dev/null and b/assets/img/user_img5.png differ diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..cd90bce 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -0,0 +1,48 @@ +const homeSwp = new Swiper('.home-swp .swiper', { + slidesPerView: 1, + spaceBetween: 0, + effect: 'fade', + loop: true, + navigation: { + nextEl: '.home-swp__btn-next', + prevEl: '.home-swp__btn-prev', + } +}) + +const textsSwp = new Swiper('.texts-swp .swiper', { + slidesPerView: 1, + spaceBetween: 0, + loop: true, + effect: 'fade', + navigation: { + nextEl: '.texts-swp__next', + prevEl: '.texts-swp__prev' + }, + pagination: { + el: ".texts-swp__pagination", + clickable: true, + } +}) + +// comment +let answerbtns = document.querySelectorAll('.answer-btn'); +let answerbtnicons = document.querySelectorAll('.answer-btn svg'); +let answerblocks = document.querySelectorAll('.answer-block'); + +answerbtns.forEach((answerbtn, index) => { + answerbtn.addEventListener('click', () => { + let answerbtnicon = answerbtnicons[index]; + let answerblock = answerblocks[index]; + + answerblock.classList.toggle('active'); + answerbtnicon.classList.toggle('active'); + + let buttonText = answerbtn.querySelector('span'); + if (buttonText.textContent === 'Ответ') { + buttonText.textContent = 'Свернуть'; + } else { + buttonText.textContent = 'ответ'; + } + }); +}); +// comment diff --git a/index.html b/index.html index deb9630..2020e41 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,16 @@ - - - + + + + + @@ -52,21 +54,750 @@ - - -
-
- - -
-
- - -
- -
+
+ + +
+
+ + + +
+
+
+ RU + +
+
+ + + + + + +
+
+
+ + +
+ + +
+
+

БЛОГ

+

Мы пишем про то, что нас по‑настоящему цепляет: биотехнологии, науку, здоровье и то, как этот мир сделать лучше. Мы не боимся сложных тем и неудобных вопросов, ведь именно с них начинается будущее

+
+
+ + +
+
+
+
+
+ + + +
+ Как выбрать когтеточку: обзор мастхевов для вашей кошки +

Простая с виду задача «купить когтеточку» может оказаться утомительным и дорогим занятием. Типичная ситуация: вы приобрели сразу несколько вариантов ...

+
+
    +
  • Обзоры
    • +
  • Тренды
    • +
+
21.10.24
+
время чтения: 5 минут
+
+
+ + 22 +
+
+ + 22 +
+
+ +
+
+ читать статью +
+
+
+
+
+
+ + + +
+ Краткая история кормов: от хлебных корок до лечебных рационов +

Современный мир сложно представить без готовых кормов для собак и кошек. И сложно поверить, что это относительно современная концепция, существующая менее 150 лет. Поэтапно о том ...

+
+
    +
  • Обзоры
    • +
  • Тренды
    • +
+
21.10.24
+
время чтения: 5 минут
+
+
+ + 22 +
+
+ + 22 +
+
+ +
+
+ читать статью +
+
+
+
+
+
+ + + +
+ Пищевая аллергия у собак. Причины и пути решения +

Даже привычный рацион может вызвать у питомца нежелательную реакцию – зуд, расстройства ЖКТ, изменения в поведении. Хорошая новость: с этой проблемой можно справиться. Рассказываем, как ...

+
+
    +
  • Обзоры
    • +
  • Тренды
    • +
+
21.10.24
+
время чтения: 5 минут
+
+
+ + 22 +
+
+ + 22 +
+
+ +
+
+ читать статью +
+
+
+
+
+
+
+
+
+ + +
+
+
+

Темы:

+ +
+
+

САМЫЕ ЧИТАЕМЫЕ:

+ +
+
+

ВСЕ СТАТЬИ

+ +
+
+ ПОКАЗАТЬ ЕЩЁ +
+
+
+ + + +
+
+
+ + + + +

ПРЕДЛОЖИТЕ СТАТЬЮ
ИЛИ СТАНЬТЕ АВТОРОМ

+ НАПИШИТЕ НАМ +
+
+
+ + + +
+
+
+

COSMO тема редакции

+ + +
+ +
+
+ + +
+ + + + + +
- + + + \ No newline at end of file