A professional, responsive website for the INFORMS Student Chapter at the University of South Dakota, built with modern web technologies and following best practices for accessibility and user experience.
- Responsive Design: Fully responsive layout that works on all devices
- Modern UI/UX: Clean, professional design with smooth animations
- Accessibility: WCAG compliant with keyboard navigation support
- Performance Optimized: Fast loading with optimized assets
- Interactive Elements: Smooth scrolling, hover effects, and animations
- Mobile-First: Mobile navigation with hamburger menu
- USD Red (Primary):
#AD0000- Headers, buttons, highlights - INFORMS Blue (Secondary):
#003087- Main secondary color - INFORMS Orange:
#E87722- Accent color - INFORMS Green:
#84BD00- Growth, balance - INFORMS Yellow:
#F1C400- Optimism, secondary accent - Cool Gray:
#75787B- Neutral supporting color
- Headers: Roboto (Bold/Medium weights)
- Body Text: Lora (Regular/Light weights)
- Fallbacks: Helvetica, Georgia, Arial, Times New Roman
usdinform.github.io/
├── index.html # Main HTML file
├── styles.css # CSS styles and responsive design
├── script.js # JavaScript functionality
├── README.md # Project documentation
├── master_prompt.md # Design specifications
└── content_glossary.md # Content guidelines
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A local web server (optional, for development)
- Clone or download the project files
- Open
index.htmlin your web browser - For development, use a local server:
# Using Python 3 python -m http.server 8000 # Using Node.js (if you have http-server installed) npx http-server # Using PHP php -S localhost:8000
The website is built with vanilla HTML, CSS, and JavaScript, making it easy to customize:
- HTML: Semantic structure with accessibility features
- CSS: Modern CSS with Grid, Flexbox, and custom properties
- JavaScript: ES6+ features with event handling and animations
- Hero banner with USD + INFORMS branding
- Welcome message
- Executive Board section (5 members in grid layout)
- Footer with quick links
- INFORMS mission and goals
- USD chapter introduction
- Icon-based goals presentation
- Events timeline (guest lectures, workshops, competitions)
- Resources grid (membership, study groups, mentorship, career prep)
- Call-to-action section
- Executive Board: Update member information in
index.html - Events: Add new events to the events timeline
- Resources: Modify resource cards as needed
- Contact Information: Update email addresses and social links
- Colors: Modify CSS custom properties in
styles.css - Typography: Update font imports and family declarations
- Layout: Adjust grid and flexbox properties
- Animations: Customize transition and animation values
- Navigation: Modify JavaScript event handlers
- Forms: Implement form submission logic
- Analytics: Add tracking code to
script.js - Performance: Optimize images and assets
- President: Satkar Karki
- Vice-President: Hadi Hindieh
- Secretary: Riti Dahal
- Treasurer: Sabun Dhital
- Webmaster: Nicholas Macchio
- Email: informs@usd.edu
- University: University of South Dakota
- Organization: INFORMS Student Chapter
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- WCAG 2.1 AA compliant
- Keyboard navigation support
- Screen reader friendly
- High contrast ratios
- Focus indicators
This project is created for the INFORMS Student Chapter at the University of South Dakota. All rights reserved.
For contributions or suggestions, please contact the webmaster or submit an issue through the appropriate channels.
Built with ❤️ for the INFORMS Student Chapter Community