Skip to content

FILS112/CS

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
.github
.github
 
 
README.md
README.md
 
 
index.html
index.html
 
 

Repository files navigation

<!doctype html>

<title>Express Hand Car Wash | Prices, Detailing & Photos</title> <style> :root{ --bg:#0b0f14; --card:#0f1620; --text:#e8eef6; --muted:#a9b6c6; --line:#1c2836; --acc:#38bdf8; --acc2:#22c55e; --shadow: 0 10px 30px rgba(0,0,0,.35); --radius: 16px; --max: 1100px; } *{box-sizing:border-box} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: radial-gradient(1200px 800px at 20% -10%, rgba(56,189,248,.18), transparent 60%), radial-gradient(900px 700px at 80% 0%, rgba(34,197,94,.14), transparent 55%), var(--bg); color:var(--text); line-height:1.45; } a{color:inherit; text-decoration:none} .container{max-width:var(--max); margin:0 auto; padding:0 18px} header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(11,15,20,.75); border-bottom:1px solid rgba(28,40,54,.7); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; } .logo{ width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg, rgba(56,189,248,.9), rgba(34,197,94,.85)); box-shadow: 0 10px 25px rgba(56,189,248,.12); } .menu{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:14px; color:var(--muted); } .menu a{padding:8px 10px; border-radius:10px} .menu a:hover{background:rgba(255,255,255,.06); color:var(--text)} .cta{display:flex; align-items:center; gap:10px} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; border:1px solid rgba(28,40,54,.9); background: rgba(255,255,255,.04); color:var(--text); font-weight:700; cursor:pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select:none; font-size:14px; } .btn:hover{background: rgba(255,255,255,.07); transform: translateY(-1px)} .btn.primary{ border-color: rgba(56,189,248,.55); background: linear-gradient(135deg, rgba(56,189,248,.20), rgba(34,197,94,.12)); } .btn.green{ border-color: rgba(34,197,94,.55); background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(56,189,248,.10)); } 
.hero{padding:54px 0 18px}
.heroGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
.heroCard{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(28,40,54,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  overflow:hidden;
  position:relative;
}
.heroCard:before{
  content:"";
  position:absolute; inset:-120px -120px auto auto;
  width:260px; height:260px;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.35), transparent 60%);
  filter: blur(2px);
}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(28,40,54,.9);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:600; font-size:13px;
}
h1{margin:12px 0 10px; font-size:40px; line-height:1.05}
.sub{color:var(--muted); font-size:16px; max-width:56ch}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; color:var(--muted); font-size:13px}
.badge{
  display:flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(28,40,54,.9);
  background: rgba(255,255,255,.03);
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(34,197,94,.9);
  box-shadow: 0 0 0 6px rgba(34,197,94,.12);
}
.mini{display:flex; flex-direction:column; gap:12px}
.infoBox{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(28,40,54,.9);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.infoRow{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(28,40,54,.65)}
.infoRow:last-child{border-bottom:none}
.label{color:var(--muted); font-size:13px}
.value{font-weight:800}
section{padding:28px 0}
.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px}
.sectionTitle h2{margin:0; font-size:24px}
.sectionTitle p{margin:0; color:var(--muted); font-size:14px}
.grid{display:grid; gap:12px}
.grid.cols3{grid-template-columns: repeat(3, 1fr)}
.grid.cols2{grid-template-columns: repeat(2, 1fr)}
.card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(28,40,54,.9);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.card h3{margin:0 0 6px}
.muted{color:var(--muted)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(28,40,54,.9);
  background: rgba(255,255,255,.03);
  color:var(--muted); font-size:12px; font-weight:700;
}
.price{font-size:28px; font-weight:900; margin-top:10px}
.list{
  margin:10px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px;
  color:var(--muted); font-size:14px;
}
.list li{display:flex; gap:10px}
.check{
  width:18px; height:18px; border-radius:6px;
  border:1px solid rgba(34,197,94,.6);
  background: rgba(34,197,94,.12);
  flex:0 0 auto;
  margin-top:2px;
}

.gallery{display:grid; gap:10px; grid-template-columns: repeat(4, 1fr)}
.ph{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(28,40,54,.9);
  background: rgba(255,255,255,.02);
  aspect-ratio: 4/3;
  cursor:pointer;
  position:relative;
}
.ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .18s ease;
}
.ph:hover img{transform: scale(1.08)}
.ph:after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
  opacity:.8;
}

.modal{position:fixed; inset:0; display:none; background: rgba(0,0,0,.7);
  align-items:center; justify-content:center; padding:18px; z-index:200;}
.modal.open{display:flex}
.modalBox{
  width:min(980px, 100%);
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(28,40,54,.9);
  background: #02060c;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  position:relative;
}
.modalBox img{width:100%; height:auto; display:block}
.modalClose{
  position:absolute; top:12px; right:12px;
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}

.contactGrid{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
.contactItem{display:flex; flex-direction:column; gap:6px}
.input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(28,40,54,.9);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  font-size:14px;
}
textarea{min-height:120px; resize:vertical}
.note{color:var(--muted); font-size:13px}

footer{
  padding:22px 0 34px;
  border-top:1px solid rgba(28,40,54,.7);
  color:var(--muted);
  font-size:13px;
}

@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr}
  h1{font-size:34px}
  .grid.cols3{grid-template-columns: 1fr}
  .grid.cols2{grid-template-columns: 1fr}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .contactGrid{grid-template-columns: 1fr}
}
</style>
Hand Car Wash
Express Hand Car Wash
  <nav class="menu" aria-label="Menu">
    <a href="#services">Services</a>
    <a href="#prices">Prices</a>
    <a href="#gallery">Photos</a>
    <a href="#contact">Contact</a>
  </nav>

  <div class="cta">
    <a class="btn green" id="btnWhatsApp" href="https://wa.me/447752046952" target="_blank" rel="noopener">WhatsApp</a>
    <a class="btn primary" href="#contact">Book / Enquire</a>
  </div>
</div>
✨ Clean • Fast • Detailing

Professional hand car wash in Greenfield

Exterior wash, interior clean, full detailing, polish & protection. Clear pricing, real photos, easy booking. 

      <div class="heroActions">
        <a class="btn primary" href="#prices">View prices</a>
        <a class="btn" href="#gallery">See photos</a>
        <a class="btn green" href="tel:+447752046952">Call now</a>
      </div>

      <div class="badges">
        <div class="badge"><span class="dot"></span> Quick booking</div>
        <div class="badge">🧼 Premium products</div>
        <div class="badge">⭐ Great results</div>
      </div>
    </div>

    <div class="mini">
      <div class="infoBox">
        <div class="infoRow">
          <div class="label">Address</div>
          <div class="value" style="text-align:right;">Bagillt Rd, Greenfield<br/>Holywell CH8 7EP</div>
        </div>
        <div class="infoRow">
          <div class="label">Phone</div>
          <div class="value"><a href="tel:+447752046952">+44 7752 046952</a></div>
        </div>
        <div class="infoRow">
          <div class="label">Typical time</div>
          <div class="value">30–120 min</div>
        </div>
        <div class="infoRow">
          <div class="label">Payment</div>
          <div class="value">Cash / Card</div>
        </div>
      </div>

      <div class="infoBox">
        <div style="display:flex; justify-content:space-between; gap:12px; align-items:center;">
          <div>
            <div style="font-weight:900; font-size:16px;">Recommended package</div>
            <div class="muted" style="font-size:13px;">In & Out (Interior + Exterior)</div>
          </div>
          <div class="pill">Best Value</div>
        </div>
        <div class="price">from £25</div>
        <div class="muted" style="font-size:13px;">*Price depends on vehicle size & condition.</div>
      </div>
    </div>
  </div>
</section>

<section id="services">
  <div class="sectionTitle">
    <h2>Services</h2>
    <p>Everything your car needs to look its best.</p>
  </div>

  <div class="grid cols3">
    <div class="card">
      <h3>Exterior hand wash</h3>
      <div class="muted">Pre-rinse, foam, hand wash, rinse & dry.</div>
      <ul class="list">
        <li><span class="check"></span> Wheels & tyres</li>
        <li><span class="check"></span> Door sills wiped</li>
        <li><span class="check"></span> Spot-free finish</li>
      </ul>
    </div>
    <div class="card">
      <h3>Interior clean</h3>
      <div class="muted">Vacuum, plastics, glass, fresh finish.</div>
      <ul class="list">
        <li><span class="check"></span> Full vacuum</li>
        <li><span class="check"></span> Dash & trims</li>
        <li><span class="check"></span> Windows cleaned</li>
      </ul>
    </div>
    <div class="card">
      <h3>Detailing / Protection</h3>
      <div class="muted">Polish, wax, ceramic protection (by request).</div>
      <ul class="list">
        <li><span class="check"></span> Paint enhancement</li>
        <li><span class="check"></span> Hydrophobic protection</li>
        <li><span class="check"></span> Premium results</li>
      </ul>
    </div>
  </div>
</section>

<section id="prices">
  <div class="sectionTitle">
    <h2>Prices</h2>
    <p>Edit these values to match the exact price list.</p>
  </div>

  <div class="grid cols3">
    <div class="card">
      <div class="pill">Exterior</div>
      <h3 style="margin-top:10px;">Exterior wash</h3>
      <div class="price">£8 / £10 / £12</div>
      <div class="muted">Small / Medium / SUV</div>
      <ul class="list">
        <li><span class="check"></span> Pre-foam + hand wash</li>
        <li><span class="check"></span> Wheels cleaned</li>
        <li><span class="check"></span> Dried finish</li>
      </ul>
    </div>

    <div class="card">
      <div class="pill">Interior</div>
      <h3 style="margin-top:10px;">Interior clean</h3>
      <div class="price">£20 / £25 / £30</div>
      <div class="muted">Small / Medium / SUV</div>
      <ul class="list">
        <li><span class="check"></span> Full vacuum</li>
        <li><span class="check"></span> Dash + plastics</li>
        <li><span class="check"></span> Windows</li>
      </ul>
    </div>

    <div class="card">
      <div class="pill">Package</div>
      <h3 style="margin-top:10px;">In & Out</h3>
      <div class="price">£20 / £25 / £30</div>
      <div class="muted">Small / Medium / SUV</div>
      <ul class="list">
        <li><span class="check"></span> Full interior</li>
        <li><span class="check"></span> Full exterior</li>
        <li><span class="check"></span> Gloss finish</li>
      </ul>
    </div>
  </div>

  <div class="grid cols2" style="margin-top:12px;">
    <div class="card">
      <h3>Add-ons</h3>
      <ul class="list">
        <li><span class="check"></span> Quick wax: £5–£10</li>
        <li><span class="check"></span> Seat shampoo: £40–£120</li>
        <li><span class="check"></span> Full valet: £50–£150</li>
        <li><span class="check"></span> Engine bay clean: £20–£50</li>
      </ul>
      <div class="note">*Adjust to your real services.</div>
    </div>

    <div class="card">
      <h3>Detailing / Ceramic (quote)</h3>
      <ul class="list">
        <li><span class="check"></span> 1-step polish: £120–£250</li>
        <li><span class="check"></span> 2-step correction: £250–£500</li>
        <li><span class="check"></span> Ceramic coating: £300–£900</li>
      </ul>
      <div class="note">Prices depend on vehicle size & paint condition.</div>
    </div>
  </div>
</section>

<section id="gallery">
  <div class="sectionTitle">
    <h2>Photo gallery</h2>
    <p>Click any photo to view it larger.</p>
  </div>

  <div class="gallery" id="galleryGrid">
    <div class="ph"><img src="img/1.jpg" alt="Car wash photo 1"></div>
    <div class="ph"><img src="img/2.jpg" alt="Car wash photo 2"></div>
    <div class="ph"><img src="img/3.jpg" alt="Car wash photo 3"></div>
    <div class="ph"><img src="img/4.jpg" alt="Car wash photo 4"></div>
    <div class="ph"><img src="img/5.jpg" alt="Car wash photo 5"></div>
    <div class="ph"><img src="img/6.jpg" alt="Car wash photo 6"></div>
    <div class="ph"><img src="img/7.jpg" alt="Car wash photo 7"></div>
    <div class="ph"><img src="img/8.jpg" alt="Car wash photo 8"></div>
  </div>
</section>

<section id="contact">
  <div class="sectionTitle">
    <h2>Contact</h2>
    <p>Fill in the form and send it directly on WhatsApp.</p>
  </div>

  <div class="grid cols2">
    <div class="card">
      <h3>Details</h3>
      <div class="muted">Express Hand Car Wash</div>

      <div style="margin-top:10px; display:flex; flex-direction:column; gap:10px;">
        <div class="infoRow" style="border-bottom:1px solid rgba(28,40,54,.65)">
          <div class="label">Phone</div>
          <div class="value"><a href="tel:+447752046952">+44 7752 046952</a></div>
        </div>
        <div class="infoRow" style="border-bottom:1px solid rgba(28,40,54,.65)">
          <div class="label">WhatsApp</div>
          <div class="value"><a href="https://wa.me/447752046952" target="_blank" rel="noopener">Message us</a></div>
        </div>
        <div class="infoRow">
          <div class="label">Address</div>
          <div class="value" style="text-align:right;">Bagillt Rd, Greenfield<br/>Holywell CH8 7EP</div>
        </div>
      </div>

      <div style="margin-top:14px;" class="note">
        Map: replace the iframe below with a Google Maps embed link if you want.
      </div>

      <div style="margin-top:10px; border-radius:16px; overflow:hidden; border:1px solid rgba(28,40,54,.9)">
        <iframe
          title="Map"
          width="100%"
          height="260"
          loading="lazy"
          style="border:0; display:block"
          referrerpolicy="no-referrer-when-downgrade"
          src="about:blank">
        </iframe>
      </div>
    </div>

    <div class="card">
      <h3>Send an enquiry</h3>

      <div class="contactGrid" style="margin-top:10px;">
        <div class="contactItem">
          <label class="label" for="name">Name</label>
          <input class="input" id="name" placeholder="e.g. John" />
        </div>
        <div class="contactItem">
          <label class="label" for="phone">Phone</label>
          <input class="input" id="phone" placeholder="e.g. 07xx xxx xxx" />
        </div>
        <div class="contactItem" style="grid-column:1/-1">
          <label class="label" for="service">Service</label>
          <input class="input" id="service" placeholder="e.g. In & Out, Full valet, Seats shampoo..." />
        </div>
        <div class="contactItem" style="grid-column:1/-1">
          <label class="label" for="message">Details</label>
          <textarea id="message" placeholder="e.g. Vehicle: Golf. Prefer: tomorrow after 4pm. Any special requests..."></textarea>
        </div>
      </div>

      <div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;">
        <button class="btn green" id="sendWA">Send on WhatsApp</button>
        <button class="btn" id="copyText">Copy message</button>
      </div>

      <div class="note" style="margin-top:10px;">
        *The WhatsApp button opens WhatsApp with your message ready to send.
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="container" style="padding:0;">
    © <span id="year"></span> Express Hand Car Wash • Bagillt Rd, Greenfield, Holywell CH8 7EP
  </div>
</footer>
✕ Large photo
<script> document.getElementById('year').textContent = new Date().getFullYear(); // Gallery modal const modal = document.getElementById('modal'); const modalImg = document.getElementById('modalImg'); const modalClose = document.getElementById('modalClose'); document.getElementById('galleryGrid').addEventListener('click', (e) => { const img = e.target.closest('img'); if(!img) return; modalImg.src = img.src; modal.classList.add('open'); modal.setAttribute('aria-hidden', 'false'); }); function closeModal(){ modal.classList.remove('open'); modal.setAttribute('aria-hidden', 'true'); modalImg.src = ''; } modalClose.addEventListener('click', closeModal); modal.addEventListener('click', (e) => { if(e.target === modal) closeModal(); }); window.addEventListener('keydown', (e) => { if(e.key === 'Escape') closeModal(); }); // WhatsApp const WA_NUMBER = "447752046952"; // no +, no spaces function buildMessage(){ const name = document.getElementById('name').value.trim(); const phone = document.getElementById('phone').value.trim(); const service = document.getElementById('service').value.trim(); const message = document.getElementById('message').value.trim(); return [ "Hi! I'd like to book a car wash.", name ? `Name: ${name}` : null, phone ? `Phone: ${phone}` : null, service ? `Service: ${service}` : null, message ? `Details: ${message}` : null ].filter(Boolean).join("\n"); } document.getElementById('sendWA').addEventListener('click', () => { const text = encodeURIComponent(buildMessage()); window.open(`https://wa.me/${WA_NUMBER}?text=${text}`, "_blank", "noopener"); }); document.getElementById('copyText').addEventListener('click', async () => { const text = buildMessage(); try{ await navigator.clipboard.writeText(text); alert("Copied!"); }catch{ alert("Couldn't copy automatically — please copy manually."); } }); document.getElementById('btnWhatsApp').href = `https://wa.me/${WA_NUMBER}`; </script>

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages