HTML Traveling Yuk

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Traveling yukk</title>


<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:300,400,600,700"> 
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/templatemo-style.css">




</head>
<body>
<div class="tm-main-content" id="top">
<div class="tm-top-bar-bg"></div>
<div class="tm-top-bar" id="tm-top-bar">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg narbar-light">
<a class="navbar-brand mr-auto" href="#">
<img src="img/logo.png" alt="Site logo">
Traveling
</a>
<button type="button" id="nav-toggle" class="navbar-
toggler collapsed" data-toggle="collapse" data-target="#mainNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="mainNav" class="collapse navbar-collapse tm-
bg-white">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#top">Home
<span class="sr-only">(current)</span></a>
</li>
<a class="nav-link" href="#tm-section-
2">Destination Favorit</a>
</li>
3">Recommended Hotel</a>
</li>
4">Contact</a>
</li>
</ul>
</div>
</nav>
</div> 
</div> 
</div> 
<div class="tm-page-wrap mx-auto">

<section class="tm-banner">
<div class="tm-container-outer tm-banner-bg">
<div class="row tm-banner-row tm-banner-row-header">

<div class="col-xs-12">
<div class="tm-banner-header">
<h1 class="text-uppercase tm-banner-title">Mari
Dimulai</h1>
<img src="img/dots-3.png" alt="Dots">
<p class="tm-banner-subtitle">Kami Akan
Menentukan Pilihan Terbaik.</p>
<a href="javascript:void(0)" class="tm-down-
arrow-link"><i class="fa fa-2x fa-angle-down tm-down-arrow"></i></a>
</div>
</div> 
</div> 
<div class="row tm-banner-row" id="tm-section-search">
<form action="index.html" method="get" class="tm-

search-form tm-section-pad-2">
<div class="form-row tm-search-form-row">
<div class="form-group tm-form-group tm-form-

group-pad tm-form-group-1">
<label for="inputCity">Pilih Hotel</label>
<input name="Hotel" type="text"
class="form-control" id="inputCity" placeholder="Type your Hotel...">
</div>
group-1">
<div class="form-group tm-form-group tm-
form-group-pad tm-form-group-2">
<label for="inputRoom">Ruangan</label>
<select name="room" class="form-control
tm-select" id="inputRoom">
<option value="1" selected>1
Room</option>
<option value="2">2 Rooms</option>
<option value="10">10
Rooms</option>
</select>
</div>
<label for="inputdewasa">Dewasa</label>
<select name="dewasa" class="form-

control tm-select" id="inputdewasa">
<option value="1"
selected>1</option>
<option value="2">2</option>
</select>
</div>
<label for="inputAnak-anak">Anak-
anak</label>
<select name="Anak-anak" class="form-
control tm-select" id="inputAnak-anak">
<option value="0"
selected>0</option>
</select>
</div>
</div>
</div> 
<div class="form-row tm-search-form-row">

<label for="inputCheckIn">Check In</label>
<input name="check-in" type="text"
class="form-control" id="inputCheckIn" placeholder="Check In">
</div>
<label for="inputCheckOut">Check
Out</label>
<input name="check-out" type="text"
class="form-control" id="inputCheckOut" placeholder="Check Out">
</div>
<label for="btnSubmit"> </label>
<button type="submit" class="btn btn-
primary tm-btn tm-btn-search text-uppercase" id="btnSubmit">Cek
Ketersediaan</button>
</div>
</div>
</form>
</div> 

<div class="tm-banner-overlay"></div>
</div> 
</div> 
</section>
<section class="p-5 tm-container-outer tm-bg-gray">

<div class="row">
<div class="col-xs-12 mx-auto tm-about-text-wrap text-
center">
<h2 class="text-uppercase mb-4">Perjalanan
<strong>Anda</strong> Adalah Prioritas Kami</h2>
<p class="mb-4">Perjalanan Anda Akan Lebih Nyamana
menggunakan Jasa Layanan Traveling Ceria.</p>
<a href="#" class="text-uppercase btn-primary tm-
btn">Jelajahi</a>
</div>
</div>
</div>
</section>
<div class="tm-container-outer" id="tm-section-2">

<section class="tm-slideshow-section">
<div class="tm-slideshow">
<img src="img/polo.jpg" alt="Image">
<img src="img/Danautoba.jpg" alt="Image">
<img src="img/sunge.jpg" alt="Image">
</div>
<div class="tm-slideshow-description tm-bg-primary">
<h2 class="">Tempat yang Sering Dikunjungi</h2>
<p>Laut Dan Anema Adalah Destinasi Yang Sangat Favorit dan
Banyak Dikunjungi Ole Turis Mancanegara,Fasilitas yang bagus membuat anda juga akan
tertarik dengan tempat wisata yang satu ini destinasi yang ditawarkan adalah laut
merah.</p>
<a href="#" class="text-uppercase tm-btn tm-btn-white tm-
btn-white-primary">Baca Selengkapnya</a>
</div>
</section>
<section class="clearfix tm-slideshow-section tm-slideshow-section-
reverse">
<div class="tm-right tm-slideshow tm-slideshow-highlight">
<img src="img/airpanas.jpg" alt="Image">
<img src="img/pisopiso.jpg" alt="Image">
<img src="img/bukitlawang.jpg" alt="Image">
</div>
<div class="tm-slideshow-description tm-slideshow-description-

left tm-bg-highlight">
<h2 class="">Tempat Wisata Yang Sangat Populer</h2>
<p>Banyak Kuliner dan streat food yang sangat lezat dan
nikmat,Di asia juga banyak destinasi yang jauh lebih populer.</p>
btn-white-highlight">Baca Selengkapnya</a>
</div>
</section>
<section class="tm-slideshow-section">
<div class="tm-slideshow">
<img src="img/pisopiso.jpg" alt="Image">
<img src="img/kamila.jpg" alt="Image">
<img src="img/kalangulu.jpg" alt="Image">
</div>
<div class="tm-slideshow-description tm-bg-primary">
<h2 class="">Wisata Sumatera Utara Yang Sangat Populer</h2>
<p>Danau Dan Pusat Perbelanjaan baik Local dan Mancanegara
yang sangat bagus dan populer bagi anda.</p>
btn-white-primary">Baca Selengkapnya</a>
</div>
</section>
</div>
<div class="tm-container-outer" id="tm-section-3">
<ul class="nav nav-pills tm-tabs-links">
<li class="tm-tab-link-li">
<a href="#1a" data-toggle="tab" class="tm-tab-link">
<img src="img/north-america.png" alt="Image"
class="img-fluid">
Danau Toba
</a>
</li>
<img src="img/south-america.png" alt="Image"
class="img-fluid">
Bukit Lawang
</a>
</li>
<img src="img/europe.png" alt="Image" class="img-
fluid">
Pariban
</a>
</li>
<a href="#4a" data-toggle="tab" class="tm-tab-link
active">
<img src="img/asia.png" alt="Image" class="img-fluid">
Binjai
</a>
</li>
<img src="img/africa.png" alt="Image" class="img-
fluid">
Berastagi
</a>
</li>
<img src="img/australia.png" alt="Image" class="img-
fluid">
Sibolga
</a>
</li>
<img src="img/antartica.png" alt="Image" class="img-
fluid">
Pamah Semelir
</a>
</li>
</ul>
<div class="tab-content clearfix">


<div class="tab-pane fade" id="1a">
<div class="tm-recommended-place-wrap">
<div class="tm-recommended-place">
<img src="img/niagara.jpg" alt="Image" class="img-
fluid tm-recommended-img">
<div class="tm-recommended-description-box">
<h3 class="tm-recommended-title">Niagara
Hotel</h3>
<p class="tm-text-highlight">Kamar/Malam</p>
<p class="tm-text-gray">Hotel Yang dilengkapi
Fasilitas yang sangat lengkap anatara lain:area main anak,Tenis,Layanan
Pijat,Bilyar Dan Sebagainya...</p>
</div>
<a href="#" class="tm-recommended-price-box">
<p class="tm-recommended-price">Rp 695.400</p>
<p class="tm-recommended-price-link">Baca
Selengkapnya</p>
</a>
</div>
<img src="img/khas.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Khas
Parapat</h3>
Fasilitas yang sangat lengkap anatara lain:area main anak,Sewa Mobil,Layanan
</div>
<div id="preload-hover-img"></div>
Selengkapnya</p>
</a>
</div>
<img src="img/astaria.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Astaria
Hotel</h3>
Fasilitas yang sangat lengkap anatara lain:area main anak,Kolam Air Panas,Layanan
</div>
Selengkapnya</p>
</a>
</div>
<img src="img/sapadia.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Sapadia
Hotel</h3>
Fasilitas yang sangat lengkap anatara lain:area main anak,karoke,Tenis,Layanan
</div>
Selanjutnya</p>
</a>
</div>
</div>
<a href="#" class="text-uppercase btn-primary tm-btn mx-

auto tm-d-table">Show More Places</a>
</div> 


<img src="img/Wisma.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Wisma Batu
Mandi</h3>
<p class="tm-text-highlight">Malam</p>
<p class="tm-text-gray">Wisma Batu Mandi
memiliki taman, lounge bersama, teras, dan restoran di Bukit Lawang....</p>
</div>
<p class="tm-recommended-price-link">Continue
Reading</p>
</a>
</div>
<img src="img/Garden.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Garden
Iin</h3>
<p class="tm-text-gray">Garden Inn terletak di
Bukit Lawang, menyediakan Wi-Fi gratis, dan Anda dapat menikmati taman, teras, dan
restoran. Beberapa unit memiliki area tempat duduk dan/atau balkon...</p>
</div>
Reading</p>
</a>
</div>
<img src="img/jungle.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Jungle In
BUkit Lawang</h3>
<p class="tm-text-gray">Menghadap ke pantai,
Jungle Inn Bukit lawang menawarkan akomodasi bintang 2 di Bukit Lawang dan memiliki
taman, teras, dan restoran....</p>
</div>
Reading</p>
</a>
</div>
<img src="img/lodge.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Sumatra
Logde</h3>
<p class="tm-text-gray">Sumatra Expedition
Lodge memiliki taman, teras, restoran, dan bar di Bukit Lawang. Tersedia parkir
pribadi gratis dan layanan antar-jemput bandara dengan biaya tambahan....</p>
</div>
Reading</p>
</a>
</div>
</div>



<img src="img/pariban.jpg" alt="iamge" class="img-
<h3 class="tm-recommended-title">Pariban
Hotel</h3>
Fasilitas yang sangat lengkap anatara lain:area main anak,Kolam Air
Panas,Tenis,Layanan Pijat,Bilyar Dan Sebagainya...</p>
</div>
<p class="tm-recommended-price">Rp 300.000
</p>
Selanjutnya</p>
</a>
</div>
<img src="img/Kamuna.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Kamuna
Garden</h3>
Fasilitas yang sangat lengkap anatara lain:area main anak,Kolam Air
Panas,Tenis,Layanan Pijat,Bilyar Dan Sebagainya...</p>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/grand.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Grand
Resort</h3>
Pijat, Dan Sebagainya...</p>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/sibayak.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Sibayak
Hotel</h3>
Pijat Dan Sebagainya...</p>
</div>
Selanjutnya</p>
</a>
</div>
</div>



<div class="tab-pane fade show active" id="4a">

<img src="img/Binjai.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Binjai
Hotel</h3>
<p class="tm-text-gray">Fasilitas Kamar ,Kipas
Dan Sebagainya...</p>
</div>
Selaanjutnya</p>
</a>
</div>
<img src="img/anita.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Anita
Hotel</h3>
Dan Sebagainya..</p>
</div>
<div id="preload-hover-img"></div>
Selanjutnya</p>
</a>
</div>
<img src="img/lestari.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Bali
Lestari</h3>
Dan Sebagainya..</p>
</div>
Reading</p>
</a>
</div>
</div>



<img src="img/Mikey.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Mikey
Hotel</h3>
<p class="tm-text-gray">Para tamu memiliki
akses resepsionis 24 jam, layanan kamar, dan layanan concierge selama menginap di
Mikie Holiday Resort. Selain itu, Mikie Holiday Hotel juga menawarkan kolam renang
dan sarapan, yang akan membuat pengalaman menginap di Berastagi semakin berkesan.
Dan, untuk menambah kenyamanan, parkir gratis tersedia untuk para tamu....</p>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/mutiara.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Grand Mutiara
Berastagi</h3>
<p class="tm-text-gray">Kamar di Grand Mutiara
Hotel Berastagi menawarkan tv layar datar, meja, dan tempat tidur panjang tambahan
memaksimalkan kenyamanan, dan para tamu dapat menggunakan internet dengan
tersedianya internet gratis....</p>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/kalangulu.jpg" alt="Image"
class="img-fluid tm-recommended-img">
<h3 class="tm-recommended-title">Hotel Kalang
Ulu</h3>
<p class="tm-text-gray">Kedai kopi, penyimpanan
bagasi, dan layanan penukaran mata uang adalah beberapa hal yang ditawarkan oleh
hotel kecil. Jika Anda mengemudi ke Hotel Kalang Ulu, parkir gratis
tersedia....</p>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/rudang.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Rudang
Hotel</h3>
<p class="tm-text-gray">Sebagai "rumah" Anda,
kamar hotel menawarkan penyejuk udara, minibar, dan dapur kecil, dan mudah
terhubung dengan internet karena wi-fi gratis tersedia....</p>
</div>
Selanjutnya</p>
</a>
</div>
</div>


<img src="img/marina.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Hotel
Marina</h3>
Dan, untuk menambah kenyamanan, parkir gratis tersedia untuk para tamu...</p>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/prima.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Hotel
Prima</h3>
</div>
Selanjutnya</p>
</a>
</div>
</div>



<img src="img/kamila.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Kamila
Pamah</h3>
</div>
Selanjutnya</p>
</a>
</div>
<img src="img/view.jpg" alt="Image" class="img-
<h3 class="tm-recommended-title">Pamah
View</h3>
</div>
Selanjutnya</p>
</a>
</div>
</div>

</div>
</div>
<div class="tm-container-outer tm-position-relative" id="tm-section-4">

<div id="google-map"></div>
<form action="index.html" method="post" class="tm-contact-form">
<div class="form-group tm-name-container">
<input type="text" id="contact_name" name="contact_name"
class="form-control" placeholder="Name" required/>
</div>
<div class="form-group tm-email-container">
<input type="email" id="contact_email" name="contact_email"
class="form-control" placeholder="Email" required/>
</div>
<div class="form-group">
<input type="text" id="contact_subject"
name="contact_subject" class="form-control" placeholder="Subject" required/>
</div>
<div class="form-group">
<textarea id="contact_message" name="contact_message"
class="form-control" rows="9" placeholder="Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary tm-btn-primary tm-
btn-send text-uppercase">Tinggalkan Pesan</button>
</form>
</div> 
<footer class="tm-container-outer">
<p class="mb-0">Copyright Â© <span
class="tm-current-year">2018</span> mispa/Clusilla
. Designed by <a rel="nofollow"

href="http://www.google.com/+Traveling" target="_parent">Traveling</a></p>
</footer>
</div>
</div> 


<script src="js/jquery-1.11.3.min.js"></script> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/datepicker.min.js"></script> 
<script src="js/jquery.singlePageNav.min.js"></script> 
<script src="slick/slick.min.js"></script> 
<script src="js/jquery.scrollTo.min.js"></script> 
<script>
/* Google Maps
------------------------------------------------*/
var map = '';
var center;
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(37.769725, -122.462154),
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('google-map'),

mapOptions);
google.maps.event.addDomListener(map, 'idle', function() {

calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {

map.setCenter(center);
});
}
function calculateCenter() {
center = map.getCenter();
}
function loadGoogleMap(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?
key=AIzaSyDVWt4rJfibfsEDvcuaChUaZRS5NXey1Cs&v=3.exp&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
/* DOM is ready
------------------------------------------------*/
$(function(){
// Change top navbar on scroll

$(window).on("scroll", function() {
if($(window).scrollTop() > 100) {
$(".tm-top-bar").addClass("active");
} else {
$(".tm-top-bar").removeClass("active");
}
});
// Smooth scroll to search form

$('.tm-down-arrow-link').click(function(){
$.scrollTo('#tm-section-search', 300, {easing:'linear'});
});
// Date Picker in Search form

var pickerCheckIn = datepicker('#inputCheckIn');
var pickerCheckOut = datepicker('#inputCheckOut');
// Update nav links on scroll

$('#tm-top-bar').singlePageNav({
currentClass:'active',
offset: 60
});
// Close navbar after clicked

$('.nav-link').click(function(){
$('#mainNav').removeClass('show');
});
// Slick Carousel
$('.tm-slideshow').slick({
infinite: true,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1
});
loadGoogleMap(); // Google Map
$('.tm-current-year').text(new Date().getFullYear()); // Update year

in copyright
});
</script>
</body>
</html>

HTML Traveling Yuk

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Traveling Yuk

Uploaded by

Copyright:

Available Formats

<!

<div class="tm-page-wrap mx-auto">

<div class="row tm-banner-row tm-banner-row-header">

<form action="index.html" method="get" class="tm-

<div class="form-group tm-form-group tm-form-

<select name="dewasa" class="form-

<div class="form-group tm-form-group tm-form-

</div>

<section class="p-5 tm-container-outer tm-bg-gray">

<div class="tm-container-outer" id="tm-section-2">

<div class="tm-slideshow-description tm-slideshow-description-

<a href="#" class="text-uppercase btn-primary tm-btn mx-

<a href="#" class="text-uppercase btn-primary tm-btn mx-

<a href="#" class="text-uppercase btn-primary tm-btn mx-

<a href="#" class="text-uppercase btn-primary tm-btn mx-

<a href="#" class="text-uppercase btn-primary tm-btn mx-

<a href="#" class="text-uppercase btn-primary tm-btn mx-

<div class="tm-container-outer tm-position-relative" id="tm-section-4">

. Designed by <a rel="nofollow"

map = new google.maps.Map(document.getElementById('google-map'),

google.maps.event.addDomListener(map, 'idle', function() {

google.maps.event.addDomListener(window, 'resize', function() {

// Change top navbar on scroll

// Smooth scroll to search form

// Date Picker in Search form

// Update nav links on scroll

// Close navbar after clicked

loadGoogleMap(); // Google Map

$('.tm-current-year').text(new Date().getFullYear()); // Update year

You might also like