-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (117 loc) · 5.34 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mountain Travel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
<link rel="stylesheet" href="http:https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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 had 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 climbed Everest or
fon't even know what a mountain is, we've got the perfect vacation for you.
</p>
<hr>
<ul class="grid">
<li>
<i class="fa fa-compass fa-4x"></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="fa fa-camera-retro fa-4x"></i>
<h4>Photo Trips</h4>
<p>Want to experience nature's beauty without all of that annoying exercise? Take a photo
tour on one of out mountain buses.
</p>
</li>
<li>
<i class="fa fa-bicycle fa-4x"></i>
<h4>Biking Trips</h4>
<p>If bicycles are more your speed, consider taking a tour through one of our mountain bike paths.
We'll provide the bikes, and lunch too!
</p>
</li>
<li>
<i class="fa fa-flag-checkered fa-4x"></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 from out adventures:</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">- Thomas Ketchup</p>
<p class="quote">I never understood why people cared so much about mountains. But then I went of one of these tours.
Now I can't understance people who <em>don't</em> care about mountains!
</p>
<p class="author">- Kelly Mayonaise</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">- Barry Garcia</p>
</section>
<section class="contact">
<h3 class="title">Learn More</h3>
<p>Want to know about our upcoming nountain-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 class="btn" href="#">Subscribe Now</a>
</form>
</section>
<footer>
<p>Images courtesy of <a href="http:https://unsplash.com">unsplash</a>.</p>
<p>Why are you even reading this? There's never anything interesting in the footer!</p>
<ul>
<li><a href="#"><i class="fa fa-twitter-square fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-facebook-square fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-snapchat-square fa-2x"></i></a></li>
</ul>
</footer>
</body>
</html>