# AnviBliss — Simple & eye-catching website files Below are three minimal, easy-to-use files. This version is intentionally **simple**, mobile-first, and visually attractive with a bold hero, clean cards, and clear call-to-action. Copy each block into the corresponding file in your project: * `index.html` (project root) * `css/styles.css` (place in `css/`) * `scripts.js` (project root or `js/` — update path in HTML if placed in `js/`) **Reference screenshot you uploaded (for visual comparison):** `/mnt/data/Screenshot 2025-11-23 200511.png` --- ## index.html ```html AnviBliss Solutions

AnviBliss

Hardware • CCTV • Modern Websites

Reliable hardware supply and professional websites tailored for small businesses.

Get Quote Our Work

Services

Hardware Supply

Desktops, laptops, servers and networking gear.

Website Development

Business sites, e-commerce, and custom web apps.

Networking & CCTV

Installation, PoE switches, IP cameras, and setup.

Featured

Business Desktop
i5 • 16GB • SSD
Server
Xeon • ECC RAM
CCTV Camera
4K • Night Vision

Contact

Email: anvibliss.in@gmail.com

Phone: +91xxxxxxx

``` --- ## css/styles.css ```css /* Simple, eye-catching CSS — mobile-first */ :root{ --bg: #f6fbff; --panel: #ffffff; --text: #071329; --muted: #5b6b7a; --accent: #0066ff; --accent-2: #00c6ff; --radius: 12px; --gap: 16px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background: linear-gradient(180deg,var(--bg), #eaf6ff); color:var(--text); -webkit-font-smoothing:antialiased; } .wrap{max-width:1000px;margin:0 auto;padding:20px} /* Header */ .site-header{background:transparent;padding:10px 0} .brand{font-weight:800;color:var(--text);letter-spacing:1px} .nav{display:flex;gap:12px} .nav a{color:var(--muted);text-decoration:none;font-weight:600} /* Hero */ .hero{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;margin:6px 0 20px;padding:22px;border-radius:16px;background:linear-gradient(180deg,#ffffff, #f0f7ff);box-shadow:0 8px 24px rgba(10,20,40,0.06);position:relative;overflow:visible} .hero-inner h2{font-size:1.6rem;margin:0 0 8px;color:var(--text)} .hero-inner p{color:var(--muted);margin:0 0 14px} .cta-row{display:flex;gap:12px} .btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;border:none;cursor:pointer} .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white} .btn.ghost{background:transparent;border:1px solid rgba(6,30,80,0.06);color:var(--accent)} .hero-art{position:absolute;right:18px;top:-24px;width:160px;height:160px;opacity:0.12} .hero-art img{width:100%;height:100%;object-fit:cover;border-radius:12px} /* Grid cards */ .grid{display:grid;grid-template-columns:1fr;gap:12px} .card{background:var(--panel);padding:14px;border-radius:12px;box-shadow:0 6px 18px rgba(10,20,40,0.04)} .card h4{margin:0 0 6px} .small .mini{padding:10px;background:linear-gradient(180deg,#ffffff,#f8fbff);border-radius:10px;box-shadow:0 6px 14px rgba(10,20,40,0.03);text-align:center} /* Contact form */ .contact-form{display:flex;flex-direction:column;gap:10px;max-width:520px} .contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid #e6eef6} .contact-info{margin-top:12px;color:var(--muted)} /* Footer */ .site-footer{padding:18px 0;color:var(--muted);text-align:center} /* Responsive */ @media(min-width:700px){ .hero{grid-template-columns:1fr 260px} .grid{grid-template-columns:repeat(3,1fr)} .nav{gap:20px} } @media(min-width:1000px){ .wrap{padding:36px} } ``` --- ## scripts.js ```js // small helpers document.addEventListener('DOMContentLoaded', ()=>{ const year = document.getElementById('year'); if(year) year.textContent = new Date().getFullYear(); const form = document.getElementById('contactForm'); if(form){ form.addEventListener('submit', (e)=>{ e.preventDefault(); alert('Thanks! We received your message (demo).'); form.reset(); }); } }); ``` --- If you want, I can now: * Create a light/dark color switch, or * Make the hero full-width and the rest centered, or * Export these files as a ZIP for download. Which next?