-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (94 loc) · 4.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Dystopia</title>
</head>
<body>
<!--NAV BAR-->
<nav>
<div class="logo">
<img src="/dystopia/images/1.png" width="50" height="50" alt="#">
<p> dystopia </p>
</div>
<div class="links">
<a href="#">FAQ</a>
<a href="#">Tools</a>
</div>
</nav>
<!--HEADER SECTION-->
<div class="header">
<div class="info">
<p id="one"><span id="A">Co</span><span id="B">lo</span><span id="C">urs</span> of Dystopia</p>
<p id="two"> An imagined world or society in which people lead wretched, fearful lives; typically one that is totalitarian or post-apocalyptic.</p>
<p id="three">Artistic renderings of dystopian societies show many different feelings and colours, knowing which one you are in determines what you need to survive.</p>
<button id="a">Sign Up</button>
</div>
<img src="/dystopia/images/filip-dudek-1112s.jpg" width="600" alt="Overgrown city street, nature healing">
</div>
<!--SECTION TWO-->
<div class="sectTwo">
<div class="block1">
<p>Imagin seeing...</p>
</div>
<div class="inner">
<div class="block2">
<img src="/dystopia/images/byung-ju-bong-01.jpg" width="200" height="200" alt="City submerged in water">
<p id="four"><b>Blue</b> - Sparkling blue waters hide secrets of corruption and watery graves. </p>
</div>
<div class="block3">
<img src="/dystopia/images/fc91f608598cfa5566ccff919a54a6f9.png" width="200" height="200" alt="City overgrown with vines and vegitation">
<p id="five"><b>Green</b> - Vibrant green surroundings, dotted with tall once completely occupied buildings; provide the perfect cover for beasts and monsters that see you before you see them. </p>
</div>
<div class="block4">
<img src="/dystopia/images/post_apocalypse_downtown_los_angeles_by_myjavier007_d6twv14-pre.jpg" width="200" height="200" alt="Dilapidated city in desert">
<p id="six"><b>Tan</b> - Hot deserts, with high grey buildings acting as lightening rods for the dry and unforgiving wasteland. </p>
</div>
<div class="block5">
<img src="/dystopia/images/open-office-backlash-how-small-businesses-can-survive-in-a-noisier-world-cubicle-farm-embed-4.jpg" width="200" height="200" alt="Office with cubicals, computers and towers of papers">
<p id="seven"><b>Greyscale</b> - An eerily quiet place, only the tapping of the keyboard can be heard. The souls of corporate slaves dying.</p>
</div>
</div>
</div>
<!--SECTION THREE-->
<div class="sectThree">
<p class="poem">
<b>The Shanghai Sonnet</b> --
<br>Congealed upon the banks of this
<br>tamed dragon sprawl stacks of crude buildings.
<br>Concrete covers all but two glassy kings,
<br>thick smoggy gusts give them a grimy kiss.
<br>Insipid pillars choke sunlight, endless
<br>roads incise the very earth, wings
<br>of apartments cram into ev’rything,
<br>ev’rywhere stacks upon stacks of units.
<br>Herein lies the future, our dystopia
<br>has arrived through the hazy looking glass.
<br>Perhaps a reminder, utopia
<br>is not coming, or maybe the hourglass
<br>has but some time left. Then the route is clear.
<br>We must turn everything around. And fast.
</p>
<p id="eight">by Ashley Casteele </p>
</div>
<!--SECTION FOUR-->
<div class="sectFour">
<div class="action">
<div class="lastWords">
<p id="nine">Prep against your colour!</p>
<p id="ten">Sign up for our newsletter to find out how.</p>
</div>
<button id="b">Sign Up</button>
</div>
</div>
<!--FOOTER-->
<footer>
<div class="credits">
<p id="eleven">Copyright © Dystopia Corp.</p>
<p id="twelve">In partnership with © The Odin Project 2021</p>
</div>
</footer>
</body>
</html>