Previewer — Final Homepage

The HTML below is the final merged homepage. You can edit it and press Preview.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Brigham City Surgical Center — Final Homepage (Merged)</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg-soft:#F8FAFC; --paper:#FFFFFF; --navy:#183A56; --muted:#4A6B81;
      --gold:#B88E60; --blue:#2F6FA6; --shadow:rgba(17,28,36,0.06);
      --max:1200px; --pad:32px; --rad:12px;
    }
    *{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg-soft);color:var(--navy);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:18px}
    a{color:inherit}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
    .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:6px;z-index:9999}
    header{position:sticky;top:0;background:transparent;z-index:50;padding:18px 0}
    .nav{display:flex;align-items:center;justify-content:space-between}
    .nav-left{display:flex;align-items:center;gap:14px}
    .logo img{height:44px}
    nav.main{display:flex;gap:18px;align-items:center}
    nav.main a{font-weight:600;text-decoration:none;color:var(--navy);padding:8px}
    .nav-cta{background:var(--gold);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,0.12)}
    /* HERO */
    .hero{position:relative;min-height:700px;overflow:hidden}
    .hero-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
    .hero-inner{position:relative;z-index:2;padding:80px 18px;text-align:center;max-width:1100px;margin:0 auto}
    h1.hero-title{font-family:"Playfair Display",serif;font-size:52px;line-height:1.06;margin:0 0 18px;color:var(--navy)}
    .lead{color:var(--muted);font-size:18px;margin:0 0 16px}
    .hero-cta{background:var(--gold);color:#fff;padding:14px 36px;border-radius:10px;font-weight:700;font-size:18px;box-shadow:0 12px 30px rgba(24,58,86,0.18);display:inline-block;text-decoration:none;border:1px solid rgba(0,0,0,0.04)}
    .hero-cta:focus{outline:3px solid rgba(24,58,86,0.12);outline-offset:4px}
    .pills{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
    .pill{background:var(--paper);padding:10px 16px;border-radius:999px;box-shadow:0 6px 18px var(--shadow);font-weight:700;color:var(--navy);text-decoration:none;font-size:15px}
    /* FEATURES */
    .section{padding:56px 0}
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;max-width:1200px;margin:0 auto}
    .card{background:var(--paper);border-radius:12px;box-shadow:0 12px 36px var(--shadow);overflow:hidden;display:flex;flex-direction:column}
    .card .photo{height:200px;background-size:cover;background-position:center}
    .card .content{padding:22px;display:flex;flex-direction:column;gap:12px}
    .card h3{margin:0;font-size:20px;font-weight:700;color:var(--navy)}
    .card p{margin:0;color:var(--muted);font-size:16px}
    .btn{margin-top:auto;padding:10px 14px;border-radius:8px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;display:inline-block;box-shadow:0 8px 20px rgba(47,111,166,0.12)}
    .btn.gold{background:var(--gold);box-shadow:0 8px 20px rgba(168,120,69,0.12)}
    /* SUPPORTING (merged) */
    .support{padding:48px 0;max-width:1200px;margin:0 auto}
    .support-grid{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center}
    .support h2{font-family:"Playfair Display",serif;font-size:34px;color:var(--navy);margin:0 0 12px}
    .support p{color:var(--muted);margin:0 0 16px;font-size:16px}
    .stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
    .stat{background:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 8px 24px var(--shadow);display:flex;gap:8px;align-items:center}
    .why{margin-top:22px}
    .why ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .why li{font-weight:600;color:var(--navy);font-size:15px}
    .surgeon{background:var(--paper);border-radius:12px;box-shadow:0 12px 36px var(--shadow);overflow:hidden}
    .surgeon img{width:100%;display:block}
    /* FOOTER */
    footer{background:linear-gradient(#E9F1F6,#DCEAF2);padding:36px 0;margin-top:28px}
    footer .wrap{display:flex;gap:40px;align-items:flex-start;justify-content:space-between}
    footer a.call{background:var(--gold);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
    /* RESPONSIVE */
    @media(max-width:1000px){ .features{grid-template-columns:repeat(2,1fr)} .support-grid{grid-template-columns:1fr} }
    @media(max-width:700px){ .features{grid-template-columns:1fr} .hero-inner{padding:40px 16px} h1.hero-title{font-size:32px} .why ul{grid-template-columns:1fr} }
  </style>
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>

<header>
    <div class="wrap nav" role="banner">
      <div class="nav-left">
        <a href="#" class="logo" aria-label="Brigham City Surgical Center home">
          <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'><text x='0' y='26' font-family='Inter,Arial' font-weight='700' font-size='16' fill='%23183A56'>Brigham City</text></svg>" alt="logo">
        </a>
      </div>

<nav class="main" aria-label="Main navigation">
        <a href="#">Home</a>
        <a href="#procedures">Procedures</a>
        <a href="#team">Our Physicians</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#about">About</a>
        <a class="nav-cta" href="#schedule">Schedule Consultation</a>
      </nav>
    </div>
  </header>

<div class="hero-inner">
        <h1 class="hero-title">Advanced Surgical Precision, with a Soothing Recovery Experience.</h1>
        <p class="lead">A boutique surgical center focused on calm, safety, and excellent outcomes.</p>
        <a class="hero-cta" href="#schedule">Schedule Consultation</a>

<div class="pills" role="navigation" aria-label="Quick links" style="margin-top:20px">
          <a class="pill" href="#procedures">Procedures</a>
          <a class="pill" href="#team">Meet Your Care Team</a>
          <a class="pill" href="#resources">Patient Resources</a>
          <a class="pill" href="#insurance">Insurance</a>
          <a class="pill" href="#contact">Contact / Schedule</a>
        </div>
      </div>
    </section>

<section class="section" aria-label="Featured">
      <div class="features wrap">
        <article class="card">
          <div class="photo" style="background-image:url('https://images.unsplash.com/photo-1582719478250-086d0e6b2f4a?q=80&w=1400&auto=format&fit=crop');"></div>
          <div class="content">
            <h3>Advanced Surgical Procedures</h3>
            <p>Utilizing state-of-the-art technology to provide minimally invasive and precise surgical care.</p>
            <a class="btn" href="#procedures">Learn More</a>
          </div>
        </article>

<article class="card">
          <div class="photo" style="background-image:url('https://images.unsplash.com/photo-1537368910025-700350fe46c7?q=80&w=1400&auto=format&fit=crop');"></div>
          <div class="content">
            <h3>Personalized Patient-Centered Care</h3>
            <p>Compassionate, attentive support through every step of your recovery.</p>
            <a class="btn gold" href="#team">Learn More</a>
          </div>
        </article>

<article class="card">
          <div class="photo" style="background-image:url('https://images.unsplash.com/photo-1586773860416-2e7fefbe1b98?q=80&w=1400&auto=format&fit=crop');"></div>
          <div class="content">
            <h3>Insurance & Scheduling Assistance</h3>
            <p>Helping you navigate insurance and schedule your surgery with ease.</p>
            <a class="btn" href="#resources">Learn More</a>
          </div>
        </article>
      </div>
    </section>

<section class="support" aria-label="In Trusting Hands">
      <div class="support-grid wrap">
        <div>
          <h2>In Trusting Hands</h2>
          <p class="lead">Dedicated to your health and well-being, our expert surgical team delivers exceptional care in a state-of-the-art, tranquil environment.</p>

<div class="stats" aria-hidden="false">
            <div class="stat"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="margin-right:8px"><circle cx="12" cy="12" r="10" fill="#E6F0F8"/></svg><div><strong>+10,000</strong><div style="font-size:13px;color:var(--muted)">Successful Surgeries</div></div></div>

<div class="stat"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="margin-right:8px"><rect x="3" y="3" width="18" height="18" rx="4" fill="#E6F0F8"/></svg><div><strong>50+</strong><div style="font-size:13px;color:var(--muted)">Years of Combined Experience</div></div></div>
          </div>

<div class="why">
            <ul>
              <li>World-Class Expertise & Precision</li>
              <li>Advanced, Minimally Invasive Technology</li>
              <li>Boutique, Personalized Experience</li>
              <li>Commitment to Safety & Detail</li>
            </ul>
          </div>

<div style="margin-top:18px">
            <a class="btn" href="#why">Why Choose Us</a>
            <a style="margin-left:12px;text-decoration:none;color:var(--muted);font-weight:600" href="#about">Learn more</a>
          </div>
        </div>

<div>
          <div class="surgeon" role="figure" aria-label="Our surgical team">
            <img src="https://images.unsplash.com/photo-1584467735878-3be7b9a31b7f?q=80&w=1400&auto=format&fit=crop" alt="Surgical team">
            <div style="padding:12px;text-align:center;background:#fff">
              <a class="nav-cta" href="#team" style="background:var(--gold);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none">Meet Our Surgeons</a>
            </div>
          </div>
        </div>
      </div>
    </section>

<footer role="contentinfo">
      <div class="wrap">
        <div style="display:flex;gap:40px;alignItems:flex-start;justifyContent:space-between">
          <div>
            <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='44'><text x='0' y='26' font-family='Inter' font-weight='700' font-size='16' fill='%23183A56'>Brigham City</text></svg>" alt="logo" style="height:44px">
            <div style="color:var(--muted);margin-top:12px">506 Medical Dr<br>Brigham City, UT 84302</div>
          </div>

<div>
            <div style="font-weight:700;color:var(--navy);margin-bottom:8px">Links</div>
            <div style="color:var(--muted)"><a href="#procedures">Procedures</a><br><a href="#team">Our Physicians</a><br><a href="#testimonials">Testimonials</a><br><a href="#about">About</a></div>
          </div>

<div>
            <div style="font-weight:700;color:var(--navy);margin-bottom:8px">Contact Us</div>
            <div style="color:var(--muted);margin-bottom:8px">Call us: <strong>+1 (999) 265-2331</strong></div>
            <a class="call" href="tel:+19992652331">Call Now</a>
          </div>
        </div>

<div style="margin-top:20px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between">
          <div>© 2024 Brigham City Surgical Center</div>
          <div>Designed by Mitra Shauli</div>
        </div>
      </div>
    </footer>
  </main>

</body>
</html>

প্রিভিউ করতে কোড এডিট করে Preview চাপুন — তারপর পেজ নিচে রেন্ডার হবে।