-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (96 loc) · 4.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mountain Travel</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<h2><a href="#">Mountain Travel</a></h2>
<nav>
<li><a href="#">Tours</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</nav>
</header>
<section class="hero">
<div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
<div class="hero-content-area">
<h1>Mountain Travel</h1>
<h3>Unmissable Adventure Tours Around the World</h3>
<a href="#" class="btn">Contact Us Now</a>
</div>
</section>
<section class="destinations">
<h3 class="title">Some of our destinations</h3>
<p>Tired of the ocean? Are the plains too plain? Come along with us on one of our mountain adventures. Here are some pictures from people who have elevated experiences with us.</p>
<hr>
<ul class="grid">
<li class="small" style="background-image: url(assets/img/mountain1.jpg);"></li>
<li class="large" style="background-image: url(assets/img/mountain2.jpg);"></li>
<li class="large" style="background-image: url(assets/img/mountain3.jpg);"></li>
<li class="small" style="background-image: url(assets/img/mountain4.jpg);"></li>
</ul>
</section>
<section class="packages">
<h3 class="title">Tour Packages</h3>
<p>We offer a variety of mountaineering packages. Whether you've imbed Everest or don't even know what a mountain is, we've got the perfect vacation for you.</p>
<hr>
<ul class="grid">
<li>
<i class="fas fa-compass fa-5x"></i>
<h4>Guided Trips</h4>
<p>Looking for the complete experience? Take a tour with one of our experts. They'll show you secrets that you're likely to miss otherwise.</p>
</li>
<li>
<i class="fas fa-camera-retro fa-5x"></i>
<h4>Photo Trips</h4>
<p>Want to experience natures beauty without all of that annoying exercise? Take a photo tour on one of our mountain buses.</p>
</li>
<li>
<i class="fas fa-bicycle fa-5x"></i>
<h4>Biking Trips</h4>
<p>If bicycles are more your speed, consider taking a tour through onr of our mountain bike paths. We'll provide the bikes, and lunch too!</p>
</li>
<li>
<i class="fas fa-flag-checkered fa-5x"></i>
<h4>Racing Trips</h4>
<p>Got a competitive spirit? Sign up for one of our mountain marathons! Try to reach the summit before anyone else!</p>
</li>
</ul>
</section>
<section class="testimonials">
<h3 class="title">Testimonials</h3>
<hr>
<p class="quote">Wow! This tour made me realize how much I love mountains. After going on one of these tours, I can safely say that they are my favorite geographic feature, and my favorite word that starts with M!</p>
<p class="author">- Colt Steele</p>
<p class="quote">I never understood why people cared so much about mountains. But then I went on one of these tours. Now I can't understand people who don't!</p>
<p class="author">- Elie S</p>
<p class="quote">If you want to understand the universe, head to the mountains. I mean, seriously. It's like, woah. You know? It's like that.</p>
<p class="author">- Tim Garcia</p>
</section>
<section class="contact">
<h3 class="title">Learn More</h3>
<p>Want to know more about our upcoming mountain-related events, or come to one of our mixers? Just sign up for our mailing list. No spam from us, we promise! Except for the spam we give you to keep up your energy while you're hiking through the mountains. We have tons of that.</p>
<hr>
<form>
<input type="email" placeholder="Email">
<a href="#" class="btn">Subscribe now</a>
</form>
</section>
<footer>
<p>Images courtesy of <a href="http://unsplash.com/">unsplash</a></p>
<p>There is nothing else here in the footer of the site!</p>
<ul>
<li><a href="#"><i class="fab fa-twitter-square fa-3x"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-square fa-3x"></i></a></li>
<li><a href="#"><i class="fab fa-instagram fa-3x"></i></a></li>
</ul>
</footer>
</body>
</html>