Alena/Figma_2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

figma_001

Browse Source
This commit is contained in:
Alena Trushcheva
2025-10-17 15:02:20 +03:00
parent 94f4f34b72
commit 98853e882f
5 changed files with 272 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
images/header_body/Ellipse.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4.72852" r="4" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 148 B

16
index.html
View File

@@ -115,46 +115,53 @@
</div> </div>
<div class="header_body_about"> <div class="header_body_about">
<img class="header_about_img" src="/images/header_body/Stars.png" alt="stars"> <img class="header_about_img" src="/images/header_body/Stars.png" alt="stars">
SEO-студия, помогающая вашему бизнесу расти. Оптимизируем сайты, увеличиваем трафик и выводим в топ поисковых систем. <div class="header_about_text">
SEO-студия<span>, помогающая вашему бизнесу расти. Оптимизируем сайты, увеличиваем трафик и выводим в топ поисковых систем.</span>
</div>
</div> </div>
</div> </div>
<div class="header_body_row"> <div class="header_body_row">
<!-- c1 --> <!-- c1 -->
<div class="header_body_collumn"> <div class="header_body_collumn">
<div class="header_collumn_inner">
<div class="header_collumn_row_top"> <div class="header_collumn_row_top">
<div class="header_row_first">
<!-- r1 --> <!-- r1 -->
<div class="header_row_item"> <div class="header_row_item">
<a class="header_item_link" href="#"> <a class="header_item_link" href="#">
SEO SEO
</a> </a>
<div class="header_item_area"></div>
</div> </div>
<div class="header_item_area"></div>
<!-- r2 --> <!-- r2 -->
<div class="header_row_item"> <div class="header_row_item">
<a class="header_item_link" href="#"> <a class="header_item_link" href="#">
Контент-маркетинг Контент-маркетинг
</a> </a>
<div class="header_item_area"></div>
</div> </div>
<div class="header_item_area"></div>
<!-- r3 --> <!-- r3 -->
<div class="header_row_item"> <div class="header_row_item">
<a class="header_item_link" href="#"> <a class="header_item_link" href="#">
Аудит сайта Аудит сайта
</a> </a>
</div>
<div class="header_item_area"></div> <div class="header_item_area"></div>
</div> </div>
<div class="header_row_second">
<!-- r4 --> <!-- r4 -->
<div class="header_row_item"> <div class="header_row_item">
<a class="header_item_link" href="#"> <a class="header_item_link" href="#">
Ссылочное продвижение Ссылочное продвижение
</a> </a>
<div class="header_item_area"></div>
</div> </div>
<div class="header_item_area"></div>
<!-- r5 --> <!-- r5 -->
<div class="header_row_item"> <div class="header_row_item">
<a class="header_item_link" href="#"> <a class="header_item_link" href="#">
Техническая оптимизация Техническая оптимизация
</a> </a>
</div>
<div class="header_item_area"></div> <div class="header_item_area"></div>
</div> </div>
</div> </div>
@@ -166,6 +173,7 @@
<div class="header_row_para">01</div> <div class="header_row_para">01</div>
</div> </div>
</div> </div>
</div>
<!-- c2 --> <!-- c2 -->
<div class="header_body_collumn"> <div class="header_body_collumn">
<!-- 1 --> <!-- 1 -->

69
op.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>111</title>
<link rel="stylesheet" href="reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="sty.css">
</head>
<body>
<header class="header">
<div class="header_top">
<a class="logo_top_link" href="#">
<img class="logo__top_img" src="/images/header_top/logo.png" alt="Logo">
</a>
<div class="header_top_list">
<!-- 1 -->
<div class="header_top_item">
<a class="header_top_item_link" href="#">
Главная
</a>
</div>
<!-- 2 -->
<div class="header_top_item">
<a class="header_top_item_link" href="#">
Услуги
</a>
</div>
<!-- 3 -->
<div class="header_top_item">
<a class="header_top_item_link" href="#">
Проекты
</a>
</div>
<!-- 4 -->
<div class="header_top_item">
<a class="header_top_item_link" href="#">
О нас
</a>
</div>
<!-- 5 -->
<div class="header_top_item">
<a class="header_top_item_link" href="#">
Контакты
</a>
</div>
</div>
<div class="header_top_info">
<div class="header_top_info_tel">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6005 12.5221C11.2055 15.0421 5.09652 8.98811 7.50052 6.45811C8.96852 4.91311 7.31052 3.14811 6.39252 1.84911C4.66952 -0.585887 0.888521 2.77611 1.00252 4.91511C1.36552 11.6611 8.66252 19.6551 15.7285 18.9571C17.9385 18.7391 20.4785 14.7471 17.9435 13.2881C16.6755 12.5581 14.9345 11.1181 13.6005 12.5211" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
+7(495)859-21-36
</div>
<button class="header_top_btn">
Оставить заявку
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 8.22851L17 8.22852M17 8.22852L10 1.22852M17 8.22852L10 15.2285" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</header>
<script src="main.js"></script>
</body>
</html>

34
sty.css Normal file
View File

@@ -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 {
}

129
style.css
View File

@@ -4,35 +4,36 @@ html, body, * {
font-size: 14px; font-size: 14px;
color: #393939; color: #393939;
margin: 0 auto; margin: 0 auto;
max-width: 1600px;
} }
.wrapper { .wrapper {
margin: 0 60px; max-width: 1320px;
} }
/* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */ /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */
.header_top { .header_top {
display: flex;
flex-direction: row;
margin: 0 50px;
justify-content: space-between;
margin-bottom: 100px;
}
.header_top_inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 15px 0; margin-top: 20px;
flex-direction: column; margin-right: 60px;
margin-left: 60px;
margin-bottom: 30px;
}
.header_top_inner {
margin: 20px 0;
margin: 0 auto;
width: 100%;
} }
.header_top_wrapper { .header_top_wrapper {
display: flex; display: flex;
justify-content: space-between; }
align-items: center; .header_top_list {
display: flex;
} }
.logo_link { .logo_link {
margin: 0; margin: 0;
margin-left: 10px;
transition: all .3s; transition: all .3s;
} }
.logo_link:hover { .logo_link:hover {
@@ -43,17 +44,12 @@ transition: all .3s;
} }
.header_nav_top { .header_nav_top {
display: flex; display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap; white-space: nowrap;
background-color: #F4F4F4; background-color: #F4F4F4;
border-radius: 16px; border-radius: 16px;
} }
.header_top_item { .header_top_item {
display: block;
padding: 10px 16px; padding: 10px 16px;
color: #000;
text-decoration: none;
position: relative; position: relative;
border-radius: 16px; border-radius: 16px;
} }
@@ -83,8 +79,7 @@ transition: all .3s;
.header_call { .header_call {
display: flex; display: flex;
margin: 0; margin: 0;
justify-content: center; white-space: nowrap;
align-items: center;
gap: 20px; gap: 20px;
} }
.header_call_tel { .header_call_tel {
@@ -95,10 +90,11 @@ transition: all .3s;
transition: all .3s; transition: all .3s;
} }
.header_call_tel:hover { .header_call_tel:hover {
transform: scale(1.1); transform: scale(1.07);
color: #0C47A0; color: #0C47A0;
} }
.header_call_tel svg{ .header_call_tel svg{
display: block;
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
@@ -114,7 +110,7 @@ transition: all .3s;
transition: all .3s; transition: all .3s;
} }
.header_call_btn:hover { .header_call_btn:hover {
transform: scale(1.1); transform: scale(1.07);
} }
.header_call_btn svg { .header_call_btn svg {
display: block; display: block;
@@ -132,12 +128,14 @@ transition: all .3s;
justify-content: space-between; justify-content: space-between;
background-color: #F4F4F4; background-color: #F4F4F4;
border-radius: 16px; border-radius: 16px;
width: 100%;
} }
.header_nav_item { .header_nav_item {
margin: 0; display: block;
display: flex; justify-content: space-between;
align-items: center;
white-space: nowrap; white-space: nowrap;
padding: 10px 20px; padding: 10px 16px;
} }
.header_nav_link { .header_nav_link {
transition: all .1s; transition: all .1s;
@@ -150,57 +148,112 @@ transition: all .3s;
/* ------------------------------------------------HEADER-BODY------------------------------------------------------ */ /* ------------------------------------------------HEADER-BODY------------------------------------------------------ */
.header_body { .header_body {
} }
.header_body_inner { .header_body_inner {
} }
.header_body_top { .header_body_top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 30px;
} }
.header_body_heading { .header_body_heading {
display: block; font-size: 55px;
margin: 0;
display: flex;
justify-content: center;
font-size: 30px;
font-weight: 700; font-weight: 700;
color: #393939; margin-right: 150px;
max-width: 60%;
flex-direction: column;
} }
.header_body_heading svg { .header_body_heading svg {
display: block; text-align: center;
margin: 0; vertical-align: middle;
} }
.header_header_img { .header_header_img {
display: block; text-align: center;
vertical-align: middle;
height: 32px; height: 32px;
width: 90px; width: 90px;
background: linear-gradient(to right, #0C47A0, #8FECFC); background: linear-gradient(to right, #0C47A0, #8FECFC);
border-radius: 30px; border-radius: 30px;
margin: 0;
} }
.header_body_about { .header_body_about {
max-width: 20%; 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 { .header_about_img {
display: block;
width: 19px;
height: 19px;
margin: 0;
} }
.header_body_row { .header_body_row {
display: flex;
justify-content: space-between;
} }
.header_body_collumn { .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 { .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 { .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 { .header_item_link {
color: #fff;
white-space: nowrap;
} }
.header_item_area { .header_item_area {
display: block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
} }
.header_collumn_row_bottom { .header_collumn_row_bottom {
position: absolute;
bottom: 0;
left: 25px;
} }
.header_row_title { .header_row_title {
display: flex;
align-items: center;
color: #fff;
margin: 0;
gap: 10px;
} }
.header_row_img { .header_row_img {
} }