Giter Club home page Giter Club logo

alizaid96-the-corner-pastry_novresub's Introduction

The Corner Pastry

The Corner Pastry is a web page that targets people who are interested in Pastry around the world, everything needs to be known will easily be found here, from our shop location, to our current menu and finally why we are special!

main

Features

Navigation

featured at the top of the page, the navigation shows the pastry shop name "The Corner Pastry" that leads to the top of the home page. The other navigation links are to the right of the page at the top, Menu and Feedback, Menu will link us to a different section of the same page while Feedback will take us to a new page to give a feedback. The navigation is fully clear and has good color combination when hovered on, which makes it easier to navigate through the website.

The Header

  • The header shows the name of the Pastry, using the brown color which is used as a theme for the whole website.
  • An image with a zoom in effect that catches the customer's attention. navigation

why our recipes?

  • A middle section that has 3 reasons why our shop is the best.
  • each reason is enough to captivate the viewer and get anyone's attention.

whyourrecipes

Menu section

  • I placed 3 types of foods in the Menu, pizza, spaghetti and sweet pastry.
  • Another contrasting background that shows a delicious pizza while reading the menu.
  • Admin has the ability to add from 3 types of food available in the current day.

menu

User Registration

  • A very easy and straight forward way to the user to sign up to our website

signup

User Login

  • After Registring, the user can easily login and navigate through the website with a new feature to book a reservation.

login

Reservation table

  • Once logged in, you will find this lovely reservation table that is very easy to use.
  • You can add how many people reserving, what table do you prefer, the date and time of the reservation and prevent from double booking for further confusion.

reservation

User reservation page

  • Users can access their reservation records with date and time on, and the ability to cancel reservations aswell.

reserverecord

our location

  • Rather than a boring address, i placed a google map link that links the customer directly to our location!

map)

social media

  • at the bottom i applied a fixed footer that follows the customer's screen
  • I used font awesome icons for each of our social media platform

socials

Testing

  • I tested that this page works in different browsers, Chrome, Firefox and Safari
  • I confirmed that this website is responsive, looks good and function on all standard screen sizes using the devtools device toolbar.
  • I confirmed that the navigation, home, menu and feedback texts are readable and easy to understand
  • I have confirmed that the form works: requires entries in every field, will only accept an email in the email field, and the submit button works.

unfixed bugs and future features to be implemented

  • responsive design issue for the navigation elements in small screens.
  • in the menu section a small gap to the right that isnt filled by contrast.
  • color inconsistency throughout the website can be worked on in the future.
  • the feedback webpage is work in progress.

feedbck

Credits

  • The icons i used for my website were from fontawesome.com
  • the zoom in effect i used was from the Love Running Project
  • StackOverFlow, w3s and CodeInstitute inspired most of the functionality of this website.

Media

  • all the background images in this website were from pexels.
  • Installed whitenoise library to function the website while debug is set to False.

alizaid96-the-corner-pastry_novresub's People

Contributors

alizaid96 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.