From bb913738a1b3ea75b26fec05c1d22117d6481a24 Mon Sep 17 00:00:00 2001 From: Alena Date: Fri, 24 Oct 2025 17:20:19 +0300 Subject: [PATCH] figma_final_desktop --- index.html | 67 +++++++++++++++--- style.css | 204 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 238 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index d795b03..a1668ac 100644 --- a/index.html +++ b/index.html @@ -154,14 +154,14 @@
-
02
+
02
Digital-продукты
-
02
+
02
@@ -181,14 +181,14 @@
-
03
+
03
Маркетинг
-
03
+
03
@@ -209,14 +209,14 @@
-
04
+
04
продвижение
  Топовое SEO
-
04
+
04
@@ -236,14 +236,14 @@
-
05
+
05
Создание сайтов
-
05
+
05
@@ -264,14 +264,15 @@
-
06
+
06
Дизайн
-
06
+
+
06
@@ -542,6 +543,52 @@
+
+
+
Скидка 50%
на SEO-продвижение!
+
До окончания акции осталось:
+
+
+ +
+
01
+
дней
+
+ +
+
05
+
часов
+
+ +
+
45
+
минут
+
+ +
+
12
+
секунд
+
+
+
+
+ Скидка только до конца месяца – успей поднять свой сайт в топ Google и Яндекс! +
+
+
+
+
+
Специальное предложение
+
Гарантированный рост трафика
+
Ваш сайт уверенно растет в поисковой выдаче.Дальше - больше!
+
+
+ chart +
+
+
diff --git a/style.css b/style.css index cee1e56..5c3996d 100644 --- a/style.css +++ b/style.css @@ -6,8 +6,7 @@ html, body, * { margin: 0 auto; } .wrapper { - max-width: 1320px; - height: 10000px; + max-width: 1320px; } /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */ @@ -232,12 +231,17 @@ html, body, * { .info_heading_btn { display: flex; align-items: center; + justify-content: center; padding: 10px 16px; border-radius: 16px; background-color: #0C47A0; - transition: all .3s; color: #fff; margin: 0; + transition: all .3s; + gap: 5px; +} +.info_heading_btn:hover { + transform: scale(1.07); } .row_info_list { display: flex; @@ -390,7 +394,7 @@ html, body, * { margin-bottom: 20px; } .slider_main { - width: 60%; + width: 55%; height: 100%; background: url("/images/main/01.png") 100% / cover; border-radius: 30px; @@ -408,7 +412,7 @@ html, body, * { width: 80%; } .slider_row_container { - width: 70%; + width: 73%; display: flex; align-items: center; flex-wrap: wrap; @@ -449,24 +453,25 @@ html, body, * { gap: 10px; } .slider_row_index { - margin: 0; + margin: 0; color: #393939; font-size: 18px; background-color: white; border-radius: 50%; padding: 10px; + font-weight: 600; } /* -------------------------------------------------------------------------------------- */ .accordion { display: flex; - width: 40%; /* 40% страницы */ + width: 45%; /* 40% страницы */ height: 348px; gap: 10px; margin: 0 10px; /* отступ между колонками */ } .accordion-item { - flex: 1; + flex: 1.15; border-radius: 30px; /* закругление краёв */ overflow: hidden; cursor: pointer; @@ -480,7 +485,14 @@ html, body, * { flex: 5; /* раскрытая колонка */ width: 100%; height: 100%; + transition: all .3s; } +.accordion-item:hover { + box-shadow: 2px 2px 4px 0px #444; +} +.accordion-item.active:hover { + box-shadow: none; +} .accordion-item.active .accordion_index{ display: none; } @@ -492,17 +504,19 @@ html, body, * { width: 0; height: 0; } -.accordion_index { +.accordion_index_area { display: flex; align-items: center; justify-content: center; - padding: 15px; + margin-bottom: 10px; +} +.accordion_index { + display: block; + padding: 10px; border-radius: 50%; background-color: #fff; font-weight: 600; - width: 10px; - height: 10px; - margin-bottom: 10px; + font-size: 18px; } .accordion_title { margin: 0; @@ -584,20 +598,20 @@ html, body, * { justify-content: space-between; width: 100%; margin-bottom: 15px; - height: 30%; +} +.item_wrapper_area { + display: flex; + align-items: start; + justify-content: center; + margin: 0; } .item_wrapper_index { - margin: 0; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; - padding: 20px; + display: block; + font-weight: 600; + font-size: 18px; border-radius: 50%; background-color: #fff; - width: 20px; - height: 20px; - font-size: 18px; + padding: 10px; } .item_wrapper_icon { margin: 0; @@ -685,6 +699,9 @@ html, body, * { color:#fff; transition: opacity .35s ease; } +.advantage_slider_item:hover { + transform: scale(1.01); +} .advantage_slider_close img { position:absolute; inset:0; @@ -905,4 +922,145 @@ html, body, * { padding: 5px; height: 29px; width: 29px; +} + +/* -------------------------------------------FOOTER---------------------------------------------------- */ + +.footer { + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + background: url("/images/footer_banner/seo_down.png") 100% 100% /cover; + height: 546px; + border-radius: 30px; + padding: 40px 30px; + width: 100%; + margin-top: 40px; +} +.footer_content { + margin: 0; + width: 55%; +} +.footer_cont_heading { + margin: 0; + color: #fff; + font-size: 52px; + font-weight: 600; + margin-bottom: 30px; +} +.footer_cont_text { + color: #939393; + font-size: 16px; + font-weight: 500; + margin-bottom: 15px; +} +.footer_cont_time { + margin-bottom: 30px; +} +.cont_time_items { + display: flex; + justify-content: space-between; +} +.cont_time_item { + margin: 0; + display: flex; + flex-direction: column; + align-items: center; +} +.time_item_index { + margin: 0; + padding: 10px; + border-radius: 33px; + background-color: #252B38; + margin-bottom: 10px; +} +.item_index_color { + display: block; + font-size: 120px; + background: linear-gradient(90deg, #0A3D8F 10%, #4FC3F7 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.time_item_interval { + color: #939393; + font-size: 18px; + font-weight: 500; +} +.footer_cont_info { + margin: 0; + color: #fff; + font-size: 20px; + font-weight: 500; + margin-bottom: 25px; + line-height: 1; + width: 60%; +} +.footer_cont_button { + display: flex; + align-items: end; + margin: 0; + height: 100%; +} +.footer_cont_btn { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + padding: 10px; + border-radius: 16px; +} +.footer_chart { + margin: 0; + width: 404px; + backdrop-filter: blur(15px); + background-color: rgba(255, 255, 255, 0.349); + height: 251px; + border-radius: 33px; + padding: 20px; + position: relative; +} +.footer_chart_content { + margin: 0; + width: 60%; +} +.chart_cont_text { + font-size: 12px; + color: #fff; + margin-bottom: 10px; +} +.chart_cont_title { + font-size: 20px; + font-weight: 700; + color: #fff; + margin-bottom: 10px; +} +.chart_cont_text02 { + display: flex; + flex-direction: column; + font-size: 12px; + font-weight: 500; + color: #fff; +} +.chart_cont_text02 span { + display: block; + margin: 0; + font-size: 12px; + font-weight: 500; + color: #fff; + margin-top: 1.5px; +} +.footer_chart_img { + position: absolute; + right: 40px; + top: 60px; + display: flex; + justify-content: end; +} +.chart_img { + margin: 0; + display: block; + width: 249px; + height: 170px; } \ No newline at end of file