-
Notifications
You must be signed in to change notification settings - Fork 0
/
about-swim.html
154 lines (153 loc) · 5.38 KB
/
about-swim.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
<!doctype html>
<html>
<head>
<title>Noah - Swim</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Noah's Swim | Feeling the Waters • Diving In • Friends"
/>
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="./images/icons/favicon_50_w.webp" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<div id="headers"></div>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"
media="all"
rel="stylesheet"
type="text/css"
lazyload
/>
<!-- Main -->
<div id="main">
<div class="inner subpage">
<h2 class="align-center subpage">Swim</h2>
<div class="row reverse_on_desktop">
<div class="half_image_column">
<img
srcset="
./images/about/swim/swim_butterfly_400_w.webp 400w,
./images/about/swim/swim_butterfly_1000_w.webp 800w
"
sizes="(max-width: 980px) 100vw, 55vw"
loading="lazy"
decoding="async"
src="./images/about/swim/swim_butterfly.jpg"
alt="Swim Butterfly"
/>
</div>
<div class="half_text_column">
<h3>Feeling the Waters</h3>
<p>
As an elementary schooler, I had basic swimming lessons that I
then built upon in seventh grade when I began swimming
recreationally with my local YMCA swim team. I learned the
different strokes and started paying attention to my technique
and pacing. I progressed quickly and I enjoyed the feeling of
such rapid development.
</p>
</div>
</div>
<hr class="mobile_only" />
<div class="row">
<div class="half_image_column">
<img
srcset="
./images/about/swim/swim_meet_400_w.webp 400w,
./images/about/swim/swim_meet_900_w.webp 800w
"
sizes="(max-width: 980px) 100vw, 55vw"
loading="lazy"
decoding="async"
src="./images/about/swim/swim_meet.jpeg"
alt="Swim Meet"
/>
</div>
<div class="half_text_column">
<h3>Diving In</h3>
<p>
I came to a point in ninth grade when I was outgrowing the
recreational focus of the YMCA swim team and I chose to move to
a club swim team. I started competing more seriously, eventually
working my way to regularly qualify and compete in the Oregon
State Competitions.
</p>
</div>
</div>
<hr class="mobile_only" />
<div class="row">
<h3>Friends</h3>
<p>
Throughout my five years of swimming from seventh to eleventh
grade, I made so many friendships and had an incredible time
swimming with my teammates. Working alongside such wonderful
people to improve ourselves was the most rewarding aspect of
swimming for me by far.
</p>
</div>
<div class="image_gallery">
<div class="half_column">
<img
srcset="
./images/about/swim/swim_friends_400_w.webp 400w,
./images/about/swim/swim_friends_1000_w.webp 1000w
"
sizes="(max-width: 980px) 100vw, 55vw"
loading="lazy"
decoding="async"
src="./images/about/swim/swim_friends.jpg"
alt="Swim Friends"
/>
</div>
<div class="half_column">
<img
srcset="
./images/about/swim/swim_2014_400_w.webp 400w,
./images/about/swim/swim_2014_550_w.webp 550w
"
sizes="(max-width: 980px) 100vw, 55vw"
loading="lazy"
decoding="async"
src="./images/about/swim/swim_2014.jpg"
alt="Swim (2014)"
/>
</div>
</div>
</div>
<br />
<div class="row">
<a href="#top" style="margin-left: 90vw">
<img
srcset="
./images/icons/icon_scroll_up_25_w.webp 25w,
./images/icons/icon_scroll_up_50_w.webp 1000w
"
sizes="1.5em"
loading="lazy"
decoding="async"
src="./images/icons/icon_scroll_up.png"
class="scroll_icon"
alt="Scroll Up"
style="position: inherit"
/>
</a>
</div>
</div>
<!-- Footer -->
<footer id="footer"></footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>