figma_003
This commit is contained in:
268
style.css
268
style.css
@@ -653,46 +653,256 @@ html, body, * {
|
||||
height: 16px;
|
||||
}
|
||||
/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
|
||||
.advantage_slider { padding: 40px; display:flex; justify-content:center; }
|
||||
.advantage_slider_items { display:flex; gap:28px; }
|
||||
|
||||
.advantage_slider_item{
|
||||
position:relative; width:280px; height:420px; border-radius:22px; overflow:hidden; cursor:pointer;
|
||||
.advantage_slider {
|
||||
margin: 0;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
.advantage_slider_items {
|
||||
margin: 0;
|
||||
display:flex;
|
||||
gap:28px;
|
||||
}
|
||||
|
||||
.advantage_slider_item {
|
||||
position:relative;
|
||||
width:418px;
|
||||
height:637px;
|
||||
border-radius:30px;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
}
|
||||
/* Слой CLOSE */
|
||||
.advantage_slider_close{
|
||||
position:absolute; inset:0; z-index:1;
|
||||
display:flex; align-items:flex-end; padding:20px; color:#fff;
|
||||
transition:opacity .35s ease;
|
||||
}
|
||||
.advantage_slider_close img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
|
||||
|
||||
/* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */
|
||||
.advantage_slider_open{
|
||||
.advantage_slider_close {
|
||||
position:absolute;
|
||||
inset:0; z-index:2;
|
||||
background: color:#000;
|
||||
border-radius:22px;
|
||||
inset:0;
|
||||
z-index:1;
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
padding:40px;
|
||||
color:#fff;
|
||||
transition: opacity .35s ease;
|
||||
}
|
||||
.advantage_slider_close img {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
z-index:-1;
|
||||
}
|
||||
.slider_close_img {
|
||||
object-position: 72%;
|
||||
}
|
||||
.slider_item_wrapper {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.slider_item_wrapper-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.advantage_slider_close-shadow {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.advantage_slider_close-shadow::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 15%, transparent 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
/* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */
|
||||
.advantage_slider_open {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
z-index:2;
|
||||
background-color: #fff;
|
||||
border-radius:30px;
|
||||
opacity:0;
|
||||
transform:translateY(16px);
|
||||
pointer-events:none;
|
||||
transition:opacity .35s ease, transform .35s ease;
|
||||
padding:28px 22px;
|
||||
padding:40px;
|
||||
display:flex;
|
||||
}
|
||||
.slider_item_inner{ display:flex; flex-direction:column; justify-content:space-between; width:100%; }
|
||||
|
||||
/* Активная карточка */
|
||||
.advantage_slider_item.active .advantage_slider_open{
|
||||
opacity:1; transform:translateY(0); pointer-events:auto;
|
||||
.slider_item_inner {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-between;
|
||||
width:100%;
|
||||
}
|
||||
.advantage_slider_item.active .slider_item_inner-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.advantage_slider_item.active .slider_item_title-reverse {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #939393;
|
||||
}
|
||||
/* Активная карточка */
|
||||
.advantage_slider_item.active .advantage_slider_open {
|
||||
opacity:1;
|
||||
transform:translateY(0);
|
||||
pointer-events:auto;
|
||||
}
|
||||
.advantage_slider_item.active .advantage_slider_close {
|
||||
opacity:0;
|
||||
}
|
||||
.advantage_slider_item.active .advantage_slider_close{ opacity:0; }
|
||||
|
||||
/* простые стили текста */
|
||||
.slider_item_index{
|
||||
width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
|
||||
border:1px solid currentColor; margin-bottom:12px; font-weight:700;
|
||||
.slider_item_index {
|
||||
margin: 0;
|
||||
width:72px;
|
||||
height:72px;
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-weight:500;
|
||||
color: #fff;
|
||||
border:1px solid #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.slider_item_title{ font-size:18px; line-height:1.3; }
|
||||
.item_inner_text{ font-size:14px; line-height:1.5; }
|
||||
.slider_item_index-reverse {
|
||||
color: #393939;
|
||||
border: 1px solid #939393;
|
||||
}
|
||||
.slider_item_title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.slider_item_title-reverse {
|
||||
color: #fff;
|
||||
z-index: 20;
|
||||
}
|
||||
.item_inner_text {
|
||||
}
|
||||
.advantage_slider_item.active .slider_item_index {
|
||||
border:1px solid #939393;
|
||||
color: #393939;
|
||||
}
|
||||
.advantage_slider_item.active .item_inner_text {
|
||||
color: #939393;
|
||||
font-size: 18px;
|
||||
}
|
||||
.advantage_slider_item.active .slider_item_title-reverse {
|
||||
color: #393939;
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.advantage_slider_item.active .slider_item_title {
|
||||
color: #393939;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid #939393;
|
||||
}
|
||||
.advantage_slider_item.active {
|
||||
border: 1px solid rgba(57, 57, 57, 0.5);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------OUR-SERVICES-------------------------------------------------------------------------------------- */
|
||||
|
||||
.our-services {
|
||||
}
|
||||
.our-services_heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.our-services_heading_title {
|
||||
margin: 0;
|
||||
font-size: 74px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.our-services_heading_text {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.our-services_row {
|
||||
}
|
||||
.our-services_row_items {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
height: 444px;
|
||||
}
|
||||
.our-services_row_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 33px;
|
||||
padding: 40px;
|
||||
}
|
||||
.our-services_item_01 {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.item_link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
border: 1px solid #393939;
|
||||
padding: 10px;
|
||||
border-radius: 16px;
|
||||
height: 29px;
|
||||
}
|
||||
.our-services_item_01 svg {
|
||||
margin: 0;
|
||||
}
|
||||
.our-services_item_title {
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
width: 80%;
|
||||
}
|
||||
.our-services_item_bottom {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.our-services_bottom_index {
|
||||
margin: 0;
|
||||
font-size: 158px;
|
||||
}
|
||||
.our-services_bottom_right {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
height: 29px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.our-services_item_bottom svg {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #393939;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
height: 29px;
|
||||
width: 29px;
|
||||
}
|
||||
Reference in New Issue
Block a user