123 lines
4.8 KiB
HTML
123 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>TITLE – ARTIST</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="description" content="TITLE by ARTIST – stream, buy, and follow." />
|
||
<link href="../style.css?v=YYYYMMDD" rel="stylesheet" />
|
||
</head>
|
||
<body>
|
||
<br>
|
||
<a href="../index.html" class="hf-logo-link">
|
||
<img src="../images/LOGO.png" width="90" height="90" alt="Site logo" />
|
||
</a>
|
||
|
||
<main class="hf-container">
|
||
<!-- HERO -->
|
||
<section class="hf-card hf-hero">
|
||
<img class="hf-cover" src="../images/COVER.png" alt="Cover art for TITLE by ARTIST" width="600" height="400" />
|
||
<h1 class="hf-title">TITLE</h1>
|
||
<div class="hf-subtitle">ARTIST</div>
|
||
<p class="hf-blurb">SHORT_RELEASE_BLURB</p>
|
||
|
||
<div class="hf-cta-row">
|
||
<a class="btn btn-red" href="BANDCAMP_URL" target="_blank" rel="noopener noreferrer">Buy on Bandcamp</a>
|
||
<a class="btn btn-ghost" href="#stream">Stream</a>
|
||
</div>
|
||
|
||
<div class="hf-embed">
|
||
<!-- Optional embed; remove if not needed -->
|
||
<iframe
|
||
src="EMBED_URL"
|
||
title="TITLE by ARTIST"
|
||
allow="autoplay"
|
||
loading="lazy"
|
||
height="120">
|
||
</iframe>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STREAM -->
|
||
<section id="stream" class="hf-card">
|
||
<h2 class="hf-section-title">Stream TITLE</h2>
|
||
<div class="hf-link-grid">
|
||
<a class="hf-link" href="SPOTIFY_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_spotify.png" alt="" width="28" height="28"> Spotify
|
||
</a>
|
||
<a class="hf-link" href="APPLE_MUSIC_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_apple.png" alt="" width="28" height="28"> Apple Music
|
||
</a>
|
||
<a class="hf-link" href="SOUNDCLOUD_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_soundcloud.png" alt="" width="28" height="28"> SoundCloud
|
||
</a>
|
||
<a class="hf-link" href="YOUTUBE_PLAYLIST_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_youtube.png" alt="" width="28" height="28"> YouTube
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WATCH -->
|
||
<section class="hf-card">
|
||
<h2 class="hf-section-title">Watch</h2>
|
||
<div class="hf-video">
|
||
<iframe
|
||
src="YOUTUBE_EMBED_URL"
|
||
title="TITLE"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen
|
||
loading="lazy"></iframe>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BUY -->
|
||
<section class="hf-card">
|
||
<h2 class="hf-section-title">Buy / Support</h2>
|
||
<div class="hf-link-grid">
|
||
<a class="hf-link" href="BANDCAMP_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_bandcamp.png" alt="" width="28" height="28"> Bandcamp
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOLLOW -->
|
||
<section class="hf-card">
|
||
<h2 class="hf-section-title">Follow</h2>
|
||
<div class="hf-link-grid">
|
||
<a class="hf-link" href="MASTODON_URL" target="_blank" rel="me noopener noreferrer">
|
||
<img src="../images/icon_mastodon.png" alt="" width="28" height="28"> Mastodon
|
||
</a>
|
||
<a class="hf-link" href="PIXELFED_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_pixelfed.png" alt="" width="28" height="28"> Pixelfed
|
||
</a>
|
||
<a class="hf-link" href="BLOG_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_writefreely.png" alt="" width="28" height="28"> Blog
|
||
</a>
|
||
<a class="hf-link" href="DISCORD_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_discord.png" alt="" width="28" height="28"> Discord
|
||
</a>
|
||
<a class="hf-link" href="BLUESKY_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_bluesky.png" alt="" width="28" height="28"> Bluesky
|
||
</a>
|
||
<a class="hf-link" href="TWITTER_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_twitter.png" alt="" width="28" height="28"> X (Twitter)
|
||
</a>
|
||
<a class="hf-link" href="INSTAGRAM_URL" target="_blank" rel="noopener noreferrer">
|
||
<img src="../images/icon_instagram.png" alt="" width="28" height="28"> Instagram
|
||
</a>
|
||
<a class="hf-link" href="EMAIL_ADDRESS">
|
||
<img src="../images/icon_email.png" alt="" width="28" height="28"> Email
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="hf-back">
|
||
<a href="../index.html" class="footer-link">← Back to home</a>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Optional rel=me -->
|
||
<a rel="me" href="MASTODON_URL" class="hidden">Mastodon</a>
|
||
</body>
|
||
</html>
|