Index

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>complete responsive tour and travel agency website design
tutorial</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">


<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<div id="menu-bar" class="fas fa-bars"></div>
<a href="#" class="logo"><span>T</span>ravel</a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#book">book</a>
<a href="#packages">packages</a>
<a href="#services">services</a>
<a href="#gallery">gallery</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
</nav>
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<form action="" class="search-bar-container">

<input type="search" id="search-bar" placeholder="search here...">
<label for="search-bar" class="fas fa-search"></label>
</form>
</header>


<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form action="">
<h3>login</h3>
<input type="email" class="box" placeholder="enter your email">
<input type="password" class="box" placeholder="enter your password">
<input type="submit" value="login now" class="btn">
<input type="checkbox" id="remember">
<label for="remember">remember me</label>
<p>forget password? <a href="#">click here</a></p>
<p>don't have and account? <a href="#">register now</a></p>
</form>
</div>

<section class="home" id="home">
<div class="content">
<h3>adventure is worthwhile</h3>
<p>dicover new places with us, adventure awaits</p>
<a href="#" class="btn">discover more</a>
</div>
<div class="controls">
<span class="vid-btn active" data-src="images/vid-1.mp4"></span>
<span class="vid-btn" data-src="images/vid-2.mp4"></span>
</div>
<div class="video-container">
<video src="images/vid-1.mp4" id="video-slider" loop autoplay
muted></video>
</div>
</section>


<section class="book" id="book">
<h1 class="heading">
<span>b</span>
<span>o</span>
<span>o</span>
<span>k</span>
<span class="space"></span>
<span>n</span>
<span>o</span>
<span>w</span>
</h1>
<div class="row">
<div class="image">
<img src="images/book-img.svg" alt="">
</div>
<form action="">
<div class="inputBox">
<h3>where to</h3>
<input type="text" placeholder="place name">
</div>
<h3>how many</h3>
<input type="number" placeholder="number of guests">
</div>
<h3>arrivals</h3>
<input type="date">
</div>
<h3>leaving</h3>
<input type="date">
</div>
<input type="submit" class="btn" value="book now">
</form>
</div>
</section>


<section class="packages" id="packages">
<span>p</span>
<span>a</span>
<span>c</span>
<span>k</span>
<span>a</span>
<span>g</span>
<span>e</span>
<span>s</span>
</h1>
<div class="box-container">
<div class="box">
<img src="images/p-1.jpg" alt="">
<h3> <i class="fas fa-map-marker-alt"></i> mumbai </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veritatis, nam!</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> $90.00 <span>$120.00</span> </div>
<a href="#" class="btn">book now</a>
</div>
</div>
<div class="box">
<h3> <i class="fas fa-map-marker-alt"></i> hawaii </h3>
Veritatis, nam!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3> <i class="fas fa-map-marker-alt"></i> sydney </h3>
Veritatis, nam!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3> <i class="fas fa-map-marker-alt"></i> paris </h3>
Veritatis, nam!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3> <i class="fas fa-map-marker-alt"></i> tokyo </h3>
Veritatis, nam!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3> <i class="fas fa-map-marker-alt"></i> eypt </h3>
Veritatis, nam!</p>
<div class="stars">
</div>
</div>
</div>
</div>
</section>


<section class="services" id="services">
<span>s</span>
<span>e</span>
<span>r</span>
<span>v</span>
<span>i</span>
<span>c</span>
<span>e</span>
<span>s</span>
</h1>
<div class="box">
<i class="fas fa-hotel"></i>
<h3>affordable hotels</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
commodi earum, quis voluptate exercitationem ut minima itaque iusto ipsum corrupti!
</p>
</div>
<div class="box">
<i class="fas fa-utensils"></i>
<h3>food and drinks</h3>
</p>
</div>
<div class="box">
<i class="fas fa-bullhorn"></i>
<h3>safty guide</h3>
</p>
</div>
<div class="box">
<i class="fas fa-globe-asia"></i>
<h3>around the world</h3>
</p>
</div>
<div class="box">
<i class="fas fa-plane"></i>
<h3>fastest travel</h3>
</p>
</div>
<div class="box">
<i class="fas fa-hiking"></i>
<h3>adventures</h3>
</p>
</div>
</div>
</section>


<section class="gallery" id="gallery">
<span>g</span>
<span>a</span>
<span>l</span>
<span>l</span>
<span>e</span>
<span>r</span>
<span>y</span>
</h1>
<div class="box">
<img src="images/g-1.jpg" alt="">
<h3>amazing places</h3>
Ducimus, tenetur.</p>
<a href="#" class="btn">see more</a>
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
<div class="box">
</div>
</div>
</div>
</section>


<section class="review" id="review">
<span>r</span>
<span>e</span>
<span>v</span>
<span>i</span>
<span>e</span>
<span>w</span>
</h1>
<div class="swiper-container review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box">
<img src="images/pic1.png" alt="">
<h3>john deo</h3>
Ipsa adipisci quisquam sunt nesciunt fugiat odit minus illum asperiores dolorum
enim sint quod ipsam distinctio molestias consectetur ducimus beatae, reprehenderit
exercitationem!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3>john deo</h3>
exercitationem!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3>john deo</h3>
exercitationem!</p>
<div class="stars">
</div>
</div>
</div>
<div class="box">
<h3>john deo</h3>
exercitationem!</p>
<div class="stars">
</div>
</div>
</div>
</div>
</div>
</section>


<section class="contact" id="contact">
<span>c</span>
<span>o</span>
<span>n</span>
<span>t</span>
<span>a</span>
<span>c</span>
<span>t</span>
</h1>
<div class="row">
<div class="image">
<img src="images/contact-img.svg" alt="">
</div>
<form action="">
<input type="text" placeholder="name">
<input type="email" placeholder="email">
</div>
<input type="number" placeholder="number">
<input type="text" placeholder="subject">
</div>
<textarea placeholder="message" name="" id="" cols="30"
rows="10"></textarea>
<input type="submit" class="btn" value="send message">
</form>
</div>
</section>



<section class="brand-container">
<div class="swiper-container brand-slider">

<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
</div>
</div>
</section>

<section class="footer">
<div class="box">
<h3>about us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
quas magni pariatur est accusantium voluptas enim nemo facilis sit debitis.</p>
</div>
<div class="box">
<h3>branch locations</h3>
<a href="#">india</a>
<a href="#">USA</a>
<a href="#">japan</a>
<a href="#">france</a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#">home</a>
<a href="#">book</a>
<a href="#">packages</a>
<a href="#">services</a>
<a href="#">gallery</a>
<a href="#">review</a>
<a href="#">contact</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#">facebook</a>
<a href="#">instagram</a>
<a href="#">twitter</a>
<a href="#">linkedin</a>
</div>
</div>
<h1 class="credit"> created by <span> mr. web designer </span> | all rights
reserved! </h1>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


<script src="js/script.js"></script>
</body>
</html>

Index

Uploaded by

Document Information

Original Description:

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

Index

Uploaded by

Copyright:

Available Formats

<!

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div id="menu-bar" class="fas fa-bars"></div>

<a href="#" class="logo"><span>T</span>ravel</a>

<form action="" class="search-bar-container">

<i class="fas fa-times" id="form-close"></i>

<section class="home" id="home">

<section class="book" id="book">

<section class="packages" id="packages">

<section class="services" id="services">

<section class="gallery" id="gallery">

<section class="review" id="review">

<div class="swiper-container review-slider">

<section class="contact" id="contact">

<div class="swiper-container brand-slider">

You might also like