-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
214 lines (184 loc) · 9.72 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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!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">
<meta name="description" content="From Yosemite to the world: the story of Alex Honnold">
<meta name="keywords" content="alex honnold, rock climbing, free solo, el capitan">
<link rel="stylesheet" href="assets/css/style.css">
<title>Alex Honnold</title>
</head>
<body>
<!--navigation bar-->
<header>
<a href="index.html">
<h1 id="logo">Alex Honnold</h1>
</a>
<nav id="nav-menu">
<ul>
<li><a href="index.html"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="gallery.html"><i class="fa-solid fa-image"></i> Gallery</a></li>
<li><a href="sign-up.html"><i class="fa-solid fa-right-to-bracket"></i> Sign Up</a></li>
</ul>
</nav>
<i id="burger-menu" class="fas fa-bars"></i>
</header>
<!--hero banner-->
<div id="hero-outer">
<div id="hero-banner">
<ul class="hero-text">
<li>Rock Climber</li>
<li>Environmentalist</li>
<li>Philanthropist</li>
</ul>
<blockquote class="heroquote">"It's not about the destination, it's about the journey. - Alex Honnold"</blockquote>
</div>
</div>
<!-- about section -->
<section>
<div id="about">
<h2>Alex Is A...</h2>
<p>Professional rock climber who is best known for his free solo ascents of big walls. He is the first person to ever free solo El Capitan in Yosemite National Park, a feat that was chronicled in the award-winning documentary "Free Solo." Honnold is also known for his speed climbs, setting records on the Nose route of El Capitan and the Regular Northwest Face of Half Dome. In addition to his climbing accomplishments, <em>Honnold is also an avid environmentalist and philanthropist</em>. He has worked with organizations such as the Honnold Foundation and the Sierra Club to promote solar energy and protect climbing areas.</p>
<br>
<p>The website provides detailed information about Alex's accomplishments, including photos and videos from his climbs. Additionally, there are links to articles that delve deeper into Alex's story and his approach to climbing. Visitors can also view the movie trailer for "Free Solo," a documentary film about Alex's historic climb. The website serves as a great resource for anyone interested in learning more about Alex Honnold and his incredible feats.</p>
<p>To learn more about Alex Honnold, visit <a href="https://en.wikipedia.org/wiki/Alex_Honnold" target="_blank">Wikipedia</a>.</p>
</div>
</section>
<!-- caption image -->
<div id="caption-image__container">
<div id="caption-image">
<img src="assets/images/el-capitan.webp" alt="El Capitan in Yosemite National Park">
<div class="caption">El Capitan in Yosemite National Park - USA</div>
</div>
</div>
<!--timeline article-->
<article>
<div id="timeline-article">
<h3>Big Wall</h3>
<p>Is a type of rock climbing that involves climbing very large cliffs or rock faces that can take several days or even weeks to complete. It is typically done on cliffs that are more than 1000 feet (304.8 meters) tall and require the use of specialized techniques and equipment. These climbs are typically very challenging and require a high level of physical fitness, mental toughness, and technical skill. Big wall climbing routes often involve a combination of free climbing, aid climbing, and hauling gear up the cliff using a system of pulleys and anchors.</p>
</div>
</article>
<!-- timeline section-->
<section>
<h4>Alex's Timeline</h4>
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-item__date">2007</div>
<div class="timeline-item__content">
<ul>
<li>Freerider (VI 5.13a, 37 pitches), Yosemite, California – One day free ascent with Brian Kimball
<li>Astroman (5.11c, 10 pitches) and The Rostrum (5.11c, 8 pitches), Yosemite, California – Second person after Peter Croft (1987) to free solo both in a day</li>
<li>Salathe Wall (VI 5.13b/c), Yosemite, California – Eleventh free ascent</li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2008</div>
<div class="timeline-item__content">
<ul>
<li>Bushido (5.13+) and Hong Kong Phooey (5.13b–5.14), Utah</li>
<li>Moonlight Buttress (V 5.12d, 1200 ft), Zion, Utah – First Free solo</li>
<li>The Regular Northwest Face of Half Dome, Yosemite, California – First free solo</li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2012</div>
<div class="timeline-item__content">
<ul>
<li>The Nose (VI 5.8 A2), Yosemite, California, El Capitan, – Former speed record of 2:23:46 with Hans Florine</li>
<li>The Regular Northwest Face of Half Dome, Yosemite, California – Speed solo in 1:22</li>
<li>Yosemite Triple Crown – Mt. Watkins, El Capitan, and Half Dome, Yosemite, California – Solo in 18:50</li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2014</div>
<div class="timeline-item__content">
<ul>
<li>Muir Wall – Shaft Variation (V 5.13b/c) – Speed record of 12 hours</li>
<li>El Corazon (V 5.13b) – Speed record of 15:30</li>
<li>El Sendero Luminoso (V 5.12d, 1,750 ft, 15 pitch), El Potrero Chico, Mexico – First free solo ascent, ~ 3 hours</li>
<li>University Wall (5.12a C2, 8 pitch), Squamish, British Columbia, Canada – First free solo</li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2016</div>
<div class="timeline-item__content">
<ul>
<li>Complete Scream (E8 6b), Northern Ireland, United Kingdom – Free solo</li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2017</div>
<div class="timeline-item__content">
<ul id="history-made">
<li>Freerider (5.13a VI), Yosemite, California, El Capitan, – FIRST FREE SOLO. Alex made history in the sport of climbing, read more about this amazing achievement on <a href="https://www.nationalgeographic.com/adventure/article/most-dangerous-free-solo-climb-yosemite-national-park-el-capitan" target="_blank">National Geographic</a></li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2018</div>
<div class="timeline-item__content">
<ul>
<li>The Nose (VI 5.8 A2), Yosemite, California, El Capitan, – Speed record of 1:58:07 with Tommy Caldwell</li>
</ul>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item__date">2019</div>
<div class="timeline-item__content">
<ul>
<li>El Niño (VI 5.13c), Yosemite, California, El Capitan, – Second entirely free ascent via Pineapple Express variation with Brad Gobright</li>
<li>Passage to Freedom (VI 5.13d), Yosemite, California, El Capitan, – First free ascent with Tommy Caldwell</li>
</ul>
</div>
</li>
</ul>
</section>
<!-- quote -->
<div>
<blockquote class="bodyquote">Free climbing is a form of rock climbing in which the climber uses only their physical strength, agility, and technique to ascend a route, without relying on any aids such as ropes or harnesses for support. This means that the climber must rely on their own ability to find and secure hand and foot holds, and to balance their body as they move upward.</blockquote>
</div>
<!-- youtube trailer -->
<section>
<h3 id="trailer-text">Free Solo Movie Trailer</h3>
<p class="trailer-text__p ">"Witness Alex making history"</p>
<iframe loading="lazy" style="width:100%;" height="300" src="https://www.youtube.com/embed/urRVZ4SW7WU?start=6" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<!-- footer-->
<footer>
<div id="follow-text">
<h3>Follow Alex</h3>
<p>"See what he is up to"</p>
</div>
<a href="https://www.facebook.com/alexhonnold/" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/alexhonnold" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/alexhonnold/" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@alexhonnold9601" target="_blank" aria-label="Youtube"><i class="fab fa-youtube"></i></a>
<a href="https://www.alexhonnold.com/" target="_blank" aria-label="Website"><i class="fas fa-globe"></i></a>
<p>Disclaimer - This website was created for educational purposes only. Designed and developed for <a href="https://codeinstitute.net/ie/" target="_blank">"Code Institute"</a> as part of a <i class="fa-brands fa-github" style="color:#f7b91a"></i><a href="https://github.com/kpetrauskas92/alex-honnold-p1" target="_blank">project.</a></p>
</footer>
<!-- font awesome kit -->
<script src="https://kit.fontawesome.com/72dd490aed.js" crossorigin="anonymous"></script>
<!-- burger menu event -->
<script>
const burgerMenu = document.getElementById('burger-menu');
const navMenu = document.getElementById('nav-menu');
burgerMenu.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
</script>
<!-- hero grayscale scrolling effect -->
<script>
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset;
var grayscale = scroll / 300;
document.querySelector('#hero-banner').style.filter = 'grayscale(' + grayscale + ')';
});
</script>
</body>
</html>