I can help you create HTML and CSS code for a futuristic website! Here's a complete example with modern effects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeoTech 2025 - Futuristic Interface</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="stars"></div>
<div class="twinkling"></div>
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<span class="neon-text">NeoTech</span>
</div>
<ul class="nav-menu">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#services" class="nav-link">Services</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<section id="home" class="hero">
<div class="hero-content">
<h1 class="hero-title">
<span class="glitch" data-text="WELCOME TO THE FUTURE">WELCOME TO THE FUTURE</span>
</h1>
<p class="hero-subtitle">Experience the next generation of technology</p>
<button class="cta-button">
<span>ENTER MATRIX</span>
</button>
</div>
<div class="hologram"></div>
</section>
<section id="about" class="section">
<div class="container">
<h2 class="section-title neon-text">About Us</h2>
<div class="cards-container">
<div class="card">
<div class="card-icon">🚀</div>
<h3>Innovation</h3>
<p>Pushing the boundaries of what's possible with cutting-edge technology.</p>
</div>
<div class="card">
<div class="card-icon">🌐</div>
<h3>Connectivity</h3>
<p>Bridging the gap between human imagination and digital reality.</p>
</div>
<div class="card">
<div class="card-icon">⚡</div>
<h3>Performance</h3>
<p>Lightning-fast solutions for tomorrow's challenges today.</p>
</div>
</div>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #0a0a0a;
color: #ffffff;
overflow-x: hidden;
}
/* Animated Background */
.stars, .twinkling {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url('data:image/svg+xml,<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="white"/><circle cx="80" cy="40" r="0.5" fill="white"/><circle cx="40" cy="60" r="1" fill="white"/><circle cx="90" cy="80" r="0.5" fill="white"/><circle cx="10" cy="90" r="1" fill="white"/></svg>') repeat;
background-size: 200px 200px;
animation: move-stars 50s linear infinite;
}
.twinkling {
background: transparent url('data:image/svg+xml,<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 100 100"><circle cx="30" cy="30" r="1" fill="cyan" opacity="0.8"/><circle cx="70" cy="70" r="0.5" fill="magenta" opacity="0.6"/></svg>') repeat;
background-size: 300px 300px;
animation: move-twinkle 100s linear infinite;
}
@keyframes move-stars {
from { transform: translateY(0px); }
to { transform: translateY(-2000px); }
}
@keyframes move-twinkle {
from { transform: translateY(0px); }
to { transform: translateY(-2000px); }
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #00ffff;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo .neon-text {
font-size: 1.8rem;
font-weight: bold;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-link {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.nav-link:hover {
color: #00ffff;
text-shadow: 0 0 10px #00ffff;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(45deg, #00ffff, #ff00ff);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
/* Neon Text Effect */
.neon-text {
color: #00ffff;
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff,
0 0 15px #00ffff,
0 0 20px #00ffff;
animation: neon-pulse 2s ease-in-out infinite alternate;
}
@keyframes neon-pulse {
from {
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff,
0 0 15px #00ffff,
0 0 20px #00ffff;
}
to {
text-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 30px #00ffff,
0 0 40px #00ffff;
}
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
}
.hero-title {
font-size: 4rem;
margin-bottom: 1rem;
}
.glitch {
position: relative;
display: inline-block;
animation: glitch 2s infinite;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
animation: glitch-1 0.5s infinite;
color: #ff00ff;
z-index: -1;
}
.glitch::after {
animation: glitch-2 0.5s infinite;
color: #00ffff;
z-index: -2;
}
@keyframes glitch {
0%, 100% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
}
@keyframes glitch-1 {
0%, 100% { transform: translate(0); }
10% { transform: translate(-2px, -2px); }
20% { transform: translate(2px, 2px); }
}
@keyframes glitch-2 {
0%, 100% { transform: translate(0); }
10% { transform: translate(2px, 2px); }
20% { transform: translate(-2px, -2px); }
}
.hero-subtitle {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.8;
}
/* CTA Button */
.cta-button {
background: transparent;
border: 2px solid #00ffff;
color: #00ffff;
padding: 15px 30px;
font-size: 1.2rem;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.cta-button:hover {
color: #000;
box-shadow: 0 0 30px #00ffff;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #00ffff;
transition: left 0.3s ease;
z-index: -1;
}
.cta-button:hover::before {
left: 0;
}
/* Cards Section */
.section {
padding: 100px 0;
position: relative;
z-index: 10;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.section-title {
font-size: 3rem;
text-align: center;
margin-bottom: 3rem;
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 255, 255, 0.3);
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.card:hover::before {
opacity: 1;
animation: card-shine 1s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
}
@keyframes card-shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.card-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #00ffff;
}
.card p {
opacity: 0.8;
line-height: 1.6;
}
/* Hologram Effect */
.hologram {
position: absolute;
bottom: 10%;
right: 10%;
width: 300px;
height: 300px;
background: linear-gradient(45deg, rgba(0, 255, 255, 0.3), rgba(255, 0, 255, 0.3));
border-radius: 50%;
animation: hologram-rotate 10s linear infinite;
filter: blur(2px);
}
@keyframes hologram-rotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.nav-menu {
display: none;
}
.hologram {
display: none;
}
.cards-container {
grid-template-columns: 1fr;
}
}
index.html (paste the HTML code)style.css (paste the CSS code)index.html in your browser