F1 Pulse is a modern, responsive web project dedicated to bringing the exhilarating world of Formula 1 to fans in a clean and intuitive interface. Built purely with HTML and CSS, this project serves as a dynamic hub for exploring F1 teams, drivers, and standings, with a roadmap for even richer fan-centric features.
This is a personal frontend project aimed at building a sleek and information-rich Formula 1 experience. The current version showcases detailed team profiles, comprehensive driver and constructor standings, and individual driver spotlights. Future phases will introduce dynamic content like race highlights, blog posts, and interactive features to further engage F1 enthusiasts.
- HTML5: Structuring the content of all pages.
- CSS3: Styling the entire application, including animations, responsive layouts, and visual effects. (No JavaScript or external libraries are used for core functionality, demonstrating pure frontend capabilities).
- Font Awesome: (Used for social media icons in the footer and potentially other icons).
F1 WEBSITE/
├── images/
├── styles/
│ ├── constructor-standings.css
│ ├── constructors.css
│ ├── driver-standings.css
│ ├── navbar.css
│ └── styles.css
├── constructor-standings.html
├── driver-standings.html
├── drivers.html
├── footer.html
├── index.html
├── README.md
├── teams.html
└── tracks.html
- Responsive Design: Optimized for seamless viewing on both desktop and mobile devices.
- Dynamic Hero Section: Features a visually appealing parallax background effect on the homepage.
- Interactive Navbar: Includes a responsive navigation bar with F1 start light animation.
- Team Showcase: A dedicated page (
teams.html) displaying all 10 Formula 1 teams in a structured, card-based layout with logo, team info, and car image. - Driver & Constructor Standings: Dedicated pages (
driver-standings.html,constructor-standings.html) presenting tabular data for current season standings. - Driver Profiles: A detailed page (
drivers.html) showcasing individual F1 drivers with their photo, team, nationality, and race number. - Consistent Theming: Utilizes a dark, F1-inspired color palette with vibrant accents across all pages.
- Universal Footer: A branded footer present on all pages, featuring social links and a display mode placeholder.
- Organized Folder Structure: Logical file organization for easy scalability and maintenance.
- 📰 Blog Section: Weekly F1 insights, news summaries, and editorial content.
- 🎬 F1 Highlights Tab: Embedded race highlights, recaps, and memorable crash moments.
- 🎨 Dark/Light Theme Toggle: A functional toggle for theme preference (requires JavaScript).
- 🔍 Search and Filter Teams: Implement search by constructor name and filtering by engine supplier or year founded (requires JavaScript).
- 🧑💻 Team Details Modal: On-click popups with more in-depth data like team principals, historical performance, etc. (requires JavaScript).
- 📍 Tracks Page: A dedicated page showcasing information about various F1 race tracks.
- Clone the repository:
git clone [https://github.com/your-username/f1-pulse.git](https://github.com/your-username/f1-pulse.git)
- Navigate to the project directory:
cd F1\ WEBSITE/
- Open
index.htmlin your preferred web browser.
That’s it — no complex setup or dependencies required!
This is a personal open-source project under continuous development. Contributions, suggestions, and feedback are always welcome! Feel free to fork the repository, make changes, and submit a pull request.
Have questions or want to connect?
- GitHub: https://github.com/anshagarwxl
- LinkedIn: https://www.linkedin.com/in/anshagarwxl/