/Restaurant_Template

A template for a restaurant website built with Vanilla JS, HTML, CSS and Bootstrap. Modify it and use it for your client!

Primary LanguageHTML

Readme written by: graylan0

The Restaurant Template is a simple yet elegant website built using HTML, CSS, and JavaScript. It's designed to provide a seamless user experience for restaurant owners looking to showcase their menu and services. The project consists of three main files: index.html, styles.css, and script.js.

  • index.html: This is the backbone of the website, containing the structure and content. It features a fixed-top navigation bar, a captivating header with a call-to-action button, and a menu section with various food items.

  • styles.css: This file holds all the custom styles. It uses the "Alumni Sans" Google Font and Bootstrap for styling. The CSS is organized into sections for easy navigation, including styles for the navbar, header, and menu items. Special hover effects and responsive design elements are also included.

  • script.js: This JavaScript file adds interactivity to the menu section. It employs a tabbed interface allowing users to switch between different categories like Pizza, Pasta, and Starters. The script ensures that the first tab is auto-selected upon page load.

Restaurant Template Installation Guide

This guide provides step-by-step instructions on how to install and customize the Restaurant Template on your local machine. The template is built using HTML, CSS, and JavaScript, and it's designed to be easily adaptable for any restaurant website.

Prerequisites

  • Text Editor (e.g., Visual Studio Code, Sublime Text)
  • Web Browser (e.g., Google Chrome, Firefox)
  • Basic understanding of HTML, CSS, and JavaScript

Installation Steps

  1. Download the Repository:

  2. Open the Project:

    • Open your text editor and navigate to the folder where you extracted the ZIP file.
    • Open the folder to view the project files (index.html, styles.css, script.js, and assets/).

  3. Review Files:

    • index.html: Main HTML file
    • styles.css: Stylesheet
    • script.js: JavaScript for interactivity
    • assets/: Contains images and other media

  4. Run the Project:

    • Double-click on the index.html file to open it in your web browser.
    • You should see the Restaurant Template website displayed.

  5. Customization:

    • HTML: Edit index.html to add your restaurant name, menu items, and other details.
    • CSS: Modify styles.css to change colors, fonts, and layout.
    • JavaScript: Update script.js if you want to add more interactivity.

  6. Test:

    • Refresh the index.html page in your web browser to see the changes.
    • Ensure that the website looks and functions as expected.

  7. Deployment:

    • Once you're satisfied with the customization, you can deploy the website to a web server or hosting service of your choice.

Troubleshooting

  • If the website doesn't display correctly, make sure all file paths in the HTML, CSS, and JavaScript files are correct.
  • If the menu tabs are not working, check the JavaScript console for errors and debug accordingly.