API tools faq
paste
Advertisement
artemsemkin

Untitled

artemsemkin
Feb 26th, 2023
857
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.35 KB | None | 0 0
raw download clone embed print report
  1. <!-- section SLIDER PROJECTS FULLSCREEN -->
  2. <section class="section section-fullheight section-slider-projects-fullscreen bg-dark-1" data-arts-os-animation="true" data-arts-theme-text="light">
  3.     <div class="section-fullheight__inner section-fullheight__inner_mobile">
  4.         <div class="slider slider-projects-fullscreen js-slider-projects-fullscreen" data-arts-hover-class="hover-zoom">
  5.             <!-- slider CONTENT -->
  6.             <div class="container">
  7.                 <div class="row justify-content-center align-items-center">
  8.                     <div class="col-md-10">
  9.                         <div class="slider-projects-fullscreen__content swiper-container js-slider-projects-fullscreen__content pointer-events-none" data-auto-height="true" data-transition="text" data-transition-direction="horizontal">
  10.                             <div class="swiper-wrapper">
  11.                                 <!-- thumb -->
  12.                                 <div class="swiper-slide pt-medium pb-medium">
  13.                                     <div class="d-inline-block slider__subheading js-arts-split-text arts-split-text pointer-events-auto mb-3" data-arts-split-text="lines,words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="words">
  14.                                         <ul class="post-meta post-meta_mini">
  15.                                             <li><a href="#">Identity</a>
  16.                                                 <div class="post-meta__divider"></div>
  17.                                             </li>
  18.                                             <li><a href="#">2021</a></li>
  19.                                         </ul>
  20.                                     </div>
  21.                                     <div class="w-100"></div>
  22.                                     <h2 class="h1 slider__heading js-arts-split-text arts-split-text my-0" data-arts-split-text="lines, chars" data-arts-split-text-overflow-wrap="chars" data-arts-split-text-set="chars" data-arts-split-text-set-direction="x" data-arts-split-text-set-distance="100%">Errica Fashion Store</h2>
  23.                                     <div class="w-100"></div>
  24.                                     <div class="d-inline-block slider__wrapper-button mt-4 pointer-events-auto"><a class="button button_icon button_bordered bg-white-1" href="013-portfolio-details-masthead-boxed-horizontal.html" data-arts-hover="trigger"><span class="button__label button__label-normal"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span><span class="button__label button__label-hover"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span></a>
  25.                                     </div>
  26.                                 </div>
  27.                                 <!-- thumb -->
  28.                                 <div class="swiper-slide pt-medium pb-medium">
  29.                                     <div class="d-inline-block slider__subheading js-arts-split-text arts-split-text pointer-events-auto mb-3" data-arts-split-text="lines,words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="words">
  30.                                         <ul class="post-meta post-meta_mini">
  31.                                             <li><a href="#">Interior</a>
  32.                                                 <div class="post-meta__divider"></div>
  33.                                             </li>
  34.                                             <li><a href="#">2019</a></li>
  35.                                         </ul>
  36.                                     </div>
  37.                                     <div class="w-100"></div>
  38.                                     <h2 class="h1 slider__heading js-arts-split-text arts-split-text my-0" data-arts-split-text="lines, chars" data-arts-split-text-overflow-wrap="chars" data-arts-split-text-set="chars" data-arts-split-text-set-direction="x" data-arts-split-text-set-distance="100%">Winter Villa</h2>
  39.                                     <div class="w-100"></div>
  40.                                     <div class="d-inline-block slider__wrapper-button mt-4 pointer-events-auto"><a class="button button_icon button_bordered bg-white-1" href="017-portfolio-details-masthead-fullwidth-horizontal.html" data-arts-hover="trigger"><span class="button__label button__label-normal"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span><span class="button__label button__label-hover"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span></a>
  41.                                     </div>
  42.                                 </div>
  43.                                 <!-- thumb -->
  44.                                 <div class="swiper-slide pt-medium pb-medium">
  45.                                     <div class="d-inline-block slider__subheading js-arts-split-text arts-split-text pointer-events-auto mb-3" data-arts-split-text="lines,words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="words">
  46.                                         <ul class="post-meta post-meta_mini">
  47.                                             <li><a href="#">Concept</a>
  48.                                                 <div class="post-meta__divider"></div>
  49.                                             </li>
  50.                                             <li><a href="#">2020</a></li>
  51.                                         </ul>
  52.                                     </div>
  53.                                     <div class="w-100"></div>
  54.                                     <h2 class="h1 slider__heading js-arts-split-text arts-split-text my-0" data-arts-split-text="lines, chars" data-arts-split-text-overflow-wrap="chars" data-arts-split-text-set="chars" data-arts-split-text-set-direction="x" data-arts-split-text-set-distance="100%">Zero Audio Speaker</h2>
  55.                                     <div class="w-100"></div>
  56.                                     <div class="d-inline-block slider__wrapper-button mt-4 pointer-events-auto"><a class="button button_icon button_bordered bg-white-1" href="014-portfolio-details-masthead-boxed-horizontal.html" data-arts-hover="trigger"><span class="button__label button__label-normal"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span><span class="button__label button__label-hover"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span></a>
  57.                                     </div>
  58.                                 </div>
  59.                                 <!-- thumb -->
  60.                                 <div class="swiper-slide pt-medium pb-medium">
  61.                                     <div class="d-inline-block slider__subheading js-arts-split-text arts-split-text pointer-events-auto mb-3" data-arts-split-text="lines,words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="words">
  62.                                         <ul class="post-meta post-meta_mini">
  63.                                             <li><a href="#">Identity</a>
  64.                                                 <div class="post-meta__divider"></div>
  65.                                             </li>
  66.                                             <li><a href="#">2020</a></li>
  67.                                         </ul>
  68.                                     </div>
  69.                                     <div class="w-100"></div>
  70.                                     <h2 class="h1 slider__heading js-arts-split-text arts-split-text my-0" data-arts-split-text="lines, chars" data-arts-split-text-overflow-wrap="chars" data-arts-split-text-set="chars" data-arts-split-text-set-direction="x" data-arts-split-text-set-distance="100%">Arte</h2>
  71.                                     <div class="w-100"></div>
  72.                                     <div class="d-inline-block slider__wrapper-button mt-4 pointer-events-auto"><a class="button button_icon button_bordered bg-white-1" href="023-portfolio-details-masthead-fullwidth-horizontal.html" data-arts-hover="trigger"><span class="button__label button__label-normal"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span><span class="button__label button__label-hover"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span></a>
  73.                                     </div>
  74.                                 </div>
  75.                                 <!-- thumb -->
  76.                                 <div class="swiper-slide pt-medium pb-medium">
  77.                                     <div class="d-inline-block slider__subheading js-arts-split-text arts-split-text pointer-events-auto mb-3" data-arts-split-text="lines,words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="words">
  78.                                         <ul class="post-meta post-meta_mini">
  79.                                             <li><a href="#">UI / UX</a>
  80.                                                 <div class="post-meta__divider"></div>
  81.                                             </li>
  82.                                             <li><a href="#">2021</a></li>
  83.                                         </ul>
  84.                                     </div>
  85.                                     <div class="w-100"></div>
  86.                                     <h2 class="h1 slider__heading js-arts-split-text arts-split-text my-0" data-arts-split-text="lines, chars" data-arts-split-text-overflow-wrap="chars" data-arts-split-text-set="chars" data-arts-split-text-set-direction="x" data-arts-split-text-set-distance="100%">Coffee &amp; Milk Website</h2>
  87.                                     <div class="w-100"></div>
  88.                                     <div class="d-inline-block slider__wrapper-button mt-4 pointer-events-auto"><a class="button button_icon button_bordered bg-white-1" href="019-portfolio-details-masthead-boxed-horizontal.html" data-arts-hover="trigger"><span class="button__label button__label-normal"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span><span class="button__label button__label-hover"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span></a>
  89.                                     </div>
  90.                                 </div>
  91.                                 <!-- thumb -->
  92.                                 <div class="swiper-slide pt-medium pb-medium">
  93.                                     <div class="d-inline-block slider__subheading js-arts-split-text arts-split-text pointer-events-auto mb-3" data-arts-split-text="lines,words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="words">
  94.                                         <ul class="post-meta post-meta_mini">
  95.                                             <li><a href="#">UI / UX</a>
  96.                                                 <div class="post-meta__divider"></div>
  97.                                             </li>
  98.                                             <li><a href="#">2020</a></li>
  99.                                         </ul>
  100.                                     </div>
  101.                                     <div class="w-100"></div>
  102.                                     <h2 class="h1 slider__heading js-arts-split-text arts-split-text my-0" data-arts-split-text="lines, chars" data-arts-split-text-overflow-wrap="chars" data-arts-split-text-set="chars" data-arts-split-text-set-direction="x" data-arts-split-text-set-distance="100%">Modern Furniture Shop</h2>
  103.                                     <div class="w-100"></div>
  104.                                     <div class="d-inline-block slider__wrapper-button mt-4 pointer-events-auto"><a class="button button_icon button_bordered bg-white-1" href="020-portfolio-details-masthead-fullwidth-horizontal.html" data-arts-hover="trigger"><span class="button__label button__label-normal"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span><span class="button__label button__label-hover"><span class="button__title">Explore Project</span><span class="button__icon button__icon_after knz-arrow-right"></span></span></a>
  105.                                     </div>
  106.                                 </div>
  107.                             </div>
  108.                         </div>
  109.                     </div>
  110.                     <div class="col-md-2 text-md-end z-50">
  111.                         <!-- slider ARROWS -->
  112.                         <div class="slider__wrapper-arrows slider__wrapper-arrows_right d-inline-flex" data-arts-os-animation="true" data-arts-os-animation-name="animateJump" data-arts-os-animation-params="{x: 30, y: 0}">
  113.                             <div class="slider__arrow material-icons js-slider__arrow-prev" data-arts-cursor="data-arts-cursor" data-arts-cursor-scale="1.7" data-arts-cursor-magnetic="data-arts-cursor-magnetic" data-arts-cursor-hide-native="true">keyboard_arrow_left</div>
  114.                             <div class="slider__arrow material-icons js-slider__arrow-next" data-arts-cursor="data-arts-cursor" data-arts-cursor-scale="1.7" data-arts-cursor-magnetic="data-arts-cursor-magnetic" data-arts-cursor-hide-native="true">keyboard_arrow_right</div>
  115.                         </div>
  116.                         <!-- - slider ARROWS -->
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.             <!-- - slider CONTENT -->
  121.             <!-- slider IMAGES -->
  122.             <div class="slider-projects-fullscreen__images swiper-container js-slider-projects-fullscreen__images" data-direction="horizontal" data-autoplay-enabled="true" data-autoplay-delay="6000" data-speed="1000" data-keyboard-enabled="true" data-drag-mouse="true" data-drag-cursor="true" data-drag-label="Drag" data-drag-hide-cursor="true" data-drag-class="slider-projects-fullscreen__images_scale-up">
  123.                 <div class="swiper-wrapper swiper-wrapper_transition">
  124.                     <!-- thumb -->
  125.                     <div class="swiper-slide overflow">
  126.                         <div class="w-100 h-100" data-swiper-parallax-x="30%">
  127.                             <div class="mask-reveal w-100 h-100" data-arts-os-animation="true" data-arts-os-animation-name="animateMask" data-arts-os-animation-params="{direction: 'right'}">
  128.                                 <div class="mask-reveal__layer mask-reveal__layer-1">
  129.                                     <div class="mask-reveal__layer mask-reveal__layer-2">
  130.                                         <div class="hover-zoom__inner"><img class="swiper-lazy of-cover hover-zoom__zoom" src="#" data-src="img/assets/projects/project1/img-cover-1.jpg" width="1920" height="1280" alt=""/>
  131.                                         </div>
  132.                                     </div>
  133.                                 </div>
  134.                             </div>
  135.                         </div>
  136.                     </div>
  137.                     <!-- thumb -->
  138.                     <div class="swiper-slide overflow">
  139.                         <div class="w-100 h-100" data-swiper-parallax-x="30%">
  140.                             <div class="mask-reveal w-100 h-100">
  141.                                 <div class="mask-reveal__layer mask-reveal__layer-1">
  142.                                     <div class="mask-reveal__layer mask-reveal__layer-2">
  143.                                         <div class="hover-zoom__inner"><img class="swiper-lazy of-cover hover-zoom__zoom" src="#" data-src="img/assets/projects/project5/img-cover-5.jpg" width="1920" height="1280" alt=""/>
  144.                                         </div>
  145.                                     </div>
  146.                                 </div>
  147.                             </div>
  148.                         </div>
  149.                     </div>
  150.                     <!-- thumb -->
  151.                     <div class="swiper-slide overflow">
  152.                         <div class="w-100 h-100" data-swiper-parallax-x="30%">
  153.                             <div class="mask-reveal w-100 h-100">
  154.                                 <div class="mask-reveal__layer mask-reveal__layer-1">
  155.                                     <div class="mask-reveal__layer mask-reveal__layer-2">
  156.                                         <div class="hover-zoom__inner"><img class="swiper-lazy of-cover hover-zoom__zoom" src="#" data-src="img/assets/projects/project2/img-cover-2.jpg" width="1920" height="1280" alt=""/>
  157.                                         </div>
  158.                                     </div>
  159.                                 </div>
  160.                             </div>
  161.                         </div>
  162.                     </div>
  163.                     <!-- thumb -->
  164.                     <div class="swiper-slide overflow">
  165.                         <div class="w-100 h-100" data-swiper-parallax-x="30%">
  166.                             <div class="mask-reveal w-100 h-100">
  167.                                 <div class="mask-reveal__layer mask-reveal__layer-1">
  168.                                     <div class="mask-reveal__layer mask-reveal__layer-2">
  169.                                         <div class="hover-zoom__inner"><img class="swiper-lazy of-cover hover-zoom__zoom" src="#" data-src="img/assets/projects/project11/img-cover-11.jpg" width="1920" height="1280" alt=""/>
  170.                                         </div>
  171.                                     </div>
  172.                                 </div>
  173.                             </div>
  174.                         </div>
  175.                     </div>
  176.                     <!-- thumb -->
  177.                     <div class="swiper-slide overflow">
  178.                         <div class="w-100 h-100" data-swiper-parallax-x="30%">
  179.                             <div class="mask-reveal w-100 h-100">
  180.                                 <div class="mask-reveal__layer mask-reveal__layer-1">
  181.                                     <div class="mask-reveal__layer mask-reveal__layer-2">
  182.                                         <div class="hover-zoom__inner"><img class="swiper-lazy of-cover hover-zoom__zoom" src="#" data-src="img/assets/projects/project7/img-cover-7.jpg" width="1920" height="1280" alt=""/>
  183.                                         </div>
  184.                                     </div>
  185.                                 </div>
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                     <!-- thumb -->
  190.                     <div class="swiper-slide overflow">
  191.                         <div class="w-100 h-100" data-swiper-parallax-x="30%">
  192.                             <div class="mask-reveal w-100 h-100">
  193.                                 <div class="mask-reveal__layer mask-reveal__layer-1">
  194.                                     <div class="mask-reveal__layer mask-reveal__layer-2">
  195.                                         <div class="hover-zoom__inner"><img class="swiper-lazy of-cover hover-zoom__zoom" src="#" data-src="img/assets/projects/project8/img-cover-8.jpg" width="1920" height="1280" alt=""/>
  196.                                         </div>
  197.                                     </div>
  198.                                 </div>
  199.                             </div>
  200.                         </div>
  201.                     </div>
  202.                 </div>
  203.                 <!-- overlay-->
  204.                 <div class="slider__overlay overlay overlay_dark-70"></div>
  205.                 <!-- - overlay -->
  206.             </div>
  207.             <!-- - slider IMAGES -->
  208.             <!-- slider THUMBS -->
  209.             <div class="slider-projects-fullscreen__wrapper-thumbs d-none d-lg-flex" data-arts-os-animation="true" data-arts-os-animation-name="animateJump">
  210.                 <div class="swiper-container js-slider-projects-fullscreen__thumbs slider-projects-fullscreen__thumbs">
  211.                     <div class="swiper-wrapper">
  212.                         <!-- thumb-->
  213.                         <div class="swiper-slide slider__thumb js-arts-cursor-highlight">
  214.                             <div class="slider__thumb-content">
  215.                                 <div class="slider__thumb-heading h5 block-counter">Errica Fashion Store<span class="block-counter__counter">01</span></div>
  216.                             </div>
  217.                         </div>
  218.                         <!-- thumb-->
  219.                         <div class="swiper-slide slider__thumb js-arts-cursor-highlight">
  220.                             <div class="slider__thumb-content">
  221.                                 <div class="slider__thumb-heading h5 block-counter">Winter Villa<span class="block-counter__counter">02</span></div>
  222.                             </div>
  223.                         </div>
  224.                         <!-- thumb-->
  225.                         <div class="swiper-slide slider__thumb js-arts-cursor-highlight">
  226.                             <div class="slider__thumb-content">
  227.                                 <div class="slider__thumb-heading h5 block-counter">Zero Audio Speaker<span class="block-counter__counter">03</span></div>
  228.                             </div>
  229.                         </div>
  230.                         <!-- thumb-->
  231.                         <div class="swiper-slide slider__thumb js-arts-cursor-highlight">
  232.                             <div class="slider__thumb-content">
  233.                                 <div class="slider__thumb-heading h5 block-counter">Arte<span class="block-counter__counter">04</span></div>
  234.                             </div>
  235.                         </div>
  236.                         <!-- thumb-->
  237.                         <div class="swiper-slide slider__thumb js-arts-cursor-highlight">
  238.                             <div class="slider__thumb-content">
  239.                                 <div class="slider__thumb-heading h5 block-counter">Coffee &amp; Milk Website<span class="block-counter__counter">05</span></div>
  240.                             </div>
  241.                         </div>
  242.                         <!-- thumb-->
  243.                         <div class="swiper-slide slider__thumb js-arts-cursor-highlight">
  244.                             <div class="slider__thumb-content">
  245.                                 <div class="slider__thumb-heading h5 block-counter">Modern Furniture Shop<span class="block-counter__counter">06</span></div>
  246.                             </div>
  247.                         </div>
  248.                     </div>
  249.                 </div>
  250.                 <div class="slider-projects-fullscreen__wrapper-button"><a class="button button_solid slider-projects-fullscreen__button bg-dark-3 js-button-circles" href="030-portfolio-list-backgrounds.html" data-arts-cursor="true" data-arts-cursor-hide-native="true" data-arts-cursor-label="All Works" data-arts-cursor-scale="2" data-arts-cursor-color="#fff" data-arts-cursor-background-color="#ed4830">
  251.                         <div class="button-circles block-counter">
  252.                             <div class="button-circles__circle">
  253.                                 <svg class="svg-circle" viewBox="0 0 60 60">
  254.                                     <circle class="circle" cx="30" cy="30" r="29" fill="none"></circle>
  255.                                 </svg>
  256.                             </div>
  257.                             <div class="button-circles__circle">
  258.                                 <svg class="svg-circle" viewBox="0 0 60 60">
  259.                                     <circle class="circle" cx="30" cy="30" r="29" fill="none"></circle>
  260.                                 </svg>
  261.                             </div>
  262.                             <div class="button-circles__circle">
  263.                                 <svg class="svg-circle" viewBox="0 0 60 60">
  264.                                     <circle class="circle" cx="30" cy="30" r="29" fill="none"></circle>
  265.                                 </svg>
  266.                             </div>
  267.                             <div class="button-circles__circle">
  268.                                 <svg class="svg-circle" viewBox="0 0 60 60">
  269.                                     <circle class="circle" cx="30" cy="30" r="29" fill="none"></circle>
  270.                                 </svg>
  271.                             </div><span class="block-counter__counter">12</span>
  272.                         </div></a></div>
  273.             </div>
  274.             <!-- - slider THUMBS  -->
  275.         </div>
  276.     </div>
  277. </section>
  278. <!-- - section SLIDER PROJECTS FULLSCREEN -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!