Clone and recreate the exact design, layout, user interface, color scheme, navigation, and overall style of this website: https://www.mindgrasp.ai/
7d81421 verified | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3b82f6; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #2563eb; | |
| } | |
| /* Animation for cards */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 0.5s ease-out forwards; | |
| } | |
| /* Delay animations for staggered effect */ | |
| .delay-100 { | |
| animation-delay: 0.1s; | |
| } | |
| .delay-200 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-300 { | |
| animation-delay: 0.3s; | |
| } | |
| .delay-400 { | |
| animation-delay: 0.4s; | |
| } | |
| .delay-500 { | |
| animation-delay: 0.5s; | |
| } |