Sonic Speed Solutions is a modern, responsive website inspired by Sonic the Hedgehog, delivering fictional high-speed services. The landing page showcases a unique blend of retro gaming aesthetics matching modern web design concepts, complete with engaging animations and a sleek user interface.
This project was built utilizing the following technologies:
- HTML5 & CSS3: Core structural and styling languages.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- DaisyUI & Flowbite: UI components for Tailwind CSS (via npm package setup).
- AOS (Animate On Scroll): For sleek scroll animations.
- FontAwesome: For UI icons.
- Google Fonts: Features the "Press Start 2P" retro font.
- Retro-Modern UI/UX: Combines the classic Sega / Sonic styling with modern design patterns and components.
- Fully Responsive: Mobile, tablet, and desktop friendly layout utilizing Tailwind's responsive classes.
- Animated Sections: Beautifully paced Entrance and Scroll animations using AOS.
- Sticky Navigation Menu: With collapsible mobile navigation (hamburger menu).
- Custom Theming: Utilizing a strict color palette centered around gold
#FFD700and dark blue#0f2032.
To work on this project locally, make sure you have Node.js installed to handle the development dependencies for TailwindCSS.
-
Clone the repository:
git clone https://github.com/UsmanPrime/Sonic-Website.git
-
Navigate to the directory:
cd Sonic-Website -
Install Dependencies:
npm install
-
Compile CSS (If adjusting Tailwind configs): (Note: The current build includes CDN links for quick usage, but
src/input.css->src/output.cssrequires compilation when local classes are modified.) -
Run the Project: Simply open
index.htmlin your favorite browser, or use an extension like VS Code Live Server to view the project dynamically.
This project is licensed under the ISC License. Visuals and trademarks associated with Sega and Sonic the Hedgehog belong to their respective owners.