<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultra UI</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
min-height:100vh;
background:#020617;
color:#fff;
overflow-x:hidden;
}
/* 🔥 BACKGROUND MESH */
.bg{
position:fixed;
width:100%;
height:100%;
z-index:-1;
background:
radial-gradient(circle at 20% 20%, rgba(56,189,248,0.15), transparent 40%),
radial-gradient(circle at 80% 60%, rgba(147,51,234,0.15), transparent 40%);
}
/* NAVBAR */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 70px;
}
.logo{
font-weight:700;
font-size:20px;
letter-spacing:1px;
}
.nav-links{
display:flex;
gap:35px;
}
.nav-links a{
color:#94a3b8;
text-decoration:none;
transition:0.3s;
}
.nav-links a:hover{
color:#fff;
}
/* HERO */
.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:100px 70px;
}
/* LEFT */
.left{
max-width:600px;
}
.left h1{
font-size:72px;
line-height:1.05;
font-weight:700;
}
.left span{
background:linear-gradient(90deg,#38bdf8,#9333ea);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.left p{
margin:25px 0;
color:#94a3b8;
font-size:17px;
}
/* BUTTONS */
.buttons{
display:flex;
gap:20px;
}
.btn{
padding:15px 30px;
border-radius:50px;
font-size:14px;
cursor:pointer;
transition:0.3s;
}
.primary{
background:linear-gradient(90deg,#38bdf8,#9333ea);
border:none;
color:#fff;
box-shadow:0 10px 30px rgba(56,189,248,0.3);
}
.primary:hover{
transform:translateY(-4px) scale(1.03);
}
.secondary{
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
color:#fff;
}
.secondary:hover{
border-color:#fff;
}
/* RIGHT SIDE FLOATING UI */
.right{
position:relative;
width:450px;
height:400px;
}
/* GLASS CARDS */
.card{
position:absolute;
width:240px;
padding:20px;
border-radius:18px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
box-shadow:0 20px 50px rgba(0,0,0,0.5);
transition:0.4s;
}
.card:hover{
transform:translateY(-10px);
}
/* CARD POSITIONS */
.c1{ top:0; left:0; }
.c2{ bottom:0; right:0; }
.c3{ top:120px; right:40px; }
/* BARS */
.bar{
height:8px;
background:#1e293b;
border-radius:10px;
margin:10px 0;
overflow:hidden;
}
.bar span{
display:block;
height:100%;
background:linear-gradient(90deg,#38bdf8,#9333ea);
}
.w1{ width:70%; }
.w2{ width:50%; }
.w3{ width:85%; }
/* FLOAT DOTS */
.dot{
position:absolute;
width:12px;
height:12px;
background:#38bdf8;
border-radius:50%;
box-shadow:0 0 15px #38bdf8;
}
.d1{ top:-20px; left:-20px; }
.d2{ bottom:-20px; right:-20px; }
/* RESPONSIVE */
@media(max-width:900px){
.hero{
flex-direction:column;
text-align:center;
}
.right{
margin-top:50px;
}
}
</style>
</head>
<body>
<!-- NAV -->
NeoTech
<a href="#">Home</a>
<a href="#">Product</a>
<a href="#">Solutions</a>
<a href="#">Contact</a>
<!-- HERO -->
<!-- LEFT -->
<h1>Build Future<br>With Smart Tech</h1>
<p>Design, build and scale next-generation applications with powerful tools and modern UI systems.</p>
<button>Get Started</button>
<button>Explore</button>
<!-- RIGHT -->
<h4>Analytics</h4>
<h4>Performance</h4>
<h4>Security</h4>
</body>
</html>]]>
