noble-dreamspace

byOM PRAKASH

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>DreamSpace</title> <style> *{ margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; } body{ background:#0f172a; color:white; } header{ padding:20px 10%; display:flex; justify-content:space-between; align-items:center; background:#111827; } .logo{ font-size:28px; font-weight:bold; color:#38bdf8; } nav a{ color:white; text-decoration:none; margin-left:20px; transition:0.3s; } nav a:hover{ color:#38bdf8; } .hero{ height:90vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; background:linear-gradient(to right,#0f172a,#1e293b); } .hero h1{ font-size:55px; margin-bottom:20px; } .hero p{ max-width:600px; line-height:1.7; color:#cbd5e1; margin-bottom:30px; } .btn{ padding:14px 28px; background:#38bdf8; color:black; border:none; border-radius:8px; font-weight:bold; cursor:pointer; transition:0.3s; } .btn:hover{ transform:scale(1.05); } .cards{ padding:60px 10%; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .card{ background:#1e293b; padding:25px; border-radius:15px; transition:0.3s; } .card:hover{ transform:translateY(-8px); } .card h3{ margin-bottom:15px; color:#38bdf8; } footer{ text-align:center; padding:25px; background:#111827; margin-top:30px; color:#94a3b8; } </style> </head> <body> <header> <div class="logo">DreamSpace</div> <nav> <a href="#">Home</a> <a href="#">Services</a> <a href="#">About</a> <a href="#">Contact</a> </nav> </header> <section class="hero"> <h1>Create Your Digital Future</h1> <p> A modern random website design made using HTML and CSS. Fast, simple and fully responsive for mobile and desktop. </p> <button class="btn">Get Started</button> </section> <section class="cards"> <div class="card"> <h3>Modern Design</h3> <p>Clean and beautiful UI with smooth layout.</p> </div> <div class="card"> <h3>Responsive</h3> <p>Works perfectly on phones, tablets and desktop.</p> </div> <div class="card"> <h3>Fast Loading</h3> <p>Lightweight code for better performance.</p> </div> </section> <footer> © 2026 DreamSpace. All Rights Reserved. </footer> </body> </html> ```