-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
438 lines (389 loc) · 17.6 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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The official TOAST magazine website" />
<meta name="tags" content="toast magazine, toast, magazine" />
<meta name="author" content="Toast" />
<title>Toast</title>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<!-- Navbar container -->
<div class="navbar-container">
<!-- Navbar item -->
<div class="navbar-item d-lg-none">
<!-- Navbar burger -->
<div id="burger" class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Navbar item -->
<div class="navbar-item u-mr-lg-2 text-center text-lg-left">
<a class="navbar-logo" href="index.html">Toast</a>
</div>
<!-- Navbar menu -->
<div class="navbar-item navbar-menu-wrapper">
<!-- Links list -->
<ul class="navbar-list">
<li><a href="#">Women</a></li>
<li><a href="#">House&Home</a></li>
<li><a href="#">LookBook</a></li>
<li><a href="#">Magazine</a></li>
</ul>
<div class="navbar-actions text-lg-right">
<form class="search-form">
<input id="email" type="text" />
<button type="submit">Search</button>
</form>
<!-- Navbar cart -->
<div class="navbar-cart">
<div style="margin-bottom: 5px">
<a href="#">Log in </a> / <a href="#">Register</a>
<span class="u-mr-lg-1"></span>
GBP/£
</div>
<div class="d-inline-flex">
<div class="u-mr-lg-1">WISHLIST: <span>(0)</span></div>
<div>BAG: <span>£99.999 (1)</span></div>
</div>
</div>
</div>
</div>
<div class="navbar-item d-lg-none"> </div>
</div>
</nav>
<!-- Main -->
<main class="main">
<div class="container text-center">
<h1 class="heading-primary text-uppercase u-mt-2">TOAST MAGAZINE</h1>
<h2 class="heading-secondary u-mt-2">Paradigm Shift | The Geodesic Dome</h2>
<a href="#" class="heading-tertiary text-uppercase u-mt-2"><u>ARTS & CULTURE</u></a>
<div class="content u-mt-10 text-left">
<img src="images/Scotland-1.JPG" alt="Scotland 1" />
<div class="text-container u-mt-2 u-mt-md-3 u-mt-lg-4">
<p class="text-md">
Late on a midweek evening in winter, five years ago, I came to Euston station to begin
a journey from London to the most westerly point on the British mainland. The station
concourse was cold but wonderfully empty; low-lit and calm in contrast with the usual
daytime scurry. Dispersed commuters stood silently before the departure board while a
handful in suits waited at the counters of closing delis for end-of-night stodge. I
bought a few travel provisions, found my platform and, with the vast train already
arrived and being loaded, followed a long row of carriages to my cabin for the night.
</p>
<blockquote class="text-quote u-mt-3 u-mt-md-4">
“The dome unsurprisingly failed to rise, and was was good-naturedly termed the the
Supine Dome.”
</blockquote>
<p class="u-mt-3 u-mt-md-4">
I was off to Fort William in the northwest of Scotland; the town that has for
centuries served as a gateway to the Highlands and Islands. At Fort William I would
pick up my rental car and drive on further west to Corran, catch a ferry across Loch
Linnhe and continue on to the Ardnamurchan Peninsula—a finger tip of Britain pointing
straight out across the ocean to America. These latter stages of the journey I
apprehensively contemplated as my train left Euston in the dark; planned at the last
minute I wasn’t entirely certain of their competent execution. Ferry times had been
checked—but only at a glance—and I had been lucky to secure a hire car at such short
notice. Although these were the days before Uber, Londoners tend to be guilty of
assuming an ease with travel: however precarious the journey, there’s always a way to
get where you want to get to, no matter how late in the day. Getting from London to
Ardnamurchan, it seemed, wasn’t so straight forward. But then, why should it be?
</p>
</div>
<img class="u-mt-3 u-mt-md-4" src="images/Scotland-2.JPG" alt="Scotland 2" />
<div class="text-container u-mt-3 u-mt-md-4">
<p>
City lights receeded and London disappeared; a drink in the bar carriage, then to the
quiet of the cabin, half a chapter of something, bed. I woke up, almost unbelievably,
to imposing, picturesque hills and a passing loch. Early morning light plastered the
little cabin window before the black out of a short tunnel. Back out by the water
again, the view just stunning. Another tunnel fast approaching, its ferny bank
powdered with snow—the first of the season, somewhere a long way from home.
</p>
<p class="u-mt-3">
The purpose of the trip was to be interviewed for a head gardener position in the
remote part of Scotland that lay at the end of my 550 mile journey. I’d not even stay
the night, although two would be spent getting there and back again. The garden was a
restoration project: an attractive landscape overrun with acidic shrubs and tatty
exotic cordylines—the fancies of its former proprietor now waning with neglect. A new
owner had acquired the estate with grand plans in mind, ready to inject life back into
the overgrown grounds. I was at that time eager for exactly this sort of horticultural
challenge, whichever end of the country it might turn up.
</p>
</div>
<img class="u-mt-3 u-mt-md-4" src="images/Scotland-3.JPG" alt="Scotland 3" />
<div class="text-container u-mt-3 u-mt-md-4">
<p>
At Fort William I woke fully in the sharp, clean air, further roused with coffee as I
located the car in the station parking lot. Empty road to Corran, short wait for the
ferry, off across the peninsula through a palette of deep greens, red and blazing
ochre. A tour of the garden, followed by lengthy chats around a large oak table;
decisions to be made, hands shaken. The interview occupied the first half of the day,
which left the second free to explore as much of the surrounding countryside as I
could before boarding the evening train home. Over the course of that afternoon, in
bright winter sunshine, I sauntered in a cheerful daze from one place to another,
meandering slowly along the road back to Fort William. I took in magnificent coastline
and loch beaches, damp plantation woods and mossy rivers, long empty fields before
cloud-tipped mountains. I tried to imagine what it would be like to call these places
home, to root into the landscape like the sturdy local cattle with their heavy
Highland coats. I questioned my hardiness and my ability to grow a beard; the terrain
seemed to demand a resilience tough as gorse needles. ‘Expansive’ was a word that
frequently came to mind also: each view as wonderfully unpopulated as, well, Euston
station at midweek midnight. Room to breathe, room to think, landscapes to be lost in,
yet find a train of thought.
</p>
</div>
<img class="u-mt-3 u-mt-md-4" src="images/Scotland-4.JPG" alt="Scotland 4" />
<div class="text-container u-mt-3 u-mt-md-4">
<p>
12 hours later I emerged from the cabin into Euston in full morning swing: queues at
the barriers, queues on the concourse. Though in the end (and after days of
deliberation) I had to decline the job, the brief trip marked a first of many to the
highlands of Scotland. It was an introduction to this beautiful and remote part of
Britain, a part I’ve grown fond of and need little excuse to visit. I’ve since found
my way there via all means of transport, recently having flown for reasons specific to
timing. Travel by train however, especially through the night, is by far the most
preferable should one have the option. It’s certainly the most conducive to making an
escape from the city: under the cover of darkness, carried off through the night. To
greet from the pillow this bewilderingly uncluttered and dramatic landscape is a fine
introduction; to wake up transported into the wide and wintery northwest.
</p>
<a href="#" class="text-uppercase text-tertiary u-mt-2"><u>WORDS BY EVA DIAZ </u></a>
<p class="u-mt-2">
Images by Western Regional Archives, State Archives of North Carolina.
</p>
</div>
</div>
</div>
<ul class="social u-mt-4 u-mt-md-5">
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-google-plus-g"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-tumblr"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-envelope"></i></a>
</li>
</ul>
<div class="container">
<!-- Comment box -->
<div class="comment-box u-mt-3 u-mt-md-4">
<a href="#" class="heading-tertiary text-uppercase"><u>Comment Here</u></a>
</div>
<!-- Newsletter -->
<div class="newsletter-box text-center u-mt-4 u-mt-md-7">
<!-- Heading -->
<h4 class="newsletter-heading">Keep up with our latest articles and news</h4>
<form class="newsletter-form" action="#">
<!-- Email input -->
<input id="email" class="email u-mt-2" placeholder="enter your email" type="email" />
<!-- Submit button -->
<button id="submit" class="u-mt-2" type="submit">Sign up</button>
</form>
</div>
<!-- News carousel -->
<div class="news-carousel owl-carousel u-mt-6 u-mt-10">
<!-- News card -->
<div class="news-card">
<!-- Card img -->
<div class="news-hero">
<img src="images/carousel-1.jpg" alt="" />
</div>
<!-- Card heading -->
<a href="#" class="news-heading">Winter Cocktails</a>
<!-- Card text -->
<p class="news-desc">
Jessica Seaton introduces us to some winter warmers – a artist in mid-career
galleries…
</p>
<!-- Card footer -->
<div class="news-footer">
<a href="#">Food</a>
<span>2 hour ago</span>
</div>
</div>
<!-- News card -->
<div class="news-card">
<!-- Card img -->
<div class="news-hero">
<img src="images/carousel-2.jpg" alt="" />
</div>
<!-- Card heading -->
<a href="#" class="news-heading">Interview: Sheila Kohler </a>
<!-- Card text -->
<p class="news-desc">
Jessica Seaton introduces us to some winter warmers – a artist in mid-career
galleries…
</p>
<!-- Card footer -->
<div class="news-footer">
<a href="#">Books</a>
<span>1 day ago</span>
</div>
</div>
<!-- News card -->
<div class="news-card">
<!-- Card img -->
<div class="news-hero">
<img src="images/carousel-3.jpg" alt="" />
</div>
<!-- Card heading -->
<a href="#" class="news-heading">The Huipil</a>
<!-- Card text -->
<p class="news-desc">
Jessica Seaton introduces us to some winter warmers – a artist in mid-career
galleries…
</p>
<!-- Card footer -->
<div class="news-footer">
<a href="#">TEXTILES & TECHNIQUES</a>
<span>1 week ago</span>
</div>
</div>
<!-- News card -->
<div class="news-card">
<!-- Card img -->
<div class="news-hero">
<img src="images/carousel-1.jpg" alt="" />
</div>
<!-- Card heading -->
<a href="#" class="news-heading">Winter Cocktails</a>
<!-- Card text -->
<p class="news-desc">
Jessica Seaton introduces us to some winter warmers – a artist in mid-career
galleries…
</p>
<!-- Card footer -->
<div class="news-footer">
<a href="#">Food</a>
<span>2 hour ago</span>
</div>
</div>
<!-- News card -->
<div class="news-card">
<!-- Card img -->
<div class="news-hero">
<img src="images/carousel-2.jpg" alt="" />
</div>
<!-- Card heading -->
<a href="#" class="news-heading">Interview: Sheila Kohler </a>
<!-- Card text -->
<p class="news-desc">
Jessica Seaton introduces us to some winter warmers – a artist in mid-career
galleries…
</p>
<!-- Card footer -->
<div class="news-footer">
<a href="#">Books</a>
<span>1 day ago</span>
</div>
</div>
<!-- News card -->
<div class="news-card">
<!-- Card img -->
<div class="news-hero">
<img src="images/carousel-3.jpg" alt="" />
</div>
<!-- Card heading -->
<a href="#" class="news-heading">The Huipil</a>
<!-- Card text -->
<p class="news-desc">
Jessica Seaton introduces us to some winter warmers – a artist in mid-career
galleries…
</p>
<!-- Card footer -->
<div class="news-footer">
<a href="#">TEXTILES & TECHNIQUES</a>
<span>1 week ago</span>
</div>
</div>
</div>
</div>
</main>
<footer class="footer container u-mt-6 u-mt-10">
<p class="d-lg-none"><u>Australia</u></p>
<!-- Footer nav -->
<div class="footer-nav">
<ul>
<li><a href="#">DELIVERY</a></li>
<li><a href="#">RETURNS</a></li>
<li><a href="#">SIZE & FIT</a></li>
<li><a href="#">SHOP LOCATOR</a></li>
</ul>
<ul>
<li><a href="#">SIGN UP</a></li>
<li><a href="#">ORDER A BOOK</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">PRESS</a></li>
</ul>
<ul>
<li><a href="#">LOOKBOOK</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">WORK WITH US</a></li>
<li><a href="#">ETHICAL POLICY</a></li>
</ul>
<ul>
<li><a href="#">PRIVACY</a></li>
<li><a href="#">TERMS</a></li>
<li><a href="#">HELP</a></li>
<li><a href="#">SITEMAP</a></li>
</ul>
</div>
<!-- Footer soc -->
<ul class="footer-social">
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
</li>
</ul>
</footer>
<!-- Scripts -->
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous"
></script>
<script src="scripts/main.js"></script>
</body>
</html>