diff options
| author | jaerri <62021987+jaerri@users.noreply.github.com> | 2026-02-10 16:25:21 -0600 |
|---|---|---|
| committer | jaerri <62021987+jaerri@users.noreply.github.com> | 2026-02-10 16:25:21 -0600 |
| commit | eb62cf70a6791e5c8fd140f069e8b31b6886587a (patch) | |
| tree | ffa1abfb12e27708907b3c18d10ee6336da3a36e /gallery.html | |
Diffstat (limited to 'gallery.html')
| -rwxr-xr-x | gallery.html | 183 |
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> |