From d773318b8df7237f1c45b56490e08367930ac3d3 Mon Sep 17 00:00:00 2001 From: Alena Date: Sun, 26 Oct 2025 18:17:11 +0300 Subject: [PATCH] figma_adaptive_tablet_01 --- index.html | 38 ++++++++--- style.css | 190 ++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 198 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index a1668ac..9344556 100644 --- a/index.html +++ b/index.html @@ -86,21 +86,28 @@ Мобильные приложения -
+
Брендинг
+ +
+ Больше услуг + + +
-
+
SEO-продвижение
-
+
Лендинги
+
@@ -309,7 +316,7 @@
-
+
@@ -474,9 +481,10 @@
Рост бизнеса
+
- +
@@ -503,9 +511,10 @@
Качество
+
- +
@@ -533,10 +542,10 @@
Скорость
+
- - +
@@ -554,16 +563,28 @@
01
дней
+
+
+
+
05
часов
+
+
+
+
45
минут
+
+
+
+
12
@@ -589,6 +610,7 @@
+ diff --git a/style.css b/style.css index 5c3996d..e0bca1d 100644 --- a/style.css +++ b/style.css @@ -13,16 +13,14 @@ html, body, * { .header_top { display: flex; - justify-content: space-between; align-items: center; margin-top: 20px; - margin-right: 60px; - margin-left: 60px; + margin-right: 40px; + margin-left: 40px; margin-bottom: 30px; } .header_top_inner { - margin: 20px 0; - margin: 0 auto; + margin: 0; width: 100%; } .header_top_wrapper { @@ -30,6 +28,7 @@ html, body, * { } .header_top_list { display: flex; + width: 100%; } .logo_link { margin: 0; @@ -124,18 +123,25 @@ html, body, * { margin: 20px 0; } .header_nav { + margin: 0; display: flex; justify-content: space-between; + align-items: center; + width: 100%; background-color: #F4F4F4; border-radius: 16px; - width: 100%; + padding: 0 5px; } .header_nav_item { + margin: 0; display: block; justify-content: space-between; align-items: center; white-space: nowrap; - padding: 10px 16px; + padding: 10px; +} +.header_nav_item-reverse { + display: none; } .header_nav_link { transition: all .1s; @@ -218,10 +224,11 @@ html, body, * { align-items: center; margin: 0; margin-bottom: 60px; + width: 100%; } .row_info_heading { margin: 0; - width: 30%; + width: 40%; } .info_heading_title { font-size: 36px; @@ -245,19 +252,23 @@ html, body, * { } .row_info_list { display: flex; - width: 70%; + width: 100%; + height: 100%; justify-content: space-between; - gap: 30px; align-items: center; } .row_info_item { display: flex; align-items: center; + justify-content: center; border-radius: 30px; background-color: #F4F4F4; - padding: 35px 30px; - margin: 0; width: 100%; + margin-right: 40px; + height: 119px; +} +.row_info_item:last-child { + margin-right: 0; } .row_info_area { padding: 10px; @@ -267,6 +278,7 @@ html, body, * { margin-right: 15px; } .row_info_item svg { + margin: 0; display: block; width: 25px; height: 25px; @@ -468,7 +480,7 @@ html, body, * { width: 45%; /* 40% страницы */ height: 348px; gap: 10px; - margin: 0 10px; /* отступ между колонками */ + margin: 0px 0px 0px 10px ; /* отступ между колонками */ } .accordion-item { flex: 1.15; @@ -510,6 +522,9 @@ html, body, * { justify-content: center; margin-bottom: 10px; } +.accordion-item.active .accordion_index_area { + margin-bottom: 0; +} .accordion_index { display: block; padding: 10px; @@ -574,7 +589,7 @@ html, body, * { } .accordion-item.active .blue-square { display: block; - height: 100%; + height: 348px; margin: 20px; background-color: rgba(2, 76, 187, 0.259); border-radius: 33px; @@ -640,11 +655,11 @@ html, body, * { .row_middle_text { font-size: 16px; color: #fff; - margin-bottom: 15px; } .wrapper_row_botton { margin: 0; height: 20%; + margin-top: 10px; } .wrapper_row_botton { display: flex; @@ -678,6 +693,7 @@ html, body, * { margin: 0; display:flex; gap:28px; + width: 100%; } .advantage_slider_item { @@ -882,9 +898,8 @@ html, body, * { justify-content: center; margin: 0; border: 1px solid #393939; - padding: 10px; + padding: 8px; border-radius: 16px; - height: 29px; } .our-services_item_01 svg { margin: 0; @@ -908,20 +923,24 @@ html, body, * { .our-services_bottom_right { margin: 0; display: flex; + align-items: center; + justify-content: center; gap: 5px; - height: 29px; margin-bottom: 15px; } -.our-services_item_bottom svg { +.item_link_svg { margin: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #393939; border-radius: 50%; - padding: 5px; - height: 29px; - width: 29px; + padding: 5px; +} +.item_link_svg svg { + display: block; + width: 23px; + height: 23px; } /* -------------------------------------------FOOTER---------------------------------------------------- */ @@ -968,6 +987,27 @@ html, body, * { flex-direction: column; align-items: center; } +.const_time_area { + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 25px 10px 50px 10px; +} +.time_area_first { + margin: 0; + width: 20px; + height: 20px; + background: linear-gradient(270deg, rgb(10, 61, 143) 15%, rgb(0, 174, 255) 100%); + border-radius: 50%; +} +.time_area_second { + margin: 0; + width: 20px; + height: 20px; + background: linear-gradient(90deg, #0A3D8F 10%, #4FC3F7 100%); + border-radius: 50%; +} .time_item_index { margin: 0; padding: 10px; @@ -1063,4 +1103,110 @@ html, body, * { display: block; width: 249px; height: 170px; +} + +/* -------------------------------------------ADAPTIVE--------------------------------------------------------- */ + +/* ---------------------------------------------1200----------------------------------------------------------- */ + +@media (max-width: 1200px) { + .wrapper { + max-width: 1200px; +} +.header_nav_item-empty { + display: none; +} + +.header_nav_item-reverse { + display: block; +} +.header_nav_link-reverse { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + color: #0C47A0; +} +.header_top { + margin-right: 80px; + margin-left: 80px; +} +.container { + margin: 0 40px; +} +.header_body_heading { + margin-right: 100px; +} +.row_info_heading { + width: 50%; +} +.row_info_item { + margin-right: 15px; + height: 87px; +} +.advantage_slider_item { + height: 527px; + width: 352px; +} +.advantage_slider_items { + gap: 26px; +} +.our-services_heading_text { + width: 30%; +} +.our-services_row { + width: 100%; +} +.our-services_row_item { + padding: 25px; +} +.our-services_bottom_index { + font-size: 140px; +} +.item_index_color { + font-size: 100px; +} +.footer_chart { + width: 340px; +} +.time_area_first { + width: 15px; + height: 15px; +} +.time_area_second { + width: 15px; + height: 15px; +} +.const_time_area { + padding: 25px 5px 50px 5px; +} +.footer_cont_info { + width: 70%; +} +.footer_cont_time { + margin-bottom: 40px; +} +.footer_cont_info { + margin-bottom: 40px; +} +.footer_chart { + padding: 25px; +} +.blue-square { + height: 100%; +} +.wrapper_row_first { + margin-bottom: 0px; +} +.slider_row_container { + width: 93%; +} +.accordion_title { + margin-bottom: 80px; +} +.accordion_title { + white-space: nowrap; +} + + } \ No newline at end of file