Create me a website dedicated to my photos of awesome alien and ufo photos. Give me the option to enter details about each piece, so that I may tell a story.
c3bb20b
verified
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Space Mono', monospace; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1a1a1a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #7e22ce; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #9333ea; | |
| } | |
| /* Animation for alien-themed elements */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .float-animation { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| /* Glow effect for UFO elements */ | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(124, 58, 237, 0.5); | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .glow-effect:hover { | |
| box-shadow: 0 0 25px rgba(124, 58, 237, 0.8); | |
| } |