EN | CN

🍳 CELESTIAL — Your Modern Food & Recipe Website Template 🍽️

A clean, lightweight, and modern starting point for your delicious food blog or recipe collection. Inspired by elegant and functional designs inspired by Jamie Oliver's website.

⚠️ Disclaimer

Some images used in this project were obtained from Google Images and are used solely for educational and demonstration purposes. All rights and credits belong to their respective owners. No copyright infringement is intended.

📌 About This Project

CELESTIAL is a minimal, single-page website template built purely with HTML and CSS. It was created as a learning exercise to explore clean navigation patterns and provide a simple, beautiful foundation for anyone wanting to share their culinary creations online.

Whether you're a home cook sharing family recipes, a food blogger documenting your adventures, or just need a simple portfolio, CELESTIAL offers an elegant starting point. It features a responsive three-column navigation bar and a sleek CSS-only hover dropdown menu – no JavaScript required!

🚀 Live Demo & Preview

To preview the template locally:

1. Clone this repository.
2. Open the index.html file directly in your web browser.

⚙️ Getting Started & Local Development

Want to tinker with the code? Here’s how:

1. Clone the repository:

   git clone [https://github.com/Dendroculus/Food-Recipe-Website.git](https://github.com/Dendroculus/Food-Recipe-Website.git)

2. Navigate to the project directory:

   cd Food-Recipe-Website

3. Open index.html in your browser to see the template.

For a smoother development experience with live reload (automatically updates the browser when you save changes):

• Using VS Code: Install the "Live Server" extension. Right-click on index.html and choose "Open with Live Server".
• Using Python 3: Run python -m http.server 8000 in your terminal and open http://localhost:8000 in your browser.

📂 Project Structure

This is a temporary structure; subject names may change later:

Food-Recipe-Website/
├── index.html          # Main HTML structure and content
├── styles.css          # All CSS styling
├── assets/             # Folder for images and icons
│   └── ...
└── font/               # Folder for local font files (e.g., Montserrat)
    └── ...

🧩 How to Use & Customize

Making CELESTIAL your own is easy:

1. Change Title/Logo: Edit the text inside <li class="celestial">...</li> in index.html. You can replace CELESTIAL 💫 with your site name or an <img> tag for a logo.
2. Update Left Navigation Links: Modify the <a> tags within <ul class="left">...</ul>.
3. Update Right Icons/Links: Change the <img> tags inside <ul class="right">...</ul>. Consider using inline SVGs for better quality and styling options.
4. Edit Dropdown Menu Items: Update the list items (<li>) inside <ul class="recipes-dropdown">...</ul>.
5. Customize Styles: Open styles.css and adjust colors, fonts, spacing, etc. The template uses the Montserrat font locally – make sure it's in the /font folder or switch to a web font via CSS @import.

🤝 Contributing

Got ideas or found a bug? Contributions are welcome!

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request with a clear description of your changes.

Please include screenshots if you make UI changes!

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

👤 Contributors

Hans 展豪

Jess2Jes

Solynixx

StevNard

Milkdrinker-creator