-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (92 loc) · 3.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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.0">
<title>ADVENTURE</title>
<!-- css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar">
<h1 class="logo">ADVENTURE</h1>
<UL class="nav-links">
<li class="active"><a href="#"></a> Home </li>
<li class="ctn"><a href="#Tours"> Tours </a></li>
<li class="ctn"><a href="#Explore">Explore</a></li>
<li class="ctn"><a href="#Events">Events</a></li>
<li class="ctn"><a href="Contact.html"> Contect Us </a></li>
</UL>
<img src="menu-btn.png" alt="" class="menu-btn">
</nav>
<header>
<div class="header-content">
<h2>Explore the colorful world</h2>
<div class="line"></div>
<h1>A WONDERFUL GIFT</h1>
<a href="#" class="ctn">Learn more</a>
</div>
</header>
<!-- ------------- Events -------------- -->
<section class="events" id="Events">
<div class="title">
<h1>Upcoming Events</h1>
<div class="line"></div>
</div>
<div class="row">
<div class="col">
<img src="img1.png" alt="">
<h4>Everest Camp trek</h4>
<p>The difficulty level of the Everest Base Camp is moderate. The trekking time often requires two weeks.</p>
<a href="#" class="ctn">Learn More</a>
</div>
<div class="col">
<img src="img2.png" alt="">
<h4>Walking Holidays</h4>
<p>Holidays are very much about getting away from it all, but for many travellers the traditional sun, sea and sand break is no longer enough. More and more holidaymakers seek activity and adventure on their escape.</p>
<a href="#" class="ctn">Learn More</a>
</div>
</div>
</section>
<section class="explore" id="Explore">
<div class="explore-content">
<h1>EPLORE THE WORLD</h1>
<div class="line"></div>
<p>Exploration gives us the sense that anything is possible. Exploration leads to knowledge and understanding, and means that you make the world a better place as you explore.</p>
<a href="#" class="ctn">Leran More</a>
</div>
</section>
<section class="tours" >
<div class="row">
<div class="col content-col" id="Tours">
<h1>UPCOMING TOURS & DESTINATION</h1>
<div class="line"></div>
<p>Our experienced writers travel the world to bring you informative and inspirational features, destination roundups, travel ideas, tips and beautiful photos in order to help you plan your next holiday.</p>
<a href="#" class="ctn">Learn More</a>
</div>
<div class="col image-col">
<div class="image-gallery">
<img src="img3.png" alt="">
<img src="img4.png" alt="">
<img src="img5.png" alt="">
<img src="img6.png" alt="">
</div>
</div>
</div>
</section>
<section class="footer">
<p>123 Fifth Avenue NY 10160, New York, USA | Phone: 800-567-345 | Email: [email protected]</p>
<p>Copyright © 2020 Outdoor Adventure</p>
</section>
<!-- javascript -->
<script>
const menuBtn = document.querySelector('.menu-btn')
const navlinks = document.querySelector('.nav-links')
menuBtn.addEventListener('click',()=>{
navlinks.classList.toggle('mobile-menu')
})
</script>
</body>
</html>