This repository contains the complete code for a front-end only model of a multi-page website for a bakery made using HTML, CSS, JavaScript, Jquery and Bootstrap.
On opening the Homepage.html
, you'll reach the homepage for the website. There, you'll see a navigation bar on top which links to all other pages, a
user icon and a cart icon. Moving down, you'll see some special deals, a brief about us, a map etc.
home1.mp4
home2.mp4
home3.mp4
The items can be navigated from the homepage or from the navigation bar. Moving on to the "Cakes" page, you'll see the four different types of cakes available and their names, on hovering over them.
cakes_main.mp4
Clicking on "Chocolate Cake", you'll reach the Chocolate cakes page where you'll be able to see all the differen kinds of chocolate cakes available. You may also check the prices according to the weights and add them to your cart.
Chocolate.mp4
Similar is the case with "Red Velvet Cake", "Butterscotch Cake" and "Vanilla Cake" pages.
Red.Velvet.mp4
Butterscotch.mp4
Vanilla.mp4
Moving on to the "Pastries" page, you'll see the list of all the pastries available, along with their photos, pricing and an add to cart option.
Pastries.mp4
Similarly, you can see all the items available for different categories like "Waffles", "Donuts" etc on their respective pages, which can be navigated from the navbar or the homepage.
CupCakes.mp4
Biscuits.and.Cookies.mp4
Dounuts.mp4
Waffles.mp4
Breads.mp4
Other.Items.mp4
Just like all the items pages, the page which contains information for buying "Party Props", "Gallery" containing the images of older special period offers or the page which gives brief introduction of the chefs can be navigated either from the navbar or the home page too.
Our.Kitchen.mp4
Party.Props.mp4
Gallery.mp4
Next comes the FAQ page, which can be accessed only via the navigation bar and opens in a new tab.
FAQ.mp4
On clicking on the user icon, the user is redirected to the "Sign Up" page.
On clicking on the cart icon, all the items added in the cart can be viewed and on clicking the "Checkout" button, it proceeds to the checkout page.
checkout.mp4
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en-US/docs/Web/JavaScript