2023-08-21 14:46:34 +00:00
<! 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 ( 3 px 3 px 6 px 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.5 s ;
overflow : hidden ;
}
#flex-container a:hover {
z - index : 50 ;
box - shadow : 0 0 12 px 2 px black ;
transform : scale ( 1.2 );
color : #df1955;
}
#flex-container a span {
background - color : #000000cc;
position : absolute ;
bottom : 0 ;
left : 0 ;
right : 0 ;
height : 5.2 rem ;
padding : 0 2 rem ;
display : flex ;
align - items : center ;
transition - duration : 0.5 s ;
box - sizing : border - box ;
}
#flex-container a:hover span {
bottom : - 5.2 rem ;
}
@ media only screen and ( max - width : 43 rem ) {
#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' ); ?>
< 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 >
2023-09-02 10:56:30 +00:00
< 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 >
2023-08-21 14:46:34 +00:00
< 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/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 >
2023-09-02 10:56:30 +00:00
< 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 >
2023-08-21 14:46:34 +00:00
< 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/millenialism.jpg); " target = " _blank " href = " https://music.businesscasual.biz/album/millennialism " >< span > NYSE - MILLENNIALISM </ 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/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 >
< div id = " leftsidebg " style = " background-image: url(bg.jxl), url(bg.jpg); --distancefromcenter: -10%; " title = " Fun fact: I own music on vinyl but not a record player! " ></ div >
< br >
</ body >
</ html >