1<!DOCTYPE html> 2<html> 3<head> 4<title>David Black - Adventure</title> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<link rel="stylesheet" href="w3.css"> 8<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> 9<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 10<style> 11body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;} 12body, html { 13 height: 100%; 14 color: #777; 15 line-height: 1.8; 16} 17 18/* Create a Parallax Effect */ 19.bgimg-1 { 20 background-attachment: fixed; 21 background-position: center; 22 background-repeat: no-repeat; 23 background-size: cover; 24} 25 26/* Third image */ 27.bgimg-1 { 28 background-image: url("images/brunswick.jpg"); 29 min-height: 400px; 30} 31 32.w3-wide {letter-spacing: 10px;} 33.w3-hover-opacity {cursor: pointer;} 34 35/* Turn off parallax scrolling for tablets and phones */ 36@media only screen and (max-device-width: 1600px) { 37 .bgimg-1 { 38 background-attachment: scroll; 39 min-height: 400px; 40 } 41} 42</style> 43</head> 44<body> 45 46<!-- Navbar (sit on top) --> 47<div class="w3-top"> 48 <div class="w3-bar" id="myNavbar"> 49 <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu"> 50 <i class="fa fa-bars"></i> 51 </a> 52 <a href="index.html" class="w3-bar-item w3-button">HOME</a> 53 <a href="index.html#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> ABOUT</a> 54 <a href="index.html#cv" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> CV</a> 55 <a href="adventure.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-map-o"></i> ADVENTURE</a> 56 <a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a> 57 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red"> 58 <i class="fa fa-search"></i> 59 </a> 60 </div> 61 62 <!-- Navbar on small screens --> 63 <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> 64 <a href="index.html#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a> 65 <a href="index.html#cv" class="w3-bar-item w3-button" onclick="toggleFunction()">CV</a> 66 <a href="adventure.html" class="w3-bar-item w3-button" onclick="toggleFunction()">ADVENTURE</a> 67 <a href="index.html#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a> 68 <a href="#" class="w3-bar-item w3-button">SEARCH</a> 69 </div> 70</div> 71 72<!-- First Parallax Image with Logo Text --> 73<div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> 74 <div class="w3-display-middle" style="white-space:nowrap;"> 75 <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">DAVID <span class="w3-hide-small"></span> BLACK</span> 76 </div> 77</div> 78 79<div class="w3-content w3-container w3-padding-64" id="adventure"> 80 <h2 class="w3-center">ADVENTURE</h2> 81 <p class="w3-center"><em>Beyond engineering, physics, classes, and work, I find time to pursue my hobbies and passions almost every weekend throughout the year. I am an avid skier, paragliding pilot, climber, trail runner, and canyoneer. Below are some photos from the past few years, mostly around Vancouver.<br> Click on the images to make them bigger</em></p><br> 82 83 <div class="w3-row-padding w3-center"> 84 <div class="w3-col m6"> 85 <iframe width="460" height="335" src="https://www.youtube.com/embed/AvSs5Pmswik?si=yB09AktYW1EDDeAm"> 86 </iframe> 87 </div> 88 89 <div class="w3-col m6"> 90 <iframe width="460" height="335" src="https://www.youtube.com/embed/w7b54b-5xiQ?si=nFCuTUxk-fVgWif7"> 91 </iframe> 92 </div> 93 </div> 94 95 <div class="w3-row-padding w3-center"> 96 <div class="w3-col m6"> 97 <iframe width="460" height="315" src="https://www.youtube.com/embed/UMVjq-BqOFw?si=x8VS_VW_eiLX8SEV"> 98 </iframe> 99 </div> 100 101 <div class="w3-col m6"> 102 <iframe width="460" height="315" src="https://www.youtube.com/embed/ioupKGkLq7k"> 103 </iframe> 104 </div> 105 </div> 106 107 <div class="w3-row-padding w3-center"> 108 <div class="w3-col m6"> 109 <iframe width="460" height="315" src="https://www.youtube.com/embed/W0LIhj632RA?si=-tWqFEdeeKD0tHsj"> 110 </iframe> 111 </div> 112 113 <div class="w3-col m6"> 114 <iframe width="460" height="315" src="https://www.youtube.com/embed/ZYTdRfH7Mto?si=eVfmu7Wo8IeORf2j"> 115 </iframe> 116 </div> 117 </div> 118 119 <div class="w3-row-padding w3-center"> 120 <div class="w3-col m6"> 121 <iframe width="460" height="315" src="https://www.youtube.com/embed/yC3stQq1aGY"> 122 </iframe> 123 </div> 124 125 <div class="w3-col m6"> 126 <iframe width="460" height="315" src="https://www.youtube.com/embed/DzO9TSWkNms"> 127 </iframe> 128 </div> 129</div> 130<div class="w3-row-padding w3-center"> 131 <div class="w3-col m6"> 132 <iframe width="460" height="315" src="https://www.youtube.com/embed/KQO6VEgXDVc"> 133 </iframe> 134 </div> 135 136 <div class="w3-col m6"> 137 <iframe width="460" height="315" src="https://www.youtube.com/embed/9MoCMLrQkKI"> 138 </iframe> 139 </div> 140 </div> 141 142 <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) --> 143 <div class="w3-row-padding w3-center"> 144 <div class="w3-col m3"> 145 <img src="images/adventure/para0.jpeg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Paragliding over Mt. Strachan, Vancouver"> 146 </div> 147 148 <div class="w3-col m3"> 149 <img src="images/adventure/para1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Doing barrels off the Stawamus Chief"> 150 </div> 151 152 <div class="w3-col m3"> 153 <img src="images/adventure/para2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="About to launch near Col de la Terasse, Chamonix"> 154 </div> 155 156 <div class="w3-col m3"> 157 <img src="images/adventure/para3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Paragliding high over the Harrison River"> 158 </div> 159 </div> 160 161 <div class="w3-row-padding w3-center w3-section"> 162 <div class="w3-col m3"> 163 <img src="images/adventure/climb1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Slabs high on Yak Peak"> 164 </div> 165 166 <div class="w3-col m3"> 167 <img src="images/adventure/climb2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Finishing up the Stawamus Chief"> 168 </div> 169 170 <div class="w3-col m3"> 171 <img src="images/adventure/climb3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Rock On, 5.10a, Stawamus Chief"> 172 </div> 173 174 <div class="w3-col m3"> 175 <img src="images/adventure/climb4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Angel's Crest, 5.10c, Stawamus Chief"> 176 </div> 177 </div> 178 179 <div class="w3-row-padding w3-center w3-section"> 180 <div class="w3-col m3"> 181 <img src="images/adventure/climb10.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Exposed Ridgeline along the Armchair Traverse from Mt. Cook to Mt. Weart"> 182 </div> 183 184 <div class="w3-col m3"> 185 <img src="images/adventure/climb7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="On the Grand Wall, 5.11a, Stawamus Chief"> 186 </div> 187 188 <div class="w3-col m3"> 189 <img src="images/adventure/canyon8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Monmouth Creek, Squamish"> 190 </div> 191 192 <div class="w3-col m3"> 193 <img src="images/adventure/mtn2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Remote Granite Spire behind Garibaldi
193Lake"> 194 </div> 195 </div> 196 197 <div class="w3-row-padding w3-center w3-section"> 198 <div class="w3-col m3"> 199 <img src="images/adventure/climb9.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="High on Yak Peak"> 200 </div> 201 202 <div class="w3-col m3"> 203 <img src="images/adventure/ski8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="In bounds on Blackcomb Peak"> 204 </div> 205 206 <div class="w3-col m3"> 207 <img src="images/adventure/climb5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Scrambling across the Acrophobe Towers"> 208 </div> 209 210 <div class="w3-col m3"> 211 <img src="images/adventure/mtn5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Approaching the Summit of Mt Hood, Oregon"> 212 </div> 213 </div> 214 215 <div class="w3-row-padding w3-center w3-section"> 216 <div class="w3-col m3"> 217 <img src="images/adventure/ski9.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Powder in Whistler, BC"> 218 </div> 219 220 <div class="w3-col m3"> 221 <img src="images/adventure/mtn1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Summit of a Remote Granite Spire behind Garibaldi Lake"> 222 </div> 223 224 <div class="w3-col m3"> 225 <img src="images/adventure/mtn4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Approaching the Summit of Mt Hood, Oregon"> 226 </div> 227 228 <div class="w3-col m3"> 229 <img src="images/adventure/climb6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Partway up the Apron, Squamish"> 230 </div> 231 </div> 232 233 <div class="w3-row-padding w3-center w3-section"> 234 <div class="w3-col m3"> 235 <img src="images/adventure/canyon5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Brittania Creek, Brittania Beach"> 236 </div> 237 238 <div class="w3-col m3"> 239 <img src="images/adventure/ski2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Skiing by the Black Tusk"> 240 </div> 241 242 <div class="w3-col m3"> 243 <img src="images/adventure/canyon3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Box Creek, Squamish"> 244 </div> 245 246 <div class="w3-col m3"> 247 <img src="images/adventure/ski6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Approaching the Summit of Mt. Garibaldi"> 248 </div> 249 250 </div> 251 252 <div class="w3-row-padding w3-center w3-section"> 253 <div class="w3-col m3"> 254 <img src="images/adventure/spearhead.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Halfway through an extremely windy Spearhead Traverse"> 255 </div> 256 257 <div class="w3-col m3"> 258 <img src="images/adventure/canyon7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Monmouth Creek, Squamish"> 259 </div> 260 261 <div class="w3-col m3"> 262 <img src="images/adventure/climb12.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Descending from a Remote Granite Spire behind Garibaldi Lake"> 263 </div> 264 265 <div class="w3-col m3"> 266 <img src="images/adventure/ski10.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Transitioning at the summit of Mt. Matier, BC"> 267 </div> 268 269 </div> 270 271 <div class="w3-row-padding w3-center w3-section"> 272 <div class="w3-col m3"> 273 <img src="images/adventure/ski1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Skiing by the Black Tusk"> 274 </div> 275 276 <div class="w3-col m3"> 277 <img src="images/adventure/alpha.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Rappelling off Mt. Alpha's East Ridge, BC"> 278 </div> 279 280 <div class="w3-col m3"> 281 <img src="images/adventure/ski3.png" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Chisel Chute, Spearhead Range, BC"> 282 </div> 283 284 <div class="w3-col m3"> 285 <img src="images/adventure/canyon4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Box Creek, Squamish"> 286 </div> 287 </div> 288 289 <div class="w3-row-padding w3-center w3-section"> 290 <div class="w3-col m3"> 291 <img src="images/adventure/climb8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Angel's Crest, 5.10c, Stawamus Chief"> 292 </div> 293 294 <div class="w3-col m3"> 295 <img src="images/adventure/ski5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Skiing off the Summit of Mt. Garibaldi"> 296 </div> 297 298 <div class="w3-col m3"> 299 <img src="images/adventure/ski7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Little Diamond Head, BC"> 300 </div> 301 302 <div class="w3-col m3"> 303 <img src="images/adventure/climb11.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Rapelling off the Monkey Face, Smith Rock, Oregon"> 304 </div> 305 </div> 306 307 <div class="w3-row-padding w3-center w3-section"> 308 <div class="w3-col m3"> 309 <img src="images/adventure/canyon1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Monmouth Creek, Squamish"> 310 </div> 311 312 <div class="w3-col m3"> 313 <img src="images/adventure/ski11.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Neve Traverse in a Day"> 314 </div> 315 316 <div class="w3-col m3"> 317 <img src="images/adventure/ski12.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Quick Lap on Spearhead Glacier"> 318 </div> 319 320 <div class="w3-col m3"> 321 <img src="images/adventure/ski13.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Skiing off the Summit of Mt. St. Helens, Washington"> 322 </div> 323 </div> 324 325 <div class="w3-row-padding w3-center w3-section"> 326 <div class="w3-col m3"> 327 <img src="images/adventure/tricouni.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="On Tricouni's North Ridge, BC"> 328 </div> 329 330 <div class="w3-col m3"> 331 <img src="images/adventure/canyon2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Brittania Creek, Brittania Beach"> 332 </div> 333 334 <div class="w3-col m3"> 335 <img src="images/adventure/ski0.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Climbing the Gunsight Couloir, Sky Pilot Mountain"> 336 </div> 337 338 <div class="w3-col m3"> 339 <img src="images/adventure/tricouniSummit.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Climbing to the summit of Tricouni Peak, BC"> 340 </div> 341 </div> 342</div> 343 344<!-- Modal for full size images on click--> 345<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'"> 346 <span class="w3-button w3-large w3-black w3-display-topright" title="Close Mod
346al Image"><i class="fa fa-remove"></i></span> 347 <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> 348 <img id="img01" class="w3-image"> 349 <p id="caption" class="w3-opacity w3-large"></p> 350 </div> 351</div> 352 353<!-- Footer --> 354<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off"> 355 <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a> 356 <div class="w3-xlarge w3-section"> 357 <a href="https://github.com/dgblack"><i class="fa fa-github w3-hover-opacity"></i></a> 358 <a href="https://scholar.google.com/citations?user=As_yDKkAAAAJ&hl=en"><i class="fa fa-google w3-hover-opacity"></i></a> 359 <a href="https://twitter.com/BlackDavidG"><i class="fa fa-twitter w3-hover-opacity"></i></a> 360 <a href="https://linkedin.com/in/davidgblack"><i class="fa fa-linkedin w3-hover-opacity"></i></a> 361 </div> 362 <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p> 363</footer> 364
365<script> 366// Modal Image Gallery 367function onClick(element) { 368 document.getElementById("img01").src = element.src; 369 document.getElementById("modal01").style.display = "block"; 370 var captionText = document.getElementById("caption"); 371 captionText.innerHTML = element.alt; 372} 373 374// Change style of navbar on scroll 375window.onscroll = function() {myFunction()}; 376function myFunction() { 377 var navbar = document.getElementById("myNavbar"); 378 if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { 379 navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white"; 380 } else { 381 navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", ""); 382 } 383} 384 385// Used to toggle the menu on small screens when clicking on the menu button 386function toggleFunction() { 387 var x = document.getElementById("navDemo"); 388 if (x.className.indexOf("w3-show") == -1) { 389 x.className += " w3-show"; 390 } else { 391 x.className = x.className.replace(" w3-show", ""); 392 } 393} 394</script>
394 395</body> 396</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.