Here’s a tailored README.md
for a interstellar web app built solely using HTML, CSS, and JavaScript:
# A Journey Beyond the Eclipse 🚀
🌌✨ Welcome to the Planetary Gallery! 🚀🌍 Explore the wonders of our solar system 🌠 with stunning visuals 🖼️ and fascinating details 📖 about each planet 🪐. Navigate seamlessly 🔄 through the cosmos 🌌 and embark on an educational journey perfect for space enthusiasts 🔭 and curious explorers 🌟. Let the adventure begin! 🌟🚀✨
- Beautiful Planetary Slides: Explore visually stunning details of each planet. 🌍✨
- Informative Descriptions: Learn about the unique characteristics and stories behind every celestial body. 📖
- Interactive Navigation: Enjoy seamless transitions between slides for an engaging experience. 🔄
- Responsive Design: Optimized for devices of all sizes, from mobile to desktop. 📱💻
Check out the live app here: Planetary Gallery Live
To run the project locally, follow these steps:
-
Clone the repository:
- git clone https://github.com/helloswapnadeep/eclipse-enigma.git
- cd eclipse-enigma
-
Open the project directory and locate the
index.html
file. -
Open the
index.html
file in your browser to view the app.
Eclipse Enigma/
├── index.html # Main HTML file
├── components/styles.css # Styling for the app
├── components/scripts.js # JavaScript for functionality
└── README.md # Project documentation
- HTML5: Markup for the structure of the app.
- CSS3: Styling and responsive design.
- JavaScript (ES6): Enhance slider interactivity with intuitive controls for seamless navigation, smooth transitions, and effortless content exploration.
🌠 Hidden Surprise
Open your browser console (F12 or Ctrl+Shift+I) for a special hidden message just for you! 🪐✨
# Fixing Asset Paths for Local Development
When working on a web project locally, you might encounter issues where images or fonts fail to load. This often happens because the asset paths in the code include a prefix specific to the production environment, such as `/eclipse-enigma`.
## Problem
In production, asset paths might look like this in your `.css` file:
### Example
```Font
src: url(/eclipse-enigma/fonts/iosevkanerdfontmono.ttf) format("truetype");
These paths work in production but fail on a local system because the /eclipse-enigma
prefix doesn't exist in the local environment.
To fix this issue, remove the /eclipse-enigma
prefix and use relative paths instead.
src: url(/fonts/iosevkanerdfontmono.ttf) format("truetype");
- Local Compatibility: Assets will load correctly on your local system.
- Cross-Environment Consistency: The project will work seamlessly in both local and production environments.
- Simpler Maintenance: Relative paths are easier to manage during development and deployment.
- Open your
.css
file. - Search for paths containing
/eclipse-enigma
(or any other production-specific prefix). - Replace these paths with relative paths starting from the project root or relevant directory.
src: url(/eclipse-enigma/fonts/iosevkanerdfontmono.ttf) format("truetype");
src: url(/fonts/iosevkanerdfontmono.ttf) format("truetype");
By making these adjustments, your project will be ready for local development without breaking asset loading functionality.
---
## 📄 License
This project is licensed under the [MIT License](LICENSE).
---
## 🤝 Contributing
Contributions are welcome! If you have suggestions or want to improve the app, feel free to fork the repository, make changes, and submit a pull request.
---
## 📧 Contact
For inquiries or support, contact:
- **Email**: [[email protected]](mailto:[email protected])
- **GitHub**: [helloswapnadeep](https://github.com/helloswapnadeep)
---
### ⭐ Don't forget to star this repository if you found it helpful!
This README file provides an organized overview of the project, installation steps, and additional details for contributors. Let me know if you'd like to make any adjustments!