-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (182 loc) · 6.73 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
178
179
180
181
182
183
184
185
186
187
188
<!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>Maquette3</title>
<link rel="stylesheet" href="./CSS/bootstrap-reboot.css" />
<link rel="stylesheet" href="./CSS/style.css" />
</head>
<body>
<!-- Menu Burger -->
<header>
<div class="burger-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
/>
</svg>
</div>
<!-- Description h1 -->
<section class="desc">
<div class="border-color">
<h5>The Telegraph / 5 January 2017 • 9:41AM</h5>
<h1>15 mountain holidays</h1>
<p class="p p-desc">
Whether going on a mountain trip is a long-held ambition or a recent
interest, there is no better time to plan an adventure than at the
start of a new year.
</p>
<a class="btn btn-primary" href="#">learn more</a>
</div>
</section>
</header>
<!-- Premier article -->
<section class="article-1">
<img
src="./src/img/adventure-g4a0c1bd89_1920.jpg"
alt="photo d'un homme en haut de la montagne!"
/>
<div class="text">
<div class="border-2">
<h2>Searching for the world's most remote village</h2>
<p class="p">
“<span>Phu is just</span> around that bend,” our mountain guide
shouts out from 50 metres behind us, taking another swig from his
flask. We knowingly raise our eyebrows in sync and continue trekking
the steep incline, not hopeful the guide’s seventh guess will be
lucky. We’re nine hours into day three of our search for one of the
most remote places in the world, a village so isolated that the rest
of Nepal wasn’t aware of its existence until the Seventies.
</p>
<a class="btn btn-secondary" href="#">read more</a>
</div>
</div>
</section>
<section class="article-2">
<div class="text">
<div class="border-3">
<h2>Great outdoor activities in Colorado: readers’ tips</h2>
</div>
<p class="p">
Just over eight miles one way from the Monarch Lake Trailhead, near
Granby, the walk to Mirror Lake boasts abundant wildlife (moose
sightings are common), miles of fishable trout stream, cold-water
swimming holes (for the brave or foolhardy), and superb scenery
throughout. It’s possible as a long day hike, but best enjoyed with an
overnight camp at Mirror, or nearby Crater Lake. Camping Permits ($5)
are available from the USDA Forest Service. A Non-resident fishing
permit ($21 for 5 days) can be purchased online from Colorado Parks
and Wildlife.
</p>
<a class="btn btn-secondary" href="#">read more</a>
</div>
<div class="italic">
<h6>
Camping near Crater Lake at the base of Lone Eagle Peak, Indian Peaks
Wilderness. Photograph: Alamy
</h6>
</div>
</section>
<section class="numbers">
<h2 class="h2-color">Everyone loves to travel</h2>
<div class="container-numbers">
<div class="content-1">
<h3>57</h3>
<p class="p p-bold">Active tours</p>
</div>
<div class="content-1">
<h3>1000</h3>
<p class="p p-bold">Happy clients</p>
</div>
<div class="content-1">
<h3>57</h3>
<p class="p p-bold">Destinations</p>
</div>
<div class="content-1">
<h3>12</h3>
<p class="p p-bold">Years of work</p>
</div>
</div>
</section>
<section class="article-3">
<div class="border-4">
<div class="text">
<h2>Ueli Steck: The “Swiss Machine” sets new climbing record goal</h2>
<p class="p">
While any extreme sport athlete may currently focus on summer
destinations for any extreme sport performance, Ueli Steck, also
commonly known as the “Swiss Machine”, a famous speed mountain
climber, is heading up to the mountains, planning to scale all 82
European Alps of over 4,000 metres, all to be achieved in just 80
days.
</p>
<a class="btn btn-secondary" href="#">read more</a>
</div>
<div class="img">
<img
id="fg-img"
src="./src/img/human-gd21b4521a_1920.jpg"
alt="homme qui marche dans la neige en haut des montagnes"
/>
<img
id="bg-img"
src="./src/img/sunset-g14f3e377f_1920.jpg"
alt="scooter des neiges au coucher du soleil"
/>
<h6>Photo by <span>xtremespots</span></h6>
</div>
</div>
</section>
<!-- Formulaire -->
<section class="form">
<div class="border-5">
<h2>How Can We Help You?</h2>
<form method="get">
<div class="form-name">
<input
type="text"
placeholder="Name"
name="name"
id="name"
required
/>
</div>
<div class="form-email">
<input
type="email"
placeholder="Email"
name="email"
id="email"
required
/>
</div>
<div class="form-message">
<textarea id="message" placeholder="Message"></textarea>
</div>
<div class="btn-group">
<input class="btn btn-tertiary" type="submit" value="SUBMIT" />
</div>
</form>
</div>
</section>
<footer>
<div class="container-footer">
<div class="content-2">
<p class="p p-footer">Sample footer text</p>
</div>
<div class="content-2">
<p class="p p-footer">Sample footer text</p>
</div>
<div class="content-2">
<p class="p p-footer">Sample footer text</p>
</div>
<div class="content-2">
<p class="p p-footer">Sample footer text</p>
</div>
</div>
</footer>
</body>
</html>