🌍 Interactive 3D Rotating Globe

A visually engaging, interactive 3D rotating globe built with HTML, CSS, and JavaScript. The globe spins continuously and features clickable markers that display location info — perfect for portfolios, travel websites, or educational tools.

---

📑 Table of Contents

• 🌍 Interactive 3D Rotating Globe
  • 📑 Table of Contents
  • ✨ Features
  • 🖼 Preview
  • 📁 File Structure
  • 🌐 Live Demo
  • ⚙️ Installation
  • 🚀 Usage
  • 🤝 Contributing
  • 📬 Contact
  • 📄 License

---

✨ Features

• 🌎 Smooth 3D rotating globe animation
• 📍 Clickable markers for specific coordinates
• 💬 Info box updates when markers are clicked
• 📱 Responsive and lightweight
• 🧠 Built with pure HTML, CSS & JavaScript (no libraries)

---

🖼 Preview

---

📁 File Structure

• index.html: Main HTML structure with globe and markers
• style.css: Styling for the 3D globe, markers, and info box
• script.js: Marker click handling and info display

---

🌐 Live Demo

🔗 View Live Demo

---

⚙️ Installation

1. Clone the repository:

   git clone https://github.com/codewithoyem/interactive-3d-globe-100daysofcode.git
   cd interactive-3d-globe-100daysofcode
   

2. Open the HTML file:

   open index.html

---

🚀 Usage

1. Open the page and hover or touch a card.
2. Watch the globe spin continuously.
3. Click on a red marker to see the location name in the info box.
4. Add more markers by inserting new <div class="marker" style="--lat:LAT; --lon:LON;" title="NAME"></div> elements inside the .globe div.

---

🤝 Contributing

Feel free to fork, improve, or customize!

1. Fork this repository
2. Create a new branch
3. Make your changes
4. Submit a Pull Request

---

📬 Contact

• Created by CODEWITHOYEM
• 📧 mailto:oyem@crisent.com
• 🌐 oyem.crisent.com
• 🐦 @codewithoyem

---

📄 License

This project is licensed under the MIT License and is available for use under the MIT License.