diff --git a/README.md b/README.md index 8c98aa3..466c59d 100644 --- a/README.md +++ b/README.md @@ -1 +1,67 @@ -# hackathon-2026 \ No newline at end of file +# 2026 Financial Services Autism Hackathon + +Welcome to the official website repository for the 2026 Financial Services Autism Hackathon (FSI Hack4Autism 2026). + +## About + +The Financial Services Autism Hackathon brings together developers, designers, financial services professionals, and autism advocates to create innovative technology solutions that improve the lives of individuals on the autism spectrum and their families. + +## Website + +The main website is built with HTML and CSS, featuring: + +- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices +- **Accessibility**: Built with WCAG guidelines in mind, including proper semantic HTML, keyboard navigation, and screen reader support +- **Modern Design**: Clean, professional interface with smooth interactions +- **Information Sections**: + - Event overview and mission + - Schedule and agenda + - Participation opportunities (participants, sponsors, mentors, judges) + - Contact information + +## Local Development + +To view the website locally: + +1. Clone this repository +2. Open `index.html` in your web browser +3. No build process or dependencies required! + +Alternatively, you can serve it with a simple HTTP server: + +```bash +# Using Python 3 +python -m http.server 8000 + +# Using Node.js (with http-server installed) +npx http-server + +# Using PHP +php -S localhost:8000 +``` + +Then visit `http://localhost:8000` in your browser. + +## Contributing + +We welcome contributions to improve the website! Please feel free to: + +- Report issues +- Suggest improvements +- Submit pull requests + +## Accessibility + +This website is committed to accessibility and follows best practices including: + +- Semantic HTML5 elements +- ARIA labels where appropriate +- Keyboard navigation support +- High contrast mode support +- Reduced motion support for users with motion sensitivity +- Proper focus indicators +- Screen reader compatible content + +## License + +© 2026 Financial Services Institute - Hack4Autism. All rights reserved. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c232253 --- /dev/null +++ b/index.html @@ -0,0 +1,150 @@ + + + + + + + 2026 Financial Services Autism Hackathon + + + +
+ +
+ +
+
+
+

2026 Financial Services Autism Hackathon

+

Building Inclusive Technology Solutions Together

+

Coming in 2026

+ Get Involved +
+
+ +
+
+

About the Hackathon

+
+

The Financial Services Autism Hackathon brings together developers, designers, financial services professionals, and autism advocates to create innovative technology solutions that improve the lives of individuals on the autism spectrum and their families.

+ +
+
+

🎯 Our Mission

+

To leverage technology and financial services expertise to create accessible, inclusive solutions that address real-world challenges faced by the autism community.

+
+
+

🤝 Collaboration

+

We foster collaboration between financial institutions, technology professionals, and autism advocates to drive meaningful innovation.

+
+
+

♿ Accessibility

+

Accessibility and inclusion are at the heart of everything we do. We ensure our event and solutions are welcoming to all participants.

+
+
+
+
+
+ +
+
+

Event Schedule

+

Detailed schedule will be announced closer to the event date.

+ +
+
+

Day 1: Kickoff & Ideation

+
    +
  • Welcome & Opening Remarks
    • +
  • Keynote Speakers
    • +
  • Team Formation
    • +
  • Problem Statement Sessions
    • +
  • Begin Hacking
    • +
+
+
+

Day 2: Development

+
    +
  • Continued Development
    • +
  • Mentor Check-ins
    • +
  • Technical Workshops
    • +
  • Networking Sessions
    • +
  • Evening Social Event
    • +
+
+
+

Day 3: Presentations

+
    +
  • Final Development Sprint
    • +
  • Project Submissions
    • +
  • Team Presentations
    • +
  • Judging & Awards
    • +
  • Closing Ceremony
    • +
+
+
+
+
+ +
+
+

How to Participate

+ +
+
+

👨‍💻 As a Participant

+

Join as a developer, designer, or domain expert. All skill levels are welcome! You'll work in teams to create innovative solutions.

+

Registration opens soon

+
+
+

🏢 As a Sponsor

+

Support this important cause by sponsoring the event. Help us provide resources, prizes, and opportunities for participants.

+

Contact us for sponsorship opportunities

+
+
+

🎓 As a Mentor

+

Share your expertise and guide teams throughout the hackathon. Mentors provide technical guidance and domain knowledge.

+

Mentor applications available soon

+
+
+

⚖️ As a Judge

+

Help evaluate projects based on innovation, impact, technical execution, and accessibility. Judges should have relevant expertise.

+

Judge nominations opening soon

+
+
+
+
+ +
+
+

Contact Us

+
+

Have questions or want to get involved? We'd love to hear from you!

+
+

Organization: Financial Services Institute - Hack4Autism

+

GitHub: github.com/fsi-hack4autism

+

For general inquiries and partnership opportunities, please reach out through our GitHub organization.

+
+
+
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..69e942f --- /dev/null +++ b/styles.css @@ -0,0 +1,369 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #0066cc; + --secondary-color: #00a86b; + --accent-color: #ff6b35; + --text-color: #333; + --light-bg: #f8f9fa; + --white: #ffffff; + --gray: #6c757d; + --border-radius: 8px; + --transition: all 0.3s ease; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--white); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header and Navigation */ +header { + background-color: var(--white); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +nav { + padding: 1rem 0; +} + +nav .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +nav h1 { + color: var(--primary-color); + font-size: 1.5rem; + font-weight: 700; +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + text-decoration: none; + color: var(--text-color); + font-weight: 500; + transition: var(--transition); + padding: 0.5rem 1rem; + border-radius: var(--border-radius); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--primary-color); + background-color: var(--light-bg); +} + +/* Hero Section */ +#hero { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: var(--white); + padding: 6rem 0; + text-align: center; +} + +#hero h2 { + font-size: 3rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.tagline { + font-size: 1.5rem; + margin-bottom: 1rem; + opacity: 0.95; +} + +.event-date { + font-size: 1.25rem; + margin-bottom: 2rem; + opacity: 0.9; +} + +.cta-button { + display: inline-block; + padding: 1rem 2.5rem; + background-color: var(--accent-color); + color: var(--white); + text-decoration: none; + border-radius: var(--border-radius); + font-size: 1.1rem; + font-weight: 600; + transition: var(--transition); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.cta-button:hover, +.cta-button:focus { + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + background-color: #ff5520; +} + +/* Sections */ +section { + padding: 5rem 0; +} + +section:nth-child(even) { + background-color: var(--light-bg); +} + +section h2 { + font-size: 2.5rem; + margin-bottom: 1rem; + color: var(--primary-color); + text-align: center; +} + +.section-intro { + text-align: center; + font-size: 1.1rem; + color: var(--gray); + margin-bottom: 3rem; +} + +/* About Section */ +.about-content { + max-width: 900px; + margin: 0 auto; +} + +.about-content > p { + font-size: 1.2rem; + text-align: center; + margin-bottom: 3rem; + line-height: 1.8; +} + +.mission-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.mission-card { + background-color: var(--white); + padding: 2rem; + border-radius: var(--border-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: var(--transition); +} + +section:nth-child(even) .mission-card { + background-color: var(--white); +} + +.mission-card:hover { + transform: translateY(-4px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +.mission-card h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--primary-color); +} + +/* Schedule Section */ +.schedule-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.schedule-item { + background-color: var(--white); + padding: 2rem; + border-radius: var(--border-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.schedule-item h3 { + color: var(--secondary-color); + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.schedule-item ul { + list-style-position: inside; + color: var(--text-color); +} + +.schedule-item li { + padding: 0.5rem 0; + border-bottom: 1px solid var(--light-bg); +} + +.schedule-item li:last-child { + border-bottom: none; +} + +/* Participate Section */ +.participate-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.participate-card { + background-color: var(--white); + padding: 2rem; + border-radius: var(--border-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: var(--transition); + text-align: center; +} + +.participate-card:hover { + transform: translateY(-4px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +.participate-card h3 { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.participate-card p { + margin-bottom: 1rem; +} + +.participate-card strong { + color: var(--secondary-color); +} + +/* Contact Section */ +.contact-content { + max-width: 700px; + margin: 0 auto; + text-align: center; +} + +.contact-content > p { + font-size: 1.2rem; + margin-bottom: 2rem; +} + +.contact-info { + background-color: var(--white); + padding: 2rem; + border-radius: var(--border-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.contact-info p { + margin-bottom: 1rem; + font-size: 1.1rem; +} + +.contact-info a { + color: var(--primary-color); + text-decoration: none; + font-weight: 600; + transition: var(--transition); +} + +.contact-info a:hover, +.contact-info a:focus { + color: var(--secondary-color); + text-decoration: underline; +} + +/* Footer */ +footer { + background-color: var(--text-color); + color: var(--white); + padding: 2rem 0; + text-align: center; +} + +footer p { + margin: 0.5rem 0; + opacity: 0.9; +} + +/* Responsive Design */ +@media (max-width: 768px) { + nav .container { + flex-direction: column; + gap: 1rem; + } + + .nav-links { + flex-direction: column; + gap: 0.5rem; + text-align: center; + width: 100%; + } + + #hero h2 { + font-size: 2rem; + } + + .tagline { + font-size: 1.2rem; + } + + section h2 { + font-size: 2rem; + } + + .mission-grid, + .schedule-grid, + .participate-grid { + grid-template-columns: 1fr; + } +} + +/* Accessibility */ +a:focus, +button:focus, +.cta-button:focus { + outline: 3px solid var(--accent-color); + outline-offset: 2px; +} + +/* High contrast support */ +@media (prefers-contrast: high) { + :root { + --primary-color: #0056b3; + --secondary-color: #008855; + --accent-color: #cc0000; + } +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +}