Related Snippets

24 in Landing Pages category
1–6 of 24

Music Artist & Band Website Template

Church Website Template

School Website Template

Product Landing Page Store Template

Podcast Website Template

Law Firm Website Template

Band Website HTML Template — Free Music Artist Page

Music Artist & Band Website template · 13 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder

CategoryLanding Pages
TagsGSAPWeb AudioDrag & DropKeyboard NavigationSVG

What's included

Features

13 ready-made website sections assembled into one finished music artist & band website page: Floating Pill Navbar, Music Artist Hero, New Release Spotlight, Audio Player & Track List, Tour Dates & Tickets, Discography Grid, Video Section with Poster, Filterable Image Gallery, Testimonial Carousel, Product Grid, Booking Request Form, Newsletter Signup CTA, Minimal Footer
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 9-page website in the builder, sharing one navbar, footer and theme
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind

About this UI Snippet

Anatomy of a Band Website: Why Each Section Sits Where It Does

Screenshot of the Music Artist & Band Website Template snippet rendered live

A band website has three jobs: get people to press play, get them to a show and get them on your list. This page is ordered around those jobs. The stage hero names the band and offers the music and the tour in two buttons, the New Release Spotlight counts down to the album, and the Audio Player lets a visitor hear the new songs without leaving the page, because a song heard is worth ten described.

Tour dates come next because that is the second thing a fan looks for, and they are a list with a clear status (Tickets, Few left, Sold out) rather than a poster image, so search engines can read them. The Discography Grid follows for the visitor who wants the back catalogue, then a live video and a photo gallery for atmosphere, press quotes for proof, merch for the fans who want something physical, and a booking and press form for promoters and journalists. A newsletter closes the page so the people who do not buy today can still hear about the next release.

To make it yours, keep the order and replace the content: use a stage photo with space on the left for the hero, write the release date and time into the countdown, paste links to your own MP3 previews into the player and add the date of every show so the tour list can describe itself to search engines. This is the same page as the Music Artist & Band website template, which also opens as a six-page site with Music, Tour, Videos, Merch, About and Contact pages.

Built from website section templates

The 13 Sections Behind This Music Artist & Band Website Page

This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.

  1. Floating Pill Navbara floating bar that keeps "Listen now" one click away while the visitor scrolls the whole page
  2. Music Artist Heroa stage photo, the band name in huge type and two buttons, one for the music and one for the tour
  3. New Release Spotlighta countdown to the new album that turns into "Out now" by itself on release day
  4. Audio Player & Track Listthe fastest way to convince a visitor: press play on the new songs right on the page
  5. Tour Dates & Ticketsa calendar-style list of shows with colour-coded status and ticket buttons, readable by search engines
  6. Discography Gridthe back catalogue as cover art with filter chips, for visitors who want older records
  7. Video Section with Postera live session poster frame that adds atmosphere and shows the band at work
  8. Filterable Image Galleryphotos from stage, studio and crowd, filterable by category
  9. Testimonial Carouselpress quotes that carry proof from outside the band
  10. Product Gridvinyl, cassettes and posters for the fans who want something physical
  11. Booking Request Forma booking and press form so promoters, journalists and licensing enquiries have a clear route
  12. Newsletter Signup CTAa newsletter sign-up so visitors who do not buy today still hear about the next release
  13. Minimal Footera minimal footer with links to every section and the social profiles
Start using this templateAbout the Music Artist & Band Website templateAll website section templates

Step by step

How to Use

  1. 1
    Open the template in the Website BuilderPress "Start using this template" to open the Music Artist & Band Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
  2. 2
    Set the release and the showsType your release date and time into the New Release Spotlight, then add every show to the tour list with its city, venue, status and ticket link. Add each show's date in year-month-day form so the list can describe itself to search engines.
  3. 3
    Add your own songsPaste a link to an MP3 or WAV preview for each track in the Audio Player, add the cover art, and put your Spotify or Bandcamp link in the stream field so a good preview leads straight to the full song.
  4. 4
    Swap in your photos and linksReplace the stage photo, covers, gallery pictures and press quotes with your own, and point the booking form at your own email or form service. Check that every image has a short description for screen readers.
  5. 5
    Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.

Real-world uses

Common Use Cases

Give a band a home that is yours
Host a website you control, with your music, shows and merch in one place, instead of depending on a social profile that can change its rules overnight.
Launch an album or single
Use the countdown, the audio player and the pre-save button as a launch page, then let the same page switch to "Out now" on release day without any edits.
Study a media-rich page built in plain code
Read how a custom audio player uses the browser's own audio element, how filter chips are built from the data, and how a countdown switches states with a few lines of JavaScript.

Got questions?

Frequently Asked Questions

Paste a direct link to an MP3 or WAV file into each track. Short previews of 30 to 60 seconds load fastest, and each track can carry a stream or buy link so the full song is one click away.

Yes. When the release time passes, the countdown hides, an "Out now" message appears and the main button changes to "Listen now", in each visitor's browser, with no reload.

Yes. Change the names, photos and links: a DJ can use the tour list as a booking calendar, and a label can use the discography grid as a roster, with the artist name as the type for the filter chips.

It is assembled from 13 templates in the free Website Section Templates library: Floating Pill Navbar, Music Artist Hero, New Release Spotlight, Audio Player & Track List, Tour Dates & Tickets, Discography Grid, Video Section with Poster, Filterable Image Gallery, Testimonial Carousel, Product Grid, Booking Request Form, Newsletter Signup CTA, Minimal Footer. Each one has its own page where you can edit it separately.

It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.

Start using this templateAbout the Music Artist & Band Website templateAll website section templates

Source Code

Requires
JS · gsap.min.jsJS · ScrollTrigger.min.jsJS · ScrollToPlugin.min.jsJS · SplitText.min.jsJS · Draggable.min.jsJS · InertiaPlugin.min.js

    <section class="st st-navbar-floating" data-uid="smvrrymllamn4">
      <div class="st-wrap">
        <header class="nf">
          <a class="st-brand" href="#">
            <span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" /></svg></span><span>Velvet Static</span></span>
          </a>
          <nav class="nf-nav" data-menu aria-label="Main">
            <ul class="nf-links">
              <li data-menu-item><a class="nf-link" href="#music"><span>Music</span></a></li>
              <li data-menu-item><a class="nf-link" href="#tour"><span>Tour</span></a></li>
              <li data-menu-item><a class="nf-link" href="#videos"><span>Videos</span></a></li>
              <li data-menu-item><a class="nf-link" href="#merch"><span>Merch</span></a></li>
              <li data-menu-item><a class="nf-link" href="#contact"><span>Contact</span></a></li>
            </ul>
            <a class="st-btn nf-cta" data-menu-item href="#listen"><span>Listen now</span></a>
          </nav>
          <button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
        </header>
      </div>
      <i hidden data-sticky-flag></i>
    </section>
    <section class="st st-music-hero" data-uid="smvrrymllfyy4">
      <div class="mh-bg" role="img" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-music.jpg')" aria-label="The singer at the microphone under cyan and pink stage lights"></div>
      <div class="mh-shade" aria-hidden="true"></div>
      <div class="mh st-wrap">
        <span class="mh-pill" data-anim="item"><i class="mh-dot" aria-hidden="true"></i><span>New album · Out 14 November</span></span>
        <h1 class="mh-name" data-anim="item" data-anim-text>Velvet<br><span class="hl">Static</span></h1>
        <p class="st-lead mh-tag" data-anim="item">Dream-pop from Lisbon with big drums, late-night synths and songs made to be sung back.</p>
        <div class="st-btns" data-anim="item">
          <a class="st-btn" href="#listen"><span>Listen now</span></a>
          <a class="st-btn st-btn--ghost mh-ghost" href="#tour"><span>Tour dates</span></a>
        </div>
        <ul class="mh-links" data-anim="item" aria-label="Listen on">
          <li><a class="mh-link" href="#"><span>Spotify</span></a></li>
          <li><a class="mh-link" href="#"><span>Apple Music</span></a></li>
          <li><a class="mh-link" href="#"><span>YouTube</span></a></li>
          <li><a class="mh-link" href="#"><span>Bandcamp</span></a></li>
        </ul>
      </div>
      <div class="mh-eq" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </section>
    <section id="new-release" class="st st-release-spotlight" data-uid="smvrrymllq9i1">
      <div class="st-wrap rs">
        <div class="rs-art" data-anim="media">
          <span class="rs-disc" aria-hidden="true"></span>
          <img class="rs-cover" width="1200" height="1200" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-1.jpg" alt="Album cover with a pink sun rising over dark water">
        </div>
        <div class="rs-copy">
          <p class="st-eyebrow" data-anim="item">New album</p>
          <h2 class="rs-title" data-anim="item" data-anim-text>Static <span class="hl">Hearts</span></h2>
          <p class="st-lead rs-text" data-anim="item">Eleven songs about leaving, arriving and everything in between, recorded live to tape in a converted church in Porto.</p>
          <div class="rs-count" data-anim="item" data-countdown role="timer" data-at="2026-11-14T00:00" data-out="Out now. Listen everywhere." data-cta-out="Listen now">
            <div class="rs-cell"><b data-u="d">--</b><span>Days</span></div>
            <div class="rs-cell"><b data-u="h">--</b><span>Hours</span></div>
            <div class="rs-cell"><b data-u="m">--</b><span>Minutes</span></div>
            <div class="rs-cell"><b data-u="s">--</b><span>Seconds</span></div>
          </div>
          <p class="rs-out" data-out hidden></p>
          <ol class="rs-tracks" data-anim="item"><li>Lights Out in Lisbon</li><li>Slow Fire</li><li>Night Tram</li><li>Paper Skies</li><li>Static Hearts</li><li>The Last Train Home</li></ol>
          <div class="st-btns" data-anim="item">
            <a class="st-btn" data-cta-main href="#"><span>Pre-save the album</span></a>
            <a class="st-btn st-btn--ghost rs-ghost" href="#videos"><span>Watch the teaser</span></a>
          </div>
        </div>
      </div>
    </section>
    <section id="listen" class="st st-audio-player" data-uid="smvrrymlle02l">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Listen</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>Press play on <span class="hl">the new songs</span></h2>
          <p class="st-lead" data-anim="item">Short previews of the new album. Tap a track to play it, or stream the full song with the link beside it.</p>
        </header>
        <div class="ap" data-player data-anim="media">
          <div class="ap-now">
            <div class="ap-art"><img class="ap-cover" data-ap-cover alt="" width="600" height="600"></div>
            <div class="ap-info"><span class="ap-tag">Now playing</span><strong class="ap-title" data-ap-title></strong><span class="ap-meta" data-ap-meta></span></div>
            <div class="ap-bar"><span class="ap-t" data-ap-cur>0:00</span><input class="ap-seek" type="range" min="0" max="1000" value="0" step="1" aria-label="Seek" data-ap-seek><span class="ap-t" data-ap-dur>0:00</span></div>
            <div class="ap-ctl">
              <button class="ap-btn" type="button" aria-label="Previous track" data-ap-prev><svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M6 5h2v14H6zM20 5v14L9 12z"/></svg></button>
              <button class="ap-btn ap-play" type="button" aria-label="Play" data-ap-play><svg class="ap-i-play" viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg><svg class="ap-i-pause" viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg></button>
              <button class="ap-btn" type="button" aria-label="Next track" data-ap-next><svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M16 5h2v14h-2zM4 5l11 7-11 7z"/></svg></button>
            </div>
            <p class="ap-msg" data-ap-msg role="status"></p>
          </div>
          <ol class="ap-list">
            <li class="ap-track" data-src="https://webdevpuneet.com/audio/demo-1.wav">
              <button class="ap-row" type="button" data-ap-row>
                <span class="ap-n" aria-hidden="true"></span>
                <img class="ap-thumb" width="120" height="120" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-1.jpg" alt="Cover art for Lights Out in Lisbon, a pink sun over dark water">
                <span class="ap-names"><b class="ap-name">Lights Out in Lisbon</b><small class="ap-by">Velvet Static · Static Hearts</small></span>
                <span class="ap-eq" aria-hidden="true"><i></i><i></i><i></i></span>
                <span class="ap-len">0:08</span>
              </button>
              <a class="ap-link" href="#"><span>Stream</span></a>
            </li>
            <li class="ap-track" data-src="https://webdevpuneet.com/audio/demo-2.wav">
              <button class="ap-row" type="button" data-ap-row>
                <span class="ap-n" aria-hidden="true"></span>
                <img class="ap-thumb" width="120" height="120" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-2.jpg" alt="Cover art for Slow Fire, a glowing cyan circle on black">
                <span class="ap-names"><b class="ap-name">Slow Fire</b><small class="ap-by">Velvet Static · Single</small></span>
                <span class="ap-eq" aria-hidden="true"><i></i><i></i><i></i></span>
                <span class="ap-len">0:08</span>
              </button>
              <a class="ap-link" href="#"><span>Stream</span></a>
            </li>
            <li class="ap-track" data-src="https://webdevpuneet.com/audio/demo-3.wav">
              <button class="ap-row" type="button" data-ap-row>
                <span class="ap-n" aria-hidden="true"></span>
                <img class="ap-thumb" width="120" height="120" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-3.jpg" alt="Cover art for Night Tram, violet and orange waves">
                <span class="ap-names"><b class="ap-name">Night Tram</b><small class="ap-by">Velvet Static · Night Tram EP</small></span>
                <span class="ap-eq" aria-hidden="true"><i></i><i></i><i></i></span>
                <span class="ap-len">0:08</span>
              </button>
              <a class="ap-link" href="#"><span>Stream</span></a>
            </li>
            <li class="ap-track" data-src="">
              <button class="ap-row" type="button" data-ap-row>
                <span class="ap-n" aria-hidden="true"></span>
                <img class="ap-thumb" width="120" height="120" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-4.jpg" alt="Cover art for Paper Skies, golden dots on deep blue">
                <span class="ap-names"><b class="ap-name">Paper Skies</b><small class="ap-by">Velvet Static · Paper Skies</small></span>
                <span class="ap-eq" aria-hidden="true"><i></i><i></i><i></i></span>
                <span class="ap-len">3:51</span>
              </button>
              <a class="ap-link" href="#"><span>Stream</span></a>
            </li>
          </ol>
        </div>
      </div>
    </section>
    <section id="tour" class="st st-tour-dates" data-uid="smvrrymllt3s9">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">On tour</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>See us <span class="hl">live</span></h2>
          <p class="st-lead" data-anim="item">The Static Hearts tour: eleven shows across Europe this winter. Tickets go fast, so grab yours early.</p>
        </header>
        <ul class="td-list">
          <li class="td-row" data-anim="item" data-status="Sold out">
            <div class="td-date" aria-hidden="false"><span class="td-month">NOV</span><strong class="td-day">14</strong></div>
            <div class="td-where"><strong class="td-city">Lisbon, PT</strong><span class="td-venue">LX Factory</span></div>
            <span class="td-status" data-status="Sold out">Sold out</span>
            <a class="td-btn" href="#"><span>Sold out</span></a>
          </li>
          <li class="td-row" data-anim="item" data-status="Few left">
            <div class="td-date" aria-hidden="false"><span class="td-month">NOV</span><strong class="td-day">16</strong></div>
            <div class="td-where"><strong class="td-city">Madrid, ES</strong><span class="td-venue">Sala Mon</span></div>
            <span class="td-status" data-status="Few left">Few left</span>
            <a class="td-btn" href="#"><span>Get tickets</span></a>
          </li>
          <li class="td-row" data-anim="item" data-status="Tickets">
            <div class="td-date" aria-hidden="false"><span class="td-month">NOV</span><strong class="td-day">19</strong></div>
            <div class="td-where"><strong class="td-city">Barcelona, ES</strong><span class="td-venue">Razzmatazz 2</span></div>
            <span class="td-status" data-status="Tickets">Tickets</span>
            <a class="td-btn" href="#"><span>Get tickets</span></a>
          </li>
          <li class="td-row" data-anim="item" data-status="Tickets">
            <div class="td-date" aria-hidden="false"><span class="td-month">NOV</span><strong class="td-day">22</strong></div>
            <div class="td-where"><strong class="td-city">Paris, FR</strong><span class="td-venue">La Maroquinerie</span></div>
            <span class="td-status" data-status="Tickets">Tickets</span>
            <a class="td-btn" href="#"><span>Get tickets</span></a>
          </li>
          <li class="td-row" data-anim="item" data-status="Tickets">
            <div class="td-date" aria-hidden="false"><span class="td-month">NOV</span><strong class="td-day">27</strong></div>
            <div class="td-where"><strong class="td-city">Berlin, DE</strong><span class="td-venue">Lido</span></div>
            <span class="td-status" data-status="Tickets">Tickets</span>
            <a class="td-btn" href="#"><span>Get tickets</span></a>
          </li>
          <li class="td-row" data-anim="item" data-status="Free">
            <div class="td-date" aria-hidden="false"><span class="td-month">DEC</span><strong class="td-day">03</strong></div>
            <div class="td-where"><strong class="td-city">London, UK</strong><span class="td-venue">Electric Ballroom</span></div>
            <span class="td-status" data-status="Free">Free</span>
            <a class="td-btn" href="#"><span>RSVP free</span></a>
          </li>
        </ul>
        <div class="td-foot">
          <p class="td-note">Doors open one hour before the show. Under-16s must be with an adult. Not seeing your city? Ask us to play there.</p>
          <a class="st-btn st-btn--ghost td-cta" href="#contact"><span>Request a show in your city</span></a>
        </div>
      </div>
    </section>
    <section id="music" class="st st-discography" data-uid="smvrrymlleoi1">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Discography</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>Albums, EPs <span class="hl">and singles</span></h2>
          <p class="st-lead" data-anim="item">Everything we have released so far, newest first. Pick a type or tap any cover to listen.</p>
        </header>
        <div class="dg-chips" data-chips-bar role="group" aria-label="Filter releases" hidden data-all="All"></div>
        <ul class="dg-grid" data-chips>
          <li class="dg-item" data-anim="item" data-tag="Album">
            <a class="dg-link" href="#">
              <span class="dg-art"><span class="dg-disc" aria-hidden="true"></span><img class="dg-cover" width="1000" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-1.jpg" alt="Album cover with a pink sun rising over dark water"></span>
              <span class="dg-meta"><span class="dg-type">Album</span><strong class="dg-title">Static Hearts</strong><span class="dg-sub"><span>2026</span><span class="dg-info">11 tracks</span></span><span class="dg-go">Listen</span></span>
            </a>
          </li>
          <li class="dg-item" data-anim="item" data-tag="Single">
            <a class="dg-link" href="#">
              <span class="dg-art"><span class="dg-disc" aria-hidden="true"></span><img class="dg-cover" width="1000" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-2.jpg" alt="Single cover with a glowing cyan circle on black"></span>
              <span class="dg-meta"><span class="dg-type">Single</span><strong class="dg-title">Lights Out in Lisbon</strong><span class="dg-sub"><span>2026</span><span class="dg-info">3:42</span></span><span class="dg-go">Listen</span></span>
            </a>
          </li>
          <li class="dg-item" data-anim="item" data-tag="EP">
            <a class="dg-link" href="#">
              <span class="dg-art"><span class="dg-disc" aria-hidden="true"></span><img class="dg-cover" width="1000" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-3.jpg" alt="EP cover with overlapping violet and orange waves"></span>
              <span class="dg-meta"><span class="dg-type">EP</span><strong class="dg-title">Night Tram</strong><span class="dg-sub"><span>2025</span><span class="dg-info">5 tracks</span></span><span class="dg-go">Listen</span></span>
            </a>
          </li>
          <li class="dg-item" data-anim="item" data-tag="Album">
            <a class="dg-link" href="#">
              <span class="dg-art"><span class="dg-disc" aria-hidden="true"></span><img class="dg-cover" width="1000" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-4.jpg" alt="Album cover with a grid of golden dots on deep blue"></span>
              <span class="dg-meta"><span class="dg-type">Album</span><strong class="dg-title">Paper Skies</strong><span class="dg-sub"><span>2024</span><span class="dg-info">10 tracks</span></span><span class="dg-go">Listen</span></span>
            </a>
          </li>
          <li class="dg-item" data-anim="item" data-tag="Live">
            <a class="dg-link" href="#">
              <span class="dg-art"><span class="dg-disc" aria-hidden="true"></span><img class="dg-cover" width="1000" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-5.jpg" alt="Live album cover with stage lights above a crowd silhouette"></span>
              <span class="dg-meta"><span class="dg-type">Live</span><strong class="dg-title">Live at Coliseu</strong><span class="dg-sub"><span>2023</span><span class="dg-info">14 tracks</span></span><span class="dg-go">Listen</span></span>
            </a>
          </li>
          <li class="dg-item" data-anim="item" data-tag="Single">
            <a class="dg-link" href="#">
              <span class="dg-art"><span class="dg-disc" aria-hidden="true"></span><img class="dg-cover" width="1000" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-3.jpg" alt="Single cover with overlapping violet and orange waves"></span>
              <span class="dg-meta"><span class="dg-type">Single</span><strong class="dg-title">Slow Fire</strong><span class="dg-sub"><span>2023</span><span class="dg-info">3:18</span></span><span class="dg-go">Listen</span></span>
            </a>
          </li>
        </ul>
      </div>
    </section>
    <section id="videos" class="st st-video-section" data-uid="smvrrymll97nc">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Live session</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>Lights Out in Lisbon, <span class="hl">live in the church</span></h2>
          <p class="st-lead" data-anim="item">Recorded in one take with the whole band in the converted church where the album was made.</p>
        </header>
        <div class="vs-box" data-anim="media" data-video-box data-title="Velvet Static: Lights Out in Lisbon (live session)">
          <img class="vs-poster" width="1280" height="720" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-crowd.jpg" alt="A crowd with hands in the air in front of coloured stage lights">
          <a class="vs-play" target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ" data-video="https://www.youtube.com/watch?v=aqz-KE-bpKQ" aria-label="Play the live session">
            <span class="vs-btn" aria-hidden="true"><svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z"/></svg></span>
            <span class="vs-meta"><span class="vs-label">Play the live session</span><span class="vs-dur">4:12</span></span>
          </a>
        </div>
        <ul class="vs-points">
          <li class="vs-point" data-anim="item">
            <h3 class="vs-point-title">One take</h3>
            <p class="vs-point-text">No overdubs and no click track, just five people in a room.</p>
          </li>
          <li class="vs-point" data-anim="item">
            <h3 class="vs-point-title">Shot on film</h3>
            <p class="vs-point-text">Filmed on 16mm by Marta Leal in a single afternoon.</p>
          </li>
          <li class="vs-point" data-anim="item">
            <h3 class="vs-point-title">Full album live</h3>
            <p class="vs-point-text">Watch all eleven songs from Static Hearts on our channel.</p>
          </li>
        </ul>
      </div>
    </section>
    <section id="gallery" class="st st-gallery-grid" data-uid="smvrrymllcd7z">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Gallery</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>On stage <span class="hl">and in the studio</span></h2>
          <p class="st-lead" data-anim="item">Shows, rehearsals and the church where we recorded the album. Pick a category or tap a photo to see it larger.</p>
        </header>
        <div class="gg-filters" data-gallery-filters role="group" aria-label="Filter photos" hidden data-all="All"></div>
        <ul class="gg-grid" data-gallery>
          <li class="gg-item" data-anim="item" data-tag="Live">
            <img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-music.jpg" alt="The singer at the microphone under cyan and pink stage lights">
            <p class="gg-cap"><strong class="gg-title">Coliseu dos Recreios</strong><span class="gg-text">The last night of the Paper Skies tour</span></p>
          </li>
          <li class="gg-item" data-anim="item" data-tag="Crowd">
            <img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-crowd.jpg" alt="A crowd with hands raised in front of coloured lights">
            <p class="gg-cap"><strong class="gg-title">Lisbon, sold out</strong><span class="gg-text">Two thousand voices on the last chorus</span></p>
          </li>
          <li class="gg-item" data-anim="item" data-tag="Band">
            <img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-band.jpg" alt="The four band members as silhouettes against a glowing backdrop">
            <p class="gg-cap"><strong class="gg-title">The band</strong><span class="gg-text">Before the sound check in Madrid</span></p>
          </li>
          <li class="gg-item" data-anim="item" data-tag="Studio">
            <img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-studio.jpg" alt="A mixing desk with glowing faders under a warm lamp">
            <p class="gg-cap"><strong class="gg-title">The church studio</strong><span class="gg-text">Where Static Hearts was recorded to tape</span></p>
          </li>
          <li class="gg-item" data-anim="item" data-tag="Live">
            <img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="A stage lit by spotlights in front of an audience">
            <p class="gg-cap"><strong class="gg-title">Festival main stage</strong><span class="gg-text">Sunset set, Vilar de Mouros</span></p>
          </li>
          <li class="gg-item" data-anim="item" data-tag="Crowd">
            <img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/wed-party.jpg" alt="String lights over a dance floor at night">
            <p class="gg-cap"><strong class="gg-title">After the show</strong><span class="gg-text">Meeting fans at the merch table</span></p>
          </li>
        </ul>
      </div>
    </section>
    <section id="customers" class="st st-testimonials-carousel" data-uid="smvrrymllo35y">
      <div class="st-wrap">
        <div class="tc-top">
          <header class="st-head st-head--left tc-head">
            <p class="st-eyebrow" data-anim="item">In the press</p>
            <h2 class="st-h2" data-anim="item" data-anim-text>What they are <span class="hl">saying</span></h2>
            <p class="st-lead" data-anim="item">Reviews of Static Hearts and the live show.</p>
          </header>
          <div class="tc-arrows" data-anim="item">
            <button type="button" class="tc-arrow" data-carousel-prev><span class="tc-sr">Previous testimonials</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
            <button type="button" class="tc-arrow" data-carousel-next><span class="tc-sr">Next testimonials</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
          </div>
        </div>
        <div class="tc-track" data-carousel tabindex="0" role="region" aria-label="Testimonials">
          <figure class="tc-card" data-anim="item">
            <p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
            <blockquote class="tc-quote"><p>Big drums, shimmering synths and choruses you will be humming all week. Static Hearts is the best dream-pop record of the year.</p></blockquote>
            <figcaption><div class="st-person">
                <img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="Portrait of a reviewer">
                <div><p class="st-person-name">The Wire Report</p><p class="st-person-role">Album review, 5 stars</p></div>
              </div></figcaption>
          </figure>
          <figure class="tc-card" data-anim="item">
            <p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
            <blockquote class="tc-quote"><p>Seeing Velvet Static live is a reminder of why we go to gigs. Two thousand people sang every word.</p></blockquote>
            <figcaption><div class="st-person">
                <img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="Portrait of a writer">
                <div><p class="st-person-name">Lisbon Nights</p><p class="st-person-role">Live review</p></div>
              </div></figcaption>
          </figure>
          <figure class="tc-card" data-anim="item">
            <p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
            <blockquote class="tc-quote"><p>A band that sounds enormous and intimate at the same time. One to watch.</p></blockquote>
            <figcaption><div class="st-person">
                <img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="Portrait of a critic">
                <div><p class="st-person-name">Indie Radar</p><p class="st-person-role">Artists to watch 2027</p></div>
              </div></figcaption>
          </figure>
        </div>
      </div>
    </section>
    <section id="merch" class="st st-product-grid" data-uid="smvrrymll6nlx">
      <div class="st-wrap">
        <div class="pg-top">
          <header class="st-head st-head--left pg-head">
            <p class="st-eyebrow" data-anim="item">Merch</p>
            <h2 class="st-h2" data-anim="item" data-anim-text>Take <span class="hl">the music home</span></h2>
          </header>
          <a class="pg-all" data-anim="item" href="#merch"><span>See everything</span> <span aria-hidden="true">→</span></a>
        </div>
        <ul class="pg-grid">
          <li class="pg-card" data-anim="item">
            <a class="pg-media" tabindex="-1" aria-hidden="true" href="#">
              <img class="pg-img" width="800" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-1.jpg" alt="Static Hearts on vinyl">
              <span class="pg-badge">New</span>
            </a>
            <div class="pg-body">
              <h3 class="pg-name"><a href="#"><span>Static Hearts, vinyl LP</span></a></h3>
              <p class="pg-text">180 g, gatefold, with a download code</p>
              <p class="pg-rating"><span aria-hidden="true">★</span> <span>5.0</span><span class="pg-reviews">(<span>112</span>)</span></p>
              <p class="pg-price"><strong>€28</strong></p>
              <a class="st-btn pg-btn" href="#"><span>Add to cart</span></a>
            </div>
          </li>
          <li class="pg-card" data-anim="item">
            <a class="pg-media" tabindex="-1" aria-hidden="true" href="#">
              <img class="pg-img" width="800" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-3.jpg" alt="Night Tram cassette">
            </a>
            <div class="pg-body">
              <h3 class="pg-name"><a href="#"><span>Night Tram, cassette</span></a></h3>
              <p class="pg-text">Limited run of 300, numbered</p>
              <p class="pg-rating"><span aria-hidden="true">★</span> <span>4.9</span><span class="pg-reviews">(<span>41</span>)</span></p>
              <p class="pg-price"><strong>€12</strong></p>
              <a class="st-btn pg-btn" href="#"><span>Add to cart</span></a>
            </div>
          </li>
          <li class="pg-card" data-anim="item">
            <a class="pg-media" tabindex="-1" aria-hidden="true" href="#">
              <img class="pg-img" width="800" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-5.jpg" alt="Tour poster with stage lights">
              <span class="pg-badge">Tour</span>
            </a>
            <div class="pg-body">
              <h3 class="pg-name"><a href="#"><span>Static Hearts tour poster</span></a></h3>
              <p class="pg-text">A2 print, signed by the band</p>
              <p class="pg-rating"><span aria-hidden="true">★</span> <span>4.8</span><span class="pg-reviews">(<span>58</span>)</span></p>
              <p class="pg-price"><strong>€15</strong></p>
              <a class="st-btn pg-btn" href="#"><span>Add to cart</span></a>
            </div>
          </li>
          <li class="pg-card" data-anim="item">
            <a class="pg-media" tabindex="-1" aria-hidden="true" href="#">
              <img class="pg-img" width="800" height="1000" loading="lazy" src="https://webdevpuneet.com/images/section-templates/mus-cover-4.jpg" alt="Paper Skies compact disc">
            </a>
            <div class="pg-body">
              <h3 class="pg-name"><a href="#"><span>Paper Skies, signed CD</span></a></h3>
              <p class="pg-text">Digipak with a 12-page booklet</p>
              <p class="pg-rating"><span aria-hidden="true">★</span> <span>4.9</span><span class="pg-reviews">(<span>73</span>)</span></p>
              <p class="pg-price"><strong>€14</strong><s class="pg-old">€18</s></p>
              <a class="st-btn pg-btn" href="#"><span>Add to cart</span></a>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section id="contact" class="st st-booking-form" data-uid="smvrrymllrido">
      <div class="st-wrap bk">
        <div class="bk-info">
          <header class="st-head st-head--left bk-head">
            <p class="st-eyebrow" data-anim="item">Get in touch</p>
            <h2 class="st-h2" data-anim="item" data-anim-text>Bookings, <span class="hl">press and licensing</span></h2>
            <p class="st-lead" data-anim="item">Tell us what you have in mind: a show, an interview or a song for your film. Our manager replies within two working days.</p>
          </header>
          <div class="bk-block" data-anim="item">
            <h3 class="bk-sub">Contacts</h3>
            <dl class="bk-hours">
              <div class="bk-row"><dt>Bookings</dt><dd>bookings@velvetstatic.example</dd></div>
              <div class="bk-row"><dt>Press</dt><dd>press@velvetstatic.example</dd></div>
              <div class="bk-row"><dt>Licensing</dt><dd>sync@velvetstatic.example</dd></div>
            </dl>
          </div>
          <div class="bk-block" data-anim="item">
            <h3 class="bk-sub">Good to know</h3>
            <ul class="st-checks"><li>Festival and club bookings go through our agent</li><li>Press kit with photos and logos is free to download</li><li>We license songs for film, TV and advertising</li></ul>
          </div>
        </div>
        <div class="bk-card" data-anim="media">
          <form class="st-form" method="post" data-form action="https://formspree.io/f/your-form-id">
            <div class="st-form-fields" data-form-fields>
              <div class="st-form-row">
                <label class="st-field"><span>Your name</span><input name="name" type="text" required autocomplete="name"></label>
                <label class="st-field"><span>Email</span><input name="email" type="email" required autocomplete="email"></label>
              </div>
              <label class="st-field"><span>Phone</span><input name="phone" type="tel" autocomplete="tel"></label>
              <label class="st-field"><span>What is this about?</span><select name="service" required>
                  <option value="Booking a show">Booking a show</option>
                  <option value="Press and interviews">Press and interviews</option>
                  <option value="Licensing a song">Licensing a song</option>
                  <option value="Something else">Something else</option>
                </select></label>
              <div class="st-form-row">
                <label class="st-field"><span>Date (if it is for a show)</span><input name="date" type="date" required data-booking-date></label>
                <label class="st-field"><span>Best time to reach you</span><select name="time" required>
                    <option value="Morning">Morning</option>
                    <option value="Afternoon">Afternoon</option>
                    <option value="Evening">Evening</option>
                  </select></label>
              </div>
              <label class="st-field"><span>Tell us more</span><textarea name="notes" rows="3"></textarea></label>
              <input class="st-hp" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
              <button class="st-btn st-form-btn" type="submit"><span>Send the message</span></button>
              <p class="st-form-note">We reply within two working days.</p>
              <p class="st-form-error" data-form-error hidden role="alert">Sorry, something went wrong. Please try again or call us directly.</p>
            </div>
            <div class="st-form-success" data-form-success hidden tabindex="-1" role="status">
              <span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
              <h3>Message received</h3>
              <p>Thank you. Our manager will be in touch shortly.</p>
            </div>
          </form>
        </div>
      </div>
    </section>
    <section id="get-started" class="st st-cta-newsletter" data-uid="smvrrymllw7ke">
      <div class="st-wrap">
        <div class="cn" data-anim="media">
          <span class="st-icon cn-icon" data-anim="item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg></span>
          <h2 class="st-h2 cn-title" data-anim="item" data-anim-text>Be first to <span class="hl">hear what is next</span></h2>
          <p class="st-lead cn-lead" data-anim="item">New songs, tour dates and presales a day before everyone else, once or twice a month.</p>
          <form class="cn-form" data-anim="item" method="post" action="https://webdevpuneet.com/subscribe">
            <input class="cn-input" type="email" required autocomplete="email" name="email" placeholder="you@example.com" aria-label="you@example.com">
            <button class="st-btn cn-btn" type="submit"><span>Sign me up</span></button>
          </form>
          <p class="cn-meta" data-anim="item"><span class="cn-proof">Join 24,000 fans</span><span class="cn-note">No spam. Unsubscribe any time.</span></p>
        </div>
      </div>
    </section>
    <section class="st st-footer-minimal" data-uid="smvrrymlljzy0">
      <footer class="st-wrap fm">
        <div class="fm-row" data-anim="item">
          <a class="st-brand" href="#">
            <span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" /></svg></span><span>Velvet Static</span></span>
          </a>
          <nav aria-label="Footer"><ul class="fm-links"><li><a href="#music">Music</a></li><li><a href="#tour">Tour</a></li><li><a href="#videos">Videos</a></li><li><a href="#merch">Merch</a></li><li><a href="#contact">Contact</a></li></ul></nav>
          <div><ul class="st-socials">
              <li><a class="st-social" href="https://www.instagram.com/" aria-label="Instagram"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg></span></a></li>
              <li><a class="st-social" href="https://www.youtube.com/" aria-label="YouTube"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></svg></span></a></li>
              <li><a class="st-social" href="https://www.facebook.com/" aria-label="Facebook"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg></span></a></li>
              <li><a class="st-social" href="https://x.com/" aria-label="X"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
            </ul></div>
        </div>
        <p class="fm-copy">© 2026 Velvet Static</p>
      </footer>
    </section>