diff --git a/index.html b/index.html index 5b8ffa6..da6a1c4 100644 --- a/index.html +++ b/index.html @@ -122,175 +122,175 @@ -
-
-
-
- -
SEO
-
- -
Контент-маркетинг
-
- -
Аудит сайта
- -
Ссылочное продвижение
-
- -
Техническая оптимизация
-
-
-
-
-
- - -Креативность, инновации, прогресс
-
01
-
-
+
+
+
+
+ +
SEO
+
+ +
Контент-маркетинг
+
+ +
Аудит сайта
+ +
Ссылочное продвижение
+
+ +
Техническая оптимизация
+
+
+
+
+
+ + + Креативность, инновации, прогресс
+
01
+
+
+
+
+ +
+
02
+
Digital-продукты
+ + +
+
+
+
02
+
+ +
+
+
+
Digital продукты
+
Создаем и развиваем digital-продукты: от веб-сервисов и мобильных приложений до сложных платформ.
+
+
+ +
-
- -
-
02
-
Digital-продукты
- - -
-
-
-
02
-
- -
-
-
-
Digital продукты
-
Создаем и развиваем digital-продукты: от веб-сервисов и мобильных приложений до сложных платформ.
-
-
- -
-
-
-
-
- -
-
03
-
Маркетинг
- - -
-
-
-
03
-
- - -
-
-
-
маркетинг
-
Настраиваем и ведем рекламу, продвигаем в соцсетях, привлекаем лидов и повышаем лояльность.
-
-
- -
-
-
-
-
- -
-
04
-
продвижение
  Топовое SEO
- - -
-
-
-
04
-
- -
-
-
-
топовое seo продвижение
-
Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.
-
-
- -
-
-
-
-
- -
-
05
-
Создание сайтов
- - -
-
-
-
05
-
- - -
-
-
-
Создание сайтов
-
Разрабатываем продающие сайты, которые привлекают клиентов, отражают ценности бренда.
-
-
- -
-
-
-
-
- -
-
06
-
Дизайн
- - -
-
-
-
06
-
- -
-
-
-
дизайн
-
Создаем целостный визуальный образ бренда: от логотипа и айдентики до дизайна интерфейсов.
-
-
- -
-
-
-
-
-
+
+
+ +
+
03
+
Маркетинг
+ + +
+
+
+
03
+
+ + +
+
+
+
маркетинг
+
Настраиваем и ведем рекламу, продвигаем в соцсетях, привлекаем лидов и повышаем лояльность.
+
+
+ +
+
+
+
+
+ +
+
04
+
продвижение
  Топовое SEO
+ + +
+
+
+
04
+
+ +
+
+
+
топовое seo продвижение
+
Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.
+
+
+ +
+
+
+
+
+ +
+
05
+
Создание сайтов
+ + +
+
+
+
05
+
+ + +
+
+
+
Создание сайтов
+
Разрабатываем продающие сайты, которые привлекают клиентов, отражают ценности бренда.
+
+
+ +
+
+
+
+
+ +
+
06
+
Дизайн
+ + +
+
+
+
06
+
+ +
+
+
+
дизайн
+
Создаем целостный визуальный образ бренда: от логотипа и айдентики до дизайна интерфейсов.
+
+
+ +
+
+
+
+
+
+
98% Успешных кейсов
@@ -308,7 +308,7 @@
-
+
@@ -372,32 +372,30 @@
-
-
-
01
-
Отправляем в космос позиции вашего сайта
-
- Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент, обеспечиваем видимость и привлекаем целевых клиентов. Результат — стабильный рост позиций. +
+
+ +
+ +
+
01
+
Отправляем в космос позиции вашего сайта
+
+
+ +
+
+
01
+

+ Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент… +

+
Отправляем в космос позиции вашего сайта
+
-
-
02
-
Сроки продвижения всего от 1 дня!
-
- Мы выводим сайты в топ благодаря комплексной оптимизации и быстрой настройке. Персональные стратегии и мгновенные результаты уже с первого дня! -
-
- -
-
03
-
Работаем с абсолютно любой тематикой
-
- Продаете IT-услуги, стройматериалы или косметику — не важно. Мы подберем нужную стратегию продвижения под любую нишу. -
-
+
-
diff --git a/main.js b/main.js index 4efe585..d0052d6 100644 --- a/main.js +++ b/main.js @@ -1,3 +1,14 @@ + // -----------------------------------------HEADER----------------------------------------------------------- + document.querySelectorAll('.header_top_item').forEach((item) => { + item.addEventListener('click', (e) => { + e.preventDefault(); // если не нужно переходить со страницы + document.querySelectorAll('.header_top_item').forEach(el => el.classList.remove('active')); + item.classList.add('active'); + }); +}); + +// -------------------------------ACCORDION-SLIDER----------------------------------------------------------- + const items = document.querySelectorAll('.accordion-item'); // Делаем первый аккордеон активным по умолчанию @@ -24,4 +35,22 @@ items.forEach(item => { item.querySelector('.img-open').style.display = 'block'; item.querySelector('.img-closed').style.display = 'none'; }); - }); \ No newline at end of file + }); + + // -----------------------------------------ACCORDION-SECOND---------------------------------------------- +document.addEventListener('DOMContentLoaded', () => { + const cards = document.querySelectorAll('.advantage_slider_item'); + + cards.forEach(card => { + card.addEventListener('click', () => { + // если уже активна — просто закрываем + if (card.classList.contains('active')) { + card.classList.remove('active'); + } else { + // иначе закрываем все остальные и открываем текущую + cards.forEach(c => c.classList.remove('active')); + card.classList.add('active'); + } + }); + }); +}); diff --git a/style.css b/style.css index 581345b..192091a 100644 --- a/style.css +++ b/style.css @@ -651,4 +651,48 @@ html, body, * { display: block; width: 14px; height: 16px; -} \ No newline at end of file +} +/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */ +.advantage_slider { padding: 40px; display:flex; justify-content:center; } +.advantage_slider_items { display:flex; gap:28px; } + +.advantage_slider_item{ + position:relative; width:280px; height:420px; border-radius:22px; overflow:hidden; cursor:pointer; +} + +/* Слой CLOSE */ +.advantage_slider_close{ + position:absolute; inset:0; z-index:1; + display:flex; align-items:flex-end; padding:20px; color:#fff; + transition:opacity .35s ease; +} +.advantage_slider_close img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; } + +/* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */ +.advantage_slider_open{ + position:absolute; + inset:0; z-index:2; + background: color:#000; + border-radius:22px; + opacity:0; + transform:translateY(16px); + pointer-events:none; + transition:opacity .35s ease, transform .35s ease; + padding:28px 22px; + display:flex; +} +.slider_item_inner{ display:flex; flex-direction:column; justify-content:space-between; width:100%; } + +/* Активная карточка */ +.advantage_slider_item.active .advantage_slider_open{ + opacity:1; transform:translateY(0); pointer-events:auto; +} +.advantage_slider_item.active .advantage_slider_close{ opacity:0; } + +/* простые стили текста */ +.slider_item_index{ + width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; + border:1px solid currentColor; margin-bottom:12px; font-weight:700; +} +.slider_item_title{ font-size:18px; line-height:1.3; } +.item_inner_text{ font-size:14px; line-height:1.5; } \ No newline at end of file