welcome to my online saree plateform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Saree Store — Header</title>
<style>
:root{
--yellow:#f7c948; /* main background */
--yellow-deep:#f0b429; /* accents/shadows */
--maroon:#7a2e2e; /* sari border color */
--text:#2b2b2b;
--white:#ffffff;
}
/* Reset-ish */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:#fff}
/* Header wrapper with sari border + paisley pattern */
.site-header{
position:relative;
overflow:hidden;
background:
/* paisley dots pattern (SVG as data-URI) */
radial-gradient(circle at 20px 20px, rgba(0,0,0,.05) 2px, transparent 3px) 0 0/48px 48px,
/* subtle diagonal lines */
repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 8px, rgba(255,255,255,.15) 8px 16px);
background-color:var(--yellow);
border-bottom:6px solid var(--maroon);
/* decorative sari pallu border using repeating gradient */
--stripe: repeating-linear-gradient(
to right,
var(--maroon) 0 10px,
#d47b7b 10px 14px,
var(--maroon) 14px 24px
);
}
/* Top utility ribbon (thin sari border) */
.site-header::before{
content:"";
position:absolute; inset:0 auto auto 0;
height:12px; width:100%;
background:var(--stripe);
opacity:.9;
}
/* Wavy bottom edge */
.site-header svg.wave{
position:absolute; left:0; bottom:-1px; width:100%; height:auto; display:block;
}
.container{
max-width:1100px; margin:0 auto; padding:72px 20px 64px; position:relative;
}
/* Top bar */
.topbar{
display:flex; align-items:center; gap:16px; justify-content:space-between;
margin-bottom:32px;
}
.brand{
display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}
.logo{
width:42px; height:42px; border-radius:50%;
background:conic-gradient(from 0deg, var(--maroon), #c94b4b, var(--maroon));
outline:3px solid rgba(255,255,255,.6);
box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.brand h1{
font-size:1.25rem; margin:0; letter-spacing:.5px; text-transform:uppercase;
}
nav ul{
list-style:none; padding:0; margin:0; display:flex; gap:16px; flex-wrap:wrap;
}
nav a{
text-decoration:none; color:var(--text); font-weight:600; padding:8px 12px; border-radius:999px;
}
nav a:hover{ background:rgba(255,255,255,.45) }
/* Hero */
.hero{
display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:center;
}
@media (max-width:800px){
.hero{ grid-template-columns:1fr }
}
.hero h2{
font-size:clamp(1.8rem, 3vw + 1rem, 3rem);
margin:0 0 10px; line-height:1.1;
}
.hero p{ margin:0 0 20px; font-size:1.05rem }
.cta{
display:flex; gap:12px; flex-wrap:wrap;
}
.btn{
appearance:none; border:0; border-radius:999px; padding:12px 18px;
font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn-primary{
background:linear-gradient(to bottom, var(--white), #ffe9a8);
color:#4a3b00; box-shadow:0 3px 0 rgba(0,0,0,.2);
}
.btn-outline{
background:transparent; color:#4a3b00; border:2px solid rgba(0,0,0,.2);
}
.trust{
margin-top:14px; font-size:.9rem; opacity:.9;
}
/* Illustration card with sari border */
.art{
position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
background:var(--yellow-deep);
box-shadow:0 10px 24px rgba(0,0,0,.2);
border:10px solid transparent;
background-clip:padding-box;
}
.art::before{
/* inner ornamental border */
content:""; position:absolute; inset:0;
border-radius:12px; padding:12px;
background:var(--stripe);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
/* Optional hero image slot (replace src with your image) */
.art img{
width:100%; height:100%; object-fit:cover; display:block;
filter:saturate(1.05) contrast(1.02);
}
/* Small paisley decals */
.paisley{
position:absolute; inset:auto 10% 12% auto; width:80px; opacity:.3;
transform:rotate(-10deg);
}
</style>
</head>
<body>
<header class="site-header" role="banner" aria-label="Saree Header">
<div class="container">
<!-- Top bar -->
<div class="topbar">
<a class="brand" href="#">
<span class="logo" aria-hidden="true"></span>
<h1>Saree Saaz</h1>
</a>
<nav aria-label="Primary">
<ul>
<li><a href="#new">New Arrivals</a></li>
<li><a href="#silk">Silk</a></li>
<li><a href="#banarasi">Banarasi</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- Hero -->
<section class="hero">
<div>
<h2>Timeless Sarees in a Fresh Palette</h2>
<p>Handpicked Kanjivarams, lively Bandhanis, and elegant organza—crafted to turn every moment into a celebration.</p>
<div class="cta">
<a class="btn btn-primary" href="#shop">Shop Sarees</a>
<a class="btn btn-outline" href="#collection">View Collection</a>
</div>
<p class="trust">Free shipping • Easy returns • COD available</p>
</div>
<figure class="art" aria-label="Saree illustration">
<!-- Tip: replace src with your image path (e.g., hero.jpg or the illustration you have) -->
<img src="hero-illustration.png" alt="Woman in traditional saree on yellow background" />
<!-- Paisley SVG decal -->
<svg class="paisley" viewBox="0 0 120 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M83 10c-34 1-64 31-69 64-6 39 26 60 56 62 28 2 46-15 39-40-6-20-30-24-43-12 12-23-3-43 17-60z"
fill="#7a2e2e"/>
</svg>
</figure>
</section>
</div>
<!-- Wave bottom edge -->
<svg class="wave" viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" aria-hidden="true">
<path d="M0,80 C240,140 480,20 720,60 C960,100 1200,20 1440,70 L1440,120 L0,120 Z" fill="#fff"/>
</svg>
</header>
<!-- Demo page content -->
<main class="container">
<p>Put the rest of your page content here.</p>
</main>
</body>
</html>
welcome to my online saree plateform