Periodic Table Website 🌟

Explore the wonders of the Periodic Table with our interactive and educational website! This project is designed to make learning about the periodic table fun and engaging.

🌐 Live Demo

Check out the live website here: Periodic Table Website

📖 Features

🔬 Interactive Periodic Table

• A clickable periodic table providing in-depth information about each element, including:
  • Name and symbol
  • Atomic number and weight
  • Atomic structure (represented visually with an atom PNG).
  • Uses and other important details.

🕰️ History of the Periodic Table

• Learn about the fascinating journey of how the periodic table was developed.
• Insights into contributions by scientists like Dmitri Mendeleev and others.

📈 Periodic Trends

• Detailed explanations of trends in the periodic table, such as:
  • Atomic radius
  • Electronegativity
  • Ionization energy
  • Reactivity
  • Metallic and non-metallic character.

🎓 Mnemonics for Memorization

• Creative mnemonics to help you remember:
  • Groups and periods
  • Trends and properties of elements.

🌟 Navigation-Friendly Design

• Easy-to-use navigation bar for switching between sections:
  • Periodic Table
  • History
  • Trends
  • Mnemonics

🛠️ Technologies Used

• HTML: Structure of the website.
• CSS: Styling for a visually appealing and user-friendly experience.

🚀 How to Explore Locally

1. Clone this repository:

   git clone https://github.com/Hariom-Handloom/periodic-table.git
   

2. Navigate to the project directory:

   cd periodic-table
   

3. Open the index.html file in your preferred web browser to start exploring!

📁 Project Structure

periodic-table/
│
├── index.html               # Main interactive periodic table.
├── public/
│   ├── history.html         # Details about the history of the periodic table.
│   ├── trends.html          # Explanation of periodic trends.
│   ├── mnemonics.html       # Fun mnemonics for memorizing the periodic table.
│   ├── 1.html               # Hydrogen element page.
│   ├── 2.html               # Helium element page.
│   ├── ...                  # Other element pages.
│   │                
│   ├── element.css          # Styling for individual element pages.
│   ├── trends.css           # Styling for the trends page.      
│   ├── mnemonics.css        # Styling for the mnemonics page.    
│   ├── history.css          # Styling for the history page.    
│   ├── style.css            # General site styling.     
│   │          
│   └── assets/
│       ├── elements/        # PNGs for all 118 elements.
│       │   ├── 1.png        # Hydrogen element image.
│       │   ├── 2.png        # Helium element image.
│       │   └── ...          # Other element images.
│       └── bg1.jpg          # Background image for the site.
│      
└── README.md                # Project documentation.

🤝 Contributing

Contributions are welcome! If you'd like to improve this project:

1. Star and Fork the repository.

2. Create a feature branch:

   git checkout -b feature-name
   

3. Commit your changes:

   git commit -m 'Add feature-name'
   

4. Push your branch:

   git push origin feature-name
   

5. Open a pull request.

🧑‍💻 Author

Ayush Karan GitHub Profile

Team Members:

1. Ayush Karan
2. Ashish Raj
3. Yash Thakur
4. Gaurav Bhardwaj