Skip to content

Dive into the Infinite Abyss of the Cosmos, Where Mysteries Unfold and Enigmas of Space and Time Await Discovery.

Notifications You must be signed in to change notification settings

helloswapnadeep/eclipse-enigma

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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! 🌟🚀✨

🚀 Features

  • 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. 📱💻

🌐 Live Demo

Check out the live app here: Planetary Gallery Live


🏗️ Installation and Setup

To run the project locally, follow these steps:

  1. Clone the repository:

  2. Open the project directory and locate the index.html file.

  3. Open the index.html file in your browser to view the app.


📦 Folder Structure

Eclipse Enigma/
├── index.html                      # Main HTML file
├── components/styles.css           # Styling for the app
├── components/scripts.js           # JavaScript for functionality
└── README.md                       # Project documentation

🛠️ Technologies Used

  • 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! 🪐✨


☢️ Important Announcement

# 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.

Solution

To fix this issue, remove the /eclipse-enigma prefix and use relative paths instead.

Updated Code

src: url(/fonts/iosevkanerdfontmono.ttf) format("truetype");

Benefits of Using Relative Paths

  1. Local Compatibility: Assets will load correctly on your local system.
  2. Cross-Environment Consistency: The project will work seamlessly in both local and production environments.
  3. Simpler Maintenance: Relative paths are easier to manage during development and deployment.

Implementation Steps

  1. Open your .css file.
  2. Search for paths containing /eclipse-enigma (or any other production-specific prefix).
  3. Replace these paths with relative paths starting from the project root or relevant directory.

Before

src: url(/eclipse-enigma/fonts/iosevkanerdfontmono.ttf) format("truetype");

After

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!

About

Dive into the Infinite Abyss of the Cosmos, Where Mysteries Unfold and Enigmas of Space and Time Await Discovery.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published