Add albums page

author: JJ 2023-04-26 05:05:01 +0000
committer: JJ 2023-04-26 05:05:01 +0000
commit: b1b3403dc794c1a3bd9bd4fb638bba7f97c7de11 (patch)
tree: c2cfef9b09f2449c861dee826de6c982a6daee4a
parent: 76ea95f44c870bfcf1631401491346be8d839bf2 (diff)
21 files changed, 185 insertions, 0 deletions
diff --git a/albums.html b/albums.html
new file mode 100644
index 0000000..5aaed66
--- /dev/null
+++ b/albums.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/jpg" href="https://j-james.me/assets/compass.jpg"/>
+    <title>Albums</title>
+    <style>
+        body {
+            /* background-color: black; */
+        }
+        main {
+            margin: 2.5vw;
+            display: grid;
+            grid-template-columns: repeat(5, 18vw);
+            grid-gap: 15px;
+        }
+        div {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            margin-left: -20em;
+            margin-top: -20em;
+            z-index: 1;
+            width: 40em;
+            height: auto;
+        }
+        img {
+            width: 100%;
+            height: auto;
+        }
+        a img:hover:target {
+            width: 200%;
+            height: auto;
+        }
+        img:hover + div {
+            display: block;
+            border: 2px solid white;
+        }
+    </style>
+</head>
+<body>
+<main>
+    <img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989">
+    <div id="1989"><img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989"></div>
+    <img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories">
+    <div id="random-access-memories"><img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"></div>
+    <img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface">
+    <div id="blurryface"><img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"></div>
+    <img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor">
+    <div id="death-of-a-bachelor"><img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"></div>
+    <img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot">
+    <div id="american-idiot"><img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot"></div>
+    <img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral">
+    <div id="funeral"><img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral"></div>
+    <img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs">
+    <div id="the-suburbs"><img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"></div>
+    <img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness">
+    <div id="mellon-collie"><img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"></div>
+    <img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness">
+    <div id="deathconsciousness"><img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"></div>
+    <img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien">
+    <div id="let-them-be-alien"><img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"></div>
+    <img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs">
+    <div id="lungs"><img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs"></div>
+    <img src="assets/albums/dance-fever.jpg" alt="Florence and the Machine - Dance Fever">
+    <div id="dance-fever"><img src="assets/albums/dance-fever.jpg" alt="Florence and the Machine - Dance Fever"></div>
+    <img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell">
+    <div id="laurel-hell"><img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"></div>
+    <img src="assets/albums/electra-heart.jpg" alt="Marina and the Diamonds - Electra Heart">
+    <div id="electra-heart"><img src="assets/albums/electra-heart.jpg" alt="Marina and the Diamonds - Electra Heart"></div>
+    <img src="assets/albums/food-house.jpg" alt="Food House - Food House">
+    <div id="food-house"><img src="assets/albums/food-house.jpg" alt="Food House - Food House"></div>
+    <img src="assets/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN">
+    <div id="hardcore-heaven"><img src="assets/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"></div>
+    <img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos">
+    <div id="swvwv"><img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"></div>
+    <img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR">
+    <div id="biyaaheysf"><img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"></div>
+    <img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack">
+    <div id="celeste"><img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"></div>
+    <img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack">
+    <div id="octopath"><img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"></div>
+    <!-- <img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack">
+    <div id="undertale"><img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"></div> -->
+    <!-- <img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool">
+    <div id="a-moon-shaped-pool"><img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"></div> -->
+    <!-- <img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack">
+    <div id="hamilton"><img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"></div>
+    <img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack">
+    <div id="inception"><img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"></div> -->
+</main>
+</body>
+</html>
+
+    <!-- <style>
+        /*.lightbox {
+            position: fixed;
+            top: -100%;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            width: 100%;
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+            overflow: hidden;
+            z-index: 300;
+            display: none;
+        }
+        .lightbox:target {
+            opacity: 1;
+            top: 0;
+            bottom: 0;
+        }*/
+    </style> -->
+
+
+    <!-- <img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989">
+    <img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories">
+    <img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface">
+    <img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness">
+    <img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien">
+    <img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell">
+    <img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs">
+    <img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral">
+    <img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs">
+    <img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool">
+    <img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor">
+    <img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot">
+    <img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness">
+    <img src="assets/albums/food-house.jpg" alt="Food House - Food House">
+    <img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR">
+    <img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos">
+    <img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack">
+    <img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack">
+    <img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack">
+    <img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack">
+    <img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack">
+    <img src="assets/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"> -->
+
+    <!-- <a href="#1989"><img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989"></a>
+    <a href="#random-access-memories"><img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"></a>
+    <a href="#blurryface"><img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"></a>
+    <a href="#deathconsciousness"><img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"></a>
+    <a href="#let-them-be-alien"><img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"></a>
+    <a href="#laurel-hell"><img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"></a>
+    <a href="#lungs"><img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs"></a>
+    <a href="#funeral"><img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral"></a>
+    <a href="#the-suburbs"><img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"></a>
+    <a href="#a-moon-shaped-pool"><img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"></a>
+    <a href="#death-of-a-bachelor"><img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"></a>
+    <a href="#american-idiot"><img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot"></a>
+    <a href="#mellon-collie"><img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"></a>
+    <a href="#food-house"><img src="assets/albums/food-house.jpg" alt="Food House - Food House"></a>
+    <a href="#biyaaheysf"><img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"></a>
+    <a href="#swvwv"><img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"></a>
+    <a href="#hamilton"><img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"></a>
+    <a href="#inception"><img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"></a>
+    <a href="#celeste"><img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"></a>
+    <a href="#octopath"><img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"></a>
+    <a href="#undertale"><img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"></a>
+    <a href="#hardcore"><img src="assets/albums/HARDCORE-HEAVEN.jpg" alt="Alice Gas - HARDCORE HEAVEN"></a> -->
+
+    <!-- <div class="lightbox" id="1989"><div><img src="assets/albums/1989.jpg" alt="Taylor Swift - 1989"></div></div>
+    <div class="lightbox" id="random-access-memories"><img src="assets/albums/random-access-memories.jpg" alt="Daft Punk - Random Access Memories"></div>
+    <div class="lightbox" id="blurryface"><img src="assets/albums/blurryface.jpg" alt="Twenty One Pilots - Blurryface"></div>
+    <div class="lightbox" id="deathconsciousness"><img src="assets/albums/deathconsciousness.jpg" alt="Have A Nice Life - Deathconsciousness"></div>
+    <div class="lightbox" id="let-them-be-alien"><img src="assets/albums/let-them-be-alien.jpg" alt="Lebanon Hanover - Let Them Be Alien"></div>
+    <div class="lightbox" id="laurel-hell"><img src="assets/albums/laurel-hell.jpg" alt="Mitski - Laurel Hell"></div>
+    <div class="lightbox" id="lungs"><img src="assets/albums/lungs.jpg" alt="Florence and the Machine - Lungs"></div>
+    <div class="lightbox" id="funeral"><img src="assets/albums/funeral.jpg" alt="Arcade Fire - Funeral"></div>
+    <div class="lightbox" id="the-suburbs"><img src="assets/albums/the-suburbs.jpg" alt="Arcade Fire - The Suburbs"></div>
+    <div class="lightbox" id="a-moon-shaped-pool"><img src="assets/albums/a-moon-shaped-pool.jpg" alt="Radiohead - A Moon Shaped Pool"></div>
+    <div class="lightbox" id="death-of-a-bachelor"><img src="assets/albums/death-of-a-bachelor.jpg" alt="Panic! at the Disco - Death of a Bachelor"></div>
+    <div class="lightbox" id="american-idiot"><img src="assets/albums/american-idiot.jpg" alt="Green Day - American Idiot"></div>
+    <div class="lightbox" id="mellon-collie"><img src="assets/albums/mellon-collie.jpg" alt="The Smashing Pumpkins - Mellon Collie and the Infinite Sadness"></div>
+    <div class="lightbox" id="food-house"><img src="assets/albums/food-house.jpg" alt="Food House - Food House"></div>
+    <div class="lightbox" id="biyaaheysf"><img src="assets/albums/biyaaheysf.jpg" alt="Machine Girl - ...BECAUSE I'M YOUNG ARROGANT AND HATE EVERYTHING YOU STAND FOR"></div>
+    <div class="lightbox" id="swvwv"><img src="assets/albums/swvwv.jpg" alt="Brian David Gilbert - Songs With Videos Without Videos"></div>
+    <div class="lightbox" id="hamilton"><img src="assets/albums/hamilton.jpg" alt="Lin-Manuel Miranda - Hamilton Soundtrack"></div>
+    <div class="lightbox" id="inception"><img src="assets/albums/inception.jpg" alt="Hans Zimmer - Inception Soundtrack"></div>
+    <div class="lightbox" id="celeste"><img src="assets/albums/celeste.jpg" alt="Lena Raine - Celeste Soundtrack"></div>
+    <div class="lightbox" id="octopath"><img src="assets/albums/octopath.jpg" alt="Yasunori Nishiki - Octopath Traveler Soundtrack"></div>
+    <div class="lightbox" id="undertale"><img src="assets/albums/undertale.jpg" alt="Toby Fox - Undertale Soundtrack"></div> -->
+
diff --git a/assets/albums/1989.jpg b/assets/albums/1989.jpg
new file mode 100644
index 0000000..d9d53e9
--- /dev/null
+++ b/assets/albums/1989.jpg
diff --git a/assets/albums/HARDCORE-HEAVEN.jpg b/assets/albums/HARDCORE-HEAVEN.jpg
new file mode 100644
index 0000000..fffbadc
--- /dev/null
+++ b/assets/albums/HARDCORE-HEAVEN.jpg
diff --git a/assets/albums/american-idiot.jpg b/assets/albums/american-idiot.jpg
new file mode 100644
index 0000000..94a6691
--- /dev/null
+++ b/assets/albums/american-idiot.jpg
diff --git a/assets/albums/biyaaheysf.jpg b/assets/albums/biyaaheysf.jpg
new file mode 100644
index 0000000..8851887
--- /dev/null
+++ b/assets/albums/biyaaheysf.jpg
diff --git a/assets/albums/blurryface.jpg b/assets/albums/blurryface.jpg
new file mode 100644
index 0000000..49dcb1c
--- /dev/null
+++ b/assets/albums/blurryface.jpg
diff --git a/assets/albums/celeste.jpg b/assets/albums/celeste.jpg
new file mode 100644
index 0000000..3b611fe
--- /dev/null
+++ b/assets/albums/celeste.jpg
diff --git a/assets/albums/dance-fever.jpg b/assets/albums/dance-fever.jpg
new file mode 100644
index 0000000..789711e
--- /dev/null
+++ b/assets/albums/dance-fever.jpg
diff --git a/assets/albums/death-of-a-bachelor.jpg b/assets/albums/death-of-a-bachelor.jpg
new file mode 100644
index 0000000..f7d2b4c
--- /dev/null
+++ b/assets/albums/death-of-a-bachelor.jpg
diff --git a/assets/albums/deathconsciousness.jpg b/assets/albums/deathconsciousness.jpg
new file mode 100644
index 0000000..56d4e1a
--- /dev/null
+++ b/assets/albums/deathconsciousness.jpg
diff --git a/assets/albums/electra-heart.jpg b/assets/albums/electra-heart.jpg
new file mode 100644
index 0000000..72619b0
--- /dev/null
+++ b/assets/albums/electra-heart.jpg
diff --git a/assets/albums/food-house.jpg b/assets/albums/food-house.jpg
new file mode 100644
index 0000000..e8beee4
--- /dev/null
+++ b/assets/albums/food-house.jpg
diff --git a/assets/albums/funeral.jpg b/assets/albums/funeral.jpg
new file mode 100644
index 0000000..2f0fbd6
--- /dev/null
+++ b/assets/albums/funeral.jpg
diff --git a/assets/albums/laurel-hell.jpg b/assets/albums/laurel-hell.jpg
new file mode 100644
index 0000000..7e2f988
--- /dev/null
+++ b/assets/albums/laurel-hell.jpg
diff --git a/assets/albums/let-them-be-alien.jpg b/assets/albums/let-them-be-alien.jpg
new file mode 100644
index 0000000..4db9f14
--- /dev/null
+++ b/assets/albums/let-them-be-alien.jpg
diff --git a/assets/albums/lungs.jpg b/assets/albums/lungs.jpg
new file mode 100644
index 0000000..e92e04f
--- /dev/null
+++ b/assets/albums/lungs.jpg
diff --git a/assets/albums/mellon-collie.jpg b/assets/albums/mellon-collie.jpg
new file mode 100644
index 0000000..1737e1e
--- /dev/null
+++ b/assets/albums/mellon-collie.jpg
diff --git a/assets/albums/octopath.jpg b/assets/albums/octopath.jpg
new file mode 100644
index 0000000..a52a6bf
--- /dev/null
+++ b/assets/albums/octopath.jpg
diff --git a/assets/albums/random-access-memories.jpg b/assets/albums/random-access-memories.jpg
new file mode 100644
index 0000000..33ae2de
--- /dev/null
+++ b/assets/albums/random-access-memories.jpg
diff --git a/assets/albums/swvwv.jpg b/assets/albums/swvwv.jpg
new file mode 100644
index 0000000..72ff558
--- /dev/null
+++ b/assets/albums/swvwv.jpg
diff --git a/assets/albums/the-suburbs.jpg b/assets/albums/the-suburbs.jpg
new file mode 100644
index 0000000..c110bc2
--- /dev/null
+++ b/assets/albums/the-suburbs.jpg
author	JJ	2023-04-26 05:05:01 +0000
committer	JJ	2023-04-26 05:05:01 +0000
commit	b1b3403dc794c1a3bd9bd4fb638bba7f97c7de11 (patch)
tree	c2cfef9b09f2449c861dee826de6c982a6daee4a
parent	76ea95f44c870bfcf1631401491346be8d839bf2 (diff)