-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (71 loc) · 3.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skid Lizards</title>
<!-- Twitter Card data -->
<meta name="twitter:card" value="Skid Lizards">
<meta name="Description" content="Skid Lizards"/>
<!-- Open Graph data -->
<meta property="og:title" content="Skid Lizards" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://skidlizards.com/austin.442e3e4510d5e9130598.jpg" />
<meta property="og:description" content="Skid Lizards" />
<!-- Mobile header color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="{{mobileHeaderColor}}">
<!-- Mobile header color for iOS Safari (supports black, black-translucent or default) -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
</head>
<body>
<main>
<div class="heading">
<canvas id="heading__canvas"></canvas>
<img alt="Skid Lizards logo" class="heading__logo" src="<%= require('./src/assets/wordmark.svg') %>" />
</div>
<div class="text">
<h1 class="text__title">Skid Lizards are a group of friends with bikes and jobs.</h1>
</div>
<div class="image__wrap">
<img alt="" class="image image--left to-observe" src="<%= require('./src/assets/jf.jpg') %>" />
<img alt="" class="image image--right to-observe" src="<%= require('./src/assets/nn.jpg') %>" />
</div>
<div class="text">
<h2 class="text__body">
Enter the <a class="link" rel="noopener" href="https://bikepacking.com/news/swift-campout-video-challenge/" target="_blank">Swift Campout Challenge!</a>
</h2>
</div>
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/KgBz87WoKcM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="text">
<h3 class="text__body">
We're mainly on <a class="link" rel="noopener" href="https://instagram.com/skidlizards" target="_blank">Instagram</a>
</h3>
<h3 class="text__body">
Read our trip recap on <a class="link" rel="noopener" href="https://theradavist.com/2019/07/skid-lizards-and-the-river-wizards/" target="_blank">The Radavist</a>
</h3>
</div>
<div class="video__wrap">
<canvas id="video__canvas"></canvas>
<video class="video" data-src="<%= require('./src/assets/skid.mov') %>" preload="auto" autobuffer></video>
</div>
<div class="image__wrap">
<img alt="" class="image image--left to-observe" src="<%= require('./src/assets/grid-ride-1.jpg') %>" />
<img alt="" class="image image--right to-observe" src="<%= require('./src/assets/grid-life-1.jpg') %>" />
</div>
<div class="image__wrap">
<img alt="" class="image image--left to-observe" src="<%= require('./src/assets/grid-life-2.jpg') %>" />
<img alt="" class="image image--right to-observe" src="<%= require('./src/assets/grid-ride-2.jpg') %>" />
</div>
<div class="image__wrap">
<img alt="" class="image image--center to-observe" src="<%= require('./src/assets/austin.jpg') %>" />
</div>
<div class="text">
<h4 class="text__close">
Slow Down Fast
</h4>
</div>
</main>
</body>
</html>