|
|
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400&display=swap'); |
| |
| *{margin:0;padding:0;box-sizing:border-box} |
| body{font-family:'DM Sans',sans-serif;background:#0E0B09;color:#F5EEE6;overflow-x:hidden} |
| |
| ::-webkit-scrollbar{width:3px} |
| ::-webkit-scrollbar-track{background:#1A1410} |
| ::-webkit-scrollbar-thumb{background:#B8926A} |
| |
| |
| .nav{position:fixed;top:0;left:0;right:0;z-index:99;display:flex;align-items:center;justify-content:space-between;padding:20px 56px;background:rgba(14,11,9,0.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(184,146,106,0.15)} |
| .logo{font-family:'Playfair Display',serif;font-size:22px;letter-spacing:6px;color:#F5EEE6} |
| .logo b{color:#B8926A;font-weight:400} |
| .nav-links{display:flex;gap:32px;list-style:none} |
| .nav-links a{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#9E8E7E;text-decoration:none;transition:color .25s} |
| .nav-links a:hover{color:#D4B896} |
| .nav-btn{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#0E0B09;background:#B8926A;border:none;padding:11px 26px;cursor:pointer;transition:background .25s} |
| .nav-btn:hover{background:#D4B896} |
| |
| |
| .hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding-top:80px} |
| .hero-l{padding:80px 56px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#1A1008 0%,#0E0B09 100%);position:relative;overflow:hidden} |
| .hero-l::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(184,146,106,0.07) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none} |
| .tag-line{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#B8926A;margin-bottom:32px} |
| .tag-line::before{content:'';display:block;width:32px;height:1px;background:#B8926A} |
| .hero-h{font-family:'Playfair Display',serif;font-size:clamp(48px,5.5vw,80px);font-weight:400;line-height:1.08;color:#F5EEE6;margin-bottom:28px} |
| .hero-h em{font-style:italic;color:#B8926A} |
| .hero-p{font-size:13px;font-weight:300;line-height:1.9;color:#7A6E63;max-width:380px;margin-bottom:48px;letter-spacing:.4px} |
| .hero-actions{display:flex;gap:20px;align-items:center} |
| .btn-gold{background:#B8926A;color:#0E0B09;border:none;padding:14px 36px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3.5px;text-transform:uppercase;cursor:pointer;transition:all .25s} |
| .btn-gold:hover{background:#D4B896} |
| .btn-ghost{background:transparent;color:#9E8E7E;border:1px solid rgba(184,146,106,0.35);padding:14px 32px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .25s} |
| .btn-ghost:hover{border-color:#B8926A;color:#D4B896} |
| |
| .hero-r{display:flex;align-items:center;justify-content:center;background:#120F0A;position:relative;overflow:hidden} |
| .hero-r::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(184,146,106,0.06) 0%,transparent 65%)} |
| .showcase-wrap{position:relative;animation:float 5s ease-in-out infinite} |
| .showcase-card{width:280px;height:380px;background:#1C1610;border:1px solid rgba(184,146,106,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative} |
| .showcase-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#B8926A 50%,transparent)} |
| .sc-gem{font-size:88px;margin-bottom:16px;animation:pulse 3s ease-in-out infinite} |
| .sc-name{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:3px;color:#D4B896;margin-bottom:6px;text-transform:uppercase} |
| .sc-price{font-size:11px;letter-spacing:2px;color:#7A6E63} |
| .badge-new{position:absolute;top:20px;left:-12px;background:#B8926A;color:#0E0B09;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px} |
| .badge-new::before{content:'';position:absolute;left:0;bottom:-6px;border-top:6px solid #7A5C3A;border-left:6px solid transparent} |
| .float-stat{position:absolute;bottom:-24px;right:-32px;background:#1C1610;border:1px solid rgba(184,146,106,0.25);padding:16px 20px;text-align:center} |
| .stat-num{font-family:'Playfair Display',serif;font-size:24px;color:#B8926A} |
| .stat-lab{font-size:9px;letter-spacing:2px;color:#7A6E63;text-transform:uppercase;margin-top:2px} |
| |
| |
| .ticker{background:#B8926A;padding:13px 0;overflow:hidden} |
| .ticker-track{display:flex;gap:0;animation:ticker 20s linear infinite;white-space:nowrap} |
| .tick-item{display:flex;align-items:center;gap:0;flex-shrink:0} |
| .tick-text{font-size:11px;letter-spacing:3.5px;text-transform:uppercase;color:#0E0B09;padding:0 36px} |
| .tick-dot{color:#0E0B09;font-size:6px;opacity:.6} |
| |
| |
| .section{padding:100px 56px} |
| .section-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px} |
| .sec-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#B8926A;margin-bottom:14px} |
| .sec-h{font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,52px);font-weight:400;line-height:1.1;color:#F5EEE6} |
| .sec-h em{font-style:italic;color:#9E8E7E} |
| .link-btn{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#7A6E63;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:color .25s;border-bottom:1px solid transparent;padding-bottom:2px} |
| .link-btn:hover{color:#B8926A;border-bottom-color:#B8926A} |
| |
| .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} |
| .pcard{cursor:pointer;position:relative;overflow:hidden} |
| .pcard-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:76px;position:relative;overflow:hidden;transition:all .5s} |
| .pcard:hover .pcard-img{filter:brightness(1.1)} |
| .pcard-img-inner{transition:transform .6s cubic-bezier(.25,.46,.45,.94)} |
| .pcard:hover .pcard-img-inner{transform:scale(1.08)} |
| .g1{background:#1A1208} |
| .g2{background:#151510} |
| .g3{background:#0E1218} |
| .g4{background:#1A1410} |
| .pcard-over{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(14,11,9,.85));padding:24px 20px 20px;transform:translateY(6px);transition:transform .4s} |
| .pcard:hover .pcard-over{transform:translateY(0)} |
| .pcard-cat{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#B8926A;margin-bottom:6px} |
| .pcard-name{font-family:'Playfair Display',serif;font-size:16px;color:#F5EEE6;margin-bottom:10px} |
| .pcard-price{font-size:12px;color:#9E8E7E} |
| .pbadge{position:absolute;top:16px;left:16px;background:#B8926A;color:#0E0B09;font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px} |
| .pwish{position:absolute;top:14px;right:14px;width:34px;height:34px;background:rgba(14,11,9,.65);border:1px solid rgba(184,146,106,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:#B8926A;opacity:0;transition:opacity .3s} |
| .pcard:hover .pwish{opacity:1} |
| .pcard-info{padding:18px 0 4px} |
| |
| |
| .feature{display:grid;grid-template-columns:1fr 1fr;margin:0 56px 100px;background:#120F0A;border:1px solid rgba(184,146,106,.12)} |
| .feat-l{padding:72px 60px;display:flex;flex-direction:column;justify-content:center} |
| .feat-r{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:40px;align-items:center} |
| .gem-tile{background:#1A1610;padding:32px 20px;text-align:center;border:1px solid rgba(184,146,106,.1);transition:border-color .3s,transform .3s;cursor:pointer} |
| .gem-tile:hover{border-color:rgba(184,146,106,.4);transform:translateY(-3px)} |
| .gem-ico{font-size:36px;margin-bottom:12px} |
| .gem-nm{font-family:'Playfair Display',serif;font-size:15px;color:#D4B896;margin-bottom:4px} |
| .gem-sub{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:#7A6E63} |
| |
| |
| .perks{display:grid;grid-template-columns:repeat(4,1fr);background:#120F0A;border-top:1px solid rgba(184,146,106,.12);border-bottom:1px solid rgba(184,146,106,.12)} |
| .perk{padding:48px 36px;text-align:center;position:relative} |
| .perk+.perk::before{content:'';position:absolute;left:0;top:30%;bottom:30%;width:1px;background:rgba(184,146,106,.12)} |
| .perk-ico{font-size:28px;margin-bottom:18px;opacity:.85} |
| .perk-title{font-family:'Playfair Display',serif;font-size:16px;color:#D4B896;margin-bottom:8px} |
| .perk-desc{font-size:12px;font-weight:300;color:#5A504A;line-height:1.75;letter-spacing:.3px} |
| |
| |
| .quote-sec{padding:100px 56px;text-align:center;position:relative;overflow:hidden;background:#0E0B09} |
| .quote-bg{position:absolute;top:-60px;left:50%;transform:translateX(-50%);font-family:'Playfair Display',serif;font-size:320px;color:rgba(184,146,106,.04);line-height:1;pointer-events:none;user-select:none} |
| .quote-text{font-family:'Playfair Display',serif;font-size:clamp(20px,2.5vw,34px);font-style:italic;font-weight:400;color:#D4B896;max-width:780px;margin:0 auto 36px;line-height:1.55;position:relative;z-index:1} |
| .quote-stars{color:#B8926A;font-size:13px;letter-spacing:4px;margin-bottom:14px;position:relative;z-index:1} |
| .quote-author{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#5A504A;position:relative;z-index:1} |
| |
| |
| .newsletter{background:#1C1610;padding:72px 56px;display:flex;align-items:center;justify-content:space-between;gap:60px;border-top:1px solid rgba(184,146,106,.12)} |
| .nl-text{} |
| .nl-title{font-family:'Playfair Display',serif;font-size:32px;color:#F5EEE6;margin-bottom:10px} |
| .nl-sub{font-size:13px;font-weight:300;color:#7A6E63;letter-spacing:.3px} |
| .nl-form{display:flex;gap:0;flex-shrink:0} |
| .nl-input{background:#0E0B09;border:1px solid rgba(184,146,106,.25);border-right:none;padding:14px 22px;font-family:'DM Sans',sans-serif;font-size:12px;color:#F5EEE6;width:280px;outline:none} |
| .nl-input::placeholder{color:#5A504A} |
| .nl-input:focus{border-color:#B8926A} |
| .nl-sub-btn{background:#B8926A;color:#0E0B09;border:none;padding:14px 28px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .25s} |
| .nl-sub-btn:hover{background:#D4B896} |
| |
| |
| footer{background:#080604;padding:72px 56px 32px;border-top:1px solid rgba(184,146,106,.1)} |
| .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px} |
| .foot-logo{font-family:'Playfair Display',serif;font-size:24px;letter-spacing:5px;color:#F5EEE6;margin-bottom:18px} |
| .foot-logo b{color:#B8926A;font-weight:400} |
| .foot-desc{font-size:12px;font-weight:300;line-height:1.85;color:#4A4038;max-width:240px;margin-bottom:28px} |
| .socials{display:flex;gap:12px} |
| .soc{width:34px;height:34px;border:1px solid rgba(184,146,106,.25);display:flex;align-items:center;justify-content:center;font-size:11px;color:#B8926A;cursor:pointer;transition:all .25s;font-family:'DM Sans',sans-serif;font-weight:300} |
| .soc:hover{background:#B8926A;color:#0E0B09;border-color:#B8926A} |
| .foot-col h4{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:#B8926A;margin-bottom:22px;font-weight:300} |
| .foot-col ul{list-style:none} |
| .foot-col li{margin-bottom:13px} |
| .foot-col a{font-size:12px;font-weight:300;color:#4A4038;text-decoration:none;transition:color .25s;letter-spacing:.4px} |
| .foot-col a:hover{color:#D4B896} |
| .foot-bottom{border-top:1px solid rgba(184,146,106,.08);padding-top:28px;display:flex;justify-content:space-between;align-items:center} |
| .foot-copy{font-size:11px;color:#2E2820;letter-spacing:.5px} |
| .foot-gold{color:#B8926A} |
| |
| |
| @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.82}} |
| @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} |
| @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} |
| |
| .hero-l>*{animation:fadeUp .8s ease forwards;opacity:0} |
| .tag-line{animation-delay:.15s} |
| .hero-h{animation-delay:.3s} |
| .hero-p{animation-delay:.45s} |
| .hero-actions{animation-delay:.6s} |
| </style> |
|
|
| <nav class="nav"> |
| <div class="logo">AUR<b>U</b>M</div> |
| <ul class="nav-links"> |
| <li><a href="#">Collections</a></li> |
| <li><a href="#">Rings</a></li> |
| <li><a href="#">Necklaces</a></li> |
| <li><a href="#">Bespoke</a></li> |
| <li><a href="#">About</a></li> |
| </ul> |
| <button class="nav-btn">Visit Boutique</button> |
| </nav> |
|
|
| <section class="hero"> |
| <div class="hero-l"> |
| <div class="tag-line">New Season — SS 2026</div> |
| <h1 class="hero-h">Where Gold<br>Meets <em>Soul</em></h1> |
| <p class="hero-p">Heirloom quality jewellery, handcrafted by master artisans. Each piece carries a whisper of the earth and the warmth of human hands.</p> |
| <div class="hero-actions"> |
| <button class="btn-gold">Explore Now</button> |
| <button class="btn-ghost">Book Consultation</button> |
| </div> |
| </div> |
| <div class="hero-r"> |
| <div class="showcase-wrap"> |
| <div class="showcase-card"> |
| <div class="badge-new">New Arrival</div> |
| <div class="sc-gem">💍</div> |
| <div class="sc-name">Aurum Ring</div> |
| <div class="sc-price">from PKR 95,000</div> |
| </div> |
| <div class="float-stat"> |
| <div class="stat-num">1,400+</div> |
| <div class="stat-lab">Pieces Crafted</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="ticker"> |
| <div class="ticker-track"> |
| <div class="tick-item"><span class="tick-text">Fine Jewellery</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">18K Gold</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Handcrafted in Pakistan</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Certified Gemstones</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Bespoke Design</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Ethically Sourced</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Fine Jewellery</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">18K Gold</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Handcrafted in Pakistan</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Certified Gemstones</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Bespoke Design</span><span class="tick-dot">◆</span></div> |
| <div class="tick-item"><span class="tick-text">Ethically Sourced</span><span class="tick-dot">◆</span></div> |
| </div> |
| </div> |
|
|
| <section class="section" style="background:#0E0B09"> |
| <div class="section-top"> |
| <div> |
| <div class="sec-label">Featured Pieces</div> |
| <h2 class="sec-h">Our <em>Finest</em><br>Collections</h2> |
| </div> |
| <button class="link-btn">View All Pieces →</button> |
| </div> |
| <div class="grid4"> |
| <div class="pcard"> |
| <div class="pcard-img g1"> |
| <div class="pcard-img-inner">💍</div> |
| <div class="pbadge">Bestseller</div> |
| <div class="pwish">♡</div> |
| <div class="pcard-over"> |
| <div class="pcard-cat">Rings</div> |
| <div class="pcard-name">Rose Diamond Solitaire</div> |
| <div class="pcard-price">PKR 1,20,000</div> |
| </div> |
| </div> |
| </div> |
| <div class="pcard"> |
| <div class="pcard-img g2"> |
| <div class="pcard-img-inner">📿</div> |
| <div class="pwish">♡</div> |
| <div class="pcard-over"> |
| <div class="pcard-cat">Necklaces</div> |
| <div class="pcard-name">Pearl Lumière Strand</div> |
| <div class="pcard-price">PKR 88,000</div> |
| </div> |
| </div> |
| </div> |
| <div class="pcard"> |
| <div class="pcard-img g3"> |
| <div class="pcard-img-inner">✨</div> |
| <div class="pbadge">New</div> |
| <div class="pwish">♡</div> |
| <div class="pcard-over"> |
| <div class="pcard-cat">Earrings</div> |
| <div class="pcard-name">Celestial Drop Earrings</div> |
| <div class="pcard-price">PKR 64,000</div> |
| </div> |
| </div> |
| </div> |
| <div class="pcard"> |
| <div class="pcard-img g4"> |
| <div class="pcard-img-inner">💎</div> |
| <div class="pwish">♡</div> |
| <div class="pcard-over"> |
| <div class="pcard-cat">Bracelets</div> |
| <div class="pcard-name">Sapphire Tennis Bangle</div> |
| <div class="pcard-price">PKR 1,05,000</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="feature"> |
| <div class="feat-l"> |
| <div class="sec-label">Bespoke Studio</div> |
| <h2 class="sec-h" style="margin-bottom:20px">Your Story,<br><em>Your Stone</em></h2> |
| <p style="font-size:13px;font-weight:300;line-height:1.9;color:#5A504A;margin-bottom:40px;max-width:380px;letter-spacing:.4px">Work with our master craftsmen to design a piece that is entirely yours — from selecting the stone to shaping the setting.</p> |
| <button class="btn-gold" style="align-self:flex-start">Start Designing</button> |
| </div> |
| <div class="feat-r"> |
| <div class="gem-tile"><div class="gem-ico">💎</div><div class="gem-nm">Diamond</div><div class="gem-sub">Eternal</div></div> |
| <div class="gem-tile"><div class="gem-ico">🔴</div><div class="gem-nm">Ruby</div><div class="gem-sub">Passion</div></div> |
| <div class="gem-tile"><div class="gem-ico">💚</div><div class="gem-nm">Emerald</div><div class="gem-sub">Harmony</div></div> |
| <div class="gem-tile"><div class="gem-ico">💙</div><div class="gem-nm">Sapphire</div><div class="gem-sub">Loyalty</div></div> |
| </div> |
| </div> |
|
|
| <div class="perks" style="margin-bottom:0"> |
| <div class="perk"><div class="perk-ico">🚚</div><div class="perk-title">Free Delivery</div><div class="perk-desc">Insured shipping across Pakistan on all orders above PKR 5,000</div></div> |
| <div class="perk"><div class="perk-ico">⭐</div><div class="perk-title">Certified Gems</div><div class="perk-desc">Every stone is internationally certified and authenticity guaranteed</div></div> |
| <div class="perk"><div class="perk-ico">🔄</div><div class="perk-title">30-Day Returns</div><div class="perk-desc">Return any piece within 30 days, no questions asked</div></div> |
| <div class="perk"><div class="perk-ico">💬</div><div class="perk-title">Private Stylist</div><div class="perk-desc">Book a one-on-one consultation — in boutique or virtual</div></div> |
| </div> |
|
|
| <div class="quote-sec"> |
| <div class="quote-bg">"</div> |
| <div class="quote-stars">★ ★ ★ ★ ★</div> |
| <p class="quote-text">"I wore Aurum on my nikah and every woman in the room asked where it was from. It felt like wearing a piece of history."</p> |
| <div class="quote-author">— Fatima Rehman, Lahore</div> |
| </div> |
|
|
| <div class="newsletter"> |
| <div class="nl-text"> |
| <div class="nl-title">Join the Inner Circle</div> |
| <div class="nl-sub">Early access to new collections, private events, and exclusive offers.</div> |
| </div> |
| <div class="nl-form"> |
| <input class="nl-input" type="email" placeholder="Your email address" /> |
| <button class="nl-sub-btn">Subscribe</button> |
| </div> |
| </div> |
|
|
| <footer> |
| <div class="footer-grid"> |
| <div> |
| <div class="foot-logo">AUR<b>U</b>M</div> |
| <div class="foot-desc">Fine jewellery crafted with passion since 1998. Every piece is a lifelong companion.</div> |
| <div class="socials"> |
| <div class="soc">IG</div> |
| <div class="soc">FB</div> |
| <div class="soc">YT</div> |
| <div class="soc">TT</div> |
| </div> |
| </div> |
| <div class="foot-col"><h4>Collections</h4><ul><li><a href="#">Rings</a></li><li><a href="#">Necklaces</a></li><li><a href="#">Earrings</a></li><li><a href="#">Bracelets</a></li><li><a href="#">Wedding Sets</a></li></ul></div> |
| <div class="foot-col"><h4>Services</h4><ul><li><a href="#">Bespoke Design</a></li><li><a href="#">Engraving</a></li><li><a href="#">Resizing</a></li><li><a href="#">Polishing</a></li><li><a href="#">Consultation</a></li></ul></div> |
| <div class="foot-col"><h4>Help</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Size Guide</a></li><li><a href="#">Care Guide</a></li><li><a href="#">Returns</a></li><li><a href="#">FAQs</a></li></ul></div> |
| </div> |
| <div class="foot-bottom"> |
| <span class="foot-copy">© 2026 Aurum Fine Jewellery. All rights reserved.</span> |
| <span class="foot-copy">Crafted with <span class="foot-gold">♥</span> in Lahore, Pakistan</span> |
| </div> |
| </footer> |
|
|
