<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Neon UI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
.neon-section{
background: radial-gradient(circle at 20% 0%, #0f172a, #020617);
padding:80px 20px;
font-family:'Inter',sans-serif;
}
/* GRID */
.neon-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}
/* CARD */
.neon-card{
position:relative;
height:320px;
padding:25px;
border-radius:22px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(20px);
color:#ffffff; /* 🔥 FORCE WHITE */
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:0.3s;
}
/* INNER GLASS */
.neon-card::after{
content:"";
position:absolute;
inset:10px;
border-radius:18px;
background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.05);
}
/* BORDER GLOW */
.neon-card::before{
content:"";
position:absolute;
inset:0;
border-radius:22px;
padding:1px;
background:linear-gradient(120deg,#00f5ff,#8b5cf6,#ff00ff);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0.7;
}
/* HOVER */
.neon-card:hover{
transform:translateY(-8px) scale(1.01);
}
/* TOP BAR */
.top-bar{
display:flex;
justify-content:space-between;
align-items:center;
z-index:2;
}
.logo{
width:10px;
height:10px;
border-radius:50%;
background:#00f5ff;
box-shadow:0 0 10px #00f5ff;
}
.menu{
display:flex;
gap:5px;
}
.dot{
width:5px;
height:5px;
border-radius:50%;
background:#ffffff; /* 🔥 WHITE */
opacity:0.8;
}
/* TEXT */
.content{
z-index:2;
}
.content h2{
font-size:26px;
font-weight:800;
color:#ffffff; /* 🔥 WHITE */
}
.content p{
font-size:13px;
margin-top:8px;
color:#ffffff; /* 🔥 WHITE */
opacity:1; /* 🔥 REMOVE FADED LOOK */
}
/* BUTTON */
.neon-btn{
align-self:flex-start;
padding:8px 16px;
border-radius:20px;
border:1px solid #00f5ff;
color:#ffffff; /* 🔥 WHITE */
text-decoration:none;
font-size:13px;
z-index:2;
transition:0.3s;
}
.neon-btn:hover{
background:#00f5ff;
color:#ffffff; /* 🔥 KEEP WHITE (no black) */
box-shadow:0 0 15px #00f5ff;
}
/* GLOW SHAPE */
.neon-glow{
position:absolute;
right:30px;
bottom:30px;
width:140px;
height:200px;
border-radius:20px;
opacity:0.7;
}
/* COLORS */
.blue .neon-glow{ box-shadow:0 0 40px #00f5ff; }
.green .neon-glow{ box-shadow:0 0 40px #00ff9f; }
.purple .neon-glow{ box-shadow:0 0 40px #a855f7; }
.pink .neon-glow{ box-shadow:0 0 40px #ff00ff; }
/* MOBILE */
@media(max-width:768px){
.neon-container{
grid-template-columns:1fr;
}
}
</style>
</head>
<body>
<section>
<h2>AI Platform</h2>
<p>Build intelligent automation tools.</p>
<a href="#">Explore</a>
<h2>Startup Dashboard</h2>
<p>Track and scale your startup.</p>
<a href="#">Explore</a>
<h2>Creative Studio</h2>
<p>Design powerful digital experiences.</p>
<a href="#">Explore</a>
<h2>Web App UI</h2>
<p>Create modern web interfaces.</p>
<a href="#">Explore</a>
<h2>Analytics Tool</h2>
<p>Monitor and analyze your data.</p>
<a href="#">Explore</a>
<h2>Product Growth</h2>
<p>Boost user engagement & growth.</p>
<a href="#">Explore</a>
</section>
</body>
</html>]]>
