Web-based-Language/page7.html at main · KnnthGunawan/Web-based-Language · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page 7</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="jq4.js"></script>
    <style>
      .formatted {
        white-space: pre;
        font-family: monospace;
        margin: 0 auto;
        width: 400px;
      }

      #draggable:hover {
        cursor: grab;
      }
      #first:hover {
        text-shadow: 5px 5px 5px rgba(0, 0, 0);
      }
      #second {
        display: none;
      }
      #second:hover {
        text-shadow: 5px 5px 5px rgba(0, 0, 0);
      }
      #third {
        display: none;
      }
      #third:hover {
        text-shadow: 5px 5px 5px rgba(0, 0, 0);
      }
      #fourth {
        display: none;
      }
      #fourth:hover {
        text-shadow: 5px 5px 5px rgba(0, 0, 0);
      }
      #fifth {
        display: none;
      }
      #fifth:hover {
        text-shadow: 5px 5px 5px blue;
      }
      #sixth {
        display: none;
      }
      #sixth:hover {
        text-shadow: 5px 5px 5px red;
      }
      #seven {
        display: none;
      }
      #seven:hover {
        text-shadow: 5px 5px 5px blue;
      }
      #eight {
        display: none;
      }
      #eight:hover {
        text-shadow: 5px 5px 5px red;
      }
      #nine {
        display: none;
      }
      #nine:hover {
        text-shadow: 5px 5px 5px blue;
      }
      #ten {
        display: none;
      }
      #ten:hover {
        text-shadow: 5px 5px 5px blue;
      }
      #eleven {
        display: none;
      }
      #eleven:hover {
        text-shadow: 5px 5px 5px red;
      }
      #twelve {
        display: none;
      }
      #twelve:hover {
        text-shadow: 5px 5px 5px blue;
      }
      #thirteen {
        display: none;
      }
      #thirteen:hover {
        text-shadow: 5px 5px 5px red;
      }
      #mark {
        display: none;
      }
      #mark a {
        color: red;
      }
    </style>
  </head>
  <body>
    <!--prettier-ignore-->
    <div class="formatted" id="draggable">
        <span id="first">Sunset and evening star,
        And one clear call for me!
        And may there be no moaning of the bar,
        When I put out to sea,</span>

        <span id="second">But such a tide as moving seems asleep,
        Too full for sound and foam,
        When that which drew from out the boundless deep
        Turns again home.</span>

        <span id="third">Twilight and evening bell,
        And after that the dark!
        And may there be no sadness of farewell,
        When I embark;</span>

        <span id="fourth">For tho’ from out our bourne of Time and Place
        The flood may bear me far,
        I hope to see my Pilot face to face
        When I have crost the bar.</span>
        <!--Tennyson, Alfred. "Crossing the Bar." Poetry Foundation, https://www.poetryfoundation.org/poems/45321/crossing-the-bar. Accessed 3 August 2022-->

        <span id="fifth" style="color: blue;">What? If I'm dead, how am I talking to you?</span>

        <span id="sixth" style="color: red;">Come, let's go on a stroll while
        we talk.</span>

        <span id="seven" style="color: blue;">...is this the afterlife?</span>

        <span id="eight" style="color: red;">That is correct. Welcome to the afterlife.</span>

        <span id="nine" style="color: blue;">Oh.</span>

        <span id="ten" style="color: blue;">There was still so much I wanted to do...</span>

        <span id="eleven" style="color: red;">Don't be sad. I've been assigned to help you return
        to your world.</span>

        <span id="twelve" style="color: blue;">What do you mean?</span>

        <span id="thirteen" style="color: red;">You see, you're a special case. The higher ups feel as if
        you failed to achieve your full potential during your existence,
        and they've requested that you be sent back.</span>

        <span id="mark"><a href="page8.html">They want you to leave a mark before you're gone.</a></span>
    </div>
  </body>
</html>