+
+
+
@@ -159,6 +212,7 @@
+
+
+
+ +7(495)859-21-36
+ Аудит сайта
+
Ссылочное продвижение
@@ -370,8 +424,8 @@
-
Успех
diff --git a/main.js b/main.js
index efac9bd..fad617a 100644
--- a/main.js
+++ b/main.js
@@ -76,3 +76,25 @@ document.querySelector('.header_nav_link-reverse').addEventListener('click', fun
}
});
+// -------------------------------------BURGER-MENU-----------------------------------------------------------------------------------
+
+document.addEventListener('DOMContentLoaded', () => {
+ const burgerBtn = document.querySelector('.burger_menu_btn');
+ const navWrapper = document.querySelector('.header_top_wrapper-open');
+ const navMenu = navWrapper.querySelector('.header_nav_top');
+
+ burgerBtn.addEventListener('click', () => {
+ navMenu.classList.toggle('active');
+ burgerBtn.classList.toggle('active');
+ document.body.classList.toggle('lock'); // блокируем скролл при открытом меню
+ });
+
+ // при клике по ссылке меню закрываем бургер
+ navWrapper.querySelectorAll('.header_top_link').forEach(link => {
+ link.addEventListener('click', () => {
+ navMenu.classList.remove('active');
+ burgerBtn.classList.remove('active');
+ document.body.classList.remove('lock');
+ });
+ });
+});
diff --git a/style.css b/style.css
index 0407570..03bacab 100644
--- a/style.css
+++ b/style.css
@@ -8,6 +8,9 @@ html, body, * {
.wrapper {
max-width: 1320px;
}
+.container {
+ margin: 0 20px;
+}
/* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */
@@ -15,8 +18,8 @@ html, body, * {
display: flex;
align-items: center;
margin-top: 20px;
- margin-right: 40px;
- margin-left: 40px;
+ margin-right: 60px;
+ margin-left: 60px;
margin-bottom: 30px;
}
.header_top_inner {
@@ -26,6 +29,9 @@ html, body, * {
.header_top_wrapper {
display: flex;
}
+.header_top_wrapper-open {
+ display: none;
+}
.header_top_list {
display: flex;
width: 100%;
@@ -449,6 +455,9 @@ html, body, * {
border-radius: 50%;
margin-bottom: 8px;
}
+.row_container_area-reverse {
+ display: none;
+}
.slider_row_2 {
margin: 0;
width: 100%;
@@ -1253,6 +1262,30 @@ html, body, * {
.accordion-item.active .item_wrapper {
padding: 10px;
}
+.header_body_about {
+ max-width: 21%;
+}
+.wrapper_row_botton {
+ margin-top: 0;
+}
+.wrapper_row_middle {
+ padding: 10px 0;
+}
+.advantage_content {
+ width: 50%;
+}
+.advantage_slider_close {
+ padding: 30px;
+}
+.advantage_slider_open {
+ padding: 30px;
+}
+.container {
+ margin: 0 20px;
+}
+.accordion-item.active .blue-square {
+ margin: 15px;
+}
}
@@ -1285,5 +1318,312 @@ html, body, * {
margin-right: 50px;
margin-left: 50px;
}
+.row_info_area {
+ margin-right: 2px;
+}
+.advantage_slider_close {
+ padding: 25px;
+}
+.advantage_slider_open {
+ padding: 25px;
+}
+.advantage_content {
+ width: 50%;
+}
+.item_index_color {
+ font-size: 90px;
+}
+.footer_chart_content {
+ width: 70%;
+}
+.wrapper_row_middle {
+ padding: 8px 0;
+}
+.header_body_about {
+ max-width: 23%;
+}
+.footer_chart_img {
+ right: 20px;
+}
+.accordion-item.active .item_wrapper {
+ padding: 8px;
+}
+.accordion-item {
+ flex: 1.5;
+
+}
+
+}
+/* ---------------------------------------------1000----------------------------------------------------- */
+
+@media (max-width: 1000px) {
+ .wrapper {
+ max-width: 1000px;
+}
+.accordion-item.active .blue-square {
+ margin: 10px;
+}
+.row_middle_title {
+ font-size: 20px;
+}
+.row_middle_text {
+ font-size: 14px;
+}
+.wrapper_row_middle {
+ padding: 30px 0;
+}
+.header_body_heading {
+ margin-right: 80px;
+}
+.header_body_about {
+ max-width: 25%;
+}
+.header_top_item {
+ padding: 10px;
+}
+.header_call {
+ gap: 10px;
+}
+.row_info_item {
+ margin-right: 10px;
+}
+.advantage_content {
+ width: 40%;
+}
+.advantage_slider_close {
+ padding: 15px;
+}
+.our-services_row_item {
+ padding: 15px;
+}
+.our-services_row_items {
+ height: 340px;
+}
+.our-services_item_title {
+ font-size: 30px;
+}
+.our-services_bottom_index {
+ font-size: 100px;
+}
+.footer_chart {
+ padding: 20px;
+}
+.footer_chart_img {
+ right: 10px;
+ top: 55px;
+}
+.item_index_color {
+ font-size: 80px;
+}
+
+}
+
+/* ---------------------------------------------------970!!!---------------------------------------------------------- */
+
+@media (max-width: 970px) {
+ .wrapper {
+ max-width: 970px;
+}
+.slider {
+ flex-direction: column;
+ height: auto;
+ gap: 20px;
+}
+.slider_main {
+ height: 348px;
+ width: 100%;
+ margin-right: 0;
+ padding: 25px;
+}
+.row_container_area-reverse {
+ display: block;
+}
+.accordion {
+ margin: 0;
+ width: 100%;
+}
+.accordion-item.active {
+ flex: 15;
+}
+.accordion-item.active .item_wrapper {
+ padding: 20px;
+}
+.accordion-item.active .blue-square {
+ margin: 20px;
+}
+.slider_row_index {
+ font-size: 30px;
+}
+.slider_row_1 {
+ width: 100%;
+}
+.row_container_item {
+ font-size: 16px;
+}
+.slider_row_title {
+ font-size: 16px;
+}
+.slider_row_title svg {
+ width: 29px;
+ height: 30px;
+}
+.item_wrapper_index {
+ font-size: 30px;
+}
+.item_wrapper_icon {
+ padding: 25px;
+}
+.row_middle_title {
+ font-size: 30px;
+}
+.row_middle_text {
+ font-size: 24px;
+}
+.wrapper_row_middle {
+ padding: 15px 0;
+}
+.wrapper_row_btn {
+ padding: 10px;
+ font-size: 16px;
+}
+.wrapper_row_btn svg {
+ width: 20px;
+ height: 18px;
+}
+.header_body_heading {
+ margin-right: 30px;
+}
+.accordion_about_info {
+ width: 100%;
+ margin-bottom: 60px;
+}
+.info_list_item {
+ padding: 0px 60px;
+}
+.header_row_info {
+ flex-direction: column;
+}
+.row_info_heading {
+ width: 100%;
+}
+.row_info_heading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 20px;
+}
+.row_info_item {
+ margin-right: 30px;
+ height: 129px;
+}
+.row_info_list {
+ padding: 30px;
+}
+.advantage_slider_item {
+ height: 450px;
+ width: 300px;
+}
+.advantage_slider_close {
+ padding: 20px;
+}
+.advantage_slider_open {
+ padding: 20px;
+}
+.slider_item_title {
+ font-size: 26px;
+}
+.advantage_slider_item.active .slider_item_title-reverse {
+ font-size: 26px;
+}
+.slider_item_index {
+ width: 55px;
+ height: 55px;
+}
+.advantage_slider_item.active .slider_item_title-reverse {
+ padding-bottom: 15px;
+}
+.advantage_slider_item.active .slider_item_title {
+ padding-top: 15px;
+}
+.advantage_slider_item.active .item_inner_text {
+ font-size: 16px;
+}
+/* Прячем меню по умолчанию */
+.header_top_wrapper-open .header_nav_top {
+ display: none;
+ flex-direction: column;
+ gap: 20px;
+ background: #fff;
+ position: absolute;
+ top: 60px;
+ right: 0;
+ width: 100%;
+ padding: 20px;
+ box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+}
+.header_top_wrapper-open {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 40px;
+}
+.logo_link {
+ margin: 0;
+}
+/* Показываем при активном состоянии */
+.header_top_wrapper-open .header_nav_top.active {
+ display: flex;
+ justify-content: space-between;
+}
+
+/* Анимация кнопки (три полоски) */
+.burger_menu_btn.active {
+ transition: all .3s;
+}
+.burger_menu_btn svg:hover {
+ transform:scale(1.1);
+}
+.burger_menu_btn svg{
+ height: 30px;
+ width: 30px;
+}
+
+/* Блокировка прокрутки */
+body.lock {
+ overflow: hidden;
+}
+.header_top_wrapper {
+ display: none;
+}
+.logo_link {
+}
+.burger_menu_btn {
+ background: none;
+ margin: 0;
+}
+.header_call_btn {
+ display: none;
+}
+.header_tel_link {
+ display: none;
+}
+.header_call_tel {
+ cursor: pointer;
+ width: 36px;
+ height: 36px;
+}
+.call_btn svg{
+ width: 26px;
+ height: 26px;
+ margin: 0;
+}
+.logo_link {
+ margin-left: 10px;
+}
+.header_top_item {
+ padding: 15px;
+ border-radius: 33px;
+}
+
}
\ No newline at end of file