<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Sunset Drive Band</title>

  <style>
    :root {
      --accent:#ff6f3c;
      --dark:#0f1720;
      --muted:#f3f4f6;
      --card-bg:rgba(255,255,255,0.04);
      --glass: rgba(255,255,255,0.06);
      --max-width:1100px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--muted);
      background: linear-gradient(180deg,#07101a 0%, #0b1a22 100%);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.45;
    }

    .wrap {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 28px;
    }

    /* HEADER */
    header.site-header {
 
     

      
    }

    header.site-header img {
      border-radius: 8px;
           height: 300px;
    }

    /* HERO */
    .hero {
      background: linear-gradient(180deg, rgba(255,111,60,0.06), transparent);
      padding: 22px;
      border-radius: 12px;
      margin-bottom: 22px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .hero-inner {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .hero h1 {
      margin: 0;
      font-size: 34px;
      color: #fff;
    }

    nav a {
      color: #cbd5e1;
      text-decoration: none;
      margin-right: 14px;
      font-size: 14px;
    }

    .lead {
      color: #e6eef6;
      opacity: 0.9;
    }

    .cta {
      display: flex;
      gap: 10px;
      margin-top: 8px;
    }

    .btn {
      background: var(--accent);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      border: 0;
      font-weight: 600;
      text-decoration: none;
      display: inline-block;
    }

    .btn.secondary {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.06);
      color: var(--muted);
    }

    .hero-media img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.6);
      display: block;
    }

    /* GRID LAYOUT */
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-bottom: 18px;
    }

    @media (min-width: 1024px) {
      .grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .card {
      background: var(--card-bg);
      padding: 16px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.03);
    }

    /* MEMBERS SECTION */
    .member-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
      justify-content: center;
    }

    .member-row img {
      width: 500px;
      height: 500px;
      object-fit: cover;
      border-radius: 8px;
    }

    /* SHOWS */
    .shows ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .shows li {
      padding: 10px;
      border-bottom: 1px dashed rgba(255,255,255,0.03);
      display: flex;
      justify-content: space-between;
    }

    /* FOOTER */
    footer.footer {
      margin-top: 22px;
      padding: 14px;
      border-radius: 10px;
      background: var(--glass);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .social a {
      color: #cbd5e1;
      margin-right: 10px;
      text-decoration: none;
    }

    small.muted {
      color: #9aa6b2;
    }
  </style>
</head>

<body>
  <div class="wrap">

    <!-- HEADER -->
    <header class="site-header">
        <a href="images/LOGO.jpg">
      <img src="images/LOGO.jpg" alt="Band Logo" width="30%"  style="height: 300px; float: left"></a>
      <img src="images/top%20set.PNG" alt="Band Photo" width="69%" style="float: right; height: 300;" >
    </header>

    <!-- HERO -->
    <section class="hero">
      <div class="hero-inner">
        <h1>Sunset Drive Band </h1>
        
        <p>Driving melodies, sunset harmonies</p>

        <nav>
          <a href="#music">Music</a>
          <a href="#members">Members</a>
          <a href="#shows">Shows</a>
          <a href="#contact">Contact</a>
        </nav>

        <p class="lead">A road-trip of sound — Original music, classic grooves, heartfelt vocals, and studio‑polished production.</p>

        <div class="cta">
        </div>
      </div>

      <div class="hero-media">
        &nbsp;</div>
    </section>

    <!-- MAIN GRID -->
    <div class="grid">

      <!-- MUSIC -->
      <div class="card">
        <h1 id="music">Music</h1>
        <p class="muted">New single out now. Studio-quality recordings produced by the band.</p>

        <div style="margin-top:12px;">
          <div style="background:rgba(0,0,0,0.25);padding:12px;border-radius:8px;">
            <strong>Stream</strong>
            <p style="margin:8px 0 0;color:#cbd5e1">Add your streaming links or an embedded player here.</p>
          </div>
        </div>

        <hr style="border:none;height:1px;background:rgba(255,255,255,0.03);margin:16px 0">

        <!-- MEMBERS -->
        <h1 id="members">Band Members</h1>

        <div class="member-row">
          <img src="images/Ron.jpg" alt="Ron — Lead Guitar & Vocals">
          <img src="images/Jenn.jpg" alt="Jenn — Lead Singer & Keys" style="width: 500; height: 500">
          <img src="images/Paul.jpg" alt="Paul — Bass Guitar & Vocals" style="width: 500; height: 500">
          <img src="images/terry.jpg" alt="Terry — Drummer & A/V Tech">
        </div>
      </div>

      <!-- SHOWS + CONTACT -->
      <div class="card">
        <h3 id="shows">Upcoming Shows</h3>

        <div class="shows" style="margin-top:10px">
          <ul>
            <li><span><strong>Sep 12</strong> — The Harbor Stage</span><span class="muted">7:30 PM</span></li>
            <li><span><strong>Oct 03</strong> — Sunset Festival</span><span class="muted">8:00 PM</span></li>
            <li><span><strong>Nov 21</strong> — The Mainroom</span><span class="muted">9:00 PM</span></li>
          </ul>
        </div>

        <hr style="border:none;height:1px;background:rgba(255,255,255,0.03);margin:14px 0">

        <h3 id="contact">Contact</h3>
        <p class="muted">Booking and press inquiries</p>
        <p><strong>Email:</strong> booking@sunsetdriveband.example</p>
        <p><strong>Phone:</strong> (555) 555‑5555</p>

        <div style="margin-top:12px">
          <strong>Follow</strong>
          <div class="social" style="margin-top:8px">
            <a href="#">Facebook</a>
            <a href="#">Instagram</a>
            <a href="#">YouTube</a>
          </div>
        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <footer class="footer">
      <div>
        <strong>Sunset Drive Band</strong>
        <div><small class="muted">© <span id="year"></span> Sunset Drive</small></div>
      </div>
      <div style="text-align:right">
        <small class="muted">Produced and recorded by the band</small>
      </div>
    </footer>

  </div>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>