Web-based-Language/page13.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Index</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="jq8.js"></script>
    <style>
      body {
        overflow: hidden;
        background-image: url("mountains.jpg");
        /* Kuan, Fan, "Travelers among Mountains and Streams." Comuseum, 11th Century, https://www.comuseum.com/painting/masters/fan-kuan/travelers-among-mountains-and-streams/ */
      }
      .white {
        background-color: transparent;
        color: white;
        font-size: 36px;
        padding: 10px;
      }
      .white:hover {
        cursor: grab;
      }
      .rose {
        width: 100%;
        text-align: center;
      }
      .rose:hover {
        cursor: grab;
      }
      #white1 {
        display: none;
      }
      #white2 {
        display: none;
      }
      #white3 {
        display: none;
      }
      #white4 {
        display: none;
      }
      #white5 {
        display: none;
      }
      #white6 {
        display: none;
      }
      #white7 {
        display: none;
      }
      #white8 {
        display: none;
      }
      #white9 {
        display: none;
      }
      #end {
        font-size: 24px;
      }
      .replay {
        position: absolute;
        background-color: transparent;
        font-size: 24px;
        text-align: left;
        display: none;
        right: 0;
        margin-top: -48px;
        width: 100px;
      }
      .replay a {
        color: white;
        text-decoration: none;
      }
      .replay a:hover {
        cursor: grab;
        text-decoration: underline;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <img src="gate.png" style="opacity: 0; width: 400px; margin-left: 40px" />
    <div class="white" id="white">
      <span id="white1">Carpe </span>
      <span id="white2">Carpe Diem</span>
      <span id="white3">Carpe Diem <br /><br />Seize</span>
      <span id="white4">Carpe Diem <br /><br />Seize The</span>
      <span id="white5">Carpe Diem <br /><br />Seize The Day</span>
      <span id="white6"
        >Carpe Diem <br /><br />Seize The Day<br /><br />Before</span
      >
      <span id="white7"
        >Carpe Diem <br /><br />Seize The Day<br /><br />Before It's</span
      >
      <span id="white8"
        >Carpe Diem <br /><br />Seize The Day<br /><br />Before It's Gone</span
      >
      <span id="white9"
        >Carpe Diem <br /><br />Seize The Day<br /><br />Before It's Gone<br /><br /><br /><br /><br /><span
          id="end"
          >Kenneth G.</span
        ></span
      >
    </div>
    <div class="rose" id="rose">
      <img src="rose_spin.gif" style="opacity: 0.9" />
    </div>
    <div class="replay" id="replay">
      <a href="index.html">Replay</a>
    </div>
  </body>
</html>