- His Grooming

<!– HER SKIN LAB – Webpage Preview (HTML + CSS) –>
<section class=”hsl-wrap”>
<div class=”hsl-hero”>
<div class=”hsl-hero-inner”>
<p class=”hsl-kicker”>HER SKIN LAB by Sab · Women’s Advanced Skin Clinic</p>
<h1>Your Skin Tells a Story.</h1>
<p class=”hsl-sub”>
Advanced laser and clinical skin treatments for women in Claremont —
designed for real, measurable results.
</p>

<div class=”hsl-cta-row”>
<a class=”hsl-btn hsl-btn-primary” href=”#book”>Book Appointment</a>
<a class=”hsl-btn hsl-btn-ghost” href=”#treatments”>Explore Treatments</a>
</div>

<div class=”hsl-badges”>
<span>Appointment Only</span>
<span>Medical-Grade Technology</span>
<span>Claremont · Inside His Grooming</span>
</div>
</div>
</div>

<div class=”hsl-container”>
<div class=”hsl-grid”>
<div class=”hsl-card”>
<h2>Clinical Skin Treatments That Actually Work</h2>
<p>
Sun damage, pigmentation, acne scars and fine lines can change how you feel in your skin.
At HER SKIN LAB, we treat the root cause — not just the surface.
</p>
<ul class=”hsl-list”>
<li>Improves tone, texture and clarity</li>
<li>Targets pigmentation, redness and scarring</li>
<li>Supports collagen, firmness and long-term skin health</li>
</ul>
<p class=”hsl-note”>
No trends. No gimmicks. Just proven laser and clinical protocols tailored to you.
</p>
</div>

<div class=”hsl-card hsl-card-alt”>
<h3>Ideal for concerns like:</h3>
<div class=”hsl-pills”>
<span>Sun Damage</span>
<span>Pigmentation</span>
<span>Acne & Scarring</span>
<span>Fine Lines</span>
<span>Large Pores</span>
<span>Uneven Texture</span>
<span>Redness</span>
<span>Loss of Firmness</span>
</div>
<div class=”hsl-mini”>
<strong>Serving:</strong> Perth Western Suburbs · Claremont · Nedlands · Peppermint Grove · Cottesloe
</div>
</div>
</div>

<div id=”treatments” class=”hsl-section”>
<div class=”hsl-section-head”>
<h2>Treatments</h2>
<p>Precision treatments, tailored plans, visible improvements.</p>
</div>

<div class=”hsl-treatments”>
<article class=”hsl-tile”>
<h4>IPL Photo Rejuvenation</h4>
<p>Targets sun damage, redness and uneven tone using advanced IPL technology.</p>
</article>

<article class=”hsl-tile”>
<h4>Pigmentation & Sun Damage Correction</h4>
<p>Breaks down dark spots and discolouration for a clearer, more even complexion.</p>
</article>

<article class=”hsl-tile”>
<h4>Acne & Acne Scar Treatment</h4>
<p>Reduces active breakouts and improves texture to soften acne scarring.</p>
</article>

<article class=”hsl-tile”>
<h4>RF Skin Tightening (Face & Neck)</h4>
<p>Firms and lifts without surgery, with minimal to no downtime.</p>
</article>

<article class=”hsl-tile”>
<h4>RF Needling with Exosomes</h4>
<p>Microneedling + regenerative serums for deep renewal and visible skin refinement.</p>
<p class=”hsl-tag”>Advanced bookings required</p>
</article>

<article class=”hsl-tile”>
<h4>CO₂ Skin Resurfacing</h4>
<p>Resurfaces damaged skin layers and stimulates collagen for smoother, brighter skin.</p>
</article>

<article class=”hsl-tile”>
<h4>Carbon Peel Facial</h4>
<p>Deep cleans pores, reduces congestion and instantly brightens dull skin.</p>
</article>

<article class=”hsl-tile”>
<h4>Skin Tag & Scar Reduction</h4>
<p>Safely removes skin tags and improves the appearance of scars.</p>
</article>

<article class=”hsl-tile”>
<h4>Sonophoresis Infusion Facial</h4>
<p>Ultrasound-assisted delivery of actives for hydration, repair and glow.</p>
</article>

<article class=”hsl-tile”>
<h4>Tattoo Removal & Tattoo Erasing</h4>
<p>Laser precision to fade or remove unwanted ink, including stubborn pigment.</p>
</article>

<article class=”hsl-tile”>
<h4>Laser Hair Reduction</h4>
<p>Long-term hair reduction for smoother, low-maintenance skin.</p>
</article>
</div>
</div>

<div id=”book” class=”hsl-book”>
<div class=”hsl-book-inner”>
<div>
<h2>Create a Look That Fits Your Lifestyle</h2>
<p>
Your skin should match the life you’re building — confident, polished and healthy.
Book your consultation and we’ll design a treatment plan built around your goals.
</p>
<p class=”hsl-small”>
<strong>Location:</strong> Inside His Grooming, Claremont · <strong>By appointment only</strong>
</p>
</div>

<div class=”hsl-book-actions”>
<a class=”hsl-btn hsl-btn-primary” href=”https://www.hisgrooming.au/book”>Book Now</a>
<a class=”hsl-btn hsl-btn-ghost” href=”tel:”>Call Clinic</a>
<p class=”hsl-help”>Want a faster reply? Add a “Message Us” button linked to WhatsApp/Instagram.</p>
</div>
</div>
</div>

<footer class=”hsl-footer”>
<p>© HER SKIN LAB by Sab · Clinical Laser & Skin Treatments for Women · Claremont, WA</p>
</footer>
</div>
</section>

.hsl-wrap{background:var(–bg); color:var(–text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
.hsl-container{max-width:1100px; margin:0 auto; padding:44px 18px 64px;}
.hsl-hero{
background:
radial-gradient(900px 520px at 18% 25%, rgba(99,215,200,.18), transparent 60%),
radial-gradient(700px 420px at 80% 35%, rgba(255,180,76,.14), transparent 55%),
linear-gradient(180deg, #0b0f14 0%, #0a0e13 100%);
border-bottom:1px solid var(–line);
}
.hsl-hero-inner{max-width:1100px; margin:0 auto; padding:78px 18px 56px;}
.hsl-kicker{
letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(–muted);
margin:0 0 12px;
}
.hsl-hero h1{font-size:44px; line-height:1.1; margin:0 0 14px;}
.hsl-sub{max-width:720px; font-size:18px; line-height:1.6; color:var(–muted); margin:0 0 22px;}
.hsl-cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 18px;}
.hsl-btn{
display:inline-flex; align-items:center; justify-content:center;
padding:12px 16px; border-radius:999px; text-decoration:none;
border:1px solid var(–line); color:var(–text); font-weight:600;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.hsl-btn:hover{transform: translateY(-1px); border-color: rgba(234,240,247,.28);}
.hsl-btn-primary{background: linear-gradient(90deg, rgba(99,215,200,.92), rgba(255,180,76,.92)); color:#061016; border-color: transparent;}
.hsl-btn-ghost{background: rgba(255,255,255,.03);}
.hsl-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.hsl-badges span{
font-size:12px; color:var(–muted);
padding:8px 10px; border:1px solid var(–line);
border-radius:999px; background: rgba(255,255,255,.02);
}

.hsl-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px;}
.hsl-card{
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border:1px solid var(–line); border-radius: var(–radius); padding:22px;
box-shadow: var(–shadow);
}
.hsl-card h2{margin:0 0 10px; font-size:24px;}
.hsl-card h3{margin:0 0 14px; font-size:18px; color:var(–text);}
.hsl-card p{margin:10px 0; color:var(–muted); line-height:1.65;}
.hsl-list{margin:12px 0 10px; padding-left:18px; color:var(–muted);}
.hsl-list li{margin:8px 0;}
.hsl-note{border-left:3px solid rgba(99,215,200,.55); padding-left:12px; margin-top:14px;}
.hsl-card-alt{
background:
radial-gradient(420px 260px at 20% 10%, rgba(255,180,76,.12), transparent 65%),
radial-gradient(420px 260px at 80% 30%, rgba(99,215,200,.10), transparent 65%),
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.hsl-pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.hsl-pills span{
font-size:12px; padding:9px 10px; border-radius:999px;
border:1px solid var(–line); background: rgba(255,255,255,.02); color:var(–muted);
}
.hsl-mini{margin-top:16px; font-size:13px; color:var(–muted);}

.hsl-section{margin-top:28px;}
.hsl-section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px;}
.hsl-section-head h2{margin:0; font-size:26px;}
.hsl-section-head p{margin:0; color:var(–muted);}

.hsl-treatments{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.hsl-tile{
background: rgba(255,255,255,.02);
border:1px solid var(–line);
border-radius:18px;
padding:16px 16px 14px;
transition: transform .12s ease, border-color .12s ease;
}
.hsl-tile:hover{transform: translateY(-1px); border-color: rgba(234,240,247,.28);}
.hsl-tile h4{margin:0 0 8px; font-size:16px;}
.hsl-tile p{margin:0; color:var(–muted); line-height:1.55; font-size:14px;}
.hsl-tag{
margin-top:10px !important; display:inline-block; font-size:12px; color:#061016;
padding:7px 9px; border-radius:999px; background: rgba(255,180,76,.92);
}

.hsl-book{
margin-top:26px;
border-radius: var(–radius);
border:1px solid var(–line);
background:
linear-gradient(90deg, rgba(99,215,200,.10), rgba(255,180,76,.08)),
rgba(255,255,255,.02);
box-shadow: var(–shadow);
}
.hsl-book-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; padding:22px;}
.hsl-book h2{margin:0 0 10px; font-size:24px;}
.hsl-small{margin-top:12px; font-size:13px; color:var(–muted);}
.hsl-book-actions{display:flex; flex-direction:column; gap:10px; align-items:flex-start; justify-content:center;}
.hsl-help{margin:0; font-size:12px; color:var(–muted);}

.hsl-footer{margin-top:28px; padding-top:18px; border-top:1px solid var(–line); color:rgba(234,240,247,.55); font-size:12px;}

/* Responsive */
@media (max-width: 980px){
.hsl-grid{grid-template-columns:1fr;}
.hsl-treatments{grid-template-columns:repeat(2, 1fr);}
.hsl-hero h1{font-size:36px;}
}
@media (max-width: 620px){
.hsl-treatments{grid-template-columns:1fr;}
.hsl-book-inner{grid-template-columns:1fr;}
}
</style>

Create a unique look that fits your lifestyle