MennaMagdy2019 / FoodFun

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FoodFun πŸ”πŸŸ

header

I appreciate the great contribution @El-khamisi πŸ˜„πŸ€ has made to this repository

Template website for a restaurant to provide its services for its various customers

The structure has been followed:

Global Structure

The website has a global navbar and footer, header photo as a title to each page and each page has its main section and various side section. All project has built by Html CSS JS.

Features & Specification

  • Interactive slideshow:

slidshow

  • Standard layout elements overall website:

buttons typography

  • Light Mode & Dark Mode Patterns:

Switches

  • Embedded live maps by Google to locating the resturant:

map

  • Responsive style to different screens:


@media (max-width: 767px) {
    ...
}

@media (min-width: 767px) and (max-width: 1000px) {
    ...
}

We tried to enhance the readability of code by:

  1. Using HTML5 section and outlines:

struct

  1. Global Navbar and Footer in a separated file and include them by iframe a nested browsing context:

<nav>                                         <footer>
    <iframe src="header.html" ></iframe>          <iframe src="footer.html" ></iframe>    
</nav>                                        </footer>
  1. Use flexbox & grid layouts:

layout

  1. Separate each page with its private CCS style sheet :

<link rel="stylesheet" href="assets/css/[stylesheet_name].css">

files

About


Languages

Language:HTML 66.5%Language:CSS 29.5%Language:JavaScript 4.0%