From 98853e882f115f624812e17ada46e1b2d23a402a Mon Sep 17 00:00:00 2001 From: Alena Date: Fri, 17 Oct 2025 15:02:20 +0300 Subject: [PATCH] figma_001 --- images/header_body/Ellipse.svg | 3 + index.html | 138 +++++++++++++++++---------------- op.html | 69 +++++++++++++++++ sty.css | 34 ++++++++ style.css | 133 +++++++++++++++++++++---------- 5 files changed, 272 insertions(+), 105 deletions(-) create mode 100644 images/header_body/Ellipse.svg create mode 100644 op.html create mode 100644 sty.css diff --git a/images/header_body/Ellipse.svg b/images/header_body/Ellipse.svg new file mode 100644 index 0000000..57dfc70 --- /dev/null +++ b/images/header_body/Ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index 9482223..e95af6f 100644 --- a/index.html +++ b/index.html @@ -63,43 +63,43 @@ -
-
- -
- Яндекс продвижение -
- -
- Google продвижение -
- -
- Разработка сайтов -
- -
- Интернет-магазины -
- -
- Мобильные приложения -
- -
- Брендинг -
- -
- SEO-продвижение -
- -
- Лендинги +
+
+ +
+ Яндекс продвижение +
+ +
+ Google продвижение +
+ +
+ Разработка сайтов +
+ +
+ Интернет-магазины +
+ +
+ Мобильные приложения +
+ +
+ Брендинг +
+ +
+ SEO-продвижение +
+ +
+ Лендинги +
-
@@ -115,46 +115,53 @@
stars - SEO-студия, помогающая вашему бизнесу расти. Оптимизируем сайты, увеличиваем трафик и выводим в топ поисковых систем. +
+ SEO-студия, помогающая вашему бизнесу расти. Оптимизируем сайты, увеличиваем трафик и выводим в топ поисковых систем. +
+
- -
- - SEO - +
+ +
+ + SEO + +
+
+ +
+ + Контент-маркетинг + +
+
+ +
+ + Аудит сайта + +
- -
- - Контент-маркетинг - +
+ +
+ + Ссылочное продвижение + +
-
- -
- - Аудит сайта - -
-
- -
- - Ссылочное продвижение - -
-
- -
- - Техническая оптимизация - + +
+ + Техническая оптимизация + +
@@ -165,6 +172,7 @@
01
+
diff --git a/op.html b/op.html new file mode 100644 index 0000000..0224678 --- /dev/null +++ b/op.html @@ -0,0 +1,69 @@ + + + + + + 111 + + + + + + + +
+
+ + Logo + +
+ +
+ + Главная + +
+ +
+ + Услуги + +
+ +
+ + Проекты + +
+ +
+ + О нас + +
+ +
+ + Контакты + +
+
+
+
+ + + + +7(495)859-21-36 +
+ +
+
+
+ + + \ No newline at end of file diff --git a/sty.css b/sty.css new file mode 100644 index 0000000..e46e98a --- /dev/null +++ b/sty.css @@ -0,0 +1,34 @@ +html, * { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + color: #393939; +} +body { + max-width: 1230px; + +} + +.header { + +} +.header_top { + display: flex; + justify-content: space-between; +} +.logo_top_link { +} +.logo__top_img { +} +.header_top_list { +} +.header_top_item { +} +.header_top_item_link { +} +.header_top_info { +} +.header_top_info_tel { +} +.header_top_btn { +} \ No newline at end of file diff --git a/style.css b/style.css index cc68db6..b54b659 100644 --- a/style.css +++ b/style.css @@ -4,36 +4,37 @@ html, body, * { font-size: 14px; color: #393939; margin: 0 auto; - max-width: 1600px; } .wrapper { - margin: 0 60px; + max-width: 1320px; } /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */ .header_top { - display: flex; - flex-direction: row; - margin: 0 50px; - justify-content: space-between; - margin-bottom: 100px; -} -.header_top_inner { display: flex; justify-content: space-between; align-items: center; - margin: 15px 0; - flex-direction: column; + margin-top: 20px; + margin-right: 60px; + margin-left: 60px; + margin-bottom: 30px; +} +.header_top_inner { + margin: 20px 0; + margin: 0 auto; + width: 100%; } .header_top_wrapper { display: flex; - justify-content: space-between; - align-items: center; +} +.header_top_list { + display: flex; } .logo_link { -margin: 0; -transition: all .3s; + margin: 0; + margin-left: 10px; + transition: all .3s; } .logo_link:hover { transform: scale(1.05); @@ -43,17 +44,12 @@ transition: all .3s; } .header_nav_top { display: flex; - justify-content: space-between; - align-items: center; white-space: nowrap; background-color: #F4F4F4; border-radius: 16px; } .header_top_item { - display: block; padding: 10px 16px; - color: #000; - text-decoration: none; position: relative; border-radius: 16px; } @@ -83,8 +79,7 @@ transition: all .3s; .header_call { display: flex; margin: 0; - justify-content: center; - align-items: center; + white-space: nowrap; gap: 20px; } .header_call_tel { @@ -95,10 +90,11 @@ transition: all .3s; transition: all .3s; } .header_call_tel:hover { - transform: scale(1.1); + transform: scale(1.07); color: #0C47A0; } .header_call_tel svg{ + display: block; width: 18px; height: 18px; } @@ -114,7 +110,7 @@ transition: all .3s; transition: all .3s; } .header_call_btn:hover { - transform: scale(1.1); + transform: scale(1.07); } .header_call_btn svg { display: block; @@ -132,12 +128,14 @@ transition: all .3s; justify-content: space-between; background-color: #F4F4F4; border-radius: 16px; + width: 100%; } .header_nav_item { - margin: 0; - display: flex; + display: block; + justify-content: space-between; + align-items: center; white-space: nowrap; - padding: 10px 20px; + padding: 10px 16px; } .header_nav_link { transition: all .1s; @@ -150,57 +148,112 @@ transition: all .3s; /* ------------------------------------------------HEADER-BODY------------------------------------------------------ */ .header_body { + } .header_body_inner { } .header_body_top { display: flex; justify-content: space-between; + margin-bottom: 30px; } .header_body_heading { - display: block; - margin: 0; - display: flex; - justify-content: center; - font-size: 30px; + font-size: 55px; font-weight: 700; - color: #393939; - max-width: 60%; - flex-direction: column; + margin-right: 150px; } .header_body_heading svg { - display: block; - margin: 0; + text-align: center; + vertical-align: middle; } .header_header_img { - display: block; + text-align: center; + vertical-align: middle; height: 32px; width: 90px; background: linear-gradient(to right, #0C47A0, #8FECFC); border-radius: 30px; - margin: 0; } .header_body_about { max-width: 20%; - margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 40px; +} +.header_about_text { + font-weight: 500; + margin-top: 5px; +} +.header_body_about span { + color: #939393; } .header_about_img { + display: block; + width: 19px; + height: 19px; + margin: 0; } .header_body_row { + display: flex; + justify-content: space-between; } .header_body_collumn { + margin: 0; + width: 100%; +} +.header_collumn_inner { + background: url("/images/header_body/seo_top_01.png") 100% / cover; + border-radius: 30px; + height: 350px; + position: relative; } .header_collumn_row_top { + display: block; + margin: 0; +} +.header_row_first { + display: flex; + margin: 0; + max-width: 350px; +} +.header_row_second { + display: flex; + margin: 0; + max-width: 300px; } .header_row_item { + margin: 0; + margin-left: 20px; + margin-top: 20px; + background-color: #025DC873; + padding: 5px; + border-radius: 14px; + border: 1px solid #fff; + position: relative; } .header_item_link { + color: #fff; + white-space: nowrap; } .header_item_area { + display: block; + width: 10px; + height: 10px; + background-color: #fff; + border-radius: 50%; } .header_collumn_row_bottom { + position: absolute; + bottom: 0; + left: 25px; } .header_row_title { + display: flex; + align-items: center; + color: #fff; + margin: 0; + gap: 10px; } .header_row_img { }