figma_adaptive_tablet_01
This commit is contained in:
190
style.css
190
style.css
@@ -13,16 +13,14 @@ html, body, * {
|
||||
|
||||
.header_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-right: 60px;
|
||||
margin-left: 60px;
|
||||
margin-right: 40px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.header_top_inner {
|
||||
margin: 20px 0;
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.header_top_wrapper {
|
||||
@@ -30,6 +28,7 @@ html, body, * {
|
||||
}
|
||||
.header_top_list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.logo_link {
|
||||
margin: 0;
|
||||
@@ -124,18 +123,25 @@ html, body, * {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.header_nav {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.header_nav_item {
|
||||
margin: 0;
|
||||
display: block;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding: 10px 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
.header_nav_item-reverse {
|
||||
display: none;
|
||||
}
|
||||
.header_nav_link {
|
||||
transition: all .1s;
|
||||
@@ -218,10 +224,11 @@ html, body, * {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-bottom: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
.row_info_heading {
|
||||
margin: 0;
|
||||
width: 30%;
|
||||
width: 40%;
|
||||
}
|
||||
.info_heading_title {
|
||||
font-size: 36px;
|
||||
@@ -245,19 +252,23 @@ html, body, * {
|
||||
}
|
||||
.row_info_list {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
.row_info_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
background-color: #F4F4F4;
|
||||
padding: 35px 30px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-right: 40px;
|
||||
height: 119px;
|
||||
}
|
||||
.row_info_item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.row_info_area {
|
||||
padding: 10px;
|
||||
@@ -267,6 +278,7 @@ html, body, * {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.row_info_item svg {
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@@ -468,7 +480,7 @@ html, body, * {
|
||||
width: 45%; /* 40% страницы */
|
||||
height: 348px;
|
||||
gap: 10px;
|
||||
margin: 0 10px; /* отступ между колонками */
|
||||
margin: 0px 0px 0px 10px ; /* отступ между колонками */
|
||||
}
|
||||
.accordion-item {
|
||||
flex: 1.15;
|
||||
@@ -510,6 +522,9 @@ html, body, * {
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.accordion-item.active .accordion_index_area {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.accordion_index {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
@@ -574,7 +589,7 @@ html, body, * {
|
||||
}
|
||||
.accordion-item.active .blue-square {
|
||||
display: block;
|
||||
height: 100%;
|
||||
height: 348px;
|
||||
margin: 20px;
|
||||
background-color: rgba(2, 76, 187, 0.259);
|
||||
border-radius: 33px;
|
||||
@@ -640,11 +655,11 @@ html, body, * {
|
||||
.row_middle_text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.wrapper_row_botton {
|
||||
margin: 0;
|
||||
height: 20%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.wrapper_row_botton {
|
||||
display: flex;
|
||||
@@ -678,6 +693,7 @@ html, body, * {
|
||||
margin: 0;
|
||||
display:flex;
|
||||
gap:28px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.advantage_slider_item {
|
||||
@@ -882,9 +898,8 @@ html, body, * {
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
border: 1px solid #393939;
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
height: 29px;
|
||||
}
|
||||
.our-services_item_01 svg {
|
||||
margin: 0;
|
||||
@@ -908,20 +923,24 @@ html, body, * {
|
||||
.our-services_bottom_right {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
height: 29px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.our-services_item_bottom svg {
|
||||
.item_link_svg {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #393939;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
padding: 5px;
|
||||
}
|
||||
.item_link_svg svg {
|
||||
display: block;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------FOOTER---------------------------------------------------- */
|
||||
@@ -968,6 +987,27 @@ html, body, * {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.const_time_area {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 25px 10px 50px 10px;
|
||||
}
|
||||
.time_area_first {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(270deg, rgb(10, 61, 143) 15%, rgb(0, 174, 255) 100%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.time_area_second {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(90deg, #0A3D8F 10%, #4FC3F7 100%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.time_item_index {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
@@ -1063,4 +1103,110 @@ html, body, * {
|
||||
display: block;
|
||||
width: 249px;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------ADAPTIVE--------------------------------------------------------- */
|
||||
|
||||
/* ---------------------------------------------1200----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.wrapper {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.header_nav_item-empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header_nav_item-reverse {
|
||||
display: block;
|
||||
}
|
||||
.header_nav_link-reverse {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
color: #0C47A0;
|
||||
}
|
||||
.header_top {
|
||||
margin-right: 80px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
.container {
|
||||
margin: 0 40px;
|
||||
}
|
||||
.header_body_heading {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.row_info_heading {
|
||||
width: 50%;
|
||||
}
|
||||
.row_info_item {
|
||||
margin-right: 15px;
|
||||
height: 87px;
|
||||
}
|
||||
.advantage_slider_item {
|
||||
height: 527px;
|
||||
width: 352px;
|
||||
}
|
||||
.advantage_slider_items {
|
||||
gap: 26px;
|
||||
}
|
||||
.our-services_heading_text {
|
||||
width: 30%;
|
||||
}
|
||||
.our-services_row {
|
||||
width: 100%;
|
||||
}
|
||||
.our-services_row_item {
|
||||
padding: 25px;
|
||||
}
|
||||
.our-services_bottom_index {
|
||||
font-size: 140px;
|
||||
}
|
||||
.item_index_color {
|
||||
font-size: 100px;
|
||||
}
|
||||
.footer_chart {
|
||||
width: 340px;
|
||||
}
|
||||
.time_area_first {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.time_area_second {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.const_time_area {
|
||||
padding: 25px 5px 50px 5px;
|
||||
}
|
||||
.footer_cont_info {
|
||||
width: 70%;
|
||||
}
|
||||
.footer_cont_time {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer_cont_info {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer_chart {
|
||||
padding: 25px;
|
||||
}
|
||||
.blue-square {
|
||||
height: 100%;
|
||||
}
|
||||
.wrapper_row_first {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.slider_row_container {
|
||||
width: 93%;
|
||||
}
|
||||
.accordion_title {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.accordion_title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user