<div data-scroll-container>
<div class="main" >
<section style="margin-top:8em;"data-scroll-section>
<h1 class="left-h1" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3" data-scroll-class="appear" data-scroll-repeat="true">Beautiful Holiday Destinations</h1>
<div class="recommendations-container">
<div class="recommendations">
<ul class="recommendations_list">
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_black">Popular</a></li>
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_grey">Adventure</a></li>
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_grey">Beach</a></li>
</ul>
<div class="active_container">
<span class="active"></span>
</div>
</div>
<div class="recommendations__controls">
<span class="control_left"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
<span class="control_right"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
</div>
<div class="location_preview">
<div class="preview" data-scroll data-scroll-speed="-1" >
<img src="https://images.unsplash.com/photo-1559628233-100c798642d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80" alt="">
<div class="preview__details">
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">Nusa Penida</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star" aria-hidden="true"></i> 4.7</p>
</span>
<p class="preview__details__text__bottom txt_lg_white"><i class="fa fa-map-marker" aria-hidden="true"></i> Bali, Indonesia</p>
</div>
</div>
<div class="preview" data-scroll data-scroll-speed="1">
<img src="https://images.unsplash.com/photo-1532186651327-6ac23687d189?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="">
<div class="preview__details">
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">Labuan Bajo</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star" aria-hidden="true"></i> 4.8</p>
</span>
<p class="preview__details__text__bottom txt_lg_white"><i class="fa fa-map-marker" aria-hidden="true"></i> NTT, Indonesia</p>
</div>
</div>
<div class="preview" data-scroll data-scroll-speed="-1">
<img src="https://images.unsplash.com/photo-1568609477908-f76bff63279c?ixlib=rb-1.2.1&auto=format&fit=crop&w=444&q=80" alt="">
<div class="preview__details">
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">Mount Bromo</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star" aria-hidden="true"></i> 4.5</p>
</span>
<p class="preview__details__text__bottom txt_lg_white"><i class="fa fa-map-marker" aria-hidden="true"></i> Malang, Indonesia</p>
</div>
</div>
<div class="preview" data-scroll data-scroll-speed="1">
<img src="https://images.unsplash.com/photo-1525596662741-e94ff9f26de1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
<div class="preview__details">
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">Gili Island</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star" aria-hidden="true"></i> 4.7</p>
</span>
<p class="preview__details__text__bottom txt_lg_white"><i class="fa fa-map-marker" aria-hidden="true"></i> Lombok, Indonesia</p>
</div>
</div>
</div>
</section>
<section data-scroll-section>
<h1 class="centered-h1" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3" data-scroll-class="appear" data-scroll-repeat="true">Special Offers</h1>
<div class="centered-recommendations-container">
<div class="recommendations">
<ul class="recommendations_list">
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_black">Family</a></li>
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_grey">Couple</a></li>
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_grey">Team</a></li>
</ul>
<div class="active_container">
<span class="active"></span>
</div>
</div>
</div>
<div class="special-offers-container">
<span class="control_left modify_control"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
<div class="special-offers-preview-container">
<div class="preview modify_preview" data-scroll data-scroll-speed="0.5">
<img src="https://images.unsplash.com/photo-1592529754743-91e25c7b9b47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="">
<div class="preview__details modify_preview__details">
<h3 class="txt_lg_white modify_text">Lombok, Indonesia</h3>
<p class="preview__details__text__bottom modify_preview__details__text__bottom txt_lg_white">6 Day 5 Nights</p>
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">$450/person</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star modify_i" aria-hidden="true"></i> 4.7</p>
</span>
</div>
</div>
<div class="preview modify_preview" data-scroll data-scroll-speed="1">
<img src="https://images.unsplash.com/photo-1584999675865-41e544a9d067?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="">
<div class="preview__details modify_preview__details">
<h3 class="txt_lg_white modify_text">Yogyakarta, Indonesia</h3>
<p class="preview__details__text__bottom modify_preview__details__text__bottom txt_lg_white">7 Day 6 Nights</p>
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">$390/person</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star modify_i" aria-hidden="true"></i> 4.7</p>
</span>
</div>
</div>
<div class="preview modify_preview" data-scroll data-scroll-speed="1.5">
<img src="https://images.unsplash.com/photo-1581974206967-93856b25aa13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1036&q=80" alt="">
<div class="preview__details modify_preview__details">
<h3 class="txt_lg_white modify_text">Bali, Indonesia</h3>
<p class="preview__details__text__bottom modify_preview__details__text__bottom txt_lg_white">6 Day 5 Nights</p>
<span class="preview__details__text">
<p class="preview__details__text__top txt_lg_white">$430/person</p>
<p class="preview__details__text__top txt_lg_white"><i class="fa fa-star modify_i" aria-hidden="true"></i> 4.7</p>
</span>
</div>
</div>
</div>
<span class="control_right modify_control"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
</section>
<section data-scroll-section id="pin">
<h1 class="centered-h1" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3" data-scroll-class="appear" data-scroll-repeat="true">From the Blog</h1>
<div class="blog">
<div class="video" data-scroll data-scroll-sticky data-scroll-target="#pin">
<div class="video_preview">
<img src="https://images.unsplash.com/photo-1583396618422-597b2755de83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1048&q=80" alt="">
</div>
<div class="video_preview_description">
<h1 class="txt_md_black">Bedugul Bali! the Wonderful god place in the world</h1>
<p class="txt_md_grey">Bedugul is one of the most famous place in Bali Indonesia, Bedugul is a tourism area located in the middle of the island of Bali. The Bedugul tourism area is very well known as te best place for family vacation in Bali. Offers natural attractions, Such as large plantation areas, lake views and the beauty of Hindu Temple architecture.</p>
<a href="#" class="txt_lg_black" style="text-decoration: none;"><i>Read more</i> <i class="fa fa-angle-right" aria-hidden="true"></i></a>
</div>
</div>
<div class="blogpost">
<div class="blogpost_preview">
<div class="blogpost_preview_img">
<img src="https://images.unsplash.com/photo-1581775231124-4f70b143b85c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" alt="">
</div>
<div class="blogpost_preview_txt">
<h3 class="txt_md_black">The most wonderful underwater</h3>
<p class="txt_md_grey">@monicafer</p>
</div>
</div>
<div class="blogpost_preview">
<div class="blogpost_preview_img">
<img src="https://images.unsplash.com/photo-1523539693385-e5e891eb4465?ixlib=rb-1.2.1&auto=format&fit=crop&w=635&q=80" alt="">
</div>
<div class="blogpost_preview_txt">
<h3 class="txt_md_black">The most Beautiful wet grassland</h3>
<p class="txt_md_grey">@david_underson</p>
</div>
</div>
<div class="blogpost_preview">
<div class="blogpost_preview_img">
<img src="https://images.unsplash.com/photo-1576878176876-517cdb8006ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
</div>
<div class="blogpost_preview_txt">
<h3 class="txt_md_black">Relax and feel the nature, unforgettable waterfall</h3>
<p class="txt_md_grey">@lara.watson</p>
</div>
</div>
<div class="blogpost_preview">
<div class="blogpost_preview_img">
<img src="https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1023&q=80" alt="">
</div>
<div class="blogpost_preview_txt">
<h3 class="txt_md_black">Beautiful panorama, with fresh air relax holiday</h3>
<p class="txt_md_grey">@natasha.alexander</p>
</div>
</div>
</div>
</div>
</section>
<section data-scroll-section>
<h1 class="left-h1" style="padding: 1em 0 0 2.5em;" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3" data-scroll-class="appear" data-scroll-repeat="true">Testimonial & Gallery</h1>
<div class="recommendations-container">
<div class="recommendations">
<ul class="recommendations_list">
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_black">Photo</a></li>
<li class="recommendations__items"><a href="#" class="recommendations__links txt_md_grey">Video</a></li>
</ul>
<div class="active_container">
<span class="active"></span>
</div>
</div>
</div>
<div class="testimonials">
<div class="preview_holder">
<div class="testimonials_preview">
<img src="https://images.unsplash.com/photo-1532186651327-6ac23687d189?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80" alt="">
</div>
<div class="quotes">
<span class="control_left modify_quote_circle"><i class="fa fa-quote-left" aria-hidden="true"></i></span>
<p class="txt_md_black">I spend every minute with happy feelings i here, unforgettable place</p>
</div>
</div>
<div class="preview_holder1">
<div class="testimonials_preview">
<img src="https://images.unsplash.com/photo-1591559797549-4e7c32d85671?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80" alt="">
</div>
<div class="quotes modify_quote">
<span class="control_left modify_quote_circle modify_quote_circle_sm"><i class="fa fa-quote-left" aria-hidden="true"></i></span>
<p class="txt_md_black">Love this place really wonderful with the panorama and temple</p>
</div>
</div>
<div class="testimonials_preview_split">
<div class="layered_img">
<img src="https://images.unsplash.com/photo-1476158085676-e67f57ed9ed7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80" alt="">
</div>
<div class="layered_img">
<img src="https://images.unsplash.com/photo-1525243553587-fa7a14c804e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
</div>
</div>
</section>
</div>
<footer class="footer" data-scroll-section>
<div class="footer_container">
<div class="newsletter" data-scroll data-scroll-speed="5">
<h1>Subscribe To Our Newsletter</h1>
<div class="newsletter_form">
<input type="email" placeholder="enter your email here">
<button class="">Subscribe</button>
</div>
</div>
<div class="footer_content_container">
<div class="footer_content">
<div class="contact">
<h1>Melaku Tour</h1>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<p class="txt_md_white">melakuntour@gmail.com</p>
<p class="txt_md_white">(+62) 81234567890</p>
</div>
<ul class="footer_links">
<li><h3 class="txt_lg_white">Company</h3></li>
<li><a href="#" class="nav__link">Career</a></li>
<li><a href="#" class="nav__link">About Us</a></li>
<li><a href="#" class="nav__link">Blog</a></li>
<li><a href="#" class="nav__link">Press Info</a></li>
<li><a href="#" class="nav__link">Features</a></li>
</ul>
<ul class="footer_links">
<li><h3 class="txt_lg_white">Travellers</h3></li>
<li><a href="#" class="nav__link">Why Travellers</a></li>
<li><a href="#" class="nav__link">How it works</a></li>
<li><a href="#" class="nav__link">Why Choose Us</a></li>
<li><a href="#" class="nav__link">Customer Stories</a></li>
<li><a href="#" class="nav__link">Review</a></li>
</ul>
<ul class="footer_links">
<li><h3 class="txt_lg_white">Terms</h3></li>
<li><a href="#" class="nav__link">Privacy Policy</a></li>
<li><a href="#" class="nav__link">Terms & Condition</a></li>
<li><a href="#" class="nav__link">Copyright Policy</a></li>
<li><a href="#" class="nav__link">Security</a></li>
<li><a href="#" class="nav__link">Fees & Charge</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
body{
margin:0;
padding:0;
}
/* all font classes */
.txt_lg_white{
color: #ffffff;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 400;
}
.txt_md_white{
color:#ffffff;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 500;
}
.txt_md_grey{
color:#bbbebc;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 500;
}
.txt_lg_black{
color: #253439;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 400;
}
.txt_md_black{
color: #253439;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 500;
}
.txt_sm_black{
color: #253439;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 600;
}
/* end of font classes */
/* start of main container styles */
/* start of recommendations section */
.left-h1{
color: #253439;
font-size: 40px;
font-weight: bolder;
padding:2em 0 1em 3em;
opacity:0;
transition: opacity 4s;
}
.recommendations-container{
width:86%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.recommendations_list{
display:flex;
padding: 0;
}
.recommendations__items{
list-style-type: none;
}
.recommendations__items+.recommendations__items{
margin-left:2em;
}
.recommendations__links{
text-decoration: none;
font-size: 16px;
}
.active_container{
height: 8px;
background-color:rgba(223, 222, 220,0.8);
border-radius: 20px;
margin-bottom:1em;
}
.active{
width: 22%;
padding:.2em;
display: block;
border-radius: 20px;
background-color: #253439;
}
.recommendations__controls{
width: 20%;
}
.control_left, .control_right{
cursor: pointer;
height: 50px;
width: 50px;
margin: 0 4px;
border-radius: 50%;
border:2px solid #253439;
display: inline-block;
font-size: 30px;
font-weight: bolder;
text-align: center;
}
.control_left>i, .control_right>i{
padding-top: .25em;
}
.control_right{
background-color: #253439;
color:#ffffff;
}
/* location preview component classes */
.location_preview{
padding-top: 2em;
padding-bottom: 2em;
width:86%;
display:flex;
justify-content: space-between;
margin:0 auto;
}
.preview{
width:23.5%;
height:450px;
border-radius: 0 25px 25px 25px;
}
.preview img{
width:100%;
height: 100%;
border-radius: 0 25px 25px 25px;
}
.preview__details{
position: relative;
top:-5.8em;
border-radius: 0 0 25px 25px;
background-color: rgba(37, 52, 57,0.7);
}
.preview__details__text{
display:flex;
justify-content: space-around;
padding-bottom: 0;
}
.preview__details__text__top i{
font-size: 15px;
}
.preview__details__text__bottom{
margin-top:-.5em;
padding-left:2.2em;
padding-bottom:.65em;
font-size: 18px;
font-weight:300;
}
/* end of location preview component classes */
/* end of recommendations section */
/* special offers section */
.centered-h1{
text-align: center;
color: #253439;
font-size: 40px;
font-weight: bolder;
padding-top: 2em;
opacity:0;
transition: opacity 4s;
}
.appear{
opacity:1;
}
.centered-recommendations-container{
width:13%;
margin:0 auto;
}
.special-offers-container{
width: 86%;
margin: 0 auto;
display: flex;
padding-bottom: 5em;
}
.special-offers-preview-container{
width: 95%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
/* location preview modification classes */
.modify_preview{
width:32.5%;
height:400px;
}
.modify_preview__details{
position: relative;
top:-4em;
border-radius:25px;
background-color: rgb(37, 52, 57);
}
.modify_preview__details__text__bottom{
position:relative;
top:2em;
margin-top:0;
padding-left:3em;
padding-top:0;
font-size: 18px;
font-weight:300;
}
.modify_text{
font-weight:bold;
position:relative;
top:2em;
left:2.5em;
}
.modify_control{
position: relative;
top:7em;
}
.modify_i{
font-size: 15px;
color:#ebc934;
}
/* end of location preview modification classes */
/* end of special offers section */
/* blog post section */
.blog{
width:90%;
margin-left:7em;
display: flex;
justify-content: space-between;
}
.video{
width:60%;
padding:2em;
}
.video_preview>img {
width:100%;
border-radius: 25px;
}
.video_preview_description>h1,.blogpost_preview_txt>h3{
font-size: 25px;
font-weight: bolder;
}
.video_preview_description>p, .blogpost_preview_txt>p{
font-size: 18px;
line-height: 1.5em;
}
.blogpost{
padding:2em;
}
.blogpost_preview{
display:flex;
}
.blogpost_preview_img{
width: 25%;
height:180px;
padding:.5em;
border-radius: 0 20px 20px 20px;
}
.blogpost_preview_img>img{
width:100%;
height:100%;
border-radius: 0 15px 15px 15px;
}
.blogpost_preview_txt{
width:50%;
padding:1em 0 0 2em;
}
/* end of blog post section */
/* testimonial and gallery section */
.testimonials{
width:86%;
padding-top: 1em;
margin:0 auto;
display:flex;
justify-content: space-between;
}
.preview_holder{
width:40.5%;
}
.preview_holder1{
width:25%;
}
.testimonials_preview_split{
width:30.5%;
height:550px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.testimonials_preview,.testimonials_preview_split{
height: 550px;
}
.layered_img{
width:90%;
height:48%;
}
.layered_img+.layered_img{
margin-bottom: -1em;
}
.layered_img>img{
width:100%;
height:100%;
}
.testimonials_preview>img{
width:100%;
height:100%;
}
.quotes{
position: relative;
bottom:4em;
width:38%;
margin:0 auto;
padding:2em 2em 1em 2em;
text-align: center;
line-height: 1.3em;
font-weight: 900;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 5px 10px rgba(37, 52, 57,0.3);
}
.modify_quote{
padding:1em 2em .5em 2em;
}
.modify_quote_circle{
height:70px;
width:70px;
position: absolute;
bottom:5em;
right:4.6em;
text-align: center;
background-color: #ffffff;
border:none;
text-align: center;
font-weight: bolder;
font-size: 20px;
color:#253439;
}
.modify_quote_circle_sm{
right:3em;
bottom:5.2em;
}
.modify_quote_circle>i{
position: relative;
top:1em;
}
.testimonials_preview, .testimonials_preview>img, .layered_img, .layered_img>img{
border-radius: 0 30px 30px 30px;
}
/* end of main container section */
/* footer section styles */
.footer{
margin-top: 5em;
}
.footer_container{
margin:0 auto;
}
.newsletter{
position: relative;
top: 5em;
z-index: 1;
width:75%;
margin:0 auto;
padding:3em 5em 3.5em 5em;
display:flex;
justify-content: space-between;
background-color: #ffffff;
border-radius: 0 25px 25px 25px;
box-shadow: -2px -5px 10px 8px rgba(37, 52, 57,0.2);
}
.newsletter h1{
font-size: 40px;
font-weight: 900;
color:#253439;
}
.newsletter_form{
width: 45%;
margin-top: .75em;
}
.newsletter_form input{
margin-right:1.7em;
padding:.85em 3em .85em .85em;
background-color: #e7e7e7;
width:42%;
border-radius: 10px;
border:none;
color: #bbbebc;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 600;
outline: none;
}
.newsletter_form button{
padding:.85em;
width:40%;
background-color:#273b41 ;
border:none;
border-radius: 10px;
color:#ffffff;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .05em;
margin-top: 1em;;
outline: none;
}
.footer_content_container{
background-color: #253439;
padding:7em 0 5em 0;
}
.footer_content{
position: relative;
top:3em;
width:80%;
margin: 0 auto;
display:flex;
justify-content: space-between;
}
.contact>h1{
color:#ffffff;
font-size: 45px;
}
.contact>i{
color:#ffffff;
font-size: 35px;
letter-spacing: .75em;
}
.contact>p{
padding-top: .5em;
}
.footer_links{
list-style-type: none;
}
.footer_links li{
margin-top: 20px;
}
.footer_links h3{
font-size: 25px;
font-weight: 500;
}
.footer_links a{
text-decoration:none;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 20px;
color:#ffffff;
}
/* end of footer section */
