loveesha.com

.bg-primary, .bg-primary:hover,.bg-primary:focus, a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover, .badge-primary { background:#FFC300 !important; } .btn-primary, .btn-primary:hover { color: #fff; background-color: #FFC300 !important; border-color: #FFC300 !important; } .text-primary, .filters_col .distance span { color: #FFC300 !important; } .btn-outline-primary { color: #FFC300 !important; border-color: #FFC300 !important; } .btn-outline-primary:hover { background:none !important; } .text-primary a { color: #FFC300 !important; } [ppt-nav].active-underline > ul > li.active > a { border-bottom: 2px solid #FFC300!important; } .bg-secondary, .bg-secondary:hover, .bg-secondary:focus, a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover, .irs-bar { background-color:#000000 !important; } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { color: #fff; background-color: #000000 !important; border-color: #000000 !important; } .text-secondary { color: #000000 !important; } .text-secondary a { color: #000000 !important; } .btn-outline-secondary { color: #000000 !important; border-color: #000000 !important; } .btn-outline-secondary:hover { background:none !important; } .custom-control-input:checked~.custom-control-label::before, .filter_sortby a.active { color: #fff; border-color: #000000 !important; background-color: #000000 !important; } <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>लवेशा - डेटिंग वेबसाइट</title> /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } /* Header Container */ .header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: fixed; width: 100%; top: 0; z-index: 1000; } /* 1. ब्रांडिंग सेक्शन */ .branding { display: flex; align-items: center; gap: 10px; } .logo { font-size: 1.8rem; font-weight: bold; background: linear-gradient(45deg, #FF6B6B, #FF8E8E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tagline { font-size: 0.9rem; color: #666; } /* 2. नेविगेशन मेनू */ .nav-menu { display: flex; gap: 2rem; list-style: none; } .nav-item { cursor: pointer; color: #444; transition: 0.3s; position: relative; } .nav-item:hover { color: #FF6B6B; } .nav-item:hover::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: #FF6B6B; } /* 3. यूज़र एक्शन्स */ .user-actions { display: flex; align-items: center; gap: 1.5rem; } .search-bar { width: 30px; padding: 5px; transition: 0.3s; border: none; background: transparent; } .search-bar:focus { width: 150px; outline: none; border-bottom: 1px solid #ddd; } .btn { padding: 8px 20px; border-radius: 25px; cursor: pointer; border: none; font-weight: 500; } .signup-btn { background: linear-gradient(45deg, #FF6B6B, #FF8E8E); color: white; } .video-btn { background: #FF3B3B; color: white; display: flex; align-items: center; gap: 5px; } .dark-mode-toggle { cursor: pointer; font-size: 1.2rem; } /* डार्क मोड स्टाइल */ [data-theme="dark"] .header { background-color: #1a1a1a; box-shadow: 0 2px 10px rgba(255,255,255,0.1); } [data-theme="dark"] .nav-item, [data-theme="dark"] .tagline { color: #ddd; } /* रिस्पॉन्सिव डिज़ाइन */ @media (max-width: 768px) { .nav-menu { display: none; } .hamburger { display: block; font-size: 1.5rem; } .user-actions .btn { display: none; } } </head> <body> <header class="header" data-theme="light">  <div class="branding"> <div class="logo">लवेशा</div> <div class="tagline">प्यार की नई राहें</div> </div>  <ul class="nav-menu"> <li class="nav-item">होम</li> <li class="nav-item">एक्सप्लोर</li> <li class="nav-item">मैच</li> <li class="nav-item">अबाउट</li> <li class="nav-item">संपर्क</li> </ul>  <div class="user-actions"> <input type="text" class="search-bar" placeholder="🔍"> <button class="btn video-btn">🎥 क्रिएट</button> <a href="#" class="btn login-btn">लॉगिन</a> <button class="btn signup-btn">साइन अप</button> <span class="dark-mode-toggle">🌙</span> </div> </header> </body> </html>// डार्क मोड टॉगल के लिए सैंपल JS document.querySelector('.dark-mode-toggle').addEventListener('click', () => { const header = document.querySelector('.header'); const theme = header.getAttribute('data-theme'); header.setAttribute('data-theme', theme === 'light' ? 'dark' : 'light'); });