-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcac.html
195 lines (177 loc) · 5.76 KB
/
cac.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
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Find the Key - Escape Game</title>
<link rel="stylesheet" href="style2.css" />
<script
src="https://kit.fontawesome.com/5a8e77b133.js"
crossorigin="anonymous"
></script>
<style>
/* Add basic styling to the container */
.container {
position: relative;
width: 300px;
height: 400px;
overflow: hidden;
}
/* The door itself, initially covering the image */
.door {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 400px;
background-color: #333;
cursor: pointer;
transition: transform 1s ease; /* Smooth sliding transition */
}
/* When the door is clicked, it slides off to the left */
.door.open {
transform: translateX(100%); /* Slide door to the left */
}
/* The image behind the door */
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensure image covers the whole space */
opacity: 0; /* Initially hidden */
transition: opacity 1s ease; /* Fade-in transition for image */
}
/* When the door opens, the image fades in */
.door.open + .image {
opacity: 1;
}
</style>
</head>
<body>
<div class="cursor"></div>
<div class="shapes">
<!-- Mouse shadows -->
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
</div>
<main>
<header>
<h1>Find the Key</h1>
</header>
<section id="characters">
<h2 class="section-title">Meet the Characters</h2>
<p class="section-description">
Here are the characters featured in the game:
</p>
<div class="character-list">
<article class="character">
<figure>
<img src="Z.png" alt="Z, shy and timid girl" />
<figcaption>
<h3>Z (Me)</h3>
<p>Shy and timid girl</p>
</figcaption>
</figure>
</article>
<article class="character">
<figure>
<img src="M.png" alt="M, easily pissed" />
<figcaption>
<h3>M (Mithra)</h3>
<p>Easily pissed</p>
</figcaption>
</figure>
</article>
<article class="character">
<figure>
<img src="J.png" alt="J, believes in God" />
<figcaption>
<h3>J (Joelle)</h3>
<p>Believes in God</p>
</figcaption>
</figure>
</article>
<article class="character">
<figure>
<img src="Z boy.png" alt="Z boy, easily frightened" />
<figcaption>
<h3>Z boy <br />(Genderbend)</h3>
<p>Easily frightened</p>
</figcaption>
</figure>
</article>
<article class="character">
<figure>
<img src="M boy.png" alt="M boy, has anger issues" />
<figcaption>
<h3>M boy (Genderbend)</h3>
<p>Has anger issues</p>
</figcaption>
</figure>
</article>
<article class="character">
<figure>
<img src="J boy.png" alt="J boy, friendly" />
<figcaption>
<h3>J boy <br />(Genderbend)</h3>
<p>Friendly</p>
</figcaption>
</figure>
</article>
</div>
</section>
<section id="about-me">
<h2>About Me</h2>
<p>
Hi! My name is Eng Zhi Cheng. I was born on 2nd June 2012 in Perak. I
love creating simple and fun games, <br />and this is one of my
favorite projects. In my free time, I enjoy playing games, and
learning new things. <br /><br />You can contact me at
</p>
</section>
<!-- Fun Facts Section -->
<section id="fun-facts">
<h2>Fun Facts About the Game</h2>
<div class="fun-facts-container">
<div class="fun-fact-item">
<h3>Did you know?</h3>
<p>The game was created in just 5 days of work!</p>
</div>
<div class="fun-fact-item">
<h3>Multiple Endings</h3>
<p>
The game has 6 different endings depending on the character you
chose at the start.
</p>
</div>
<div class="fun-fact-item">
<h3>Hidden Easter Eggs</h3>
<p>There’s 2 secret sprites to find in the game.</p>
<div class="secret-room-images">
<img
src="Screenshot 2024-11-10 211130.png"
alt="Secret Room Screenshot 1"
/>
<img
src="Screenshot 2024-11-10 211602.png"
alt="Secret Room Screenshot 2"
/>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Created by Zhi Cheng © 2024</p>
<ul class="footer-links">
<li><a href="index.html">Find the Key</a></li>
<li><a href="cac.html">Character and Creator</a></li>
<li><a href="feedback.html">Feedback Form</a></li>
</ul>
</footer>
</body>
</html>