Spaces:
Running
Running
Make a site for art showcase with cool landscape, glitch effect text, black background, white theme - Initial Deployment
a5c68c4 verified | <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- |