-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
246 lines (246 loc) · 26.4 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>From Portland To Portland</title>
<link rel="stylesheet" href="./vendor/normalize.css">
<link rel="stylesheet" href="./pages/index.css">
</head>
<body>
<div class="page">
<header class="header">
<svg class="logo" viewBox="0 0 197 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75 6.50689V6.96521L73.6463 8.18224L72.9773 8.15993L72.469 8.43457L72.6073 8.98558V9.37524L71.4282 9.95028L71.2225 10.7536V12.2676L72.1474 13.3679L72.0316 13.828L71.06 14.2176V14.8356L70.3616 15.2098L69.9017 15.4552H69.1393L67.9377 16.6723L68.1227 16.8559L68.3319 18.2326L67.5453 20.0247L67.2462 19.9783L67.1771 19.472L66.4302 19.4308L66.9437 20.3217L67.5453 21.0323L67.2912 22.0897L66.8745 22.766H66.4665L66.5287 21.997L66.1761 21.4443L65.6591 21.1748L65.6056 20.4813L65.7681 19.6093L65.5156 19.4479L64.9365 20.0453L65.1457 20.4813L65.1924 21.446L65.5623 21.6297L65.9548 22.3643L66.0395 22.7643L66.0914 23.0063L65.9288 23.535L66.5305 23.5814L66.9938 23.7839L66.878 24.3607L67.2704 24.613L67.2479 24.8413L66.8538 25.2087L67.547 25.7374V26.4257L67.0145 26.7467L67.3378 27.32L67.1079 27.8951L65.2805 28.192V28.9027L64.7498 29.9137L63.894 30.0991L63.7626 30.3205L63.2699 31.1531L63.2941 31.6131L62.1859 32.7821H61.7191L61.3492 33.5854L60.7475 33.9064L60.7372 34.0987L60.5868 36.4778L61.0259 37.0528L61.2126 37.8545L61.2368 37.8768L61.6984 38.2681V38.8895L62.8066 39.8302L62.9224 40.8876L63.3373 41.6583L64.1481 43.1603V45.4364H62.4366C62.4366 45.4364 62.4383 45.4158 62.4366 45.4107C62.3709 45.2425 61.9508 44.8786 61.9508 44.8786L61.306 44.9283V44.1473H60.8651L60.6801 43.8503V43.4143L60.3102 43.3903L59.5719 42.5406L59.6653 42.0583L59.2953 42.1046L59.1086 41.7613L59.1328 41.66L59.2953 40.958L59.1778 39.765L58.7853 39.6276L57.608 38.342L56.6122 38.2716L55.4349 38.9599L54.9715 39.0749L54.2558 38.021L52.3454 37.8802L52.0602 37.8596L52.0308 37.8802L51.4361 38.3179L51.1128 37.9506L50.7031 38.3111L48.9863 38.3179V39.0526L48.663 39.4886L49.5413 40.3846L49.0555 40.6816L47.8764 40.1306L47.2506 40.867L46.1891 40.8636L45.89 39.8302L44.6643 39.4869V40.0156L44.4119 40.1769L42.7228 39.7409H42.0071L39.7181 40.7503V41.2103L38.7949 41.8283L37.7766 42.036L37.4066 42.587L36.8984 42.6333L36.6218 43.2753L36.276 43.368L36.2985 44.7C36.2345 44.9198 36.2431 45.1824 36.2812 45.4364C36.3693 46.0098 36.6218 46.5573 36.6218 46.5573L36.3209 46.7856L35.0745 46.4183C34.2705 46.2638 33.7761 45.8364 33.4787 45.4364C33.1572 45.0056 33.0621 44.6073 33.0621 44.6073C32.9705 43.986 32.8322 43.7577 32.8322 43.7577C32.0698 43.3217 31.4906 41.715 31.4906 41.715C31.4837 41.6944 31.475 41.6772 31.4664 41.66C30.9132 40.3434 30.1266 39.6963 30.1266 39.6963H29.3641L29.1342 39.444L27.8393 39.3976V40.2937L27.0302 40.9116C25.8287 40.6147 24.9781 39.1316 24.9781 39.1316L25.0196 38.3196L22.3849 35.1526L19.9334 34.9689L19.7277 35.9113L15.3572 35.3826L10.3418 32.3752V31.5719H6.82023L6.70612 30.3257L6.65771 29.7833L6.05608 29.555V28.8666H5.50113L5.41642 28.3705L4.94791 28.2469L4.06793 27.169L2.91307 27.0316L2.52063 26.7106L2.57422 26.551L2.57595 26.5493L2.75056 26.0429L2.61226 25.7923L2.4947 25.4936L2.65721 25.0799L1.919 23.2672L1.70981 23.0819V22.8072L2.0331 22.4639V22.1206L1.50062 21.4992L1.5473 20.1448L1.0615 19.6162L1.10818 18.8815L0.567055 18.0695L0.622378 16.9813L0.784888 16.2878L0 15.4106L0.440851 14.8133L1.24821 13.5052L1.15659 12.8633L1.38652 12.4496L1.47988 10.7983L2.95975 8.13418V7.53682L3.20698 7.17806L3.42135 6.8708L3.88468 5.40315V4.99118L4.30132 4.50883L4.04719 4.0488L4.07658 3.30038L4.4621 2.92789L4.09386 2.8764L4.11634 2.3271L3.8864 2.21209V1.84647L4.11634 1.22851H4.43963L4.64882 1.77952L5.41123 2.0782L6.22032 2.21553V2.76826L5.87456 3.2506L5.41123 3.41024L5.50459 4.14492H6.17364L6.63697 3.59391V2.94849L6.82195 2.72019L6.45198 2.23784L6.71822 1.77781L6.82195 1.52719L6.61277 1.31949L6.82023 0.785645L9.68489 1.6628L13.2238 2.60347L14.4357 2.86953L14.5878 2.90215L20.6215 3.86684L20.7528 3.88401L22.2258 4.0591L29.7116 4.95857L36.2224 5.24351L39.2738 5.03925V4.44189L39.8996 4.80751V5.56451L41.1945 6.02454L41.5645 5.61086L42.5343 5.93185L42.8127 6.39188L43.7601 6.71288L44.5 6.48114L46.1165 6.73348L46.5107 6.11552L46.9947 6.06917L47.6413 5.38084L47.5964 5.12851L47.7813 4.7852L49.5378 4.85386L49.8611 5.06156L50.5319 6.32322L51.201 6.34725L51.3393 5.97991L51.9184 6.32322L51.9651 6.9223L52.3351 7.17291L52.3524 7.65698L52.3575 7.84065L52.75 7.86296V8.34531L53.1891 8.66631L53.3758 9.07828L54.9473 8.9873L57.3141 8.93924L58.2528 9.85931L58.9911 10.9596L58.7127 11.4351H57.6858L57.1671 10.8463L57.0046 10.939L57.0703 11.4351L57.1205 11.8093L56.6347 12.6813L56.958 14.0133L56.218 14.6107L56.1506 15.7814L55.3882 16.032V16.4234L56.2439 16.4697L57.468 15.069L58.6003 15.1377L59.5961 14.3584L60.2877 14.3807L60.4727 14.0133L60.3119 13.6924L59.5719 13.785L59.4561 13.2564L60.1943 12.5457L61.4425 11.8814L62.4159 11.926L62.2758 11.49L63.8231 10.848L64.1706 10.1374L65.1422 9.2877L68.8402 8.43629L69.0701 7.82005L69.6406 7.66041L69.6458 7.65869L69.7859 7.38405L69.8083 6.94804L70.1334 6.83304L70.1091 6.35069L69.8325 5.77564L70.2146 3.88229H72.7612L73.3697 5.77564L73.9247 5.79967L73.9904 6.39017L75 6.50689Z" fill="white"/>
<path d="M90.2773 21.7954V17.8181H106.08V21.7954H100.611V35.9999H95.746V21.7954H90.2773Z" fill="white"/>
<path d="M112.909 28.3295V35.9999H108.009V17.8181H112.732V24.9559H112.874C113.181 24.0859 113.693 23.4082 114.409 22.9229C115.126 22.4316 115.987 22.186 116.993 22.186C117.958 22.186 118.795 22.405 119.505 22.843C120.221 23.2809 120.775 23.8846 121.165 24.654C121.562 25.4235 121.757 26.3053 121.751 27.2996V35.9999H116.851V28.3295C116.857 27.6548 116.688 27.125 116.345 26.7403C116.007 26.3556 115.525 26.1633 114.898 26.1633C114.3 26.1633 113.821 26.3556 113.46 26.7403C113.098 27.125 112.915 27.6548 112.909 28.3295Z" fill="white"/>
<path d="M130.705 36.2485C128.521 36.2485 126.801 35.63 125.547 34.393C124.298 33.1501 123.673 31.4249 123.673 29.2173C123.673 27.8086 123.958 26.5776 124.526 25.5241C125.094 24.4706 125.896 23.6509 126.932 23.0649C127.967 22.479 129.19 22.186 130.598 22.186C131.971 22.186 133.164 22.4671 134.176 23.0294C135.194 23.5917 135.981 24.3966 136.537 25.4442C137.1 26.4858 137.381 27.7317 137.381 29.1817V30.3181H128.503V30.5312C128.503 31.1881 128.704 31.7326 129.107 32.1647C129.515 32.5908 130.083 32.8039 130.811 32.8039C131.314 32.8039 131.752 32.7003 132.125 32.4932C132.504 32.2801 132.764 31.9812 132.906 31.5965H137.381C137.15 33.017 136.452 34.1474 135.286 34.9879C134.126 35.8283 132.599 36.2485 130.705 36.2485ZM128.503 27.6192H132.871C132.859 27.0333 132.646 26.5569 132.232 26.1899C131.823 25.817 131.314 25.6306 130.705 25.6306C130.107 25.6306 129.592 25.8141 129.16 26.181C128.734 26.548 128.515 27.0274 128.503 27.6192Z" fill="white"/>
<path d="M155.085 17.8181H159.986V29.821C159.986 31.2059 159.661 32.3748 159.01 33.3277C158.364 34.2747 157.453 34.9938 156.275 35.485C155.103 35.9703 153.724 36.213 152.138 36.213C150.54 36.213 149.152 35.9703 147.974 35.485C146.802 34.9938 145.894 34.2747 145.249 33.3277C144.61 32.3748 144.29 31.2059 144.29 29.821V17.8181H149.226V29.6079C149.226 30.2826 149.484 30.8301 149.998 31.2503C150.519 31.6705 151.233 31.8806 152.138 31.8806C153.061 31.8806 153.783 31.6705 154.304 31.2503C154.825 30.8301 155.085 30.2826 155.085 29.6079V17.8181Z" fill="white"/>
<path d="M172.133 23.4999C172.086 22.9081 171.864 22.4464 171.467 22.115C171.077 21.7835 170.482 21.6178 169.683 21.6178C168.919 21.6178 168.363 21.748 168.014 22.0085C167.665 22.2689 167.487 22.6003 167.481 23.0028C167.458 23.4348 167.644 23.787 168.04 24.0592C168.443 24.3315 169.073 24.5594 169.931 24.7428L171.423 25.0624C173.429 25.4945 174.876 26.187 175.764 27.1398C176.652 28.0868 177.099 29.2528 177.105 30.6377C177.099 32.431 176.442 33.8101 175.134 34.7748C173.826 35.7336 172.021 36.213 169.718 36.213C168.138 36.213 166.759 35.9792 165.581 35.5117C164.409 35.0441 163.498 34.325 162.847 33.3543C162.202 32.3778 161.876 31.129 161.87 29.6079H166.558C166.599 30.4424 166.886 31.0786 167.419 31.5166C167.958 31.9487 168.7 32.1647 169.647 32.1647C170.44 32.1647 171.038 32.0227 171.441 31.7386C171.849 31.4545 172.056 31.0875 172.062 30.6377C172.056 30.2234 171.852 29.8801 171.45 29.6079C171.047 29.3297 170.34 29.0811 169.328 28.8621L167.517 28.4715C165.907 28.1223 164.637 27.5393 163.708 26.7226C162.785 25.8999 162.326 24.7783 162.332 23.3579C162.326 22.2038 162.634 21.1947 163.255 20.3305C163.883 19.4605 164.75 18.7828 165.857 18.2975C166.969 17.8122 168.245 17.5695 169.683 17.5695C171.151 17.5695 172.42 17.8152 173.491 18.3064C174.563 18.7976 175.388 19.4901 175.968 20.3838C176.554 21.2716 176.85 22.3103 176.856 23.4999H172.133Z" fill="white"/>
<path d="M182.997 35.9999H177.671L183.672 17.8181H190.419L196.421 35.9999H191.094L190.046 32.5198H184.045L182.997 35.9999ZM185.164 28.8266H188.928L187.117 22.8252H186.975L185.164 28.8266Z" fill="white"/>
</svg>
<ul class="header__list">
<li class="header__list-item"><a class="header__lang header__lang_active" href="#">En</a></li>
<li class="header__list-item"><a class="header__lang" href="#">Es</a></li>
</ul>
</header>
<section class="lead">
<h1 class="lead__title">From Portland to Portland</h1>
<p class="lead__subtitle">An epic bicycle journey from Portland, ME. to Portland, OR.</p>
<figure class="lead__figure">
<img src="./images/mountains.jpg" alt="mountain landscape" class="lead__image">
<figcaption class="lead__caption">Your journey starts here</figcaption>
</figure>
</section>
<section class="intro">
<h2 class="intro__title">Know the country you live in a little better</h2>
<div class="intro__content-row">
<p class="intro__subtitle">That's exactly what we have arranged for you via this travel story</p>
</div>
<div class="intro__content-row">
<p class="intro__text">Need more action and adventure in your life instead of the same old routine? From Portland, Maine to Portland, Oregon we're going to take you on an exciting journey through some unknown regions of your country. Leave the car at home and travel by bike starting in New England where it all began. You will pass through 12 beautiful states, covering a total of 3,600 miles, and accomplish 3 monumental missions. Partying and taking a selfie with a famous rock star, donating $1 to a billionaire to help eradicate polio in Africa, and even stopping by famous author Stephen King's house to say hi and asking him to sign your favorite book.</p>
</div>
<ul class="intro__list">
<li class="intro__list-item"><span class="intro__text-accent">Distance (miles)</span> 3,644</li>
<li class="intro__list-item"><span class="intro__text-accent">Travel time (days)</span> 22</li>
<li class="intro__list-item"><span class="intro__text-accent">Highest point (feet)</span> 9,613</li>
<li class="intro__list-item"><span class="intro__text-accent">Lowest point (feet)</span> -3</li>
</ul>
</section>
<section class="gallery">
<div class="wrapper">
<ul class="photo-grid">
<li class="photo-grid__item"><img src="./images/highway.jpg" alt="a coastal highway" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/lake.jpg" alt="a lake" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/seagulls.jpg" alt="a flock of seagulls" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/boise.jpg" alt="a forest in boise" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/fog.jpg" alt="a lake shrouded in fog" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/valley.jpg" alt="a valley" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/pass.jpg" alt="a mountian pass" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/twig.jpg" alt="a twig" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/clouds.jpg" alt="a cloudy landscape" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/oasis.jpg" alt="an oasis in the desert" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/wires.jpg" alt="birds on a wire" class="photo-grid__image"></li>
<li class="photo-grid__item"><img src="./images/road.jpg" alt="a deserted road" class="photo-grid__image"></li>
</ul>
</div>
</section>
<section class="places">
<div class="place">
<div class="two-columns">
<div class="two-columns__title">
<h2 class="place__title">Maine</h2>
</div>
<div class="two-columns__url">
<p class="place__url-heading">URL</p>
<a class="place__url" href="#">global.llbean.com</a>
</div>
</div>
<div class="two-columns">
<div class="two-columns__image">
<img src="./images/maine.jpg" alt="the coast of maine" class="place__image">
</div>
<div class="two-columns__main-text">
<p class="place__paragraph">Still, as sparsely populated as it was in the 1600s, this is an extraordinary and highly underrated state full of rich history and majestic natural beauty. Maine is the main state you want to be sure not to miss. As your journey is going to be a long one, you had best be prepared for an arduous trek.</p>
<p class="place__paragraph">Thankfully, not only is Maine home to the very first European settlers on US territory in the era of Vikings, but is also home to L.L. Bean, which is a great company to grab a super sturdy backpack from for your 3-month expedition.</p>
<p class="place__paragraph">Average cost: $80-100.</p>
</div>
</div>
</div>
<div class="place">
<div class="two-columns">
<div class="two-columns__title">
<h2 class="place__title">New Hampshire</h2>
</div>
<div class="two-columns__url">
<p class="place__url-heading">URL</p>
<a class="place__url" href="#">timberland.com</a>
</div>
</div>
<div class="two-columns">
<div class="two-columns__image">
<img src="./images/new-hampshire.jpg" alt="a path through a valley" class="place__image">
</div>
<div class="two-columns__main-text">
<p class="place__paragraph">There's no better place to lose yourself in nature than in springtime New Hampshire. As serene and beautiful as it was in the 1700s, this state is still much less traveled than its neighbors to the South. So enjoy it while it lasts.</p>
<p class="place__paragraph">You won't be on your bike the whole time, so doesn't it make sense to pick up some extra footwear? Fortunately for you, the best outdoor shoe company in the history of the world proudly hails from this state. Cycle by the Timberland headquarters in Stratham, and pick up a pair of rugged, waterproof boots to keep your feet dry. Fitting for unpredictable weather you may be confronted by while passing through the Appalachians. These boots are also better than cycling shoes when pitching a tent.</p>
<p class="place__paragraph">Average cost: $100-150.</p>
</div>
</div>
</div>
<div class="place">
<div class="two-columns">
<div class="two-columns__title">
<h2 class="place__title">New York</h2>
</div>
<div class="two-columns__url">
<p class="place__url-heading">URL</p>
<a class="place__url" href="#">ge.com</a>
</div>
</div>
<div class="two-columns">
<div class="two-columns__image">
<img src="./images/new-york.jpg" alt="a busy new york street" class="place__image">
</div>
<div class="two-columns__main-text">
<p class="place__paragraph">Not only famous for “The Big Apple,” the state of NY also has several other reasons for going down in history. Since the late 1800s Schenectady, “The City that Lights and Hauls the World,” has been home to the world-famous General Electric Company.</p>
<p class="place__paragraph">This is where modern power generators were born as well as contemporary means of transmitting energy. So we figured this would be the perfect place to find a batteryless dynamo light for your bicycle to help you see through those dark lonely roads on your adventure. Such a light from GE will set you back about $10-20.</p>
</div>
</div>
</div>
<div class="place">
<div class="two-columns">
<div class="two-columns__title">
<h2 class="place__title">Erie, PA</h2>
</div>
<div class="two-columns__url">
<p class="place__url-heading">URL</p>
<a class="place__url" href="#">www.fws.gov</a>
</div>
</div>
<div class="two-columns">
<div class="two-columns__image">
<img src="./images/pennsylvania.jpg" alt="a waterfall" class="place__image">
</div>
<div class="two-columns__main-text">
<p class="place__paragraph">Erie, Pennsylvania, not to be confused with the word “eerie,” although it can be from time to time, is another town worth passing through for several different reasons. While it might be most famously known as the scene of the Gettysburg address delivered by Mr. Lincoln during the Civil war, Pennsylvania also has produced a rather decent-sized Amish community (eerie, huh?)</p>
<p class="place__paragraph">The reason we've brought you here today, if you haven't already guessed, can be summed up by using one delicious word: chocolate. Hershey's is a Pennsylvania-based company. Most likely, one of the tastiest missions you'll ever embark on during this tour, try to find an Amish friend and enjoy a bar in the National Wildlife Refuge on your way to Erie and have an extra eerie time!</p>
<p class="place__paragraph">The current cost of a Hershey's Chocolate bar: about 60¢.</p>
</div>
</div>
</div>
<div class="place">
<div class="two-columns">
<div class="two-columns__title">
<h2 class="place__title">Ohio</h2>
</div>
<div class="two-columns__url">
<p class="place__url-heading">URL</p>
<a class="place__url" href="#">cedarpoint.com</a>
</div>
</div>
<div class="two-columns">
<div class="two-columns__image">
<img src="./images/ohio.jpg" alt="a wind turbine" class="place__image">
</div>
<div class="two-columns__main-text">
<p class="place__paragraph">From the college capital of Columbus to the clean coastline of Cleveland, Ohio is a truly hidden gem. Earthquakes are surprisingly common in this particular region of North America, over 200 of which have registered with a magnitude of 2 or higher since 1776. However, earthquakes aren't the only thing shaking this centrally located state. One of the country's largest and oldest roller coaster parks is waiting to ROCK your world in Sandusky, Ohio! This will presumably be one of the most thrilling quests you'll ever complete (provided you can stomach it). Take a much-deserved break to ride as many roller coasters as you can before continue your bike ride!</p>
<p class="place__paragraph">The cost of a daily ticket: about $100.</p>
</div>
</div>
</section>
<section class="video">
<h2 class="content-title">Cycling & Spouting</h2>
<p class="content-subtitle">The largest bike-touring event in the world and the most famous geyser of Yellowstone National Park</p>
<div class="video__container">
<div class="video__item">
<img src="./images/cycling.jpg" alt="cyclists" class="video__image">
<a href="https://www.youtube.com/watch?v=2eCG6Ozz-oE">
<div class="video__overlay">
<svg class="video__icon_play" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5 1.5375C30.955 1.5375 39.4625 10.045 39.4625 20.5C39.4625 30.955 30.955 39.4625 20.5 39.4625C10.045 39.4625 1.5375 30.955 1.5375 20.5C1.5375 10.045 10.045 1.5375 20.5 1.5375ZM20.5 0C9.17375 0 0 9.17375 0 20.5C0 31.8263 9.17375 41 20.5 41C31.8263 41 41 31.8263 41 20.5C41 9.17375 31.8263 0 20.5 0Z" fill="white"/>
<path d="M17.7831 27.0086L27.5206 21.3711C27.8281 21.1661 28.0331 20.8586 28.0331 20.4999C28.0331 20.1411 27.8281 19.7824 27.5206 19.6286L17.7831 13.9911C17.4756 13.7861 17.0656 13.7861 16.7581 13.9911C16.4506 14.1961 16.2456 14.5036 16.2456 14.8624V26.1374C16.2456 26.4961 16.4506 26.8549 16.7581 27.0086C17.0656 27.1624 17.4244 27.2136 17.7831 27.0086Z" fill="white"/>
</svg>
<p class="video__duration">5 : 27</p>
<h3 class="video__title">RAGBRAI, Iowa</h3>
<p class="video__subtitle">Author: Ryan Van Duzer</p>
</div>
</a>
</div>
<div class="video__item">
<img src="./images/wyoming.jpg" alt="old faithful geyser erupting" class="video__image">
<a href="https://www.youtube.com/watch?v=4mZY7uxb7Gc">
<div class="video__overlay">
<svg class="video__icon_play" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5 1.5375C30.955 1.5375 39.4625 10.045 39.4625 20.5C39.4625 30.955 30.955 39.4625 20.5 39.4625C10.045 39.4625 1.5375 30.955 1.5375 20.5C1.5375 10.045 10.045 1.5375 20.5 1.5375ZM20.5 0C9.17375 0 0 9.17375 0 20.5C0 31.8263 9.17375 41 20.5 41C31.8263 41 41 31.8263 41 20.5C41 9.17375 31.8263 0 20.5 0Z" fill="white"/>
<path d="M17.7831 27.0086L27.5206 21.3711C27.8281 21.1661 28.0331 20.8586 28.0331 20.4999C28.0331 20.1411 27.8281 19.7824 27.5206 19.6286L17.7831 13.9911C17.4756 13.7861 17.0656 13.7861 16.7581 13.9911C16.4506 14.1961 16.2456 14.5036 16.2456 14.8624V26.1374C16.2456 26.4961 16.4506 26.8549 16.7581 27.0086C17.0656 27.1624 17.4244 27.2136 17.7831 27.0086Z" fill="white"/>
</svg>
<p class="video__duration">2 : 36</p>
<h3 class="video__title">Old Faithful Geyser, Wyoming</h3>
<p class="video__subtitle">Author: David Ellis</p>
</div>
</a>
</div>
</div>
</section>
<section class="comments">
<h2 class="content-title">Three influential people</h2>
<p class="content-subtitle">These 3 Americans have each impacted the world in very individual ways</p>
<div class="comments__container">
<div class="comment">
<img src="./images/beatrice-morrow-cannady.jpg" alt="beatrice morrow cannady" class="comment__image">
<blockquote class="comment__quote">It is the duty of the Negro woman to see that in the home there are histories of her race written by Negro historians.</blockquote>
<cite class="comment__author">Beatrice Morrow Cannady, Portland, Oregon</cite>
</div>
<div class="comment">
<img src="./images/jane-addams.jpg" alt="jane addams" class="comment__image">
<blockquote class="comment__quote">The good we secure for ourselves is precarious and uncertain, is floating in mid-air, until it is secured for all of us and incorporated into our common life.</blockquote>
<cite class="comment__author">Jane Addams, Cedarville, Illinois</cite>
</div>
<div class="comment">
<img src="./images/stephen-king.jpg" alt="stephen king" class="comment__image">
<blockquote class="comment__quote">Books are the perfect entertainment: no commercials, no batteries, hours of enjoyment for each dollar spent.</blockquote>
<cite class="comment__author">Stephen King, born in Portland, Maine</cite>
</div>
</div>
</section>
<section class="cover">
<img src="./images/route-66.jpg" alt="route 66" class="image">
<div class="cover-bg">
<h2 class="cover__title">Historic Route 66</h2>
<p class="cover__subtitle">The Main Street of Americ from Santa Monica, Cal. to Chicago, Ill. within an iframe</p>
</div>
</section>
<footer class="footer">
<nav class="nav" role="navigation">
<ul class="nav__links">
<li class="nav__link">Maps</li>
<li class="nav__link">Weather</li>
<li class="nav__link">Calendar</li>
</ul>
</nav>
<p class="footer__copyright">© 2020 James Ryan</p>
</footer>
</div>
</body>
</html>