Giter VIP home page Giter VIP logo

the-corner-pastry'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!

my responsive design

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. header and nav bar

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. reasons why

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 menu section

our location

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

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.

Validator testing

  • HTML: no errors were returned when passing through the official w3c validator.
  • CSS: no errors were found when passing through the official (jigsaw) validator
  • Accessibility: I confirmed that the colors i used are easy to read and accessible by running it through lighthouse in devtools lighthouse test

unfixed bugs

  • 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

Credits

  • The icons i used for my website were from fontawesome.com
  • the zoom in effect i used was from the Love Running Project

Media

  • all the background images in this website were from pexels.

the-corner-pastry'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.