Restaurant-template-website

Explore a responsive food website with a modern design. Discover mouth-watering dishes, read customer reviews, and place orders effortlessly. Powered by HTML, CSS, and JavaScript. 🍔🌐 #WebDesign #Uidesign

Live Demo

Visit Live Site

---

🗂️ Project Structure

.
├── index.html                # Redirects to the main project page
├── /projects
│   ├── tutproject.html       # The main restaurant website frontend
│   ├── styletut.css          # All modern and responsive CSS styles
│   ├── script.js             # Dynamic site functionality (navbar, search, slider, forms)
│   ├── ...images & assets... # Various .png and .jpg files (menu, dishes, UI art)
├── LICENSE                   # MIT License
├── README.md                 # Project documentation (this file)

---

🚩 Features

• Responsive Design: Works on mobile, tablet, and desktop
• Modern UI: Stylish layout, card menus, Font Awesome icons
• ScrollSpy Navigation: Active highlighting as you scroll
• Swiper-based Sliders: For hero and reviews sections
• Dynamic Navbar & Search: Mobile navbar toggle, animated search bar with autocomplete
• Order Form: Name, contact, food order, address, datetime validation
• User Authentication UI: Login/signup modal (UI only, no backend)
• Dark Mode Support: Auto and manual toggle
• Newsletter Subscriptions: UI for email subscriptions
• Back to Top Button
• Loader Animation on Page Load
• Image Assets: Preloaded food, menu, and decor images

---

🛠️ Code Overview

• index.html:
  Minimal redirect page for user-friendly GitHub Pages entry. Automatically redirects to /projects/tutproject.html.

• projects/tutproject.html:
  The heart of the frontend: all restaurant sections, menu cards, reviews, order form, authentication modal, newsletter, and more.

• projects/styletut.css:
  Extensive custom CSS for layout, color schemes, cards, sliders, forms, media queries for all screen sizes, and dark mode.

• projects/script.js:
  All JS for:

  • Navbar toggle
  • Scroll navigation with active links
  • Search (autocomplete, smooth scroll)
  • Swiper slider initialization and controls
  • Loader animation fade-out
  • Back to top button
  • Order form and authentication (login/signup) validation
  • Dark mode logic (theme toggling via localStorage)
  • Newsletter subscription alert

---

📦 How to Use

1. Clone the repo
   git clone https://github.com/TacticalReader/Restaurant-template-website.git

2. Open directly:
   Open /projects/tutproject.html in your browser or use GitHub Pages for live demo.

---

🤖 Tech Stack

• HTML5
• CSS3 (custom and utility classes, media queries)
• JavaScript (ES6+, DOM manipulation)
• Font Awesome (icons)
• Swiper.js (carousel/slider)

---

Licensing

This project is released under the MIT License.

---

Screenshots

Add screens of the main sections: hero, menu cards, review slider, order form, dark mode, etc.

---

Contributing

PRs are welcome. Please ensure any enhancements keep with the clean and modern aesthetic.

---

Built by TacticalReader — for web design learning and exploration.

1