🧪 Periodic Table of Elements — HTML & CSS Project

📖 Overview

This project presents a visually styled Periodic Table of Elements, built using pure HTML and CSS. It replicates the structure of the actual periodic table, with each element displayed in its correct position, styled for clarity and visual appeal.

🌐 Live Preview

You can host this project using GitHub Pages or any static site hosting service to view the periodic table in your browser.

📁 Project Structure

├── index.html
├── Style.css
└── Image.avif

• index.html: Contains the full HTML markup for the periodic table.
• Style.css: External stylesheet for layout and typography.
• Image.avif: Background image used for visual enhancement.

🧬 Features

✅ HTML Highlights

• Semantic HTML structure using <table>, <tr>, <td>, <strong>, <small>, <h1>, and <q>.
• Accurate layout of elements using colspan and rowspan to reflect real-world periodic table gaps.
• Each cell includes:
  • Element Symbol (e.g., H, He, Li)
  • Atomic Number (e.g., 1, 2, 3)

🎨 CSS Styling

• Background: A fixed, centered image (Image.avif) fills the viewport.
• Typography:
  • Title uses the Asimovian font for a futuristic look.
  • Table content uses the Bungee font for bold, readable styling.
• Table Layout:
  • Left margin applied to visually center the table.
  • Borders and alignment enhance clarity.

🔗 Fonts

Fonts are imported from Google Fonts:

• Asimovian
• Bungee

📌 Use Cases

This project is ideal for:

• Educational websites
• Chemistry learning tools
• Interactive science dashboards
• HTML/CSS practice and portfolio enhancement

🚀 How to Run

1. Clone the repository:

   git clone https://github.com/Aashir-Shaikh/periodic-table-html-css.git

2. Open index.html in any modern browser.
3. Ensure Style.css and Image.avif are in the same directory.

🛠️ Customization Ideas

• Add hover effects to each element cell.
• Include tooltips with element details (e.g., atomic mass, category).
• Make the table responsive for mobile devices.
• Integrate JavaScript for interactive filtering or search.

📜 License

This project is open-source and available under the MIT License.