An interactive, beginner-friendly web project that demonstrates how to build an SVG-based map of India using HTML and CSS.
This project showcases a simple front-end setup using HTML, CSS, and SVG to create an interactive map of India. Users can hover over different regions to see visual feedback.
It is designed for learning, experimentation, and as a foundation for building more advanced interactive maps.
- Clean and simple HTML/CSS structure
- Interactive hover effects on map regions
- Fully responsive SVG map
- Lightweight — no frameworks or dependencies
- Easy to customize and extend
-
Clone the repository:
git clone https://github.com/agnuspaul98/india-map.git
-
Open
index.htmlin your browser. -
Start exploring and modifying the code ✨
No additional setup required.
This project is ideal for :
- Beginners learning HTML and CSS
- Students exploring SVG graphics
- Developers experimenting with interactive maps
- Anyone curious about front-end basics
HTML (HyperText Markup Language) structures the content of a web page.
CSS (Cascading Style Sheets) controls how HTML elements look — colors, layout, size, and responsiveness.
A hover effect changes an element’s appearance when the mouse pointer moves over it.
- Basic HTML page structure
- Styling elements using CSS
- Working with SVG graphics
- Creating hover-based interactivity
- Building a small but complete front-end project
- Add state names or tooltips on hover
- Highlight selected regions on click
- Add JavaScript for richer interactivity
- Display state-level information
Contributions are welcome! Feel free to fork this repository, make improvements, and open a pull request.
This project is open-source and available for learning and experimentation.