From 33972c487b3f66bea8823a8b0068c5defcf4546d Mon Sep 17 00:00:00 2001 From: Alena Date: Thu, 23 Oct 2025 20:18:14 +0300 Subject: [PATCH] figma_003 --- index.html | 192 +++++++++++++++++++++++++++++++++----- style.css | 268 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 408 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index da6a1c4..d795b03 100644 --- a/index.html +++ b/index.html @@ -372,30 +372,176 @@
-
-
- -
- -
-
01
-
Отправляем в космос позиции вашего сайта
-
-
- -
-
-
01
-

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

-
Отправляем в космос позиции вашего сайта
-
-
-
+
+ +
+ +
+ +
+
01
+
Отправляем в космос позиции вашего сайта
+
+
+ +
+
+
01
+

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

+
Отправляем в космос позиции вашего сайта
+
+
+
+ +
+ +
+ +
+
02
+
Сроки продвижения всего от 1 дня!
+
+
+ +
+
+
02
+

+ Мы выводим сайты в топ поисковой выдачи за счет комплексной оптимизации, качественного контента и естественного ссылочного профиля. Постоянно отслеживаем позиции и адаптируем стратегию для максимальной эффективности. +

+
Сроки продвижения всего от 1 дня!
+
+
+
+ +
+ +
+ +
+
03
+
Работаем с абсолютно любой тематикой
+
+
+ +
+
+
03
+

+ Комплексно продвигаем сайты в поисковых системах: от технической оптимизации до создания полезного контента и естественного ссылочного роста. Постоянно анализируем эффективность и адаптируем стратегию для достижения ваших бизнес-целей. +

+
Работаем с абсолютно любой тематикой
+
+
+
- -
+
+
+
+
+
+ Наши услуги +
+
+ Услуги, которые ускоряют рост вашего бизнеса +
+
+
+
+ +
+
+
Топовые позиции
+ + + + + + + + + +
+
+ SEO продвижение +
+
+
01
+
+
+ Рост бизнеса +
+ + + +
+
+
+ +
+
+
Всё включено
+ + + + + + + + + +
+
+ Разработка сайтов +
+
+
02
+
+
+ Качество +
+ + + +
+
+
+ +
+
+
Гарантия качества
+ + + + + + + + + +
+
+ Интернет +магазины +
+
+
03
+
+
+ Скорость +
+ + + + +
+
+
+
+
+
diff --git a/style.css b/style.css index 192091a..cee1e56 100644 --- a/style.css +++ b/style.css @@ -653,46 +653,256 @@ html, body, * { height: 16px; } /* ----------------------------------------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; +.advantage_slider { + margin: 0; + padding-top: 60px; + padding-bottom: 60px; + display:flex; + justify-content:center; +} +.advantage_slider_items { + margin: 0; + display:flex; + gap:28px; } +.advantage_slider_item { + position:relative; + width:418px; + height:637px; + border-radius:30px; + 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{ +.advantage_slider_close { position:absolute; - inset:0; z-index:2; - background: color:#000; - border-radius:22px; + inset:0; + z-index:1; + display:flex; + align-items:flex-end; + padding:40px; + color:#fff; + transition: opacity .35s ease; +} +.advantage_slider_close img { + position:absolute; + inset:0; + width:100%; + height:100%; + object-fit:cover; + z-index:-1; +} +.slider_close_img { + object-position: 72%; +} +.slider_item_wrapper { + display: flex; + height: 100%; + flex-direction: column; + justify-content: space-between; +} +.slider_item_wrapper-reverse { + flex-direction: column-reverse; +} +.advantage_slider_close-shadow { + display: block; + height: 100%; + width: 100%; + position: relative; +} +.advantage_slider_close-shadow::before { + display: block; + position: absolute; + content: ""; + width: 100%; + height: 100%; + inset: 0; + background: linear-gradient(to bottom, rgba(0,0,0,0.8) 15%, transparent 100%); + z-index: 2; +} +/* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */ +.advantage_slider_open { + position:absolute; + inset:0; + z-index:2; + background-color: #fff; + border-radius:30px; opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .35s ease, transform .35s ease; - padding:28px 22px; + padding:40px; 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; +.slider_item_inner { + display:flex; + flex-direction:column; + justify-content:space-between; + width:100%; +} +.advantage_slider_item.active .slider_item_inner-reverse { + flex-direction: column-reverse; +} +.advantage_slider_item.active .slider_item_title-reverse { + padding-bottom: 30px; + border-bottom: 1px solid #939393; +} +/* Активная карточка */ +.advantage_slider_item.active .advantage_slider_open { + opacity:1; + transform:translateY(0); + pointer-events:auto; +} +.advantage_slider_item.active .advantage_slider_close { + opacity:0; } -.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_index { + margin: 0; + width:72px; + height:72px; + border-radius:50%; + display:flex; + align-items:center; + justify-content:center; + font-weight:500; + color: #fff; + border:1px solid #fff; + font-size: 20px; } -.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 +.slider_item_index-reverse { + color: #393939; + border: 1px solid #939393; +} +.slider_item_title { + margin: 0; + color: #fff; + font-size: 36px; + font-weight: 600; +} +.slider_item_title-reverse { + color: #fff; + z-index: 20; +} +.item_inner_text { +} +.advantage_slider_item.active .slider_item_index { + border:1px solid #939393; + color: #393939; +} +.advantage_slider_item.active .item_inner_text { + color: #939393; + font-size: 18px; +} +.advantage_slider_item.active .slider_item_title-reverse { + color: #393939; + padding-top: 0; + border-top: none; + margin: 0; + font-size: 36px; + font-weight: 600; +} +.advantage_slider_item.active .slider_item_title { + color: #393939; + padding-top: 30px; + border-top: 1px solid #939393; +} +.advantage_slider_item.active { + border: 1px solid rgba(57, 57, 57, 0.5); +} + +/* -----------------------------------------------OUR-SERVICES-------------------------------------------------------------------------------------- */ + +.our-services { +} +.our-services_heading { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 40px; +} +.our-services_heading_title { + margin: 0; + font-size: 74px; + font-weight: 600; +} +.our-services_heading_text { + margin: 0; + font-size: 18px; + font-weight: 500; + margin-top: 15px; +} +.our-services_row { +} +.our-services_row_items { + margin: 0; + display: flex; + justify-content: space-between; + gap: 30px; + height: 444px; +} +.our-services_row_item { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + margin: 0; + background-color: #F4F4F4; + border-radius: 33px; + padding: 40px; +} +.our-services_item_01 { + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.item_link { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + border: 1px solid #393939; + padding: 10px; + border-radius: 16px; + height: 29px; +} +.our-services_item_01 svg { + margin: 0; +} +.our-services_item_title { + margin: 0; + font-size: 36px; + font-weight: 600; + width: 80%; +} +.our-services_item_bottom { + margin: 0; + display: flex; + align-items: end; + justify-content: space-between; +} +.our-services_bottom_index { + margin: 0; + font-size: 158px; +} +.our-services_bottom_right { + margin: 0; + display: flex; + gap: 5px; + height: 29px; + margin-bottom: 15px; +} +.our-services_item_bottom svg { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #393939; + border-radius: 50%; + padding: 5px; + height: 29px; + width: 29px; +} \ No newline at end of file