diff --git a/html01/html/css.css b/html01/html/css.css new file mode 100644 index 0000000..ee4f337 --- /dev/null +++ b/html01/html/css.css @@ -0,0 +1,196 @@ +body { + margin: 0 auto; + max-width: 1230px; + } + .row { + width: 100%; + min-width: 1230px; + display: flex; + flex-direction: row-reverse; + } + .accordion { + display: flex; + width: 40%; /* 40% страницы */ + height: 348px; + gap: 10px; /* отступ между колонками */ + } + .accordion-item { + flex: 1; + border-radius: 30px; /* закругление краёв */ + overflow: hidden; + cursor: pointer; + display: flex; + justify-content: space-between; + flex-direction: column-reverse; + align-items: center; + } +.accordion-item.active{ + display: flex; + flex: 5; /* раскрытая колонка */ + width: 100%; + height: 100%; + } +.accordion-item.active .accordion_index{ + display: none; + } +.accordion-item.active .accordion_title{ + display: none; + } +.accordion-item.active .img-open { + display: none; + width: 0; + height: 0; +} +.accordion_index { + display: flex; + align-items: center; + justify-content: center; + padding: 15px; + border-radius: 50%; + background-color: #fff; + font-weight: 600; + width: 10px; + height: 10px; + margin-bottom: 10px; +} +.accordion_title { + color: white; + display: flex; + align-items: center; + writing-mode: vertical-lr; + transform: rotate(-180deg); +} +/* not-actine */ + +#item1 { + background-color: #0C47A0; +} +#item2 { + background-color: #A5C6F6; +} +#item3 { + background-color: #0C47A0; +} +#item4 { + background-color: #A5C6F6; +} +#item5 { + background-color: #0C47A0; +} + +/* active */ + +#item1.active { + background: url("/main/001.png") 100% 100% / cover; +} +#item2.active { + background: url("/main/002.png") 100% 100% / cover; +} +#item3.active { + background: url("/main/003.png") 100% 100% / cover; +} +#item4.active { + background: url("/main/004.png") 100% 100% / cover; +} +#item5.active { + background: url("/main/005.png") 100% 100% / cover; +} +.img-open { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +.img-open { + display: none; +} +.accordion-item.active .blue-square { + display: block; + height: 100%; + width: 82%; + margin: 20px; + background-color: rgba(2, 76, 187, 0.259); + border-radius: 33px; +} +/* not-active */ +.item_wrapper_index { + display: none; +} +.item_wrapper { + display: none; +} +/* active */ +.accordion-item.active .item_wrapper { + display: flex; + flex-direction: column; + padding: 15px; + height: 92%; +} +.accordion-item.active .wrapper_row_first { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 15px; + height: 30%; +} +.accordion-item.active .item_wrapper_index { + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + padding: 10px; + border-radius: 50%; + background-color: #fff; + width: 20px; + height: 20px; + font-size: 18px; +} +.item_wrapper_icon { + background-color: #fff; + border-radius: 50%; +} +.item_wrapper_icon svg { + display: block; + width: 42px; + height: 42px; + padding: 18px; +} +.wrapper_row_middle { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} +.row_middle_title { + color: #fff; + font-weight: 500; + font-size: 24px; + text-transform: uppercase; +} +.row_middle_text { + font-size: 16px; + color: #fff; + margin-bottom: 15px; +} +.wrapper_row_botton { + height: 20%; +} +.wrapper_row_botton { + display: flex; + justify-content: end; +} +.wrapper_row_btn { + display: flex; + align-items: center; + gap: 5px; + padding: 8px; + border-radius: 16px; + border: none; + font-size: 14px; + cursor: pointer; +} +.wrapper_row_btn svg { + display: block; + width: 14px; + height: 16px; +} \ No newline at end of file diff --git a/html01/html/index.html b/html01/html/index.html new file mode 100644 index 0000000..95d0e2c --- /dev/null +++ b/html01/html/index.html @@ -0,0 +1,153 @@ + + + + + + Login + + + +
+
+ +
+
02
+
Digital-продукты
+ + +
+
+
+
02
+
+ +
+
+
+
Digital продукты
+
Создаем и развиваем digital-продукты: от веб-сервисов и мобильных приложений до сложных платформ.
+
+
+ +
+
+
+
+
+ +
+
03
+
Маркетинг
+ + +
+
+
+
03
+
+ + +
+
+
+
маркетинг
+
Настраиваем и ведем рекламу, продвигаем в соцсетях, привлекаем лидов и повышаем лояльность.
+
+
+ +
+
+
+
+
+ +
+
04
+
продвижение
Топовое SEO
+ + +
+
+
+
04
+
+ +
+
+
+
топовое seo продвижение
+
Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.
+
+
+ +
+
+
+
+
+ +
+
05
+
Создание сайтов
+ + +
+
+
+
05
+
+ + +
+
+
+
Создание сайтов
+
Разрабатываем продающие сайты, которые привлекают клиентов, отражают ценности бренда.
+
+
+ +
+
+
+
+
+ +
+
06
+
Дизайн
+ + +
+
+
+
06
+
+ +
+
+
+
дизайн
+
Создаем целостный визуальный образ бренда: от логотипа и айдентики до дизайна интерфейсов.
+
+
+ +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/html01/html/js.js b/html01/html/js.js new file mode 100644 index 0000000..4efe585 --- /dev/null +++ b/html01/html/js.js @@ -0,0 +1,27 @@ +const items = document.querySelectorAll('.accordion-item'); + +// Делаем первый аккордеон активным по умолчанию +if(items.length > 0) { + items[0].classList.add('active'); +} + +// items.forEach(item => { +// item.addEventListener('click', () => { +// items.forEach(i => i.classList.remove('active')); +// item.classList.add('active'); +// }); +// }); +// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь) +items.forEach(item => { + item.addEventListener('click', () => { + items.forEach(i => { + i.classList.remove('active'); + i.querySelector('.img-open').style.display = 'none'; + i.querySelector('.img-closed').style.display = 'block'; + }); + + item.classList.add('active'); + item.querySelector('.img-open').style.display = 'block'; + item.querySelector('.img-closed').style.display = 'none'; + }); + }); \ No newline at end of file diff --git a/html01/html/main/001.png b/html01/html/main/001.png new file mode 100644 index 0000000..a410707 Binary files /dev/null and b/html01/html/main/001.png differ diff --git a/html01/html/main/002.png b/html01/html/main/002.png new file mode 100644 index 0000000..d995702 Binary files /dev/null and b/html01/html/main/002.png differ diff --git a/html01/html/main/003.png b/html01/html/main/003.png new file mode 100644 index 0000000..65e9c76 Binary files /dev/null and b/html01/html/main/003.png differ diff --git a/html01/html/main/004.png b/html01/html/main/004.png new file mode 100644 index 0000000..9d63054 Binary files /dev/null and b/html01/html/main/004.png differ diff --git a/html01/html/main/005.png b/html01/html/main/005.png new file mode 100644 index 0000000..c20a5df Binary files /dev/null and b/html01/html/main/005.png differ diff --git a/html01/html/main/01.png b/html01/html/main/01.png new file mode 100644 index 0000000..73b8c2c Binary files /dev/null and b/html01/html/main/01.png differ diff --git a/html01/html/main/2.png b/html01/html/main/2.png new file mode 100644 index 0000000..f977a6c Binary files /dev/null and b/html01/html/main/2.png differ diff --git a/html01/html/main/3.png b/html01/html/main/3.png new file mode 100644 index 0000000..26ce105 Binary files /dev/null and b/html01/html/main/3.png differ diff --git a/html01/html/main/4.png b/html01/html/main/4.png new file mode 100644 index 0000000..4a2f951 Binary files /dev/null and b/html01/html/main/4.png differ diff --git a/html01/html/main/Vector_right.svg b/html01/html/main/Vector_right.svg new file mode 100644 index 0000000..184d4d9 --- /dev/null +++ b/html01/html/main/Vector_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/html01/html/main/slides/01.svg b/html01/html/main/slides/01.svg new file mode 100644 index 0000000..f409bce --- /dev/null +++ b/html01/html/main/slides/01.svg @@ -0,0 +1,3 @@ + + + diff --git a/html01/html/main/slides/02.svg b/html01/html/main/slides/02.svg new file mode 100644 index 0000000..2882c36 --- /dev/null +++ b/html01/html/main/slides/02.svg @@ -0,0 +1,3 @@ + + + diff --git a/html01/html/main/slides/03.svg b/html01/html/main/slides/03.svg new file mode 100644 index 0000000..7c4ba53 --- /dev/null +++ b/html01/html/main/slides/03.svg @@ -0,0 +1,3 @@ + + + diff --git a/html01/html/main/slides/2.png b/html01/html/main/slides/2.png new file mode 100644 index 0000000..74c2d5f Binary files /dev/null and b/html01/html/main/slides/2.png differ diff --git a/html01/html/main/slides/3.png b/html01/html/main/slides/3.png new file mode 100644 index 0000000..0e3ca09 Binary files /dev/null and b/html01/html/main/slides/3.png differ diff --git a/html01/html/main/slides/4.png b/html01/html/main/slides/4.png new file mode 100644 index 0000000..d60bbf6 Binary files /dev/null and b/html01/html/main/slides/4.png differ diff --git a/html01/html/main/slides/5.png b/html01/html/main/slides/5.png new file mode 100644 index 0000000..a55c1c6 Binary files /dev/null and b/html01/html/main/slides/5.png differ diff --git a/html01/html/main/slides/6.png b/html01/html/main/slides/6.png new file mode 100644 index 0000000..1859c93 Binary files /dev/null and b/html01/html/main/slides/6.png differ diff --git a/html01/html/main/view-futuristic-space-rocket (2).png b/html01/html/main/view-futuristic-space-rocket (2).png new file mode 100644 index 0000000..08bc60d Binary files /dev/null and b/html01/html/main/view-futuristic-space-rocket (2).png differ diff --git a/images/main/001.png b/images/main/001.png new file mode 100644 index 0000000..a410707 Binary files /dev/null and b/images/main/001.png differ diff --git a/images/main/002.png b/images/main/002.png new file mode 100644 index 0000000..d995702 Binary files /dev/null and b/images/main/002.png differ diff --git a/images/main/003.png b/images/main/003.png new file mode 100644 index 0000000..65e9c76 Binary files /dev/null and b/images/main/003.png differ diff --git a/images/main/004.png b/images/main/004.png new file mode 100644 index 0000000..9d63054 Binary files /dev/null and b/images/main/004.png differ diff --git a/images/main/005.png b/images/main/005.png new file mode 100644 index 0000000..c20a5df Binary files /dev/null and b/images/main/005.png differ diff --git a/images/main/01.png b/images/main/01.png new file mode 100644 index 0000000..73b8c2c Binary files /dev/null and b/images/main/01.png differ diff --git a/images/main/2.png b/images/main/2.png new file mode 100644 index 0000000..f977a6c Binary files /dev/null and b/images/main/2.png differ diff --git a/images/main/3.png b/images/main/3.png new file mode 100644 index 0000000..26ce105 Binary files /dev/null and b/images/main/3.png differ diff --git a/images/main/4.png b/images/main/4.png new file mode 100644 index 0000000..4a2f951 Binary files /dev/null and b/images/main/4.png differ diff --git a/images/main/Vector_right.svg b/images/main/Vector_right.svg new file mode 100644 index 0000000..184d4d9 --- /dev/null +++ b/images/main/Vector_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/main/slides/01.svg b/images/main/slides/01.svg new file mode 100644 index 0000000..f409bce --- /dev/null +++ b/images/main/slides/01.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/main/slides/02.svg b/images/main/slides/02.svg new file mode 100644 index 0000000..2882c36 --- /dev/null +++ b/images/main/slides/02.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/main/slides/03.svg b/images/main/slides/03.svg new file mode 100644 index 0000000..7c4ba53 --- /dev/null +++ b/images/main/slides/03.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/main/view-futuristic-space-rocket (2).png b/images/main/view-futuristic-space-rocket (2).png new file mode 100644 index 0000000..08bc60d Binary files /dev/null and b/images/main/view-futuristic-space-rocket (2).png differ diff --git a/index.html b/index.html index 31d9f31..5b8ffa6 100644 --- a/index.html +++ b/index.html @@ -122,83 +122,281 @@ -
-
-
-
- SEO - - - Контент-маркетинг - - - Аудит сайта -
-
- Ссылочное продвижение - - - Техническая оптимизация -
-
-
-

- +

+
+
+
+ +
SEO
+
+ +
Контент-маркетинг
+
+ +
Аудит сайта
+ +
Ссылочное продвижение
+
+ +
Техническая оптимизация
+
+
+
+
+
- - Креативность, инновации, прогресс

- 01 -
+Креативность, инновации, прогресс
+
01
+
+
+
+
+ +
+
02
+
Digital-продукты
+ + +
+
+
+
02
+
+ +
+
+
+
Digital продукты
+
Создаем и развиваем digital-продукты: от веб-сервисов и мобильных приложений до сложных платформ.
+
+
+ +
+
+
+
- -
-
- 02 -
-
- Digital-продукты -
-
- -
-
- 03 -
-
- Маркетинг -
-
- -
-
-
04
- -

ТОПОВОЕ SEO ПРОДВИЖЕНИЕ

-

Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.

- Подробнее -
+ +
+
03
+
Маркетинг
+ + +
+
+
+
03
+
+ + +
+
+
+
маркетинг
+
Настраиваем и ведем рекламу, продвигаем в соцсетях, привлекаем лидов и повышаем лояльность.
+
+
+ +
+
+
+
+ +
+
04
+
продвижение
  Топовое SEO
+ + +
+
+
+
04
+
+ +
+
+
+
топовое seo продвижение
+
Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.
+
+
+ +
+
+
+
+
+ +
+
05
+
Создание сайтов
+ + +
+
+
+
05
+
+ + +
+
+
+
Создание сайтов
+
Разрабатываем продающие сайты, которые привлекают клиентов, отражают ценности бренда.
+
+
+ +
+
+
+
+
+ +
+
06
+
Дизайн
+ + +
+
+
+
06
+
+ +
+
+
+
дизайн
+
Создаем целостный визуальный образ бренда: от логотипа и айдентики до дизайна интерфейсов.
+
+
+ +
+
+
+
+
+
+
+
+
+
98% Успешных кейсов
+
24/7 Поддержка Клиентов
+
300+ Сделанных проектов
+
+
+
+
+
Рост на основе анализа данных
+ +
+
+ +
+
+ + +
+
+
Качество
+
10 000+
+
+
+ +
+
+ + + +
+
+
Гарантия
+
100%
+
+
+ +
+
+ + + +
+
+
Безопасность
+
300%
+
+
+ +
+
+ + +
+
+
Успех
+
150%
+
+
-
-
- 05 -
-
- Создание сайтов -
-
-
-
- 06 -
-
- Дизайн -
-
- +
-
+
+
+
+
+ Наши преимущества +
+
+ SEO-System?
Гарантия роста! +
+
+
+
+
Мы используем проверенные стратегии и современные технологии, чтобы ваш сайт занимал топовые позиции в поиске.
+
С нами вы получаете - индивидуальные решения и долгосрочный рост трафика.
+
+
+
+
+
+
01
+
Отправляем в космос позиции вашего сайта
+
+ Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент, обеспечиваем видимость и привлекаем целевых клиентов. Результат — стабильный рост позиций. +
+
+ +
+
02
+
Сроки продвижения всего от 1 дня!
+
+ Мы выводим сайты в топ благодаря комплексной оптимизации и быстрой настройке. Персональные стратегии и мгновенные результаты уже с первого дня! +
+
+ +
+
03
+
Работаем с абсолютно любой тематикой
+
+ Продаете IT-услуги, стройматериалы или косметику — не важно. Мы подберем нужную стратегию продвижения под любую нишу. +
+
+
diff --git a/main.js b/main.js index 718e72f..4efe585 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,27 @@ -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'); - }); -}); \ No newline at end of file +const items = document.querySelectorAll('.accordion-item'); + +// Делаем первый аккордеон активным по умолчанию +if(items.length > 0) { + items[0].classList.add('active'); +} + +// items.forEach(item => { +// item.addEventListener('click', () => { +// items.forEach(i => i.classList.remove('active')); +// item.classList.add('active'); +// }); +// }); +// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь) +items.forEach(item => { + item.addEventListener('click', () => { + items.forEach(i => { + i.classList.remove('active'); + i.querySelector('.img-open').style.display = 'none'; + i.querySelector('.img-closed').style.display = 'block'; + }); + + item.classList.add('active'); + item.querySelector('.img-open').style.display = 'block'; + item.querySelector('.img-closed').style.display = 'none'; + }); + }); \ No newline at end of file diff --git a/style.css b/style.css index a54d24c..581345b 100644 --- a/style.css +++ b/style.css @@ -194,148 +194,461 @@ html, body, * { height: 19px; margin: 0; } -.header_slider { - display: flex; - height: 350px; - gap: 10px -} -.slide { -} -.main { - flex: 50%; - background: url("/images/header_body/seo_top_01.png") 100% / cover; +.header_accordion { + background-color: #8FECFC; + height: 348px; border-radius: 30px; - padding: 20px 20px; + margin-bottom: 20px; +} +.accordion_about_info { + width: 50%; + margin: 0; + margin-bottom: 40px; +} +.about_info_list { display: flex; - flex-direction: column; justify-content: space-between; - padding-bottom: 10px; } -.tags { - display: flex; +.info_list_item { margin: 0; - flex-direction: column; + font-weight: 500; } -.row_first { +/* --------------------------------------------------------------------------------------------- */ +.header_row_info { display: flex; - flex-direction: row; + align-items: center; margin: 0; - margin-bottom: 8px; + margin-bottom: 60px; } -.row_second { +.row_info_heading { + margin: 0; + width: 30%; +} +.info_heading_title { + font-size: 36px; + font-weight: 600; + margin-bottom: 20px; +} +.info_heading_btn { display: flex; - flex-direction: row; - margin: 0; -} -.tags span { - color: #fff; - padding: 8px; - background-color: #0C47A0; + align-items: center; + padding: 10px 16px; border-radius: 16px; + background-color: #0C47A0; + transition: all .3s; + color: #fff; + margin: 0; +} +.row_info_list { + display: flex; + width: 70%; + justify-content: space-between; + gap: 30px; + align-items: center; +} +.row_info_item { + display: flex; + align-items: center; + border-radius: 30px; + background-color: #F4F4F4; + padding: 35px 30px; + margin: 0; + width: 100%; +} +.row_info_area { + padding: 10px; + border-radius: 50%; border: 1px solid #fff; margin: 0; + margin-right: 15px; } -.tags svg { - margin: auto 0; +.row_info_item svg { display: block; - width: 10px; - height: 10px; + width: 25px; + height: 25px; } -.content { +.row_info_content { + white-space: nowrap; margin: 0; +} +.info_content_first { + margin-bottom: 5px; +} +.info_content_second { + font-size: 24px; +} +/* ------------------------------------------------------------------------------------ */ +.advantage { + margin: 0; + display: flex; + align-items: center; +} +.advantage_heading { + width: 100%; + margin: 0; +} +.adv_heading_title { + margin: 0; +} +.heading_title_sub { + font-size: 18px; + font-weight: 600; + margin-bottom: 25px; +} +.heading_title_main { + font-size: 74px; + font-weight: 600; +} +.heading_title_main span { + font-size: 74px; + font-weight: 600; + color: #0C47A0; +} +.advantage_content { + width: 40%; + margin: 0; +} +.adv_cont_01 { + margin-bottom: 10px; + font-size: 18px; +} +.adv_cont_02 { + font-size: 18px; +} +/* --------------------------------------------------------------------------------------------- */ +.advantage_slide { + } +.cards { + display: flex; + } + +.card { + height: 637px; + width: 418px; + border-radius: 30px; + overflow: hidden; + cursor: pointer; + transition: all 0.3s ease; + color: white; + display: flex; + flex-direction: column; + justify-content: space-between; + background-size: cover; + } + + .card.open { + background-color: white; + background-image: none !important; + color: #000; + height: auto; + padding: 20px; + } + + .card-number { + display: flex; + font-size: 14px; + color: #fff; + border-radius: 50%; + align-items: center; + border: 1px solid white; + margin: 0; + } + + .card.open .card-number { + position: static; + margin-bottom: 10px; + } + + .card-title { + font-size: 18px; + font-weight: bold; + padding: 20px; + } + + .card.open .card-title { + padding: 0; + margin-bottom: 10px; + } + + .card-text { + display: none; + font-size: 14px; + line-height: 1.5; + } + + .card.open .card-text { + display: block; + margin-bottom: 20px; + } + /* -------------------------------------------------------------------------------------------------- */ + .slider { + display: flex; + margin-top: 50px; + width: 100%; + height: 348px; + border-radius: 30px; + margin-bottom: 20px; +} +.slider_main { + width: 60%; + height: 100%; + background: url("/images/main/01.png") 100% / cover; + border-radius: 30px; + padding: 20px 15px 10px 20px; + color: white; display: flex; justify-content: space-between; - align-items: center; + flex-direction: column; } -.subtitle { - margin: 0; - color: #fff; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; -} -.subtitle svg { - display: block; - width: 24px; - height: 24px; -} -.index { - display: flex; - margin: 0; - height: 40px; - width: 40px; - background-color: #fff; - border-radius: 50%; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 18px; -} -.index span { +.slider_row { } -.slide_small { - background-color: #0C47A0; - border-radius: 30px; +.slider_row_1 { + margin: 0; + width: 80%; +} +.slider_row_container { + width: 70%; display: flex; align-items: center; - justify-content: center; - position: relative; - width: 5%; - height: 100%; -} -.slide_small_index { - position: absolute; - bottom: 0; - display: flex; - height: 40px; - width: 40px; + flex-wrap: wrap; margin: 0; - background-color: #fff; - border-radius: 50%; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 18px; - margin-bottom: 10px; } -.slide_small_title { +.row_container_item { + margin: 0; + background-color: #025DC873; + padding: 8px 8px; + border-radius: 15px; + border: 1px solid white; + margin-bottom: 8px; + align-items: center; color: #fff; - transform: rotate(270deg); - font-weight: 500; - white-space: nowrap; - text-align: center; - vertical-align: middle; } -.second { - background-color: #A5C6F6; -} -.slide_small_light { -} -.slide_card { - background: url("/images/header_body/seo_top_04.png") 100% / cover; - border-radius: 30px; - padding: 20px; - width: 17%; -} -.card-content { - background-color: oklch(45.034% 0.18646 260.482 / 0.259); - height: 100%; - border-radius: 30px; - padding: 15px; -} -.card-number { - display: flex; - height: 40px; - width: 40px; +.row_container_area { margin: 0; - background-color: #fff; + width: 10px; + height: 10px; + background-color: white; border-radius: 50%; + margin-bottom: 8px; +} +.slider_row_2 { + margin: 0; + width: 100%; +} +.slider_row_inner { + width: 100%; + display: flex; + justify-content: space-between; +} +.slider_row_title { + margin: 0; + display: flex; align-items: center; - justify-content: center; - font-weight: 600; + color: #fff; + gap: 10px; +} +.slider_row_index { + margin: 0; + color: #393939; font-size: 18px; + background-color: white; + border-radius: 50%; + padding: 10px; } -.btn { + /* -------------------------------------------------------------------------------------- */ + + .accordion { + display: flex; + width: 40%; /* 40% страницы */ + height: 348px; + gap: 10px; + margin: 0 10px; /* отступ между колонками */ + } + .accordion-item { + flex: 1; + border-radius: 30px; /* закругление краёв */ + overflow: hidden; + cursor: pointer; + display: flex; + justify-content: space-between; + flex-direction: column-reverse; + align-items: center; + } +.accordion-item.active{ + display: flex; + flex: 5; /* раскрытая колонка */ + width: 100%; + height: 100%; + } +.accordion-item.active .accordion_index{ + display: none; + } +.accordion-item.active .accordion_title{ + display: none; + } +.accordion-item.active .img-open { + display: none; + width: 0; + height: 0; } +.accordion_index { + display: flex; + align-items: center; + justify-content: center; + padding: 15px; + border-radius: 50%; + background-color: #fff; + font-weight: 600; + width: 10px; + height: 10px; + margin-bottom: 10px; +} +.accordion_title { + margin: 0; + color: white; + display: flex; + align-items: center; + justify-content: center; + writing-mode: vertical-lr; + transform: rotate(-180deg); + margin-bottom: 40px; +} +/* not-actine */ + +#item1 { + background-color: #0C47A0; +} +#item2 { + background-color: #A5C6F6; +} +#item3 { + background-color: #0C47A0; +} +#item4 { + background-color: #A5C6F6; +} +#item5 { + background-color: #0C47A0; +} + +/* active */ + +#item1.active { + background: url("/images/main/001.png") 100% 100% / cover; +} +#item2.active { + background: url("/images/main/002.png") 100% 100% / cover; +} +#item3.active { + background: url("/images/main/003.png") 100% 100% / cover; +} +#item4.active { + background: url("/images/main/004.png") 100% 100% / cover; +} +#item5.active { + background: url("/images/main/005.png") 100% 100% / cover; +} +.img-open { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +.img-open { + display: none; +} +.accordion-item.active .blue-square { + display: block; + height: 100%; + margin: 20px; + background-color: rgba(2, 76, 187, 0.259); + border-radius: 33px; +} +/* not-active */ +.item_wrapper_index { + display: none; +} +.item_wrapper { + display: none; +} +/* active */ +.accordion-item.active .item_wrapper { + display: flex; + flex-direction: column; + padding: 15px; + height: 100%; +} +.wrapper_row_first { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 15px; + height: 30%; +} +.item_wrapper_index { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + padding: 20px; + border-radius: 50%; + background-color: #fff; + width: 20px; + height: 20px; + font-size: 18px; +} +.item_wrapper_icon { + margin: 0; + background-color: #fff; + border-radius: 50%; + padding: 18px; +} +.item_wrapper_icon svg { + display: block; + width: 42px; + height: 42px; +} +.wrapper_row_middle { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} +.row_middle_title { + margin: 0; + color: #fff; + font-weight: 500; + font-size: 24px; + text-transform: uppercase; +} +.row_middle_text { + font-size: 16px; + color: #fff; + margin-bottom: 15px; +} +.wrapper_row_botton { + margin: 0; + height: 20%; +} +.wrapper_row_botton { + display: flex; + justify-content: end; +} +.wrapper_row_btn { + margin: 0; + display: flex; + align-items: center; + gap: 5px; + padding: 8px; + border-radius: 16px; + border: none; + font-size: 14px; + cursor: pointer; +} +.wrapper_row_btn svg { + display: block; + width: 14px; + height: 16px; +} \ No newline at end of file