<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Graveyard Jukebox</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <header>
    <div class="logo">
      <h1>☠ GRAVEYARD JUKEBOX ☠</h1>
      <p>Rockabilly • Psychobilly • Horror Culture</p>
    </div>

    <nav>
      <a href="#home">Home</a>
      <a href="#events">Events</a>
      <a href="#bands">Bands</a>
      <a href="#gallery">Gallery</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section class="hero" id="home">
    <div class="overlay">
      <h2>Rockabilly Never Dies</h2>
      <p>Live Shows • Vintage Style • Psychobilly Horror</p>

      <div class="buttons">
        <a href="#events" class="btn">Upcoming Shows</a>
        <a href="#bands" class="btn">Featured Bands</a>
      </div>
    </div>
  </section>

  <section class="events" id="events">
    <h2>Upcoming Live Events</h2>

    <div class="event-grid">
      <div class="event-card">
        <span class="date">JUL 10</span>
        <h3>Rockabilly Night</h3>
        <p>Live bands, classic cars, and vintage vibes.</p>
      </div>

      <div class="event-card">
        <span class="date">JUL 18</span>
        <h3>Psychobilly Massacre</h3>
        <p>Horror punk and psychobilly all night.</p>
      </div>

      <div class="event-card">
        <span class="date">AUG 02</span>
        <h3>Hot Rod Weekend</h3>
        <p>Custom cars, tattoos, and live music.</p>
      </div>
    </div>
  </section>

  <section class="bands" id="bands">
    <h2>Featured Bands</h2>

    <div class="band-grid">
      <div class="band-card">
        <h3>The Meteors</h3>
        <p>The original kings of psychobilly.</p>
      </div>

      <div class="band-card">
        <h3>Nekromantix</h3>
        <p>Coffin bass madness from Denmark.</p>
      </div>

      <div class="band-card">
        <h3>Mad Sin</h3>
        <p>Psychobilly with punk attitude.</p>
      </div>
    </div>
  </section>

  <section class="gallery" id="gallery">
    <h2>Gallery Style</h2>
    <p>This layout uses dark colors, horror-inspired type, red accents, and a vintage underground music mood.</p>
  </section>

  <section class="newsletter" id="contact">
    <h2>Join The Graveyard Crew</h2>
    <p>Get updates on upcoming gigs and festivals.</p>

    <form>
      <input type="email" placeholder="Your Email">
      <button type="submit">Subscribe</button>
    </form>
  </section>

  <footer>
    <p>© 2026 Graveyard Jukebox</p>
    <p>Rockabilly • Psychobilly • Horror</p>
  </footer>

</body>@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Special+Elite&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0f0f0f;
  color: #f4e8d0;
  font-family: 'Special Elite', cursive;
}

/* HEADER */

header {
  background: #111;
  border-bottom: 4px solid #8b0000;
  padding: 20px;
  text-align: center;
}

.logo h1 {
  font-family: 'Creepster', cursive;
  font-size: 3rem;
  color: #c1121f;
  text-shadow: 0 0 10px #c1121f, 0 0 20px #8b0000;
}

.logo p {
  margin-top: 10px;
  color: #f5deb3;
}

nav {
  margin-top: 20px;
}

nav a {
  color: #f4e8d0;
  text-decoration: none;
  margin: 0 15px;
  transition: 0.3s;
}

nav a:hover {
  color: #ff4d4d;
}

/* HERO */

.hero {
  height: 80vh;
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url('https://images.unsplash.com/photo-1501386761578-eac5c94b800a?w=1600');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  text-align: center;
  padding: 20px;
}

.overlay h2 {
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 0 10px red, 0 0 25px red;
}

.overlay p {
  margin: 20px 0;
  font-size: 1.2rem;
}

.buttons {
  margin-top: 20px;
}

.btn {
  display: inline-block;
  background: #8b0000;
  color: white;
  text-decoration: none;
  padding: 12px 25px;
  margin: 10px;
  border: 2px solid #ff4444;
  transition: 0.3s;
}

.btn:hover {
  background: #c1121f;
  transform: translateY(-3px);
}

/* EVENTS */

.events {
  padding: 70px 20px;
  text-align: center;
}

.events h2,
.bands h2,
.gallery h2,
.newsletter h2 {
  margin-bottom: 40px;
  font-size: 2.5rem;
  color: #ff4d4d;
}

.event-grid,
.band-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.event-card {
  background: #1a1a1a;
  width: 300px;
  padding: 25px;
  border: 2px solid #8b0000;
  box-shadow: 0 0 15px rgba(255,0,0,.3);
}

.date {
  color: #ff4d4d;
  font-size: 1.2rem;
  font-weight: bold;
}

/* BANDS */

.bands {
  background: #151515;
  padding: 70px 20px;
  text-align: center;
}

.band-card {
  width: 300px;
  background: #222;
  padding: 25px;
  border-left: 5px solid #c1121f;
}

/* GALLERY */

.gallery {
  text-align: center;
  padding: 70px 20px;
  background: #101010;
}

.gallery p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* NEWSLETTER */

.newsletter {
  text-align: center;
  padding: 70px 20px;
}

.newsletter p {
  margin: 15px 0;
}

.newsletter input {
  padding: 12px;
  width: 250px;
  border: none;
  background: #222;
  color: white;
}

.newsletter button {
  padding: 12px 20px;
  border: none;
  background: #8b0000;
  color: white;
  cursor: pointer;
}

.newsletter button:hover {
  background: #c1121f;
}

/* FOOTER */

footer {
  text-align: center;
  background: #111;
  border-top: 4px solid #8b0000;
  padding: 25px;
}

footer p {
  margin: 5px 0;
}

/* MOBILE */

@media (max-width: 768px) {
  .overlay h2 {
    font-size: 2.5rem;
  }

  nav a {
    display: block;
    margin: 10px 0;
  }

  .logo h1 {
    font-size: 2.2rem;
  }
}
</html>