Create a non-profit organization website with mission statement hero, our impact statistics, current campaigns, donation form with amounts, volunteer opportunities, success stories, upcoming events, and newsletter signup.
4abcd02
verified
| /* Custom animations */ | |
| @keyframes countUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .count-up { | |
| animation: countUp 1s ease-out forwards; | |
| } | |
| /* Custom scroll behavior */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom button hover effects */ | |
| .btn-donate { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-donate:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Custom form input focus */ | |
| .form-input:focus { | |
| border-color: #dc2626; | |
| box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); | |
| } | |
| /* Custom card hover effect */ | |
| .card-hover { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Responsive tweaks */ | |
| @media (max-width: 640px) { | |
| .hero-title { | |
| font-size: 2.5rem; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| } | |
| } |