Коллекции украшений со смыслом, которые подчеркнут вашу индивидуальность



Интерьерные и декоративные арт-объекты ручной работы с природными камнями

<style> @media (max-width: 480px) { .slide-logo { font-size: 15vw; } .slide-description { text-align: center; } .swiper-slide { background-position: center; } } </style>
Это в zero в блок кода
<style> .swiper-container { width: 100vw; height: 100vh; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; } .slide-description{ display: block; text-align: left; opacity: 0.7; position: relative; } .slide-logo{ display: block; font-size: 10vw; letter-spacing: 55px; } .bottom-label{ position: absolute; bottom: 5%; left: 25%; width: 50%; font-size: 22px; color: white; } @media(max-width: 1000px){ .slide-logo{ font-size: 4vw; letter-spacing: 6vw; } .slide-description{ position: absolute; } } #rec310445406{ height: 100vh; } </style>
<script type="text/javascript"> let elem = document.createElement("link"); elem.setAttribute("rel", "stylesheet"); elem.setAttribute("href", "https://unpkg.com/swiper/swiper-bundle.min.css"); </script>
<style> @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap'); </style>
<div class="swiper-container swiper-fade swiper-initialized swiper-vertical swiper-pointer-events"> <div class="swiper-wrapper" id="swiper-wrapper-46cae1a582da29b9" aria-live="polite" style="transition-duration: 0ms;"> <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="background-image: url(&quot;https://thumb.tildacdn.com/tild3532-6534-4666-a135-316466623235/-/format/webp/1.jpg&quot;); color: white; font-family: Jost, Arial, sans-serif; background-size: cover; height: 741px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="1 / 2"> <div class="slide-wrapper"> <div class="slide-logo" style=" line-height: 1; font-weight: 400; background-position: center center; border-color: transparent; border-style: solid; "> INCRUA </div> <br> <div class="slide-description" style="float: right; right: 70px"> <hr style="border: none; height: 1px; background: white"> <p style="display: block; margin: 0 auto; width: 240px; "> Коллекции украшений со смыслом, которые подчеркнут вашу индивидуальность </p> </div> <div class="bottom-label"> <a style="display: block; margin-bottom: 5px; color: white;">Прикоснитесь к прекрасному</a> <img src="https://thumb.tildacdn.com/tild3862-6633-4839-a534-383965386431/-/format/webp/right.png"> </div> </div> </div> <div class="swiper-slide swiper-slide-next" style="background-image: url(&quot;https://thumb.tildacdn.com/tild3134-3762-4166-b136-303364623865/-/format/webp/2.jpg&quot;); color: white; font-family: Jost, Arial, sans-serif; background-size: cover; height: 741px; opacity: 0; transform: translate3d(0px, -741px, 0px); transition-duration: 0ms;" role="group" aria-label="2 / 2"> <div class="slide-wrapper"> <div class="slide-logo" style=" line-height: 1; font-weight: 400; background-position: center center; border-color: transparent; border-style: solid; "> INCRUA </div> <br> <div class="slide-description" style="float: right; right: 70px"> <hr style="border: none; height: 1px; background: white"> <p style="display: block; margin: 0 auto; width: 240px; "> Интерьерные и декоративные арт-объекты ручной работы с природными камнями </p> </div> <div class="bottom-label"> <a style="display: block; margin-bottom: 5px; color: white;">Прикоснитесь к прекрасному</a> <img src="https://thumb.tildacdn.com/tild3862-6633-4839-a534-383965386431/-/format/webp/right.png"> </div> </div> </div> </div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
Это в т123 под zero блоком
<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js';
  var swiper = new Swiper('.swiper-container', {
    spaceBetween: 0,
    slidesPerView: '1',
    effect: 'fade',
    speed: 850,
    mousewheelSensitivity: 1,
    direction: 'vertical',
    mousewheel: true,
    touchReleaseOnEdges: true
  });
  swiper.on('slideNextTransitionEnd', function() {
    swiper.params.mousewheel.releaseOnEdges = true;
    swiper.params.touchReleaseOnEdges = true;
  });
</script>
Made on
Tilda