Demo : https://spalab.sunamart.com/
Home page
Banner:
Nội dung html topic cho banner
<div id="rev_slider_one_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-source="gallery">
<div id="rev_slider_one" class="rev_slider fullwidthabanner" data-version="5.4.1">
<ul>
<li data-transition="slidingoverlayhorizontal" data-description="Slide Description" data-index="rs-1688" data-slotamount="default" data-thumb="https://i.imgur.com/xW8keA4.png" data-title="Slide Title">
<img class="rev-slidebg" src="https://i.imgur.com/xW8keA4.png" alt="" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" />
<div class="tp-caption " data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingtop="[0,0,0,0]" data-responsive_offset="on" data-type="text" data-height="none" data-width="['700','650','650','450']" data-whitespace="normal" data-hoffset="['15','15','15','15']" data-voffset="['-70','-60','-60','-80']" data-x="['left','left','left','left']" data-y="['middle','middle','middle','middle']" data-textalign="['top','top','top','top']" data-frames="[{"delay":500,"speed":1500,"frame":"0","from":"x:[175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:1;","mask":"x:[-100%];y:0;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]">
<h1>OUR SPALAB GIVES YOU AN EXTREME LEVEL OF RELAXATION</h1>
</div>
<div class="tp-caption" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingtop="[0,0,0,0]" data-responsive_offset="on" data-type="text" data-height="none" data-width="['650','650','650','450']" data-whitespace="normal" data-hoffset="['15','15','15','15']" data-voffset="['50','40','30','10']" data-x="['left','left','left','left']" data-y="['middle','middle','middle','middle']" data-textalign="['top','top','top','top']" data-frames="[{"delay":1000,"speed":1500,"frame":"0","from":"y:[150%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]">
<div class="text">
<h3>SpaLab - Beauty Inspiration</h3>
</div>
</div>
<div class="tp-caption tp-resizeme" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingtop="[0,0,0,0]" data-responsive_offset="on" data-type="text" data-height="none" data-whitespace="normal" data-width="['650','650','650','450']" data-hoffset="['15','15','15','15']" data-voffset="['100','110','110','90']" data-x="['left','left','left','left']" data-y="['middle','middle','middle','middle']" data-textalign="['top','top','top','top']" data-frames="[{"delay":1500,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]">
<!-- Link Box -->
<div class="link-box">
<ul>
<li>
<a class="line-b" href="#">View Services</a>
</li>
<li>
<a class="line-bg" href="#">Appointment </a>
</li>
</ul>
</div>
</div>
</li>
<li data-transition="slidingoverlayhorizontal" data-description="Slide Description" data-index="rs-1689" data-slotamount="default" data-thumb="https://i.imgur.com/gBYjdDU.png" data-title="Slide Title">
<img class="rev-slidebg" src="https://i.imgur.com/gBYjdDU.png" alt="" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" />
<div class="tp-caption " data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingtop="[0,0,0,0]" data-responsive_offset="on" data-type="text" data-height="none" data-width="['700','650','650','450']" data-whitespace="normal" data-hoffset="['15','15','15','15']" data-voffset="['-70','-60','-60','-80']" data-x="['left','left','left','left']" data-y="['middle','middle','middle','middle']" data-textalign="['top','top','top','top']" data-frames="[{"delay":500,"speed":1500,"frame":"0","from":"x:[175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:1;","mask":"x:[-100%];y:0;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]">
<h1>OUR SPALAB GIVES YOU AN EXTREME LEVEL OF RELAXATION</h1>
</div>
<div class="tp-caption" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingtop="[0,0,0,0]" data-responsive_offset="on" data-type="text" data-height="none" data-width="['650','650','650','450']" data-whitespace="normal" data-hoffset="['15','15','15','15']" data-voffset="['50','40','30','10']" data-x="['left','left','left','left']" data-y="['middle','middle','middle','middle']" data-textalign="['top','top','top','top']" data-frames="[{"delay":1000,"speed":1500,"frame":"0","from":"y:[150%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]">
<div class="text">
<h3>SpaLab - Beauty Inspiration</h3>
</div>
</div>
<div class="tp-caption tp-resizeme" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingtop="[0,0,0,0]" data-responsive_offset="on" data-type="text" data-height="none" data-whitespace="normal" data-width="['650','650','650','450']" data-hoffset="['15','15','15','15']" data-voffset="['100','110','110','90']" data-x="['left','left','left','left']" data-y="['middle','middle','middle','middle']" data-textalign="['top','top','top','top']" data-frames="[{"delay":1500,"speed":1500,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]">
<!-- Link Box -->
<div class="link-box">
<ul>
<li>
<a class="line-b" href="#">View Services</a>
</li>
<li>
<a class="line-bg" href="#">Appointment </a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>