<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Home</title>
	<!--swiper css(hardware accelerated transitions)-->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>

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

	<!--css file link-->
	<link rel="stylesheet" href="css/style.css">

</head>
<body>
	<!--header section-->
	<section class="header">

		<a href="home.php" class="logo">zuru kenya.</a>

		<nav class="navbar">
			<a href="home.php">home</a>
			<a href="about.php">about</a>
			<a href="package.php">package</a>
			<a href="book.php">book</a>
		</nav>

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

	</section>

	<!--header section ends-->

	<!--home section-->
	<section class="home">
		
		<div class="swiper home-slider">
			<div class="swiper-wrapper">

				<div class="swiper-slide slide" style="background: url(images/cover2.jpg) no-repeat;">
					<div class="content">
						<span>discover, travel,explore</span>
						<h3>travel around the world</h3>
						<a href="package.php" class="btn">discover more</a>
					</div>
				</div>

				<div class="swiper-slide slide" style="background: url(images/cover4.jpg) no-repeat;">
					<div class="content">
						<span>discover, travel,explore</span>
						<h3>discover new places</h3>
						<a href="package.php" class="btn">discover more</a>
					</div>
				</div>

				<div class="swiper-slide slide" style="background: url(images/cover5.jpg) no-repeat;">
					<div class="content">
						<span>discover, travel,explore</span>
						<h3>make your tour worthwhile</h3>
						<a href="package.php" class="btn">discover more</a>
					</div>
				</div>

			</div>

			<div class="swiper-button-next"></div>
    		<div class="swiper-button-prev"></div>			
		</div>
	</section>

	<!--home section ends-->

	<!--services section-->

	<section class="services">

		<h1 class="heading-title">our services</h1>
		<div class="box-container">

			<div class="box">
				<img src="images/icon2.png">
				<h3>adventure</h3>
			</div>

			<div class="box">
				<img src="images/icon7.png">
				<h3>camping</h3>
			</div>

			<div class="box">
				<img src="images/icon5.png">
				<h3>camp fire</h3>
			</div>

			<div class="box">
				<img src="images/icon3.png">
				<h3>tour guide</h3>
			</div>

			<div class="box">
				<img src="images/icon4.png">
				<h3>trekking</h3>
			</div>

			<div class="box">
				<img src="images/icon6.png">
				<h3>off road</h3>
			</div>

		</div>

	</section>
	<!-- services section ends-->

	<!-- home about section-->

	<section class="home-about">
		<div class="image">
			<img src="images/about.jpg">
		</div>

		<div class="content">
			<h3>about us</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			<a href="about.php" class="btn">read more</a>
		</div>
	</section>

	<!-- home about section ends-->

	<!--home packages section-->

	<section class="home-packages">

		<h1 class="heading-title"> our packages</h1>
		<div class="box-container">

			<div class="box">
				<div class="image">
					<img src="images/1.jpg">
				</div>
				<div class="content">
					<h3>adventure & tour</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					<a href="book.php" class="btn">book now</a>
				</div>
			</div>

			<div class="box">
				<div class="image">
					<img src="images/2.jpg">
				</div>
				<div class="content">
					<h3>adventure & tour</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					<a href="book.php" class="btn">book now</a>
				</div>
			</div>

			<div class="box">
				<div class="image">
					<img src="images/3.jpg">
				</div>
				<div class="content">
					<h3>adventure & tour</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					<a href="book.php" class="btn">book now</a>
				</div>
			</div>

		</div>

		<div class="load-more"> <a href="package.php" class="btn">load more</a> </div>

	</section>

	<!--home packages section ends-->

	<!--home offer section-->
	<section class="home-offer">

		<div class="content">
			<h3>upto 50% off</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
			<a href="book.php" class="btn"> book now</a>
		</div>

	</section>
	<!--home offer section ends-->

	<!-- footer section-->
	<section class="footer">

		<div class="box-container">

			<div class="box">
				<h3>quick links</h3>
				<a href="home.php"><i class="fas fa-angle-right"></i>home</a>
				<a href="about.php"><i class="fas fa-angle-right"></i>about</a>
				<a href="package.php"><i class="fas fa-angle-right"></i>package</a>
				<a href="book.php"><i class="fas fa-angle-right"></i>book</a>
			</div>

			<div class="box">
				<h3>extra links</h3>
				<a href="#"><i class="fas fa-angle-right"></i>ask questions</a>
				<a href="#"><i class="fas fa-angle-right"></i>about us</a>
				<a href="#"><i class="fas fa-angle-right"></i>privacy policy</a>
				<a href="#"><i class="fas fa-angle-right"></i>terms of use</a>
			</div>

			<div class="box">
				<h3>contact info</h3>
				<a href="#"><i class="fas fa-phone"></i>+254-705-667-551</a>
				<a href="#"><i class="fas fa-phone"></i>+254-723-250-983</a>
				<a href="#"><i class="fas fa-envelope"></i>zurukenya@gmail.com</a>
				<a href="#"><i class="fas fa-map"></i>Nairobi, Kenya</a>	
			</div>

			<div class="box">
				<h3>follow us</h3>
				<a href="href="#><i class="fab fa-facebook-f"></i>facebook</a>
				<a href="href="#><i class="fab fa-twitter"></i>twitter</a>
				<a href="href="#><i class="fab fa-instagram"></i>instagram</a>
				<a href="href="#><i class="fab fa-linkedin"></i>linkedin</a>
			</div>
		</div>

		<div class="credit"> created by <span>Esther Kiarie</span> | all rights reserved!</div>

	</section>
	<!-- footer section ends-->

	
	<!--swiper js link-->
	<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

	<!--js file link-->
	<script src="js/script.js"></script>
</body>
</html>