-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (87 loc) · 4.99 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The Walk</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="mainWidth">
<img id="audio" src="images/audio.png">
<div id="intro">
<div id="exit">
<div></div>
<div></div>
</div>
<div id="credits">
<h1 id="title">The Walk</h1>
<h1 id="credit">By Magdi Hazaa</h1>
<p>Hope you enjoyed this brief virtual adventure! If you wanna see more of my work, you can visit my <a href="https://magdihazaa.com/" target="_blank">portfolio website</a></p>
<p>You can also check the github for this website <a href="https://github.com/mhazaa/The-Walk" target="_blank">over here</a></p>
</div>
</div>
<h1 id="textOne" class="foreground">I still remember those mornings we skipped school to walk in the woods. It started when your dog was put down. You kept the smile, the jokes cracking. But deep under that facade, you would slip into long, spaced-out silence. It was obvious to me that your quiet grief was turning your world to mole.</h1>
<h1 id="textTwo" class="foreground">"Me and Mom used to walk Abby here," you told me one day as we marched our usual path. "This was her favorite tree."</h1>
<h1 id="textThree" class="foreground">It was only in those mornings that you were pieced together, your silences were shorter. You laughter crowded with a need to be shared. And maybe it was my own selfish desire of making you more fun to hang out with, but I made sure to come with you here whenever you asked.</h1>
<h1 id="textGrave" class="foreground">You buried her in the place she loved the most.</h1>
<h1 id="textFour" class="foreground">More often than not, we pretended we just enjoyed the mischief of what we were doing, the rush of skipping school to wander paths of green and grass instead of hallways and notebooks. Even when we got caught, when the school would call our parents, when we almost got suspended, we still kept coming here.</h1>
<h1 id="textFive" class="foreground">One day, we looked each other in the eye, a silent agreement of the obvious. This was a bad idea-we were inevitably getting in trouble. I think you knew you were pulling the strings all along, that I would always join you whatever you decided.
"One last time," you said, that sadness of packing your things caught in your tongue. I nodded, and followed you through.</h1>
<h1 id="textSix" class="foreground">That morning, I let you take rest in your silence.<br>I let you breath in all the memories.</h1>
<h1 id="textSeven">
<span>After almost an entire day of walking, we sat down.<br></span>
<span>Tired, our iris roaming our eyes in a slumber.<br></span>
<span>But still, there was pride in the air.<br></span>
<span>It felt like we just reached the end of the universe.</span>
</h1>
<img id="favtree" class="foreground" src="images/sunsetfinal.png">
<div id="favtreeActiveWrapper" class="foreground">
<div id="favtreeActive"></div>
</div>
<img id="birds" class="pinned" src="images/birds.png">
<img id="sky" class="pinned" src="images/1- sky.jpg">
<img id="sun" class="pinned" src="images/2- sun.png">
<img id="back" class="background" src="images/3- back.png">
<img id="middle" class="background" src="images/4- middle.png">
<img id="front" class="midground-further" src="images/5- front.png">
<img id="middletrees" class="midground-closer" src="images/6- middletrees.png">
<img id="middletrees2" class="midground-closer" src="images/6- middletrees.png">
<div id="leavesWrapper" class="foreground">
<img id="leaves" src="images/7- leaves.png">
</div>
<div id="graveWrapper" class="foreground">
<img id="grave" src="images/8- grave.png">
</div>
<div id="graveoutline" class="foreground"></div>
<img id="fronttrees" class="foreground" src="images/9- fronttrees.png">
<img id="fronttrees2" class="foreground" src="images/9- fronttrees.png">
<img id="fronttrees3" class="foreground" src="images/9- fronttrees.png">
<img id="grass" class="foreground" src="images/10- grass.png">
<div id="rockWrapper" class="foreground">
<img id="rock" src="images/rock.png">
</div>
<div id="rockoutline" class="foreground"></div>
<div id="kid" class="pinned">
<img id="kidBody" src="images/1-body.png">
<img id="kidRightleg" src="images/1- rightleg.png">
<img id="kidLeftleg" src="images/1- leftleg.png">
</div>
<div id="boy" class="pinned">
<img id="boyBody" src="images/2- body.png">
<img id="boyRightleg" src="images/2- rightleg.png">
<img id="boyLeftleg" src="images/2- leftleg.png">
</div>
<div id="frontleavesWrapper" class="foreground">
<img id="frontleaves" src="images/11-frontleaves.png">
</div>
<img id="tree" class="foreground-most" src="images/12- tree.png">
<img id="sunlight" class="pinned" src="images/13- sunlight.png">
</div>
</div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="script.js"></script>
</body>
</html>