Spaces:
Running
Running
File size: 2,232 Bytes
a5c68c4 a128fcc a5c68c4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html>
<html>
<head>
<title>Art Showcase</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.glitch {
position: relative;
color: white;
}
.glitch::before, .glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 #ff00c1;
clip: rect(24px, 550px, 90px, 0);
animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
clip: rect(85px, 550px, 140px, 0);
animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip: rect(31px, 9999px, 94px, 0); }
20% { clip: rect(112px, 9999px, 76px, 0); }
40% { clip: rect(75px, 9999px, 107px, 0); }
60% { clip: rect(98px, 9999px, 129px, 0); }
80% { clip: rect(95px, 9999px, 53px, 0); }
100% { clip: rect(138px, 9999px, 74px, 0); }
}
@keyframes glitch-anim-2 {
0% { clip: rect(54px, 9999px, 61px, 0); }
20% { clip: rect(67px, 9999px, 119px, 0); }
40% { clip: rect(17px, 9999px, 79px, 0); }
60% { clip: rect(85px, 9999px, 60px, 0); }
80% { clip: rect(30px, 9999px, 128px, 0); }
100% { clip: rect(75px, 9999px, 53px, 0); }
}
</style>
</head>
<body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
<div class="w-full">
<span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
<h1 class="text-4xl lg:text-6xl font-bold font-sans">
<span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
Ask me anything.
</h1>
</div>
<img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left- |