diff options
Diffstat (limited to 'music/index.php')
| -rw-r--r-- | music/index.php | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/music/index.php b/music/index.php new file mode 100644 index 0000000..ca11b1c --- /dev/null +++ b/music/index.php @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Music</title> + <link href="../../style.css" rel="stylesheet" type="text/css" media="all"> + <style> + #flex-container { + display: flex; + flex-wrap: wrap; + filter: drop-shadow(3px 3px 6px black); + } + #flex-container a { + --columncount: 2; + position: relative; + width: calc(var(--bodywidth) / var(--columncount)); + height: calc(var(--bodywidth) / var(--columncount)); + background-image: var(--img); + background-size: cover; + transition-duration: 0.5s; + overflow: hidden; + } + #flex-container a:hover { + z-index: 50; + box-shadow: 0 0 12px 2px black; + transform: scale(1.15); + color: #df1955; + } + #flex-container a span { + background-color: #000000cc; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 5.2rem; + padding: 0 2rem; + display: flex; + align-items: center; + transition-duration: 0.5s; + box-sizing: border-box; + } + #flex-container a:hover span { + bottom: -5.2rem; + } + @media only screen and (max-width: 43rem) { + #flex-container a { + --columncount: 1; + } + } + @media only screen and (hover: none) { + #flex-container a:hover { + transform: initial; + z-index: initial; + box-shadow: initial; + } + } + </style> + <?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?> +</head> + +<body> + <?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); bg(false, -10); ?> + <h1>music</h1> + <h2 id="caption">Albums I like</h2> + <div id="flex-container"> + <a style="--img: url(covers/spectrum.jpg);" target="_blank" href="https://findaeden.bandcamp.com/album/spectrum" ><span>findaeden - Spectrum</span></a> + <a style="--img: url(covers/funeral.jpg);" target="_blank" href="https://noisemaster.bandcamp.com/album/funeral-ep" ><span>Noisemaker - Funeral EP</span></a> + <a style="--img: url(covers/ultrakill_imperfect_hatred.jpg);" target="_blank" href="https://heavenpierceher.bandcamp.com/album/ultrakill-imperfect-hatred"><span>Heaven Pierce Her - ULTRAKILL: Imperfect Hatred</span></a> + <a style="--img: url(covers/el_camino.jpg);" target="_blank" href="https://theblackkeys.com/?frontpage=true" ><span>The Black Keys - El Camino</span></a> + <a style="--img: url(covers/for_science.jpg);" target="_blank" href="https://waxlimbs.bandcamp.com/album/for-science" ><span>Waxlimbs - For Science!</span></a> + <a style="--img: url(covers/peaks_and_valleys.jpg);" target="_blank" href="https://revolutionpeak.bandcamp.com/album/peaks-and-valleys" ><span>Revolution Peak - Peaks and Valleys</span></a> + <a style="--img: url(covers/triangle_unicode.jpg);" target="_blank" href="https://wearemagonia.bandcamp.com/album/triangle-unicode-lp" ><span>We Are Magonia - Triangle Unicode</span></a> + <a style="--img: url(covers/unstoppable_force.jpg);" target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force" ><span>CALIPHATE - Unstoppable Force</span></a> + <a style="--img: url(covers/walks_of_lung.jpg);" target="_blank" href="https://patriciataxxon.bandcamp.com/album/walks-of-lung" ><span>Patricia Taxxon - Walks of Lung</span></a> + <a style="--img: url(covers/realign.jpg);" target="_blank" href="https://vine.bandcamp.com/album/realign" ><span>Red Vox - Realign</span></a> + <a style="--img: url(covers/with_teeth.jpg);" target="_blank" href="https://www.nin.com/" ><span>Nine Inch Nails - With Teeth</span></a> + <a style="--img: url(covers/two_house.jpg);" target="_blank" href="https://foodhouse.bandcamp.com/album/two-house" ><span>Food House - two house</span></a> + <a style="--img: url(covers/american_automatic.jpg);" target="_blank" href="https://en.wikipedia.org/wiki/Kill_Memory_Crash" ><span>Kill Memory Crash - American Automatic</span></a> + <a style="--img: url(covers/raw_data_feel.jpg);" target="_blank" href="https://everythingeverything.bandcamp.com/album/raw-data-feel" ><span>Everything Everything - Raw Data Feel</span></a> + <a style="--img: url(covers/fucked_up_friends_3.jpg);" target="_blank" href="https://tobaxxo.bandcamp.com/album/fucked-up-friends-3" ><span>TOBACCO - Fucked Up Friends 3</span></a> + <a style="--img: url(covers/audio_video_disco.jpg);" target="_blank" href="https://etjusticepourtous.bandcamp.com/album/audio-video-disco-1" ><span>Justice - Audio, Video, Disco</span></a> + <a style="--img: url(covers/synthicate.jpg);" target="_blank" href="https://newretrowave.bandcamp.com/album/synthicate" ><span>LAZERPUNK - Synthicate</span></a> + <a style="--img: url(covers/vast.jpg);" target="_blank" href="https://waterflame.bandcamp.com/album/vast" ><span>Waterflame - Vast</span></a> + <a style="--img: url(covers/tortured_waters.jpg);" target="_blank" href="https://newretrowave.bandcamp.com/album/tortured-waters" ><span>DEADLIFE - Tortured Waters</span></a> + <a style="--img: url(covers/spirit_phone.jpg);" target="_blank" href="http://www.neilcic.com/" ><span>Lemon Demon - Spirit Phone</span></a> + <a style="--img: url(covers/millenialism.jpg);" target="_blank" href="https://music.businesscasual.biz/album/millennialism" ><span>NYSE - MILLENNIALISM</span></a> + <a style="--img: url(covers/hawaii_part_ii.jpg);" target="_blank" href="https://miraclemusical.bandcamp.com" ><span>ミラクルミュージカル - Hawaii: Part II</span></a> + <a style="--img: url(covers/concrete_and_gold.jpg);" target="_blank" href="https://www.foofighters.com/" ><span>Foo Fighters - Concrete and Gold</span></a> + <a style="--img: url(covers/revolution_radio.jpg);" target="_blank" href="https://greenday.com/" ><span>Green Day - Revolution Radio</span></a> + <a style="--img: url(covers/this_is_all_yours.jpg);" target="_blank" href="https://altjband.com/" ><span>Alt-J - This Is All Yours</span></a> + <a style="--img: url(covers/the_last_ninja_2_c64_ost.jpg);" target="_blank" href="https://www.youtube-nocookie.com/embed/bjbN2RyZXHI" ><span>Matt Gray - The Last Ninja 2 (C64) OST</span></a> + <a style="--img: url(covers/aeon_core.jpg);" target="_blank" href="https://perctrax.bandcamp.com/album/aeon-core" ><span>Scalameriya - Aeon Core</span></a> + </div> + <br> + +</body> +</html>
\ No newline at end of file |