Elementor #7621

<!DOCTYPE html>

<head>

<title>CasaNova — Premium Crockery & Home Decor</title>

<!– SEO Meta Tags –>

<style>

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

–cream: #FAF7F2;

–warm: #F5EFE6;

–brown: #8B6F4E;

–dark: #2C1F14;

–gold: #C9A84C;

–gold-light: #E8D5A3;

–terra: #C4785A;

–sage: #7A8C6E;

–text: #3D2B1F;

–muted: #9B8878;

}

body {

background: var(–cream);

font-family: ‘Jost’, sans-serif;

color: var(–text);

overflow-x: hidden;

}

/* ═══════════════════════════

LOGO SECTION

═══════════════════════════ */

.logo-showcase {

background: var(–dark);

padding: 60px 40px;

text-align: center;

}

.logo-showcase h2 {

font-family: ‘Jost’, sans-serif;

font-size: 0.7rem;

letter-spacing: 0.3em;

text-transform: uppercase;

color: var(–gold);

margin-bottom: 40px;

}

.logo-wrap {

display: inline-flex;

flex-direction: column;

align-items: center;

gap: 6px;

}

.logo-icon {

position: relative;

width: 64px;

height: 64px;

margin-bottom: 8px;

}

.logo-icon svg {

width: 100%;

height: 100%;

}

.logo-name {

font-family: ‘Cormorant Garamond’, serif;

font-size: 2.8rem;

font-weight: 600;

letter-spacing: 0.12em;

color: var(–cream);

line-height: 1;

}

.logo-name span {

color: var(–gold);

}

.logo-tagline {

font-family: ‘Jost’, sans-serif;

font-size: 0.65rem;

letter-spacing: 0.35em;

text-transform: uppercase;

color: var(–muted);

margin-top: 4px;

}

.logo-divider {

width: 60px;

height: 1px;

background: linear-gradient(to right, transparent, var(–gold), transparent);

margin: 8px auto 0;

}

/* Logo on light */

.logo-light {

display: inline-flex;

flex-direction: column;

align-items: center;

gap: 4px;

margin-top: 40px;

padding: 30px 40px;

background: var(–cream);

border-radius: 4px;

}

.logo-light .logo-name { color: var(–dark); }

.logo-light .logo-tagline { color: var(–muted); }

.logo-light .logo-divider { background: linear-gradient(to right, transparent, var(–brown), transparent); }

/* ═══════════════════════════

HERO BANNER

═══════════════════════════ */

.hero {

min-height: 100vh;

display: grid;

grid-template-columns: 1fr 1fr;

position: relative;

overflow: hidden;

}

/* Left Panel */

.hero-left {

background: var(–dark);

display: flex;

flex-direction: column;

justify-content: center;

padding: 80px 60px 80px 80px;

position: relative;

overflow: hidden;

z-index: 2;

}

.hero-left::before {

content: ”;

position: absolute;

top: -200px;

left: -200px;

width: 500px;

height: 500px;

border-radius: 50%;

background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);

pointer-events: none;

}

.hero-left::after {

content: ”;

position: absolute;

bottom: -100px;

right: -100px;

width: 300px;

height: 300px;

border-radius: 50%;

background: radial-gradient(circle, rgba(196,120,90,0.1) 0%, transparent 70%);

pointer-events: none;

}

.hero-badge {

display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 2rem;

animation: fadeUp 0.8s ease both;

}

.badge-line {

width: 30px;

height: 1px;

background: var(–gold);

}

.badge-text {

font-size: 0.7rem;

letter-spacing: 0.3em;

text-transform: uppercase;

color: var(–gold);

font-weight: 500;

}

.hero-title {

font-family: ‘Cormorant Garamond’, serif;

font-size: clamp(2.8rem, 4.5vw, 5rem);

font-weight: 600;

line-height: 1.05;

color: var(–cream);

margin-bottom: 1.5rem;

animation: fadeUp 0.8s 0.1s ease both;

}

.hero-title em {

font-style: italic;

color: var(–gold);

}

.hero-title .accent-word {

position: relative;

display: inline-block;

}

.hero-title .accent-word::after {

content: ”;

position: absolute;

bottom: 2px;

left: 0;

right: 0;

height: 2px;

background: var(–terra);

transform: scaleX(0);

transform-origin: left;

animation: lineReveal 0.8s 0.9s ease forwards;

}

.hero-desc {

font-size: 0.95rem;

line-height: 1.8;

color: rgba(250,247,242,0.6);

max-width: 360px;

margin-bottom: 2.5rem;

font-weight: 300;

animation: fadeUp 0.8s 0.2s ease both;

}

.hero-actions {

display: flex;

gap: 1rem;

align-items: center;

margin-bottom: 3rem;

animation: fadeUp 0.8s 0.3s ease both;

}

.btn-gold {

background: var(–gold);

color: var(–dark);

padding: 14px 32px;

font-size: 0.8rem;

font-weight: 600;

letter-spacing: 0.15em;

text-transform: uppercase;

text-decoration: none;

display: inline-block;

transition: all 0.3s;

position: relative;

overflow: hidden;

}

.btn-gold::before {

content: ”;

position: absolute;

inset: 0;

background: var(–dark);

transform: translateX(-100%);

transition: transform 0.3s;

}

.btn-gold:hover::before { transform: translateX(0); }

.btn-gold span { position: relative; z-index: 1; }

.btn-gold:hover span { color: var(–gold); }

.btn-outline {

background: transparent;

color: var(–cream);

padding: 14px 32px;

font-size: 0.8rem;

font-weight: 500;

letter-spacing: 0.15em;

text-transform: uppercase;

text-decoration: none;

border: 1px solid rgba(250,247,242,0.2);

transition: all 0.3s;

}

.btn-outline:hover {

border-color: var(–gold);

color: var(–gold);

}

.hero-stats {

display: flex;

gap: 2.5rem;

padding-top: 2.5rem;

border-top: 1px solid rgba(255,255,255,0.07);

animation: fadeUp 0.8s 0.4s ease both;

}

.stat-num {

font-family: ‘Cormorant Garamond’, serif;

font-size: 2rem;

font-weight: 700;

color: var(–cream);

line-height: 1;

}

.stat-num span { color: var(–gold); font-size: 1.2rem; }

.stat-label { font-size: 0.7rem; color: var(–muted); margin-top: 4px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Right Panel */

.hero-right {

position: relative;

overflow: hidden;

background: var(–warm);

}

.hero-right::before {

content: ”;

position: absolute;

inset: 0;

background: linear-gradient(135deg, var(–warm) 0%, #EDE0D0 100%);

z-index: 0;

}

/* Decorative circles */

.deco-circle {

position: absolute;

border-radius: 50%;

pointer-events: none;

}

.dc-1 {

width: 400px; height: 400px;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

border: 1px solid rgba(139,111,78,0.15);

animation: rotateSlow 20s linear infinite;

}

.dc-2 {

width: 300px; height: 300px;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

border: 1px solid rgba(201,168,76,0.2);

animation: rotateSlow 15s linear infinite reverse;

}

.dc-3 {

width: 500px; height: 500px;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

border: 1px dashed rgba(139,111,78,0.08);

}

@keyframes rotateSlow {

from { transform: translate(-50%, -50%) rotate(0deg); }

to { transform: translate(-50%, -50%) rotate(360deg); }

}

/* Product Visual */

.product-visual {

position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

z-index: 2;

}

.plate-stack {

position: relative;

width: 280px;

height: 280px;

animation: floatUp 4s ease-in-out infinite;

}

@keyframes floatUp {

0%, 100% { transform: translateY(0px); }

50% { transform: translateY(-15px); }

}

/* SVG Crockery Illustration */

.plate-svg { width: 100%; height: 100%; }

/* Floating Tags */

.float-tag {

position: absolute;

background: white;

border-radius: 12px;

padding: 12px 16px;

box-shadow: 0 10px 40px rgba(44,31,20,0.12);

z-index: 3;

animation: fadeIn 1s ease both;

}

.ft-1 {

top: 15%;

right: 5%;

animation-delay: 0.8s;

}

.ft-2 {

bottom: 20%;

left: 5%;

animation-delay: 1s;

}

.float-tag .tag-icon { font-size: 1.4rem; margin-bottom: 4px; }

.float-tag .tag-text { font-size: 0.75rem; font-weight: 600; color: var(–dark); }

.float-tag .tag-sub { font-size: 0.65rem; color: var(–muted); margin-top: 2px; }

/* Offer Tag */

.offer-tag {

position: absolute;

top: 8%;

left: 8%;

z-index: 3;

animation: fadeIn 1s 0.5s ease both;

}

.offer-inner {

background: var(–terra);

color: white;

border-radius: 50%;

width: 80px;

height: 80px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-family: ‘Cormorant Garamond’, serif;

box-shadow: 0 8px 30px rgba(196,120,90,0.4);

animation: pulseSlow 3s ease-in-out infinite;

}

@keyframes pulseSlow {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.05); }

}

.offer-inner .off-pct { font-size: 1.4rem; font-weight: 700; line-height: 1; }

.offer-inner .off-txt { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: ‘Jost’, sans-serif; }

@keyframes fadeUp {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

@keyframes fadeIn {

from { opacity: 0; transform: scale(0.9); }

to { opacity: 1; transform: scale(1); }

}

@keyframes lineReveal {

to { transform: scaleX(1); }

}

/* ═══════════════════════════

CATEGORIES STRIP

═══════════════════════════ */

.categories {

background: white;

padding: 60px 80px;

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 2px;

}

.cat-card {

padding: 40px 30px;

text-align: center;

border: 1px solid rgba(139,111,78,0.1);

transition: all 0.3s;

cursor: pointer;

position: relative;

overflow: hidden;

}

.cat-card::before {

content: ”;

position: absolute;

bottom: 0; left: 0; right: 0;

height: 3px;

background: var(–gold);

transform: scaleX(0);

transition: transform 0.3s;

}

.cat-card:hover::before { transform: scaleX(1); }

.cat-card:hover { background: var(–warm); }

.cat-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }

.cat-name {

font-family: ‘Cormorant Garamond’, serif;

font-size: 1.2rem;

font-weight: 600;

color: var(–dark);

margin-bottom: 0.3rem;

}

.cat-count {

font-size: 0.75rem;

color: var(–muted);

letter-spacing: 0.1em;

}

/* ═══════════════════════════

ANNOUNCEMENT BAR

═══════════════════════════ */

.announcement {

background: var(–gold);

padding: 12px;

text-align: center;

font-size: 0.8rem;

font-weight: 500;

letter-spacing: 0.1em;

color: var(–dark);

}

.announcement span { margin: 0 20px; }

/* ═══════════════════════════

RESPONSIVE

═══════════════════════════ */

@media (max-width: 768px) {

.hero { grid-template-columns: 1fr; }

.hero-right { min-height: 400px; }

.hero-left { padding: 60px 30px; }

.categories { grid-template-columns: repeat(2, 1fr); padding: 40px 20px; }

.hero-stats { gap: 1.5rem; }

}

</style>

</head>

<body>

<!– ANNOUNCEMENT BAR –>

<span> Free Shipping on orders over ৳999</span>

<span> New Arrivals Every Week</span>

<span> Gift Wrapping Available</span>

</div>

<!– LOGO SHOWCASE –>

<h2>Your Brand Logo</h2>

<!– Dark Version –>

<!– Plate base –>

<!– Cup/Tea pot on top –>

<!– Steam –>

</svg>

</div>

<div class=”logo-tagline”>Premium Crockery & Home Decor</div>

</div>

<!– Light Version –>

</svg>

</div>

<div class=”logo-tagline”>Premium Crockery & Home Decor</div>

</div>

<!– HERO BANNER –>

<!– Left Content –>

<span class=”badge-text”>New Collection 2026</span>

</div>

<em>Elevate</em> Your<br>

Timeless Beauty

</h1>

Discover our curated collection of premium crockery, elegant dinnerware, and handpicked home décor — crafted to transform every corner of your home.

</p>

<a href=”/collections” class=”btn-outline”>View Collection</a>

</div>

<div>

<div class=”stat-label”>Products</div>

</div>

<div>

<div class=”stat-label”>Happy Customers</div>

</div>

<div>

<div class=”stat-label”>Rating</div>

</div>

<!– Right Visual –>

<!– Offer Badge –>

</div>

<!– Main Visual –>

<!– Shadow –>

<!– Bottom plate (large) –>

<!– Floral pattern center –>

<!– Middle plate –>

<!– Top plate (small) –>

<!– Tea Cup –>

<!– Cup inner –>

<!– Tea liquid –>

<!– Cup handle –>

<!– Cup base/saucer –>

<!– Steam lines –>

</path>

</path>

</path>

<!– Decorative flowers –>

</svg>

</div>

<!– Floating Tags –>

<div class=”tag-text”>Home Decor</div>

<div class=”tag-sub”>200+ Items</div>

</div>

<div class=”tag-text”>Crockery Sets</div>

<div class=”tag-sub”>Free Shipping</div>

</div>

</section>

<!– CATEGORY STRIP –>

<div class=”cat-name”>Dinner Sets</div>

<div class=”cat-count”>85 Products</div>

</div>

<div class=”cat-name”>Tea & Coffee</div>

<div class=”cat-count”>64 Products</div>

</div>

<div class=”cat-name”>Vases & Decor</div>

<div class=”cat-count”>120 Products</div>

</div>

<div class=”cat-name”>Candles & Lights</div>

<div class=”cat-count”>45 Products</div>

</div>

</section>

</body>

</html>

Quick Links

For Her

For Him

For Him

Available Coupons