figma_003
This commit is contained in:
152
index.html
152
index.html
@@ -373,6 +373,7 @@
|
|||||||
</section>
|
</section>
|
||||||
<section class="advantage_slider">
|
<section class="advantage_slider">
|
||||||
<div class="advantage_slider_items">
|
<div class="advantage_slider_items">
|
||||||
|
<!-- 1 -->
|
||||||
<div class="advantage_slider_item">
|
<div class="advantage_slider_item">
|
||||||
<!-- CLOSE -->
|
<!-- CLOSE -->
|
||||||
<div class="advantage_slider_close">
|
<div class="advantage_slider_close">
|
||||||
@@ -387,16 +388,161 @@
|
|||||||
<div class="slider_item_inner">
|
<div class="slider_item_inner">
|
||||||
<div class="slider_item_index">01</div>
|
<div class="slider_item_index">01</div>
|
||||||
<p class="item_inner_text">
|
<p class="item_inner_text">
|
||||||
Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент…
|
Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент и наращиваем ссылочный профиль, чтобы повысить видимость в поисковой выдаче и привлечь целевых посетителей. Регулярно анализируем результаты и корректируем стратегию для стабильного роста.
|
||||||
</p>
|
</p>
|
||||||
<div class="slider_item_title">Отправляем в космос позиции вашего сайта</div>
|
<div class="slider_item_title">Отправляем в космос позиции вашего сайта</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 2 -->
|
||||||
<!-- ещё карточки… -->
|
<div class="advantage_slider_item advantage_slider_item-shadow">
|
||||||
|
<!-- CLOSE -->
|
||||||
|
<div class="advantage_slider_close advantage_slider_close-shadow">
|
||||||
|
<img class="slider_close_shadow" src="/images/advantage/2.jpg" alt="">
|
||||||
|
<div class="slider_item_wrapper slider_item_wrapper-reverse">
|
||||||
|
<div class="slider_item_index slider_item_index-reverse">02</div>
|
||||||
|
<div class="slider_item_title slider_item_title-reverse">Сроки продвижения всего от 1 дня! </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- OPEN -->
|
||||||
|
<div class="advantage_slider_open">
|
||||||
|
<div class="slider_item_inner slider_item_inner-reverse">
|
||||||
|
<div class="slider_item_index">02</div>
|
||||||
|
<p class="item_inner_text">
|
||||||
|
Мы выводим сайты в топ поисковой выдачи за счет комплексной оптимизации, качественного контента и естественного ссылочного профиля. Постоянно отслеживаем позиции и адаптируем стратегию для максимальной эффективности.
|
||||||
|
</p>
|
||||||
|
<div class="slider_item_title-reverse">Сроки продвижения всего от 1 дня! </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 3 -->
|
||||||
|
<div class="advantage_slider_item">
|
||||||
|
<!-- CLOSE -->
|
||||||
|
<div class="advantage_slider_close">
|
||||||
|
<img class="slider_close_img" src="/images/advantage/3.jpg" alt="">
|
||||||
|
<div class="slider_item_wrapper">
|
||||||
|
<div class="slider_item_index">03</div>
|
||||||
|
<div class="slider_item_title">Работаем с абсолютно любой тематикой</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- OPEN -->
|
||||||
|
<div class="advantage_slider_open">
|
||||||
|
<div class="slider_item_inner">
|
||||||
|
<div class="slider_item_index">03</div>
|
||||||
|
<p class="item_inner_text">
|
||||||
|
Комплексно продвигаем сайты в поисковых системах: от технической оптимизации до создания полезного контента и естественного ссылочного роста. Постоянно анализируем эффективность и адаптируем стратегию для достижения ваших бизнес-целей.
|
||||||
|
</p>
|
||||||
|
<div class="slider_item_title">Работаем с абсолютно любой тематикой</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="our-services">
|
||||||
|
<div class="our-services_heading">
|
||||||
|
<div class="our-services_heading_title">
|
||||||
|
Наши услуги
|
||||||
|
</div>
|
||||||
|
<div class="our-services_heading_text">
|
||||||
|
Услуги, которые ускоряют рост вашего бизнеса
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="our-services_row">
|
||||||
|
<div class="our-services_row_items">
|
||||||
|
<!-- 1 -->
|
||||||
|
<div class="our-services_row_item">
|
||||||
|
<div class="our-services_item_01">
|
||||||
|
<div class="item_link">Топовые позиции</div>
|
||||||
|
<svg width="50" height="52" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M49.7643 41.1139L49.8762 1.07868L10.7684 0.7563C10.3613 0.697551 9.94652 0.729037 9.55229 0.848629C9.15807 0.968222 8.79354 1.17313 8.48339 1.44948C8.17325 1.72582 7.92473 2.06716 7.75465 2.45037C7.58458 2.83359 7.49692 3.24974 7.49761 3.67065C7.4983 4.09156 7.58733 4.50741 7.75867 4.89004C7.93 5.27267 8.17965 5.61314 8.4907 5.88842C8.80175 6.16369 9.16695 6.36734 9.56157 6.48557C9.95619 6.6038 10.371 6.63386 10.778 6.5737L40.0832 6.86209L1.04707 46.389C0.505879 46.937 0.19951 47.6826 0.195355 48.4618C0.191201 49.2411 0.489602 49.9901 1.02492 50.5441C1.56024 51.0981 2.28863 51.4117 3.04983 51.416C3.81104 51.4202 4.54272 51.1148 5.08391 50.5668L44.1201 11.0399L44.0819 41.0406C44.0804 41.8203 44.3816 42.5686 44.9191 43.121C45.4567 43.6734 46.1865 43.9846 46.9482 43.9861C47.7098 43.9876 48.4409 43.6793 48.9805 43.129C49.5201 42.5788 49.824 41.8316 49.8255 41.0519L49.7643 41.1139Z" fill="url(#paint0_linear_491_676)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_491_676" x1="0.195313" y1="51.5493" x2="50.0602" y2="0.853333" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#434343"/>
|
||||||
|
<stop offset="1" stop-color="#4258BE"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="our-services_item_title">
|
||||||
|
SEO продвижение
|
||||||
|
</div>
|
||||||
|
<div class="our-services_item_bottom">
|
||||||
|
<div class="our-services_bottom_index">01</div>
|
||||||
|
<div class="our-services_bottom_right">
|
||||||
|
<div class="item_link">
|
||||||
|
Рост бизнеса
|
||||||
|
</div>
|
||||||
|
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20.125 19.0645H19.2266V4.50977C19.2266 4.3668 19.1698 4.22968 19.0687 4.12859C18.9676 4.0275 18.8305 3.9707 18.6875 3.9707H13.6562C13.5133 3.9707 13.3762 4.0275 13.2751 4.12859C13.174 4.22968 13.1172 4.3668 13.1172 4.50977V8.2832H8.625C8.48203 8.2832 8.34492 8.34 8.24383 8.44109C8.14273 8.54218 8.08594 8.6793 8.08594 8.82227V12.5957H4.3125C4.16953 12.5957 4.03242 12.6525 3.93133 12.7536C3.83023 12.8547 3.77344 12.9918 3.77344 13.1348V19.0645H2.875C2.73203 19.0645 2.59492 19.1212 2.49383 19.2223C2.39273 19.3234 2.33594 19.4605 2.33594 19.6035C2.33594 19.7465 2.39273 19.8836 2.49383 19.9847C2.59492 20.0858 2.73203 20.1426 2.875 20.1426H20.125C20.268 20.1426 20.4051 20.0858 20.5062 19.9847C20.6073 19.8836 20.6641 19.7465 20.6641 19.6035C20.6641 19.4605 20.6073 19.3234 20.5062 19.2223C20.4051 19.1212 20.268 19.0645 20.125 19.0645ZM14.1953 5.04883H18.1484V19.0645H14.1953V5.04883ZM9.16406 9.36133H13.1172V19.0645H9.16406V9.36133ZM4.85156 13.6738H8.08594V19.0645H4.85156V13.6738Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2 -->
|
||||||
|
<div class="our-services_row_item">
|
||||||
|
<div class="our-services_item_01">
|
||||||
|
<div class="item_link">Всё включено</div>
|
||||||
|
<svg width="50" height="52" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M49.7643 41.1139L49.8762 1.07868L10.7684 0.7563C10.3613 0.697551 9.94652 0.729037 9.55229 0.848629C9.15807 0.968222 8.79354 1.17313 8.48339 1.44948C8.17325 1.72582 7.92473 2.06716 7.75465 2.45037C7.58458 2.83359 7.49692 3.24974 7.49761 3.67065C7.4983 4.09156 7.58733 4.50741 7.75867 4.89004C7.93 5.27267 8.17965 5.61314 8.4907 5.88842C8.80175 6.16369 9.16695 6.36734 9.56157 6.48557C9.95619 6.6038 10.371 6.63386 10.778 6.5737L40.0832 6.86209L1.04707 46.389C0.505879 46.937 0.19951 47.6826 0.195355 48.4618C0.191201 49.2411 0.489602 49.9901 1.02492 50.5441C1.56024 51.0981 2.28863 51.4117 3.04983 51.416C3.81104 51.4202 4.54272 51.1148 5.08391 50.5668L44.1201 11.0399L44.0819 41.0406C44.0804 41.8203 44.3816 42.5686 44.9191 43.121C45.4567 43.6734 46.1865 43.9846 46.9482 43.9861C47.7098 43.9876 48.4409 43.6793 48.9805 43.129C49.5201 42.5788 49.824 41.8316 49.8255 41.0519L49.7643 41.1139Z" fill="url(#paint0_linear_491_676)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_491_676" x1="0.195313" y1="51.5493" x2="50.0602" y2="0.853333" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#434343"/>
|
||||||
|
<stop offset="1" stop-color="#4258BE"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="our-services_item_title">
|
||||||
|
Разработка сайтов
|
||||||
|
</div>
|
||||||
|
<div class="our-services_item_bottom">
|
||||||
|
<div class="our-services_bottom_index">02</div>
|
||||||
|
<div class="our-services_bottom_right">
|
||||||
|
<div class="item_link">
|
||||||
|
Качество
|
||||||
|
</div>
|
||||||
|
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M15.7969 7.16602C15.7976 6.14416 15.5394 5.13877 15.0463 4.24375C14.5532 3.34873 13.8413 2.59326 12.9772 2.0479C12.113 1.50254 11.1247 1.18507 10.1046 1.12514C9.08452 1.06521 8.06587 1.26478 7.14379 1.7052C6.22171 2.14563 5.42628 2.81254 4.83179 3.64367C4.23729 4.47481 3.86312 5.44304 3.74421 6.45796C3.6253 7.47288 3.76553 8.50138 4.15181 9.44742C4.53809 10.3935 5.15782 11.2262 5.95313 11.8678V17.291C5.9532 17.3629 5.97166 17.4336 6.00673 17.4964C6.0418 17.5591 6.09233 17.6119 6.15352 17.6496C6.21994 17.6911 6.29669 17.713 6.375 17.7129C6.4404 17.7129 6.50491 17.6978 6.56344 17.6686L9.75 16.0753L12.9373 17.6686C13.0016 17.7006 13.073 17.7156 13.1447 17.7122C13.2164 17.7089 13.2861 17.6873 13.3471 17.6495C13.4082 17.6116 13.4586 17.5589 13.4935 17.4962C13.5285 17.4334 13.5468 17.3628 13.5469 17.291V11.8678C14.2493 11.3019 14.816 10.5859 15.2054 9.77223C15.5948 8.95858 15.7969 8.06803 15.7969 7.16602ZM4.54688 7.16602C4.54688 6.13694 4.85203 5.13097 5.42376 4.27532C5.99549 3.41967 6.8081 2.75277 7.75885 2.35896C8.7096 1.96515 9.75577 1.86211 10.7651 2.06287C11.7744 2.26364 12.7015 2.75919 13.4292 3.48686C14.1568 4.21453 14.6524 5.14163 14.8531 6.15094C15.0539 7.16025 14.9509 8.20642 14.5571 9.15717C14.1632 10.1079 13.4964 10.9205 12.6407 11.4923C11.7851 12.064 10.7791 12.3691 9.75 12.3691C8.37056 12.3675 7.0481 11.8187 6.07268 10.8433C5.09727 9.86792 4.54855 8.54546 4.54688 7.16602ZM12.7031 16.6083L9.93773 15.2259C9.87922 15.1967 9.8147 15.1815 9.7493 15.1815C9.68389 15.1815 9.61938 15.1967 9.56086 15.2259L6.79688 16.6083V12.4395C7.69867 12.9461 8.71564 13.2122 9.75 13.2122C10.7844 13.2122 11.8013 12.9461 12.7031 12.4395V16.6083ZM9.75 10.9629C10.501 10.9629 11.235 10.7402 11.8594 10.323C12.4838 9.9058 12.9705 9.31281 13.2579 8.61902C13.5452 7.92523 13.6204 7.16181 13.4739 6.42529C13.3274 5.68877 12.9658 5.01223 12.4348 4.48123C11.9038 3.95022 11.2273 3.58861 10.4907 3.4421C9.75421 3.2956 8.99079 3.37079 8.297 3.65817C7.60321 3.94554 7.01022 4.4322 6.59301 5.05659C6.17581 5.68098 5.95313 6.41507 5.95313 7.16602C5.95424 8.17267 6.35463 9.13777 7.06644 9.84958C7.77825 10.5614 8.74335 10.9618 9.75 10.9629ZM9.75 4.2129C10.3341 4.2129 10.905 4.38609 11.3907 4.71059C11.8763 5.03508 12.2548 5.4963 12.4783 6.03591C12.7018 6.57552 12.7603 7.1693 12.6464 7.74215C12.5324 8.315 12.2512 8.84119 11.8382 9.2542C11.4252 9.6672 10.899 9.94846 10.3261 10.0624C9.75328 10.1763 9.1595 10.1179 8.61989 9.89435C8.08028 9.67084 7.61906 9.29233 7.29457 8.80669C6.97007 8.32105 6.79688 7.75009 6.79688 7.16602C6.79688 6.3828 7.10801 5.63167 7.66183 5.07785C8.21564 4.52403 8.96678 4.2129 9.75 4.2129Z" fill="#393939"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 3 -->
|
||||||
|
<div class="our-services_row_item">
|
||||||
|
<div class="our-services_item_01">
|
||||||
|
<div class="item_link">Гарантия качества</div>
|
||||||
|
<svg width="50" height="52" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M49.7643 41.1139L49.8762 1.07868L10.7684 0.7563C10.3613 0.697551 9.94652 0.729037 9.55229 0.848629C9.15807 0.968222 8.79354 1.17313 8.48339 1.44948C8.17325 1.72582 7.92473 2.06716 7.75465 2.45037C7.58458 2.83359 7.49692 3.24974 7.49761 3.67065C7.4983 4.09156 7.58733 4.50741 7.75867 4.89004C7.93 5.27267 8.17965 5.61314 8.4907 5.88842C8.80175 6.16369 9.16695 6.36734 9.56157 6.48557C9.95619 6.6038 10.371 6.63386 10.778 6.5737L40.0832 6.86209L1.04707 46.389C0.505879 46.937 0.19951 47.6826 0.195355 48.4618C0.191201 49.2411 0.489602 49.9901 1.02492 50.5441C1.56024 51.0981 2.28863 51.4117 3.04983 51.416C3.81104 51.4202 4.54272 51.1148 5.08391 50.5668L44.1201 11.0399L44.0819 41.0406C44.0804 41.8203 44.3816 42.5686 44.9191 43.121C45.4567 43.6734 46.1865 43.9846 46.9482 43.9861C47.7098 43.9876 48.4409 43.6793 48.9805 43.129C49.5201 42.5788 49.824 41.8316 49.8255 41.0519L49.7643 41.1139Z" fill="url(#paint0_linear_491_676)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_491_676" x1="0.195313" y1="51.5493" x2="50.0602" y2="0.853333" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#434343"/>
|
||||||
|
<stop offset="1" stop-color="#4258BE"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="our-services_item_title">
|
||||||
|
Интернет
|
||||||
|
магазины
|
||||||
|
</div>
|
||||||
|
<div class="our-services_item_bottom">
|
||||||
|
<div class="our-services_bottom_index">03</div>
|
||||||
|
<div class="our-services_bottom_right">
|
||||||
|
<div class="item_link">
|
||||||
|
Скорость
|
||||||
|
</div>
|
||||||
|
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6.24494 19.2465L8.61585 18.2777C8.40694 17.6547 8.22837 17.0206 8.08015 16.3754C7.93256 15.7301 7.82491 15.0759 7.75719 14.4127L6.50177 15.2522C6.41616 15.3142 6.35163 15.3851 6.30819 15.465C6.26474 15.5448 6.24334 15.6336 6.24398 15.7314L6.24494 19.2465ZM9.57994 18.1665H13.4133C13.7008 17.3928 13.9324 16.5466 14.1081 15.6279C14.2838 14.7091 14.3716 13.7524 14.3716 12.7577C14.3716 11.3112 14.1512 9.97945 13.7104 8.76237C13.2695 7.54529 12.5316 6.36973 11.4966 5.2357C10.4616 6.37101 9.72369 7.54688 9.28285 8.76333C8.84202 9.97977 8.6216 11.3115 8.6216 12.7586C8.6216 13.754 8.70945 14.7107 8.88514 15.6288C9.06084 16.5469 9.29244 17.3928 9.57994 18.1665ZM11.4966 12.8957C11.0922 12.8957 10.7517 12.757 10.475 12.4797C10.1977 12.2031 10.0591 11.8626 10.0591 11.4582C10.0591 11.0537 10.1977 10.7132 10.475 10.4366C10.7523 10.1599 11.0928 10.0213 11.4966 10.0207C11.9004 10.02 12.2409 10.1587 12.5182 10.4366C12.7955 10.7132 12.9341 11.0537 12.9341 11.4582C12.9341 11.8626 12.7955 12.2031 12.5182 12.4797C12.2409 12.7564 11.9004 12.895 11.4966 12.8957ZM16.7483 19.2465V15.7505C16.7483 15.6521 16.7272 15.5601 16.685 15.4745C16.6416 15.3883 16.5767 15.3142 16.4905 15.2522L15.236 14.4127C15.1683 15.0759 15.045 15.7946 14.8661 16.569C14.6872 17.3433 14.5243 17.9189 14.3774 18.2959L16.7483 19.2465ZM11.4966 3.9707C12.8197 5.14498 13.7893 6.46812 14.4051 7.94012C15.0217 9.41212 15.3299 11.0518 15.3299 12.8592C15.3299 12.9327 15.3331 13.0094 15.3395 13.0892C15.3459 13.1691 15.3427 13.2522 15.3299 13.3384L16.9926 14.4587C17.215 14.5973 17.3897 14.7826 17.5169 15.0145C17.644 15.2465 17.7076 15.4918 17.7076 15.7505V20.6543L13.8982 19.1248H9.07681L5.28564 20.6543V15.7323C5.28564 15.4742 5.34634 15.2289 5.46773 14.9963C5.58848 14.7644 5.76002 14.5791 5.98235 14.4405L7.66327 13.3192V12.8592C7.66327 11.0512 7.97153 9.41148 8.58806 7.94012C9.20395 6.46812 10.1735 5.14498 11.4966 3.9707Z" fill="#393939"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
268
style.css
268
style.css
@@ -653,46 +653,256 @@ html, body, * {
|
|||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
|
/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
|
||||||
.advantage_slider { padding: 40px; display:flex; justify-content:center; }
|
.advantage_slider {
|
||||||
.advantage_slider_items { display:flex; gap:28px; }
|
margin: 0;
|
||||||
|
padding-top: 60px;
|
||||||
.advantage_slider_item{
|
padding-bottom: 60px;
|
||||||
position:relative; width:280px; height:420px; border-radius:22px; overflow:hidden; cursor:pointer;
|
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 */
|
/* Слой CLOSE */
|
||||||
.advantage_slider_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{
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
inset:0; z-index:2;
|
inset:0;
|
||||||
background: color:#000;
|
z-index:1;
|
||||||
border-radius:22px;
|
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;
|
opacity:0;
|
||||||
transform:translateY(16px);
|
transform:translateY(16px);
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
transition:opacity .35s ease, transform .35s ease;
|
transition:opacity .35s ease, transform .35s ease;
|
||||||
padding:28px 22px;
|
padding:40px;
|
||||||
display:flex;
|
display:flex;
|
||||||
}
|
}
|
||||||
.slider_item_inner{ display:flex; flex-direction:column; justify-content:space-between; width:100%; }
|
.slider_item_inner {
|
||||||
|
display:flex;
|
||||||
/* Активная карточка */
|
flex-direction:column;
|
||||||
.advantage_slider_item.active .advantage_slider_open{
|
justify-content:space-between;
|
||||||
opacity:1; transform:translateY(0); pointer-events:auto;
|
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{
|
.slider_item_index {
|
||||||
width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
|
margin: 0;
|
||||||
border:1px solid currentColor; margin-bottom:12px; font-weight:700;
|
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_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;
|
||||||
}
|
}
|
||||||
.slider_item_title{ font-size:18px; line-height:1.3; }
|
|
||||||
.item_inner_text{ font-size:14px; line-height:1.5; }
|
|
||||||
Reference in New Issue
Block a user