figma_adp_03
This commit is contained in:
344
style.css
344
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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user