Violetz12 · Violetz12 · Dec 6, 2024
diff --git a/J boy.png b/J boy.png
diff --git a/J.png b/J.png
diff --git a/M boy.png b/M boy.png
diff --git a/M.png b/M.png
diff --git a/PIC 1.png b/PIC 1.png
diff --git a/PIC 2.png b/PIC 2.png
diff --git a/PIC 3.png b/PIC 3.png
diff --git a/Screenshot 2024-11-10 211130.png b/Screenshot 2024-11-10 211130.png
diff --git a/Screenshot 2024-11-10 211602.png b/Screenshot 2024-11-10 211602.png
diff --git a/Screenshot 2024-11-16 214915.png b/Screenshot 2024-11-16 214915.png
diff --git a/Screenshot 2024-11-16 220129.png b/Screenshot 2024-11-16 220129.png
diff --git a/Screenshot 2024-11-16 220550.png b/Screenshot 2024-11-16 220550.png
diff --git a/Star.jpeg b/Star.jpeg
diff --git a/Z boy.png b/Z boy.png
diff --git a/Z.png b/Z.png
diff --git a/cac.html b/cac.html
@@ -0,0 +1,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
+          m001747@permatapintar.ukm.edu.my.
+        </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 &copy; 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>