🧪 Interactive Periodic Table of Elements

A visually structured, responsive Periodic Table of Elements. This project demonstrates the use of advanced CSS layouts to organize complex chemical data into a clean, educational interface.

🔗 Live Demo

📸 Preview

🌟 Overview

This project is a modern digital recreation of the Mendeleev Periodic Table. It arranges all known chemical elements by atomic number, electron configuration, and recurring chemical properties. It’s designed to be a lightweight reference tool for students and science enthusiasts.

🚀 Features

• Dynamic Layout: Uses CSS Grid to maintain the iconic "staircase" structure of the periodic table.
• Categorization: Elements are color-coded by groups (e.g., Alkali Metals, Noble Gases, Transition Metals).
• Responsive Design: Optimized for various screen sizes so users can study chemistry on the go.
• Interactive States: Hover effects to highlight specific elements for better focus.

🛠️ Built With

• HTML5: Semantic structure for the element data.
• CSS3: Advanced Grid and Flexbox for the complex layout, custom properties for color-coding.
• JavaScript: (In progress) For interactive element details and property filtering.

📂 Project Structure

├── index.html           # Main entry point
├── PeriodicTable.css    # Core styling & grid definitions
├── Prieodicprop.js      # Logic for element interactions
└── Periodic Table.html  # Alternative structure view



🚧 Roadmap
[ ] Implement search functionality to find elements by name or symbol.

[ ] Add detailed modal popups for each element (atomic weight, boiling point, etc.).

[ ] Toggle filters to highlight groups (e.g., only show Noble Gases).

👤 Author
Eniola Ibiwoye

GitHub: @Niwani

LinkedIn: Eniola Ibiwoye 

Created with ❤️ for Science and Development.