851 lines
58 KiB
HTML
851 lines
58 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
|
|
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|
<link rel="stylesheet" href="demos/product-showcase/product-showcase.css" />
|
|
</head>
|
|
<body data-mobile-nav-style="classic">
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-light bg-transparent header-reverse glass-effect" data-header-hover="light">
|
|
<div class="container-fluid">
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
|
<a class="navbar-brand section-link" href="demo-product-showcase.html#home">
|
|
<img src="images/demo-product-showcase-logo.png" data-at2x="images/demo-product-showcase-logo@2x.png" alt class="default-logo">
|
|
<img src="images/demo-product-showcase-logo.png" data-at2x="images/demo-product-showcase-logo@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-product-showcase-logo.png" data-at2x="images/demo-product-showcase-logo@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto menu-order position-static">
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a href="demo-product-showcase.html#overview" class="inner-link nav-link">Overview</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#features" class="inner-link nav-link">Features</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#technology" class="inner-link nav-link">Technology</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#design" class="inner-link nav-link">Design</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#review" class="inner-link nav-link">Review</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#pricing" class="inner-link nav-link">Pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto col-lg-2 text-end d-none d-sm-flex">
|
|
<div class="header-icon">
|
|
<div class="header-button">
|
|
<a href="demo-product-showcase.html#pricing" class="btn btn-very-small left-icon btn-rounded btn-box-shadow btn-switch-text btn-dark-gray section-link">
|
|
<span>
|
|
<span class="d-none d-xl-inline-block"><i class="bi bi-bag-check fs-16"></i></span>
|
|
<span class="btn-double-text" data-text="Order now">Order now</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<section id="home" class="p-0 ipad-top-space-margin" style="background-image: url('images/demo-product-showcase-rev-slider-02.jpg');">
|
|
<article class="content">
|
|
<div id="rev_slider_31_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container">
|
|
|
|
<div id="rev_slider_31_1" class="rev_slider fullwidthabanner" data-version="5.4.5">
|
|
|
|
<ul>
|
|
|
|
<li data-index="rs-73" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="01" data-description>
|
|
|
|
<img src="images/rev-trans-tile.png" alt="dummy" class="rev-slidebg" data-bgparallax="6">
|
|
|
|
<div class="tp-caption tp-resizeme alt-font rs-parallaxlevel-2" style="background: -webkit-linear-gradient(0deg, #ff007b 15%, #a419be 65%, #7b16da 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" id="slide-layer-1" data-frames="[{"delay":2000,"speed":2000,"frame":"0","from":"sX:1.3;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]" data-visibility="['on', 'on', 'on', 'on']" data-fontsize="['346','250','200','120']" data-lineheight="['450','360','300','200']" data-fontweight="['700','700', '700','700']" data-color="['#FFF','#FFF', '#000', '#000']" data-textAlign="['center','center','center','center']" data-letterspacing="['-24','-15','-10','-8']" data-x="['center','center','center','center']" data-y="['middle','middle','middle','middle']" data-hoffset="['0','0','0','0']" data-voffset="['-140','0','-100','-60']" data-width="['auto', 'auto', 'auto', 'auto']" data-height="['auto', 'auto', 'auto', 'auto']" data-whitespace="['nowrap', 'nowrap', 'nowrap', 'nowrap']" data-responsive_offset="off" data-responsive="on">listening</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme rs-parallaxlevel-1" id="slide-layer-12" data-frames="[{"delay":0,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Linear"},
|
|
{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Linear"}]" data-type="image" data-visibility="['on', 'on', 'on', 'on']" data-x="['center','center','center','center']" data-y="['middle','middle','middle','middle']" data-hoffset="['0','0','0','0']" data-voffset="['-100','0','-50','0']" data-width="['1126','900','800','600']" data-height="['auto','auto','auto','auto']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-responsive_offset="off" data-responsive="on"><img src="images/rev-trans-tile.png" data-lazyload="images/demo-product-showcase-rev-slider-02.png" class="w-100 h-auto" alt="image">
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme" id="slide-layer-2" data-frames="[{"delay":1000,"speed":2000,"frame":"0","from":"opacity:0;fb:30px;sX:1.5;sY:1.5;opacity:0;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":600,"frame":"999","to":"auto:auto;fb:0;opacity:0;","ease":"Power3.easeInOut"}]" data-type="image" data-visibility="['on', 'on', 'on', 'on']" data-x="['center','center','center','center']" data-y="['middle','middle','middle','middle']" data-hoffset="['0','0','0','0']" data-voffset="['-100','-40','-65','-50']" data-width="['775', '580', '500', '300']" data-height="['auto', 'auto', 'auto', 'auto']" data-responsive_offset="off" data-responsive="on" style="z-index: 5;"><div class="rs-looped rs-wave" data-speed="8" data-angle="0" data-radius="10px" data-origin="50% 50%">
|
|
<img src="images/rev-trans-tile.png" data-lazyload="images/demo-product-showcase-rev-slider-01.png" class="w-100 h-auto" alt="image">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme wave-animation" id="slide-layer-13" data-visibility="['on','on','on','off']" data-x="['center','center','center','center']" data-hoffset="['150','110','100','50']" data-y="['middle','middle','middle','middle']" data-voffset="['90','80','40','0']" data-width="['50','40','40','30']" data-height="['250','220','200','150']" data-type="shape" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":3000,"speed":3000,"frame":"0","from":"rZ:30;","to":"rZ:30;","ease":"Power3.easeInOut"}]"><div class="rs-looped rs-wave" data-speed="5" data-angle="0" data-radius="10px" data-origin="50% 50%">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tp-caption tp-resizeme wave-animation" id="slide-layer-14" data-visibility="['on','on','on','off']" data-x="['center','center','center','center']" data-hoffset="['-150','-150','-100','-50']" data-y="['middle','middle','middle','middle']" data-voffset="['90','100','30','0']" data-width="['50','40','40','30']" data-height="['250','220','200','150']" data-type="shape" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":3000,"speed":3000,"frame":"0","from":"rZ:-210;","to":"rZ:-210;","ease":"Power3.easeInOut"}]"><div class="rs-looped rs-wave" data-speed="5" data-angle="0" data-radius="10px" data-origin="50% 50%">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tp-caption tp-resizeme alt-font" id="slide-layer-3" data-frames="[{"delay": 2200, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
|
|
{"delay": "wait", "speed": 300, "to": "opacity: 0"}]" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-fontsize="['20','16','15','15']" data-lineheight="['32','32','32','24']" data-fontweight="['400', '400', '400', '400']" data-color="['#828282','#828282','#828282','#828282']" data-textAlign="['left','left','left','left']" data-x="['left','left','left','left']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10','10','30','15']" data-voffset="['340','140','160','130']" data-width="none" data-height="none" data-whitespace="['nowrap', 'nowrap', 'nowrap', 'nowrap']" data-responsive_offset="off" data-responsive="off" data-basealign="grid">Audio technology
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption alt-font tp-resizeme" id="slide-layer-4" data-fontsize="['28','22','20','18']" data-lineheight="['38','34','36','30']" data-fontweight="['700','700','700','700']" data-color="['#232323', '#232323', '#232323', '#232323']" data-textAlign="['left', 'left', 'left', 'left']" data-letterspacing="['-1','0','0','0']" data-x="['left','left','left','left']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10', '10', '30', '15']" data-voffset="['300', '110', '130', '105']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-type="text" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":2500,"speed":2000,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:[-100%];y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":640,"speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.easeInOut"}]">Dynamic driver</div>
|
|
|
|
<div class="tp-caption alt-font tp-resizeme" id="slide-layer-5" data-fontsize="['28','22','20','18']" data-lineheight="['38','34','36','30']" data-fontweight="['700','700','700','700']" data-color="['#232323', '#232323', '#232323', '#232323']" data-textAlign="['left', 'left', 'left', 'left']" data-letterspacing="['-1','0','0','0']" data-x="['left','left','left','left']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10', '10', '30', '15']" data-voffset="['300', '110', '130', '105']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-type="text" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":5000,"speed":2000,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:[-100%];y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":660,"speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.easeInOut"}]">Noise cancellation</div>
|
|
|
|
<div class="tp-caption alt-font tp-resizeme" id="slide-layer-6" data-fontsize="['28','22','20','18']" data-lineheight="['38','34','36','30']" data-fontweight="['700','700','700','700']" data-color="['#232323', '#232323', '#232323', '#232323']" data-textAlign="['left', 'left', 'left', 'left']" data-letterspacing="['-1','0','0','0']" data-x="['left','left','left','left']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10', '10', '30', '15']" data-voffset="['300', '110', '130', '105']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-type="text" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":7500,"speed":2000,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:[-100%];y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.easeInOut"}]">Adaptive EQ</div>
|
|
|
|
<div class="tp-caption tp-resizeme alt-font" id="slide-layer-7" data-frames="[{"delay": 2200, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
|
|
{"delay": "wait", "speed": 300, "to": "opacity: 0"}]" data-visibility="['on', 'on', 'on', 'on']" data-type="text" data-fontsize="['20','16','15','15']" data-lineheight="['32','32','32','24']" data-fontweight="['400', '400', '400', '400']" data-color="['#828282','#828282','#828282','#828282']" data-textAlign="['right','right','right','right']" data-x="['right','right','right','right']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10','10','30','15']" data-voffset="['340','140','160','130']" data-width="none" data-height="none" data-whitespace="['nowrap', 'nowrap', 'nowrap', 'nowrap']" data-responsive_offset="off" data-responsive="off" data-basealign="grid">Effective sensors
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption alt-font tp-resizeme" id="slide-layer-8" data-fontsize="['28','22','20','18']" data-lineheight="['38','34','36','30']" data-fontweight="['700','700','700','600']" data-color="['#232323', '#232323', '#232323', '#232323']" data-textAlign="['right', 'right', 'right', 'right']" data-letterspacing="['-1','0','0','0']" data-x="['right','right','right','right']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10', '10', '30', '15']" data-voffset="['300', '110', '130', '105']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-type="text" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":2500,"speed":2000,"frame":"0","from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:[100%];y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":660,"speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.easeInOut"}]">Optical sensor</div>
|
|
|
|
<div class="tp-caption alt-font tp-resizeme" id="slide-layer-9" data-fontsize="['28','22','20','18']" data-lineheight="['38','34','36','30']" data-fontweight="['700','700','700','600']" data-color="['#232323', '#232323', '#232323', '#232323']" data-textAlign="['right', 'right', 'right', 'right']" data-letterspacing="['-1','0','0','0']" data-x="['right','right','right','right']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10', '10', '30', '15']" data-voffset="['300', '110', '130', '105']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-type="text" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":5000,"speed":2000,"frame":"0","from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:[100%];y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":660,"speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power2.easeInOut"}]">Position sensor</div>
|
|
|
|
<div class="tp-caption alt-font tp-resizeme" id="slide-layer-10" data-fontsize="['28','22','20','18']" data-lineheight="['38','34','36','30']" data-fontweight="['700','700','700','600']" data-color="['#232323', '#232323', '#232323', '#232323']" data-textAlign="['right', 'right', 'right', 'right']" data-letterspacing="['-1','0','0','0']" data-x="['right','right','right','right']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['10', '10', '30', '15']" data-voffset="['300', '110', '130', '105']" data-whitespace="['nowrap','nowrap','nowrap','nowrap']" data-type="text" data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":7500,"speed":2000,"frame":"0","from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:[100%];y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":600,"to":"y:30px;rX:45deg;sX:0.8;sY:0.8;opacity:0;","ease":"Power3.easeInOut"}]">Accelerometer</div>
|
|
|
|
<a class="tp-caption text-uppercase alt-font d-flex justify-content-center align-items-center play-video-botton popup-youtube" href="https://www.youtube.com/watch?v=cfXHhfNy7tU" id="slide-layer-11" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['bottom','bottom','bottom','bottom']" data-voffset="['110','50','50','25']" data-color="['#2c3038', '#2c3038', '#2c3038', '#2c3038']" data-fontsize="['22','18','16','15']" data-lineheight="['74','60','50','55']" data-textAlign="['center','center','center','center']" data-width="['280','220','200','200']" data-height="none" data-whitespace="normal" data-fontweight="['700','700','700','700']" data-type="button" data-actions data-responsive_offset="off" data-responsive="off" data-frames="[{"delay":"+990","speed":1500,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":750,"frame":"999","to":"x:[-100%];opacity:1;","ease":"Power4.easeInOut"},{"frame":"hover","speed":"300","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgba(0,0,0,1);bc:rgba(0,0,0,1);bs:solid;bw:0 0 0 0;"}]" style="background-color:#ffffff; border-radius: 50px;-webkit-box-shadow: 0px 0px 30px 0px rgba(54,57,64,0.2); -moz-box-shadow: 0px 0px 30px 0px rgba(54,57,64,0.2);box-shadow: 0px 0px 30px 0px rgba(54,57,64,0.2);">
|
|
play<i class="feather icon-feather-play-circle" style="font-size: 38px; padding: 0 10px; background: -webkit-linear-gradient(0deg, #ff007b 15%, #a419be 65%, #7b16da 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"></i>video</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="overview" class="background-position-center-top position-relative" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
|
|
<div id="particles-01" data-particle="true" data-particle-options="{"particles": {"number": {"value": 3,"density": {"enable": true,"value_area": 1000}},"color":{"value":["#ff5b74", "#820f89"]},"shape": {"type": "circle","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.7,"random": false,"anim": {"enable": false,"speed": 2,"sync": false}},"size": {"value": 7,"random": true,"anim": {"enable": false,"sync": true}},"move": {"enable": true,"speed":2,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}" class="position-absolute top-0px left-0px w-100 z-index-minus-1"></div>
|
|
<div class="container">
|
|
<div class="row justify-content-center align-items-center mb-5">
|
|
<div class="col-12 text-center last-paragraph-no-margin" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 1200, "delay": 50, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="text-center bg-golden-yellow text-white fs-16 lh-36 border-radius-30px d-inline-block ps-20px pe-20px align-middle me-10px"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
|
|
<span class="text-dark-gray fs-26 d-inline-block align-middle ls-minus-05px">The best rated headphone on <a href="https://www.amazon.com/" target="_blank" class="fw-700 text-decoration-line-bottom text-dark-gray text-dark-gray-hover">Amazon.com</a></span>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center mb-6 md-mb-10">
|
|
<div class="col-md-6 position-relative sm-mb-30px" data-anime="{ "translateX": [-50, 0], "opacity": [0,1], "duration": 1500, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="outside-box-left-20 lg-outside-box-left-30">
|
|
<img src="images/demo-product-showcase-01.png" alt>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 ps-5 md-ps-15px" data-anime="{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1000, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<i class="line-icon-Hipster-Headphones align-middle icon-double-large mb-30px md-mb-20px opacity-6"></i>
|
|
<h1 class="fw-800 ls-minus-3px text-dark-gray mb-30px fancy-text-style-4">Extra bass for
|
|
<span data-fancy-text="{ "effect": "wave", "string": ["punchy", "moving", "strong"], "duration": 4000 }"></span> sound.
|
|
</h1>
|
|
<p class="w-90 lg-w-100 mb-35px">Quality is guaranteed by the latest wireless technology including bluetooth 5.0 high quality codec support and an excellent 30 hour battery life.</p>
|
|
<a href="demo-product-showcase.html#features" class="btn btn-large btn-dark-gray btn-hover-animation-switch btn-box-shadow btn-round-edge section-link">
|
|
<span>
|
|
<span class="btn-text">Explore features</span>
|
|
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center" data-anime="{ "el": "childs", "rotateZ": [5, 0], "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col process-step-style-05 position-relative hover-box md-mb-30px">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px bg-white fs-22 box-shadow-medium-bottom fw-600 position-relative">
|
|
<span class="number position-relative z-index-1 text-dark-gray">01</span>
|
|
<div class="box-overlay bg-dark-gray rounded-circle"></div>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px">
|
|
<span class="d-block fw-500 text-dark-gray fs-22 lh-30 ls-minus-05px w-60 xl-w-90">Feel the shape of <strong>comfort.</strong></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col process-step-style-05 position-relative hover-box md-mb-30px">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px bg-white fs-22 box-shadow-medium-bottom fw-600 position-relative">
|
|
<span class="number position-relative z-index-1 text-dark-gray">02</span>
|
|
<div class="box-overlay bg-dark-gray rounded-circle"></div>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px last-paragraph-no-margin">
|
|
<span class="d-block fw-500 text-dark-gray fs-22 lh-30 ls-minus-05px w-60 xl-w-90">Transform your great <strong>journey.</strong></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col process-step-style-05 position-relative hover-box">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px bg-white fs-22 box-shadow-medium-bottom fw-600 position-relative">
|
|
<span class="number position-relative z-index-1 text-dark-gray">03</span>
|
|
<div class="box-overlay bg-dark-gray rounded-circle"></div>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px last-paragraph-no-margin">
|
|
<span class="d-block fw-500 text-dark-gray fs-22 lh-30 ls-minus-05px w-60 xl-w-90">Hear the world <strong>around</strong> you.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="features" class="bg-gradient-very-light-gray position-relative pb-2">
|
|
<div class="background-position-center-top position-absolute top-0 left-0px w-100 h-100" style="background-image: url('images/vertical-line-bg-medium-gray.svg')"></div>
|
|
<div class="container position-relative">
|
|
<div class="row justify-content-center mb-2">
|
|
<div class="col-auto col-xxl-5 col-lg-7 col-sm-9 d-flex align-items-center justify-content-center">
|
|
<span class="fs-180 text-gradient-dark-purple-watermelon flex-shrink-0 fw-800 me-35px ls-minus-10px sm-ls-minus-5px" data-bottom-top="transform:scale(1.4, 1.4);" data-top-bottom="transform:scale(1, 1);">13</span>
|
|
<h2 class="text-dark-gray fw-800 ls-minus-2px m-0">Exclusive features.</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center mb-4" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col icon-with-text-style-03">
|
|
<div class="feature-box p-8">
|
|
<div class="feature-box-icon">
|
|
<i class="line-icon-Microphone-4 icon-double-large text-dark-gray mb-20px"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19 ls-minus-05px">Microphone built-in</span>
|
|
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-03">
|
|
<div class="feature-box p-8">
|
|
<div class="feature-box-icon">
|
|
<i class="line-icon-No-Drop icon-double-large text-dark-gray mb-20px"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19 ls-minus-05px">Water resistant</span>
|
|
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-03">
|
|
<div class="feature-box p-8">
|
|
<div class="feature-box-icon">
|
|
<i class="line-icon-Signal icon-double-large text-dark-gray mb-20px"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19 ls-minus-05px">Powerful signal</span>
|
|
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-03">
|
|
<div class="feature-box p-8">
|
|
<div class="feature-box-icon">
|
|
<i class="line-icon-Sound icon-double-large text-dark-gray mb-20px"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19 ls-minus-05px">Noise cancellation</span>
|
|
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-03">
|
|
<div class="feature-box p-8">
|
|
<div class="feature-box-icon">
|
|
<i class="line-icon-Environmental-3 icon-double-large text-dark-gray mb-20px"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19 ls-minus-05px">Environment friendly</span>
|
|
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-03">
|
|
<div class="feature-box p-8">
|
|
<div class="feature-box-icon">
|
|
<i class="line-icon-Headphones icon-double-large text-dark-gray mb-20px"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-700 text-dark-gray mb-5px fs-19 ls-minus-05px">Sleek design</span>
|
|
<p class="w-85 lg-w-100 mx-auto">Lorem ipsum consectetur elit eiusmod tempor incididunt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row justify-content-center align-items-center" data-anime="{ "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-12 text-center">
|
|
<div class="d-inline-block align-middle fs-12 ls-05px fw-600 text-white text-uppercase bg-green border-radius-50px ps-20px pe-20px me-10px sm-m-5px">impressive</div>
|
|
<div class="d-inline-block align-middle text-dark-gray fw-500 fs-20 ls-minus-05px">High quality bass and sound with much more <span class="text-decoration-line-bottom fw-700">awesome features.</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="technology" class="background-position-center-top position-relative" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
|
|
<div id="particles-02" data-particle="true" data-particle-options="{"particles": {"number": {"value": 3,"density": {"enable": true,"value_area": 1000}},"color":{"value":["#ff5b74", "#820f89"]},"shape": {"type": "circle","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.7,"random": false,"anim": {"enable": false,"speed": 2,"sync": false}},"size": {"value": 7,"random": true,"anim": {"enable": false,"sync": true}},"move": {"enable": true,"speed":2,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}" class="position-absolute top-0px left-0px w-100 z-index-minus-1"></div>
|
|
<div class="container overlap-gap-section">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6 text-center">
|
|
<div class="outside-box-left-25 lg-outside-box-left-20 md-outside-box-left-30 position-sticky top-140px">
|
|
<img src="images/demo-product-showcase-product-05.png" alt data-bottom-top="transform: rotate(0deg) translateY(0)" data-top-bottom="transform:rotate(-35deg) translateY(0)">
|
|
<span class="fs-350 xxl-fs-300 lg-fs-200 md-fs-275 xs-fs-200 text-gradient-dark-purple-watermelon fw-700 ls-minus-20px position-absolute top-100px d-block z-index-minus-1" data-bottom-top="transform:scale(1, 1) translate3d(0px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(-300px, 0px, 0px);">sound</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5 offset-lg-1 text-center text-lg-start" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 50, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="mb-15 mt-25 md-mb-5 md-mt-10">
|
|
<i class="line-icon-Hipster-Headphones align-middle icon-double-large mb-25px opacity-6"></i>
|
|
<span class="fs-90 lg-fs-80 xs-fs-60 fw-800 text-dark-gray ls-minus-4px xs-ls-minus-2px d-block mb-25px">Hypnotic listening.</span>
|
|
<p class="w-80 xl-w-90 lg-w-100 mb-35px">Quality is guaranteed by the latest wireless technology including bluetooth 5.0 high quality codec support & excellent 30 hour battery life.</p>
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="btn btn-large btn-dark-gray btn-hover-animation-switch btn-box-shadow btn-round-edge popup-youtube">
|
|
<span>
|
|
<span class="btn-text">Watch technology</span>
|
|
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex"></div>
|
|
<div class="mb-15 mt-25 md-mb-5 md-mt-10">
|
|
<i class="line-icon-Livejournal align-middle icon-double-large mb-25px opacity-6"></i>
|
|
<span class="fs-90 lg-fs-80 xs-fs-60 fw-800 text-dark-gray ls-minus-4px xs-ls-minus-2px d-block mb-25px">Dynamic designed.</span>
|
|
<p class="w-80 xl-w-90 lg-w-100 mb-35px">Quality is guaranteed by the latest wireless technology including bluetooth 5.0 high quality codec support & excellent 30 hour battery life.</p>
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="btn btn-large btn-dark-gray btn-hover-animation-switch btn-box-shadow btn-round-edge popup-youtube">
|
|
<span>
|
|
<span class="btn-text">Watch technology</span>
|
|
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="d-flex"></div>
|
|
<div class="mb-15 mt-25 md-mb-5 md-mt-10">
|
|
<i class="line-icon-Music-Note2 align-middle icon-double-large mb-25px opacity-6"></i>
|
|
<span class="fs-90 lg-fs-80 xs-fs-60 fw-800 text-dark-gray ls-minus-4px xs-ls-minus-2px d-block mb-25px">Naturally interact.</span>
|
|
<p class="w-80 xl-w-90 lg-w-100 mb-35px">Quality is guaranteed by the latest wireless technology including bluetooth 5.0 high quality codec support & excellent 30 hour battery life.</p>
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="btn btn-large btn-dark-gray btn-hover-animation-switch btn-box-shadow btn-round-edge popup-youtube">
|
|
<span>
|
|
<span class="btn-text">Watch technology</span>
|
|
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-youtube"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="background-position-center-top pt-0" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
|
|
<div class="container-fluid">
|
|
<div class="row position-relative">
|
|
<div class="col swiper swiper-width-auto text-center pb-20px md-pb-20px feather-shadow" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":70, "speed": 14000, "loop": true, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
|
<div class="swiper-wrapper marquee-slide">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-90 text-dark-gray fw-700 ls-minus-4px alt-font">Hypnotic listening.</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-90 text-dark-gray opacity-5 fw-700 ls-minus-4px alt-font">Dynamic designed.</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-90 text-dark-gray fw-700 ls-minus-4px alt-font">Naturally interact.</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-90 text-dark-gray opacity-5 fw-700 ls-minus-4px alt-font">Hypnotic listening.</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-90 text-dark-gray fw-700 ls-minus-4px alt-font">Dynamic designed.</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-90 text-dark-gray opacity-5 fw-700 ls-minus-4px alt-font">Naturally interact.</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="design" class="overflow-hidden bg-black background-position-center-top background-no-repeat pt-15 sm-pt-50px position-relative" style="background-image: url('images/demo-product-showcase-03.jpg')">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-8 text-center position-relative sm-mb-40px" data-top-bottom="transform: scale(1); filter: opacity(1)" data-bottom-top="transform: scale(1.3); filter: opacity(0)">
|
|
<span class="fs-110 md-fs-90 xs-fs-80 text-white fw-700 ls-minus-5px">A radically original composition.</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-13">
|
|
<div class="row row-cols-1 justify-content-center">
|
|
|
|
<div class="col" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 50, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="swiper magic-cursor drag-cursor light" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 70, "loopedSlides": true, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1400": { "slidesPerView":7 }, "992": { "slidesPerView": 4, "spaceBetween": 80 }, "768": { "slidesPerView": 3, "spaceBetween": 60 }, "576": { "slidesPerView": 2, "spaceBetween": 45 } }, "effect": "slide" }">
|
|
<div class="swiper-wrapper text-center">
|
|
|
|
<div class="swiper-slide d-none d-lg-block"></div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-01.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Aluminium</span>
|
|
<span>Cups</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-02.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Stainless</span>
|
|
<span>Frame</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-03.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Canopy</span>
|
|
<span>Spanning</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-04.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Mesh</span>
|
|
<span>Textile</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-05.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Digital</span>
|
|
<span>Control</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-06.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Audible</span>
|
|
<span>Range</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-07.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Fidelity</span>
|
|
<span>Audio</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-04.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Canopy</span>
|
|
<span>Spanning</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-03.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Digital</span>
|
|
<span>Control</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="overflow-hidden position-relative">
|
|
<img class="border-radius-100" src="images/demo-product-showcase-slider-02.jpg" alt />
|
|
</div>
|
|
<div class="mt-25px">
|
|
<span class="text-white fs-20 lh-24 fw-600 d-block">Stainless</span>
|
|
<span>Frame</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide d-none d-lg-block"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="bg-dark-gray-01 p-35px">
|
|
<div class="container">
|
|
<div class="row justify-content-center align-items-center" data-anime="{ "el": "childs", "translateX": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-lg-1 p-0">
|
|
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-very-light md-mb-15px"></div>
|
|
</div>
|
|
<div class="col-xl-7 col-lg-9 position-relative text-center last-paragraph-no-margin">
|
|
<i class="line-icon-Hipster-Headphones align-middle icon-medium me-10px sm-me-0 sm-mb-10px"></i>
|
|
<p class="fs-16 fw-600 text-uppercase ls-1px d-inline-block align-middle lh-normal">Awarded ergonomically painless awesome headphone designed</p>
|
|
</div>
|
|
<div class="col-lg-1 p-0">
|
|
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-very-light md-mt-15px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="review" class="background-position-center-top" style="background-image: url('images/vertical-line-bg-medium-gray.svg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-1">
|
|
<div class="col-xl-7 col-lg-9 col-md-10 text-center" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h2 class="h1 fw-800 text-dark-gray ls-minus-3px">Loved by most valuable customers</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 text-center" data-anime="{ "rotateX": [-40, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="swiper swiper-horizontal-3d pt-8 pb-5 lg-pt-10 lg-pb-10 md-pt-12 sm-pt-21 sm-pb-11 swiper-pagination-bottom testimonials-style-04" data-slider-options="{ "loop": true, "slidesPerView": 1,"centeredSlides":true,"effect":"coverflow","coverflowEffect":{"rotate":0,"stretch":100,"depth":150,"modifier":1.5,"slideShadows":true}, "navigation": { "nextEl": ".swiper-button-next-nav.slider-navigation-style-04", "prevEl": ".swiper-button-previous-nav.slider-navigation-style-04" }, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "pagination": { "el": ".swiper-pagination-04", "clickable": true, "dynamicBullets": true }, "breakpoints": { "768": { "slidesPerView": 2 } } }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide bg-white border-radius-4px">
|
|
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
|
|
<img alt src="images/avtar-24.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
|
|
<div class="testimonials-content">
|
|
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Just love their design for all stunning details!</span>
|
|
<p class="mb-25px">These sounded far better than expected for the price. The cord is a tad shorter than others I have purchased so take note. Great for a good value.</p>
|
|
</div>
|
|
<div class="testimonials-author fs-19 mb-5px text-gradient-dark-purple-watermelon fw-700 d-inline-block">Alexander Harvard</div>
|
|
<div class="testimonials-position fs-15 lh-20">Themezaa Design</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide bg-white border-radius-4px">
|
|
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
|
|
<img alt src="images/avtar-25.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
|
|
<div class="testimonials-content">
|
|
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Every element is designed beautifully and perfect!</span>
|
|
<p class="mb-25px">These are great headphones for music and movies for the price. I have never owned a big-money pair of headphones. It's a good pair of headphones.</p>
|
|
</div>
|
|
<div class="testimonials-author fs-19 mb-5px text-gradient-dark-purple-watermelon fw-700 d-inline-block">Shoko Mugikura</div>
|
|
<div class="testimonials-position fs-15 lh-20">Google Design</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide bg-white border-radius-4px">
|
|
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
|
|
<img alt src="images/avtar-26.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
|
|
<div class="testimonials-content">
|
|
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Simple and easy to integrate and build the website!</span>
|
|
<p class="mb-25px">I was surprised at the sound quality from these phones right out of the box. I'm a fan of the sound and normally use with my home equipment.</p>
|
|
</div>
|
|
<div class="testimonials-author fs-19 mb-5px text-gradient-dark-purple-watermelon fw-700 d-inline-block">Herman Miller</div>
|
|
<div class="testimonials-position fs-15 lh-20">Apple Design</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide bg-white border-radius-4px">
|
|
<div class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
|
|
<img alt src="images/avtar-25.jpg" class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
|
|
<div class="testimonials-content">
|
|
<span class="text-dark-gray fs-18 lh-30 fw-600 mb-5px d-block">Every element is designed beautifully and perfect!</span>
|
|
<p class="mb-25px">These are great headphones for music and movies for the price. I have never owned a big-money pair of headphones. It's a good pair of headphones.</p>
|
|
</div>
|
|
<div class="testimonials-author fs-19 mb-5px text-gradient-dark-purple-watermelon fw-700 d-inline-block">Shoko Mugikura</div>
|
|
<div class="testimonials-position fs-15 lh-20">Google Design</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 text-center" data-anime="{ "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="text-center bg-dark-gray text-white fs-16 lh-36 border-radius-30px d-inline-block ps-20px pe-20px align-middle me-10px mt-10px mb-10px"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
|
|
<h6 class="text-dark-gray fw-400 mb-0 d-inline-block align-middle ls-minus-1px">Check all <span class="fw-700">3,583</span> readers reviews on <a href="https://www.amazon.com/" target="_blank"><img src="images/demo-ebook-05.png" alt /></a></h6>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="pricing" class="bg-gradient-very-light-gray">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-xl-7 col-lg-9 text-center" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h2 class="h1 fw-800 text-dark-gray ls-minus-3px">Choose the perfect product for you</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 position-relative justify-content-center" data-anime="{ "el": "childs", "rotateZ": [5, 0], "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col text-center md-mb-50px">
|
|
<img class="w-70" src="images/demo-product-showcase-product-01.png" alt />
|
|
<div class="mt-30px">
|
|
<img src="images/demo-product-showcase-product-thumb-01.png" alt />
|
|
<span class="fs-18 fw-700 text-dark-gray mt-10px d-block">Silver</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col text-center md-mb-50px">
|
|
<img class="w-70" src="images/demo-product-showcase-product-04.png" alt />
|
|
<div class="mt-30px">
|
|
<img src="images/demo-product-showcase-product-thumb-02.png" alt />
|
|
<span class="fs-18 fw-700 text-dark-gray mt-10px d-block">Grey</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col text-center xs-mb-50px">
|
|
<img class="w-70" src="images/demo-product-showcase-product-03.png" alt />
|
|
<div class="mt-30px">
|
|
<img src="images/demo-product-showcase-product-thumb-03.png" alt />
|
|
<span class="fs-18 fw-700 text-dark-gray mt-10px d-block">Pink</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col text-center">
|
|
<img class="w-70" src="images/demo-product-showcase-product-02.png" alt />
|
|
<div class="mt-30px">
|
|
<img src="images/demo-product-showcase-product-thumb-04.png" alt />
|
|
<span class="fs-18 fw-700 text-dark-gray mt-10px d-block">Blue</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row justify-content-center mt-6 sm-mt-11" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-md-4 p-0">
|
|
<span class="bg-dark-gray w-100 fs-30 p-7 sm-p-5 fw-700 text-white text-center d-inline-block">Just $999</span>
|
|
</div>
|
|
<div class="col-md-4 p-0">
|
|
<a href="https://www.amazon.com/" target="_blank" class="btn btn-gradient-purple-pink w-100 fs-30 border-0 p-7 sm-p-5 fw-700 text-uppercase-inherit">Purchase now</a>
|
|
</div>
|
|
<div class="col-12 mt-30px">
|
|
|
|
<ul class="list-style-05 text-center text-uppercase ls-1px fs-16 fw-500">
|
|
<li>Secure</li>
|
|
<li>Free</li>
|
|
<li>Contactless delivery</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="py-0">
|
|
<div class="container">
|
|
<div class="row pb-50px sm-pb-35px justify-content-center align-items-center">
|
|
<div class="col-xl-3 col-lg-4 col-sm-6 order-1 text-center text-sm-start xs-mb-20px">
|
|
<span class="fs-19 mb-5px d-block">Let's talk with us</span>
|
|
<h6 class="fw-700 mb-0 ls-minus-1px"><a href="tel:1800222000" class="text-dark-gray">1-800-222-000</a></h6>
|
|
</div>
|
|
<div class="col-xl-6 col-lg-4 md-mt-25px order-3 order-lg-2 text-center elements-social social-icon-style-04">
|
|
<ul class="large-icon dark">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
|
|
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-4 col-sm-6 order-2 order-lg-3 text-center text-sm-end">
|
|
<span class="fs-19 mb-5px d-block">Get customer care</span>
|
|
<h6 class="fw-700 mb-0 ls-minus-1px"><a href="cdn-cgi/l/email-protection.html#88e1e6eee7c8ece7e5e9e1e6a6ebe7e5" class="text-dark-gray"><span class="__cf_email__" data-cfemail="2940474f46694d4644484047074a4644">[email protected]</span></a></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="pt-25px pb-25px border-top border-color-extra-medium-gray fs-16">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
|
|
<div class="col-lg-7 md-mb-10px text-center text-lg-start">
|
|
<ul class="footer-navbar lh-normal">
|
|
<li class="nav-item"><a href="demo-product-showcase.html#overview" class="inner-link nav-link">Overview</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#features" class="inner-link nav-link">Features</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#technology" class="inner-link nav-link">Technology</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#design" class="inner-link nav-link">Design</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#review" class="inner-link nav-link">Review</a></li>
|
|
<li class="nav-item"><a href="demo-product-showcase.html#pricing" class="inner-link nav-link">Pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-5 last-paragraph-no-margin text-center text-lg-end">
|
|
<p>© 2024 Crafto is proudly powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-600">ThemeZaa</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-product-showcase.html#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|
|
|
<script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
|
|
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
/* https://learn.jquery.com/using-jquery-core/document-ready/ */
|
|
jQuery(document).ready(function () {
|
|
|
|
/* initialize the slider based on the Slider's ID attribute from the wrapper above */
|
|
jQuery('#rev_slider_31_1').show().revolution({
|
|
|
|
/* options are 'auto', 'fullwidth' or 'fullscreen' */
|
|
sliderLayout: 'fullwidth',
|
|
/* sets the Slider's default timeline */
|
|
delay: 9000,
|
|
/* options that disable autoplay */
|
|
stopLoop: "off",
|
|
stopAfterLoops: 0,
|
|
stopAtSlide: 1,
|
|
/* Lazy Load options are "all", "smart", "single" and "none" */
|
|
lazyType: "smart",
|
|
spinner: "spinner0",
|
|
responsiveLevels: [1240, 1024, 778, 480],
|
|
/* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
|
|
gridwidth: [1190, 1024, 778, 480],
|
|
/* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
|
|
gridheight: [1250, 920, 1000, 650],
|
|
/* Lazy Load options are "all", "smart", "single" and "none" */
|
|
lazyType: "none",
|
|
parallax: {
|
|
type: "mouse+scroll",
|
|
origo: "slidercenter",
|
|
speed: 400,
|
|
speedbg: 1500,
|
|
speedls: 1000,
|
|
levels: [5, 10, 15, 20, 25, 30, 35, 40, 60, 46, -10, -15, -20, -25, -30, 55],
|
|
},
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DND93RJKBT"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-DND93RJKBT');
|
|
</script>
|
|
</body>
|
|
</html> |