A modern, interactive periodic table web project built with HTML, CSS Grid, and advanced CSS techniques. This project brings the periodic table to life with smooth scrolling, dynamic gradients, interactive filtering, and 3D hover effects—all designed to make learning about the elements engaging and visually stunning.
- Responsive CSS Grid Layout: Organized, flexible grid layout that arranges elements in an intuitive, responsive design.
- Smooth Scrolling: Enhanced navigation experience with CSS smooth scrolling.
- Interactive Filter Buttons: Filter elements by categories such as Alkali Metals, Alkaline Earth Metals, Transition Metals, and more using stylish, gradient buttons.
- Dynamic Animations & Effects:
- Gradient Text & Borders: Eye-catching gradient effects on text and borders.
- Hover 3D Transformations: Elements scale and translate on hover, creating a 3D-like experience.
- Modal Popups: Click on an element to reveal additional details in a sleek modal window.
- Modern CSS Enhancements: Utilizes CSS variables, backdrop filters, and custom animations (e.g., the shine-wave effect on the header) for a polished, modern look.
No additional libraries or frameworks are needed. Simply open the HTML file in your modern web browser.
- Clone the repository:
git clone https://github.com/yourusername/enhanced-periodic-table.git