<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ViralX - Trendy Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#050816;
color:white;
overflow-x:hidden;
}
.bg-animation{
position:fixed;
width:100%;
height:100%;
z-index:-1;
background:linear-gradient(45deg,#0f172a,#020617,#111827);
}
.circle{
position:absolute;
border-radius:50%;
filter:blur(90px);
opacity:0.5;
animation:float 8s infinite alternate;
}
.circle1{
width:300px;
height:300px;
background:#ff00cc;
top:10%;
left:5%;
}
.circle2{
width:250px;
height:250px;
background:#00ffee;
bottom:10%;
right:5%;
animation-delay:2s;
}
@keyframes float{
from{
transform:translateY(0px) translateX(0px);
}
to{
transform:translateY(-50px) translateX(40px);
}
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
backdrop-filter:blur(12px);
position:sticky;
top:0;
z-index:100;
background:rgba(0,0,0,0.3);
}
.logo{
font-size:28px;
font-weight:700;
color:#00ffee;
}
nav a{
color:white;
text-decoration:none;
margin-left:25px;
transition:0.3s;
font-weight:500;
}
nav a:hover{
color:#00ffee;
}
.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px 8%;
flex-direction:column;
}
.hero h1{
font-size:70px;
line-height:1.1;
max-width:900px;
margin-bottom:20px;
background:linear-gradient(to right,#00ffee,#ff00cc);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero p{
font-size:20px;
max-width:700px;
opacity:0.8;
margin-bottom:35px;
}
.btns{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
.btn{
padding:16px 34px;
border:none;
border-radius:50px;
font-size:17px;
font-weight:600;
cursor:pointer;
transition:0.4s;
text-decoration:none;
}
.primary{
background:linear-gradient(45deg,#00ffee,#00bfff);
color:black;
box-shadow:0 0 25px #00ffee;
}
.secondary{
border:2px solid #ffffff30;
color:white;
background:transparent;
}
.btn:hover{
transform:translateY(-5px) scale(1.05);
}
.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
padding:40px 8% 100px;
}
.card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
padding:35px;
border-radius:24px;
backdrop-filter:blur(10px);
transition:0.4s;
}
.card:hover{
transform:translateY(-10px);
border-color:#00ffee;
box-shadow:0 0 30px rgba(0,255,238,0.3);
}
.card h2{
font-size:40px;
margin-bottom:10px;
color:#00ffee;
}
.features{
padding:100px 8%;
}
.section-title{
text-align:center;
font-size:50px;
margin-bottom:60px;
}
.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.feature{
background:rgba(255,255,255,0.04);
padding:30px;
border-radius:20px;
transition:0.4s;
border:1px solid transparent;
}
.feature:hover{
border-color:#ff00cc;
transform:scale(1.03);
}
.feature span{
font-size:45px;
}
.feature h3{
margin:20px 0 10px;
font-size:24px;
}
.testimonial{
padding:100px 8%;
text-align:center;
}
.testimonial-box{
max-width:850px;
margin:auto;
background:rgba(255,255,255,0.05);
padding:50px;
border-radius:30px;
border:1px solid rgba(255,255,255,0.08);
}
.testimonial-box p{
font-size:22px;
line-height:1.8;
opacity:0.9;
}
.testimonial-box h4{
margin-top:25px;
color:#00ffee;
font-size:20px;
}
footer{
padding:40px 8%;
text-align:center;
border-top:1px solid rgba(255,255,255,0.08);
opacity:0.7;
}
.floating-btn{
position:fixed;
right:20px;
bottom:20px;
width:60px;
height:60px;
border-radius:50%;
border:none;
background:#00ffee;
color:black;
font-size:24px;
cursor:pointer;
box-shadow:0 0 20px #00ffee;
z-index:100;
}
@media(max-width:768px){
.hero h1{
font-size:45px;
}
nav{
display:none;
}
.section-title{
font-size:38px;
}
}
</style>
</head>
<body>
<div class="bg-animation">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
<header>
<div class="logo">ViralX</div>
<nav>
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="hero">
<h1>Create Viral Websites Without Any Server</h1>
<p>
Pure HTML, CSS & JavaScript based futuristic landing page. Fast, modern, stylish and ready for Instagram/TikTok style branding.
</p>
<div class="btns">
<a href="#" class="btn primary">Get Started</a>
<a href="#" class="btn secondary">Watch Demo</a>
</div>
</section>
<section class="stats">
<div class="card">
<h2>10M+</h2>
<p>Views Generated</p>
</div>
<div class="card">
<h2>99%</h2>
<p>Mobile Responsive</p>
</div>
<div class="card">
<h2>0₹</h2>
<p>Hosting Cost</p>
</div>
<div class="card">
<h2>24/7</h2>
<p>Online Access</p>
</div>
</section>
<section class="features">
<h2 class="section-title">Why This Website Looks Viral 🔥</h2>
<div class="feature-grid">
<div class="feature">
<span>⚡</span>
<h3>Super Fast</h3>
<p>Runs directly in browser with no backend or server required.</p>
</div>
<div class="feature">
<span>🎨</span>
<h3>Modern UI</h3>
<p>Glassmorphism + neon futuristic design for maximum attraction.</p>
</div>
<div class="feature">
<span>📱</span>
<h3>Fully Responsive</h3>
<p>Perfect look on mobile, tablet and desktop devices.</p>
</div>
<div class="feature">
<span>🚀</span>
<h3>Easy Hosting</h3>
<p>Upload on GitHub Pages, Netlify or Vercel for free.</p>
</div>
<div class="feature">
<span>💎</span>
<h3>Premium Feel</h3>
<p>Looks like an expensive startup landing page.</p>
</div>
<div class="feature">
<span>🔥</span>
<h3>Viral Style</h3>
<p>Made for reels, trends, creators and startup aesthetics.</p>
</div>
</div>
</section>
<section class="testimonial">
<h2 class="section-title">People Love It ❤️</h2>
<div class="testimonial-box">
<p>
“This website design literally boosted my Instagram brand image. Everyone thought it was built by a professional agency!”
</p>
<h4>- Viral Creator</h4>
</div>
</section>
<footer>
© 2026 ViralX. All Rights Reserved.
</footer>
<button class="floating-btn" onclick="scrollToTop()">↑</button>
<script>
function scrollToTop(){
window.scrollTo({
top:0,
behavior:'smooth'
});
}
const cards = document.querySelectorAll('.card, .feature');
window.addEventListener('scroll',()=>{
cards.forEach(card=>{
const rect = card.getBoundingClientRect();
if(rect.top < window.innerHeight - 50){
card.style.opacity = '1';
card.style.transform = 'translateY(0px)';
}
});
});
cards.forEach(card=>{
card.style.opacity='0';
card.style.transform='translateY(40px)';
card.style.transition='0.6s';
});
</script>
</body>
</html>
कोई टिप्पणी नहीं:
एक टिप्पणी भेजें