-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (169 loc) · 5.56 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!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.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<header>
<h2><a href="#/">Mountain Travel</a></h2>
<nav class="menu">
<li><a href="#tours">Tours</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">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">Book 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 id="tours">
We offer a variety of mountaineering packages. Whether you've climbed
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="fa fa-compass fa-4x"></i>
<h4>Guided Trips</h4>
<p>
Looking for the complete experiences? 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 our 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 our 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 safely that they are my favorite
geographic feature, and my favorite word that starts with M.
</p>
<p class="author">-- Cynthia Poinciano</p>
<p class="quote">
I never understood why people care so much about mountains . But then I
went on on of these tours. Now I can't understand people who
<em>don't</em>
care about mountains!
</p>
<p class="author">-- Jessie Combs</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">-- John Steele</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 giev you to keep up yout energy while
you're hiking through the moutains. We have tons of that.
</p>
<hr />
<form>
<input type="email" placeholder="Email" />
<a href="#" class="btn">Subcribe now</a>
</form>
</section>
<footer>
<p>Images courtesy of <a href="http://unsplash.com/">unsplash</a></p>
<p>
Why are you reading this?! There's never anything interesting in the
footer!
</p>
<ul>
<li>
<a href="#"><i class="fab fa-twitter-square fa-2x"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-snapchat-square fa-2x"></i></a>
</li>
</ul>
</footer>
</body>
</html>