A high-quality 3D isometric illustration of a website builder interface floating over a soft blue background. The design features a clean white browser window with rounded corners. Around it, various 3D UI elements are floating, including an image gallery icon, a colorful color wheel, typography settings with 'Aa' text, a video player icon, and a small code snippet window. Use a modern claymorphism style with soft shadows, smooth matte textures, and a pastel color palette (blues, pinks, and yellows). The lighting is bright and soft, creating a clean, professional, and creative tech aesthetic. High resolution, 8k render, Unreal Engine 5 style.
1d6106f verified | /* Custom styles that can't be done with Tailwind */ | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| /* Custom animations */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .floating-element { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| /* Claymorphism effect */ | |
| .clay-card { | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.1), | |
| -20px -20px 50px rgba(255, 255, 255, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } |