1 files changed, 183 insertions, 0 deletions
diff --git a/gallery.html b/gallery.html
new file mode 100755
index 0000000..feaf724
--- /dev/null
+++ b/gallery.html
@@ -0,0 +1,183 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Gallery</title>
+    <style>
+      @font-face {
+        font-family: "MSGothic";
+        src: url("./prj_Irene/sources/MSGothic.ttf");
+      }
+      body {
+        margin: 0;
+        font-family:
+          "MSGothic",
+          system-ui,
+          -apple-system,
+          Segoe UI,
+          Roboto,
+          Arial,
+          sans-serif;
+        background: #1a0507;
+        color: #ffe9ea;
+      }
+      header {
+        position: sticky;
+        top: 0;
+        background: rgba(40, 6, 9, 0.9);
+        backdrop-filter: blur(8px);
+        border-bottom: 1px solid rgba(255, 91, 91, 0.25);
+        z-index: 10;
+      }
+      .wrap {
+        max-width: 1100px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .home-link {
+        margin-left: auto;
+        color: #ffe9ea;
+        text-decoration: none;
+        border: 1px solid rgba(255, 91, 91, 0.4);
+        padding: 8px 12px;
+        border-radius: 8px;
+        background: rgba(80, 10, 12, 0.5);
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 16px;
+      }
+      figure {
+        margin: 0;
+        background: #2a0b0f;
+        border-radius: 12px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 91, 91, 0.2);
+      }
+      figure img {
+        width: 100%;
+        height: 220px;
+        object-fit: cover;
+        display: block;
+      }
+      figcaption {
+        padding: 10px 12px;
+        font-size: 13px;
+        color: #ffb3b3;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="wrap title">
+        <h1>Gallery</h1>
+        <span>Memories</span>
+        <a class="home-link" href="index.html">Home</a>
+      </div>
+    </header>
+    <main class="wrap">
+      <div class="grid">
+        <figure>
+          <img src="./sources/IMG_2472.jpg" alt="IMG_2472" />
+          <figcaption>IMG_2472</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_2627.jpg" alt="IMG_2627" />
+          <figcaption>IMG_2627</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_4601.jpg" alt="IMG_4601" />
+          <figcaption>IMG_4601</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_2019.png" alt="IMG_2019" />
+          <figcaption>IMG_2019</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_4259.png" alt="IMG_4259" />
+          <figcaption>IMG_4259</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_7075.png" alt="IMG_7075" />
+          <figcaption>IMG_7075</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/IMG_8692.png" alt="IMG_8692" />
+          <figcaption>IMG_8692</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/16624BFB-7F7E-4CFD-A255-268802C2CC93.jpg"
+            alt="16624BFB"
+          />
+          <figcaption>16624BFB</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/594CA747-FB3F-4B9A-9B29-8F41A3756209.jpg"
+            alt="594CA747"
+          />
+          <figcaption>594CA747</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/9836ABB1-7B74-47F1-BE73-A922D8E2B6AA.jpg"
+            alt="9836ABB1"
+          />
+          <figcaption>9836ABB1</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/4a2e4b58f7376976670b8057e2484304.jpg"
+            alt="4a2e4b58"
+          />
+          <figcaption>4a2e4b58</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/8df101f03079cbcca0ec3d71cddd3b8e.jpg"
+            alt="8df101f0"
+          />
+          <figcaption>8df101f0</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/eb66054173105608075c7e9c0b540e62.jpg"
+            alt="eb660541"
+          />
+          <figcaption>eb660541</figcaption>
+        </figure>
+        <figure>
+          <img
+            src="./sources/fe56e5ad2ddd5d93ce4b8a0a21a04441.jpg"
+            alt="fe56e5ad"
+          />
+          <figcaption>fe56e5ad</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/aaaajpg.jpg" alt="aaaajpg" />
+          <figcaption>aaaajpg</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/azuki.png" alt="azuki" />
+          <figcaption>azuki</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/saya.png" alt="saya" />
+          <figcaption>saya</figcaption>
+        </figure>
+        <figure>
+          <img src="./sources/sayaworld.jpg" alt="sayaworld" />
+          <figcaption>sayaworld</figcaption>
+        </figure>
+      </div>
+    </main>
+  </body>
+</html>