Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Previewer — Final Homepage</title>
<style>
:root{--bg:#f4f6f8;--panel:#ffffff;--accent:#183A56}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#112;}
header{padding:18px 24px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);display:flex;align-items:center;gap:16px;justify-content:space-between}
header h1{font-size:16px;margin:0;color:var(--accent)}
.container{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;max-width:1300px;margin:18px auto}
.left, .right{background:var(--panel);border-radius:8px;padding:12px;box-shadow:0 8px 24px rgba(16,20,24,0.04)}
textarea{width:100%;height:640px;border:1px solid #e6e9ee;padding:12px;font-family:monospace;font-size:13px;white-space:pre;overflow:auto}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}
button.secondary{background:#6b7c8a}
.note{font-size:13px;color:#4a5b6a;margin-top:8px}
iframe{width:100%;height:820px;border:1px solid #e6e9ee;border-radius:6px}
@media(max-width:980px){.container{grid-template-columns:1fr;}.left textarea{height:380px}.right iframe{height:520px}}
</style>
</head>
<body>
<header>
<h1>Previewer — Final Homepage</h1>
<div>
<strong style="color:#4a5b6a">Tip:</strong> Edit code on left, then click <strong>Preview</strong>.
</div>
</header>
<div class="container">
<div class="left">
<div class="controls">
<button id="previewBtn">Preview</button>
<button id="openBtn" class="secondary">Open in new tab</button>
<button id="downloadBtn" class="secondary">Download HTML</button>
</div>
<div style="font-size:13px;color:#4a5b6a;margin-bottom:8px">
The HTML below is the final merged homepage. You can edit it and press <b>Preview</b>.
</div>
<textarea id="code">
<!-- Paste the FINAL homepage HTML below (it’s already included). You can edit, then 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>
<main id="main">
<!-- HERO (inline SVG background so no external image dependency) -->
<section class="hero" role="region" aria-label="Hero">
<!-- Inline hero SVG (spa+ocean) -->
<svg class="hero-svg" viewBox="0 0 2480 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="skyg" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#F8EEF3"/><stop offset="45%" stop-color="#F4F6FA"/><stop offset="100%" stop-color="#F9F6F3"/></linearGradient>
<linearGradient id="seag" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#CFE8F5"/><stop offset="60%" stop-color="#DDEFF8"/><stop offset="100%" stop-color="#EEF6FB"/></linearGradient>
<linearGradient id="sandg" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#F3EDEA"/><stop offset="100%" stop-color="#F6F3F2"/></linearGradient>
<radialGradient id="rightL" cx="0.88" cy="0.30" r="0.28"><stop offset="0%" stop-color="rgba(255,255,255,0.12)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient>
</defs>
<rect width="2480" height="900" fill="url(#skyg)"/>
<g transform="translate(0,70)" opacity="0.95"><path d="M0,220 C180,160 360,200 620,210 C980,230 1300,200 1730,210 C2050,220 2380,200 2480,190 L2480,900 L0,900 Z" fill="#E6F2F8"/></g>
<rect x="0" y="320" width="2480" height="300" fill="url(#seag)"/>
<g opacity="0.65" transform="translate(0,340)"><path d="M0,60 C220,20 480,70 820,80 C1200,92 1600,48 2040,68 C2340,82 2480,60 2480,60 L2480,140 L0,140 Z" fill="#F1F6F9"/><path d="M0,100 C260,60 520,120 860,130 C1220,146 1660,100 2100,122 C2360,136 2480,120 2480,120 L2480,220 L0,220 Z" fill="#EEF6FB"/></g>
<rect x="0" y="620" width="2480" height="280" fill="url(#sandg)"/>
<!-- spa vignette right -->
<g transform="translate(1820,210)" aria-hidden="true">
<rect x="-40" y="300" width="700" height="34" rx="6" fill="#F6F4F3" opacity="0.95"/>
<g transform="translate(380,150) rotate(-6)"><ellipse cx="68" cy="36" rx="88" ry="26" fill="#FFFFFF"/><rect x="-20" y="10" width="176" height="52" rx="26" fill="#FFFFFF" opacity="0.96"/><ellipse cx="68" cy="62" rx="52" ry="16" fill="#F3F6F7" opacity="0.56"/></g>
<g transform="translate(480,60)"><ellipse cx="60" cy="210" rx="76" ry="20" fill="#F1F4F6" opacity="0.92"/><ellipse cx="60" cy="190" rx="56" ry="18" fill="#FFFFFF" opacity="0.98"/><path d="M18,190 C18,130 48,60 60,60 C72,60 102,130 102,190 L102,220 C102,220 18,220 18,190 Z" fill="#FBFCFD" stroke="rgba(160,170,180,0.06)"/><path d="M86,78 C74,76 62,78 54,92" stroke="rgba(255,255,255,0.7)" stroke-width="3" fill="none" opacity="0.6"/></g>
<g transform="translate(480,20)" fill="#fff"><path d="M60,92 C58,70 56,40 64,20" stroke="#DDE9ED" stroke-width="3" fill="none" opacity="0.88"/><g transform="translate(20,-6)"><ellipse cx="30" cy="28" rx="22" ry="14"/><ellipse cx="56" cy="22" rx="18" ry="12" transform="rotate(-12 56 22)"/><ellipse cx="12" cy="18" rx="16" ry="10" transform="rotate(10 12 18)"/><circle cx="34" cy="24" r="4" fill="#F5E8E8" opacity="0.92"/></g><g transform="translate(86,28)"><ellipse cx="16" cy="8" rx="20" ry="12"/><ellipse cx="40" cy="4" rx="16" ry="10"/></g></g>
<g transform="translate(600,210)"><rect x="-4" y="-8" width="60" height="70" rx="10" fill="#fff" opacity="0.9"/><rect x="0" y="4" width="48" height="48" rx="8" fill="#F7F6F5" opacity="0.95"/><circle cx="24" cy="28" r="6" fill="#F4E9E0"/></g>
<ellipse cx="300" cy="360" rx="220" ry="32" fill="rgba(16,20,24,0.06)"/>
</g>
<rect x="0" y="0" width="2480" height="900" fill="url(#rightL)" opacity="0.85"/>
</svg>
<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>
<!-- Three Feature Blocks -->
<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>
<!-- Condensed Supporting (merged Healing + Why Choose) -->
<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 -->
<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>
</textarea>
<div class="note">প্রিভিউ করতে কোড এডিট করে <strong>Preview</strong> চাপুন — তারপর পেজ নিচে রেন্ডার হবে।</div>
</div>
<div class="right">
<div style="margin-bottom:8px">
<strong>Rendered Preview</strong>
</div>
<iframe id="previewFrame" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
</div>
</div>
<script>
const previewBtn = document.getElementById('previewBtn');
const openBtn = document.getElementById('openBtn');
const downloadBtn = document.getElementById('downloadBtn');
const codeEl = document.getElementById('code');
const frame = document.getElementById('previewFrame');
function doPreview(){
const html = codeEl.value;
frame.srcdoc = html;
// Scroll into view
frame.scrollIntoView({behavior:'smooth'});
}
previewBtn.addEventListener('click', doPreview);
// Initial preview on load
window.addEventListener('load', () => {
doPreview();
});
openBtn.addEventListener('click', () => {
const html = codeEl.value;
const blob = new Blob([html], {type: 'text/html'});
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
// release after a while
setTimeout(()=> URL.revokeObjectURL(url), 20000);
});
downloadBtn.addEventListener('click', () => {
const html = codeEl.value;
const blob = new Blob([html], {type: 'text/html'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'final_homepage.html';
document.body.appendChild(a);
a.click();
a.remove();
setTimeout(()=> URL.revokeObjectURL(url), 20000);
});
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
8
Requests
4
Domains
259KB
Transfer Size
270KB
Content Size
174.0ms
Dom Content Loaded
296.0ms
First Paint
176.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...