mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-06-03 19:32:56 +00:00
Tomas Dvorak
945 lines
35 KiB
HTML
945 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="swiper-bundle.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="shortcut icon" href="https://tdvorak.dev/icon.png" sizes="any" type="image/svg+xml">
|
|
<title>TD - Music</title>
|
|
<script defer src="last-song.js"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<nav class="main-menu">
|
|
<div>
|
|
<div class="user-info">
|
|
<a href="https://tdvorak.dev" target="_blank"><img
|
|
src="logo.png" class="logo"/>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<section class="content">
|
|
<div class="left-content">
|
|
<div class="slider-container">
|
|
<h1>Listening Now:</h1>
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img
|
|
src="Images/in-flames.webp" />
|
|
<div class="slide-overlay">
|
|
<h2>In Flames</h2>
|
|
<a href="https://open.spotify.com/artist/57ylwQTnFnIhJh4nu4rxCs?si=tgWCb1zlQv-yLd648bRkqw" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img
|
|
src="Images/lorna-shore.webp" class="lorna"/>
|
|
<div class="slide-overlay">
|
|
<h2>Lorna Shore</h2>
|
|
<a href="https://open.spotify.com/artist/6vXYoy8ouRVib302zxaxFF?si=e8f5b607f74146bd" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img
|
|
src="Images/ice-nine-kills.webp" />
|
|
<div class="slide-overlay">
|
|
<h2>Ice Nine Kills</h2>
|
|
<a href="https://open.spotify.com/artist/52qKfVcIV4GS8A8Vay2xtt?si=e0e3418fb08443a8" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img
|
|
src="Images/linkin-park.webp" />
|
|
<div class="slide-overlay">
|
|
<h2>Linkin Park</h2>
|
|
<a href="https://open.spotify.com/artist/6XyY86QOPPrYVGvF9ch6wz?si=25708e6eb41141cd" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img
|
|
src="Images/dymytry.webp" />
|
|
<div class="slide-overlay">
|
|
<h2>Dymytry</h2>
|
|
<a href="https://open.spotify.com/artist/74jZjGsZ4aBEZbtrvytbIZ?si=24179897ca034615" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide xslide">
|
|
<img
|
|
src="Images/hollow-front.webp" />
|
|
<div class="slide-overlay">
|
|
<h2>Hollow Front</h2>
|
|
<a href="https://open.spotify.com/artist/50YmW8f4U5IxTIwYI9mGAe?si=jFWJsh8fSsOxxqr0-8y8sg" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img
|
|
src="Images/slipknot.webp" />
|
|
<div class="slide-overlay">
|
|
<h2>Slipknot</h2>
|
|
<a href="https://open.spotify.com/artist/05fG473iIaoy82BF1aGhL8?si=DWCv-fyvQHugmjZT69wXIQ" target="_blank">
|
|
Listen Now <i class="fa-solid fa-circle-play"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="last-played-song">
|
|
<h1>Currently Playing Song:</h1>
|
|
<div id="last-played-song-info">
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="splitter"></div>
|
|
|
|
<div class="artists">
|
|
<h1>Favorite Artists:</h1>
|
|
<div class="artist-container containers">
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/aday.webp"
|
|
alt="" />
|
|
<p>A Day To Remember</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/against.webp"
|
|
alt="" />
|
|
<p>Against The Current</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/all.webp"
|
|
alt="" />
|
|
<p>All That Remains</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/apo.webp"
|
|
alt="" />
|
|
<p>Apocalyptica</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/arch.webp"
|
|
alt="" />
|
|
<p>Architects</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/ask.webp"
|
|
alt="" />
|
|
<p>Asking Alexandria</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/avenged.webp"
|
|
alt="" />
|
|
<p>Avenged Sevenfold</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/baby.webp"
|
|
alt="" />
|
|
<p>BABYMETAL</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/bad.webp"
|
|
alt="" />
|
|
<p>Bad Omens</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/black.webp"
|
|
alt="" />
|
|
<p>Black Veil Brides</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/bmth.webp"
|
|
alt="" />
|
|
<p>Bring Me The Horizon</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/bull.webp"
|
|
alt="" />
|
|
<p>Bullet For My Valentine</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/cryst.webp"
|
|
alt="" />
|
|
<p>Crystal Lake</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/dist.webp"
|
|
alt="" />
|
|
<p>Disturbed</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/dymy.webp"
|
|
alt="" />
|
|
<p>Dymytry</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/ele.webp"
|
|
alt="" />
|
|
<p>Electric Callboy</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/fall.webp"
|
|
alt="" />
|
|
<p>Fall Out Boy</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/falling.webp"
|
|
alt="" />
|
|
<p>Falling In Reverse</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/five.webp"
|
|
alt="" />
|
|
<p>Five Finger Death Punch</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/ghost.webp"
|
|
alt="" />
|
|
<p>Ghostemane</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/holy.webp"
|
|
alt="" />
|
|
<p>Hollywood Undead</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/ice.webp"
|
|
alt="" />
|
|
<p>Ice Nine Kills</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/in.webp"
|
|
alt="" />
|
|
<p>In Flames</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/kord.webp"
|
|
alt="" />
|
|
<p>Kordhell</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/korn.webp"
|
|
alt="" />
|
|
<p>Korn</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/link.webp"
|
|
alt="" />
|
|
<p>Linkin Park</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/little.webp"
|
|
alt="" />
|
|
<p>Little V.</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/lorna.webp"
|
|
alt="" />
|
|
<p>Lorna Shore</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/mem.webp"
|
|
alt="" />
|
|
<p>Memphis May Fire</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/mike.webp"
|
|
alt="" />
|
|
<p>Mike Shinoda</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/moti.webp"
|
|
alt="" />
|
|
<p>Motionless In White</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/mydark.webp"
|
|
alt="" />
|
|
<p>My Darkest Days</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/nik.webp"
|
|
alt="" />
|
|
<p>Nik Nocturnal</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/papa.webp"
|
|
alt="" />
|
|
<p>Papa Roach</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/park.webp"
|
|
alt="" />
|
|
<p>Parkway Drive</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/power.webp"
|
|
alt="" />
|
|
<p>Powerwolf</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/reznik.webp"
|
|
alt="" />
|
|
<p>Reznik</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/saba.webp"
|
|
alt="" />
|
|
<p>Sabaton</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/skil.webp"
|
|
alt="" />
|
|
<p>Skillet</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/slaugh.webp"
|
|
alt="" />
|
|
<p>Slaughter to Prevail</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/sleep.webp"
|
|
alt="" />
|
|
<p>Sleep Token</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/slip.webp"
|
|
alt="" />
|
|
<p>Slipknot</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/sum.webp"
|
|
alt="" />
|
|
<p>Sum 41</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/syst.webp"
|
|
alt="" />
|
|
<p>System Of A Down</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/theani.webp"
|
|
alt="" />
|
|
<p>The Animal In Me</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/off.webp"
|
|
alt="" />
|
|
<p>The Offspring</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/thou.webp"
|
|
alt="" />
|
|
<p>Thousand Foot Krutch</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/three.webp"
|
|
alt="" />
|
|
<p>Three Days Graceh</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/wage.webp"
|
|
alt="" />
|
|
<p>Wage War</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/we.webp"
|
|
alt="" />
|
|
<p>We Came As Romans</p>
|
|
</div>
|
|
|
|
<div class="artist">
|
|
<img
|
|
src="Images/suis.webp"
|
|
alt="" />
|
|
<p>$uicideboy$</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="splitter"></div>
|
|
|
|
<div class="albums">
|
|
<h1>Favorite Albums:</h1>
|
|
<div class="album-container containers">
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Slipknot/We-are-not-your-kind" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/wearenot.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>We Are Not Your Kind</h2>
|
|
<p>Slipknot</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Slipknot/Iowa" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/iowa.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>IOWA</h2>
|
|
<p>Slipknot</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Slipknot/5-the-gray-chapter" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/thegray.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>.5: The Gray Chapter</h2>
|
|
<p>Slipknot</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Slipknot/All-hope-is-gone" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/allhope.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>All Hope Is Gone</h2>
|
|
<p>Slipknot</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Linkin-park/Meteora-20th-anniversary-edition" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/meteora.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Meteora (20th Anniversary Edition)</h2>
|
|
<p>Linkin Park</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Linkin-park/Minutes-to-midnight" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/minutes.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Minutes to Midnight</h2>
|
|
<p>Linkin Park</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Linkin-park/Hybrid-theory-deluxe-edition" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/hybrid.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Hybrid Theory</h2>
|
|
<p>Linkin Park</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Lorna-shore/Pain-remains" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/pain.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Pain Remains</h2>
|
|
<p>Lorna Shore</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://open.spotify.com/album/0okokJG5I0FvfQBdLo3TPv?si=YxvCe1dGQCKBtSUwyf36XQ" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/pharma.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Pharmageddon</h2>
|
|
<p>Dymytry</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Dymytry/Revolter" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/revolter.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Revolter</h2>
|
|
<p>Dymytry</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Bring-me-the-horizon/Thats-the-spirit" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/thats.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>That's The Spirit</h2>
|
|
<p>Bring Me The Horizon</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Bring-me-the-horizon/Sempiternal" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/sempite.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Sempiternal</h2>
|
|
<p>Bring Me The Horizon</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/Bring-me-the-horizon/Post-human-survival-horror" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/post.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>Post Human: Survival Horror</h2>
|
|
<p>Bring Me The Horizon</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<a href="https://genius.com/albums/In-flames/I-the-mask" target="_blank">
|
|
<div class="album-frame">
|
|
<img
|
|
src="Images/I.webp"
|
|
alt="" />
|
|
</div>
|
|
</a>
|
|
<div>
|
|
<h2>I, the Mask</h2>
|
|
<p>In Flames</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="splitter"></div>
|
|
|
|
<div class="albums">
|
|
<h1>Favorite Music Videos:</h1>
|
|
<div class="album-container containers">
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/qMXESlny4-I?si=AWTPv5BfLurH5r6A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Watch The World Burn</h2>
|
|
<p>Falling In Reverse</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/HMluqSGag5E?si=gfktfwFNbd32ATzr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Friendly Fire</h2>
|
|
<p>Linkin Park</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/9FnG9lGLyEM?si=67yAB57194XnwAMr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Yen</h2>
|
|
<p>Slipknot</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/ozOb5FcnDf4?si=JMMuOZ3mzCNbiUUI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Hip To Be Scared</h2>
|
|
<p>Ice Nine Kills</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/0XjjBP3pWkM?si=0sTgOhfCDKdmrb7i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Černá Je Metal</h2>
|
|
<p>Dymytry</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/SYwnlU8jdQw?si=nxY65g1-2algKUn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Pravda a Lež</h2>
|
|
<p>Dymytry</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="album">
|
|
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/wszIGQ0BwKE?si=eqbIdOx6H22u8pQ5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<div>
|
|
<h2>Lidice</h2>
|
|
<p>Dymytry</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="right-content">
|
|
<div class="recommended-songs">
|
|
<h1>Most Favorite Songs:</h1>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/373gDROnujxNTFa1FojYIl?si=87aa94b5834a442c" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/1.webp"
|
|
alt="1" />
|
|
<div class="one">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Lost</h2>
|
|
<p>Linkin Park</p>
|
|
</div>
|
|
<span>3:19</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/2P4OICZRVAQcYAV2JReRfj?si=2a5fd848a9fc4073" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/2.webp"
|
|
alt="2" />
|
|
<div class="overlay">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Waiting For Love</h2>
|
|
<p>Avicii</p>
|
|
</div>
|
|
<span>3:50</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/2UREu1Y8CO4jXkbvqAtP7g?si=d9301c62effc44fd" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/3.webp"
|
|
alt="3" />
|
|
<div class="overlay2">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Monster</h2>
|
|
<p>Skillet</p>
|
|
</div>
|
|
<span>2:58</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/3Z1BDC3XSs3FVYwrR5ldEu?si=95f48ff89a6d4d30" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/4.webp"
|
|
alt="4" />
|
|
<div class="overlay">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Hyper-Insomnia-Para-Condrioid</h2>
|
|
<p>Sum 41</p>
|
|
</div>
|
|
<span>2:32</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/4QaxyJsbo5AR3bnEB7ko8h?si=1724d628034a470c" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/5.webp"
|
|
alt="5" />
|
|
<div class="overlay2">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Heartless Madness</h2>
|
|
<p>Dynazty</p>
|
|
</div>
|
|
<span>3:59</span>
|
|
</div>
|
|
|
|
<div class="song-container">
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/0X6ph2SjyOCqfnN7rMDtXq?si=a5c4c9c0b9d54d94" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/6.webp"
|
|
alt="6" />
|
|
<div class="overlay">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>A Conversation with Death</h2>
|
|
<p>Khemmis</p>
|
|
</div>
|
|
<span>4:50</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/6FhB5ZyT4JsIJ0ozDlXCIp?si=e71846d20e114f7b" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/7.webp"
|
|
alt="7" />
|
|
<div class="overlay2">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Save Yourself</h2>
|
|
<p>My Darkest Days</p>
|
|
</div>
|
|
<span>3:41</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/6o39Ln9118FKTMbM4BvcEy?si=498caad812ed4e26" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/8.webp"
|
|
alt="8" />
|
|
<div class="overlay">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Drown</h2>
|
|
<p>Bring Me The Horizon</p>
|
|
</div>
|
|
<span>3:42</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/23Vf9hNoBN8AacpUUHbiRy?si=32e228f0bcc54fbe" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/9.webp"
|
|
alt="9" />
|
|
<div class="overlay2">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>War</h2>
|
|
<p>Sum 41</p>
|
|
</div>
|
|
<span>3:29</span>
|
|
</div>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/1xBRGN41DWx2vwNFY5CvGe?si=5271ad99c4654250" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/10.webp"
|
|
alt="10" />
|
|
<div class="overlay">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Night Witches</h2>
|
|
<p>Sabaton</p>
|
|
</div>
|
|
<span>3:01</span>
|
|
</div>
|
|
<h1>Honorable Mention:</h1>
|
|
|
|
<div class="song">
|
|
<a href="https://open.spotify.com/track/3RptaQ5Xb8WvtpItZ2f9Hi?si=6bd09e264b454e62e" target="_blank">
|
|
<div class="song-img">
|
|
<img
|
|
src="Images/count/crown.webp"
|
|
alt="9" />
|
|
<div class="sli">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
</div></a>
|
|
<div class="song-title">
|
|
<h2>Snuff</h2>
|
|
<p>Slipknot</p>
|
|
</div>
|
|
<span>4:36</span>
|
|
</div>
|
|
<div class="splitter2"></div>
|
|
<h4 style="text-align: center; padding-top: 5px;">© Copyright 2024<br>Tomas Dvorak</h4>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
<script src="swiper-bundle.min.js"></script>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |