+
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
+
+
+
+
+
+
+
+
+
+
+
\ 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 {
}
- SEO-студия, помогающая вашему бизнесу расти. Оптимизируем сайты, увеличиваем трафик и выводим в топ поисковых систем.
+ 
+