This is a modern, dark-themed one-page HTML/CSS template tailored for heavy metal bands. It uses semantic HTML, responsive layouts via CSS Grid and Flexbox, and pure CSS enhancements for animations. Minimal JavaScript included for better UX.
| Mobile view | Desktop view |
|---|---|
 |
 |
- Fully responsive (mobile-first)
- Pure CSS layout (no frameworks)
- Pure CSS animations using
animation-timeline - Smooth anchor link scrolling
- Fixed header & mobile menu
- Accessible, semantic, and clean structure
- Minimal JavaScript
- Bandsintown gigs overview embed
- Optional: Cookie Management Platform via cookieyes.com
/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── nav.js
├── img/
│ └── (your images here)
└── README.md
Change the .logo image inside <header> and <footer>. Use SVG.
Change or add navigation items in the <ul class="wrapper-nav-main"> block in index.html.
Replace the img/band.webp and member images (img/member*.webp) with your own.
Update the sections: #bandinfo, #members, #shows, #audio and #video in index.html with your own content.
In css/styles.css, update the :root CSS variables.
You can also change Google Fonts in the <head> section of index.html.
All icons use SVGs from Pictogrammers MDI. You can swap them or add new ones.
MIT – feel free to reuse and modify!
- https://unsplash.com/de/@iam_os
- https://unsplash.com/de/@beccatapert
- https://unsplash.com/de/@gearfilms
- https://unsplash.com/de/@hectorbermudez
- https://unsplash.com/de/@storybyphil
- https://unsplash.com/de/@studiokvr
- https://unsplash.com/de/@ysp_19
V1.0.1