117 lines
3.5 KiB
HTML
117 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Typeform Clone - Dark Theme</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background-color: #0f0f0f;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.neon-grid {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 0, 255, 0.1) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
z-index: -1;
|
|
}
|
|
|
|
.neon-border {
|
|
border: 1px solid rgba(255, 0, 255, 0.5);
|
|
position: relative;
|
|
}
|
|
|
|
.neon-border::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
|
|
z-index: -1;
|
|
opacity: 0.7;
|
|
filter: blur(5px);
|
|
animation: neon-pulse 2s infinite alternate;
|
|
}
|
|
|
|
@keyframes neon-pulse {
|
|
0% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.glow-text {
|
|
text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
|
|
}
|
|
|
|
.neon-button {
|
|
background: transparent;
|
|
color: #ffffff;
|
|
border: 1px solid #ff00ff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.neon-button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.3), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.neon-button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.neon-button:hover {
|
|
background: rgba(255, 0, 255, 0.1);
|
|
box-shadow: 0 0 15px rgba(255, 0, 255, 0.7);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.floating-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(255, 0, 255, 0.7) 0%, rgba(0, 255, 255, 0.7) 100%);
|
|
filter: blur(40px);
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
animation: float 10s infinite ease-in-out alternate;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
100% { transform: translate(30px, -30px) scale(1.1); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center p-4">
|
|
<div class="neon-grid"></div>
|
|
|
|
<div class="floating-orb" style="width: 300px; height: 300px; top: 10%; left: 10%;"></div>
|
|
<div class="floating-orb" style="width: 200px; height: 200px; bottom: 20%; right: 15%; animation-delay: 2s;"</div>
|
|
|
|
</body>
|
|
</html> |