Web-based-Language/page5.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page 3</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="jq3.js"></script>
    <style>
      body {
        background-color: lightgrey;
        overflow: hidden;
      }
      img {
        width: 800px;
      }
      img:hover {
        box-shadow: 10px 10px 5px gray;
        width: 810px;
      }
      .div_one {
        position: absolute;
        margin-left: -150px;
        margin-top: -120px;
        z-index: 2;
      }
      .div_two {
        position: absolute;
        margin-left: 500px;
        margin-top: -150px;
        z-index: -1;
      }
      .div_three {
        position: absolute;
        right: 0;
        margin-right: -150px;
        margin-top: -50px;
        z-index: 1;
      }
      .div_four {
        position: absolute;
        left: 0;
        margin-top: 350px;
        z-index: -3;
      }
      .div_five {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-left: 200px;
        margin-bottom: -10px;
        z-index: -5;
      }
      .div_six {
        position: absolute;
        margin-left: 550px;
        right: 0;
        z-index: -10;
      }
      .div_seven {
        position: absolute;
        bottom: 0;
        margin-left: 600px;
        margin-bottom: -300px;
        z-index: -5;
      }
      .carpe_link {
        position: absolute;
        width: 100%;
        text-align: center;
        margin-top: 40vh;
        z-index: -100;
      }
      p {
        color: rgb(141, 20, 20);
        font-size: 36px;
      }
      p:hover {
        text-decoration: underline;
        font-style: italic;
        cursor: grab;
      }
      #seize {
        display: none;
        text-decoration: none;
        color: rgb(141, 20, 20);
        font-size: 36px;
      }
      #seize:hover {
        text-decoration: underline;
        font-style: italic;
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <div class="div_one" id="id_1">
      <img src="hokusai.jpg" />
      <!--Hokusai, Katsushika, "The Great Wave off Kanagawa." Wikipedia, 1831, https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa-->
    </div>
    <div class="div_two" id="id_2">
      <img src="boat.jpg" />
      <!--Monet, Claude, "Impression, Sunrise." Wikipedia, 1872, https://en.wikipedia.org/wiki/Impression,_Sunrise-->
    </div>
    <div class="div_three" id="id_3">
      <img src="retopistics.jpg" />
      <!--Mehretu, Julie, "Retopistics: A Renegade Excavation." Crystal Bridges, 2015, https://crystalbridges.org/blog/one-big-painting-mehretus-retopistics-a-renegade-excavation/#:~:text=Retopistics%3A%20A%20Renegade%20Excavation%2C%20by,canvas%20in%20the%20Museum's%20collection.-->
    </div>
    <div class="div_four" id="id_4">
      <img src="canal.jpg" />
      <!--Canaletto, "The Grand Canal and the Church of the Salute." Wikipedia, 1740, https://en.wikipedia.org/wiki/The_Grand_Canal_and_the_Church_of_the_Salute-->
    </div>
    <div class="div_five" id="id_5">
      <img src="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/-->
    </div>
    <div class="div_six" id="id_6">
      <img src="hunters.jpg" />
      <!--Bruegel, Pieter, "The Hunters in the Snow." Wikipedia, 1565, https://en.wikipedia.org/wiki/The_Hunters_in_the_Snow-->
    </div>
    <div class="div_seven" id="id_7">
      <img src="fog.jpg" />
      <!--Friedrich, Caspar, "Wanderer above the Sea of Fog." Wikipedia, 1818, https://en.wikipedia.org/wiki/Wanderer_above_the_Sea_of_Fog-->
    </div>
    <div class="carpe_link">
      <p id="carpe_link">
        “Make your lives a masterpiece, you only get one canvas.”
        <!--Quote by E.A. Bucchianeri-->
        <!--Bucchianeri, E.A. "Brushstrokes of a Gadfly" 2011. Goodreads, https://www.goodreads.com/quotes/543963-make-your-lives-a-masterpiece-you-only-get-one-canvas. Accessed 3 August 2022-->

      </p>
      <a href="page6.html" id="seize">Seize the Day</a>
    </div>
  </body>
</html>