diff options
author | JJ | 2023-04-26 05:05:01 +0000 |
---|---|---|
committer | JJ | 2023-04-26 05:05:01 +0000 |
commit | b1b3403dc794c1a3bd9bd4fb638bba7f97c7de11 (patch) | |
tree | c2cfef9b09f2449c861dee826de6c982a6daee4a /albums.html | |
parent | 76ea95f44c870bfcf1631401491346be8d839bf2 (diff) |
Add albums page
Diffstat (limited to 'albums.html')
-rw-r--r-- | albums.html | 185 |
1 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> --> + |