Scribd
Upload
30 views38 pages

BXG Ixd

Uuauauauuauaua jaja

Uploaded by

asifsitwat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views38 pages

BXG Ixd

Uuauauauuauaua jaja

Uploaded by

asifsitwat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 38

Our Group Members:

 Muhammad Hashir Siddiqui :

(Student1470808)

 Muhammad Shayan Kashif:


(Student1477180)

 Sharjeel:
(Student1470634)

 Muhammad Haider Ali:


(Student1463990)

 Muhammad Shahid:
(Student1463990)
Submitted To:
eprojects@aptech.ac.i
n

Project Instructor:
Miss Ansa Tariq

Curriculum Code:
7062 AC
TABLE OF CONTENT

Project certification…………………………………………………….5
Introduction of Bakerz Bite………………………………6
Requirement specification……………………………………………...7
Hardware/software requirements…………………………….……8
Home page…………………………………………………………………...13
About us……………………………………………………………………..…14
Brands information……………………………………………………….15
Contact us description………………………………….……………….16
ACKNOLEDGMENT

We are thankful to Almighty, ALLAH that by His


grace we have been successful. We also thanks to
“MIS ANSA TARIQ”

we presenting on Visual Studio Code in your


hands.

This is our First Year Semester E-project. We have


tried our best & struggled for a better outlook to
come. This project has been developed in Visual
Studio Code. We choose to make Webpage for
Bakerz Bite as a project. We find easy to do coding
in Visual Studio Code.

We earnestly hope that this project will provide all


the necessarily information required for the user to
fulfill their inspiration. However suggestions for
improvement of the project will be thankful
received & acknowledge
PROJECT CERTIFICATION

This is to certify that,

xyz (Enrolment #) has successfully


designed and developed:

Bakerz Bite
Submitted by

Aptech computer Education


Date of issue:

24-jun-2023
Date of submission:

15-jul-2023.
INTRODUCTION OF BAKERZ BITE

We are a group of 4 student. We watch all sorts of Bakeries in all sorts


of countries, then write reports and feature articles about them which
are published in a newspaper. This is a fine and privileged occupation,
and one to be disclosed with tact. People who do respectable,
important jobs don’t like to hear about it.

1) The Home Page should be created making use of Frames.

2) A Menu should be created which would categorize all the information about
the features provided in the Site For e.g. a Menu for Various Brands, a Menu
for Features of Air-conditioner etc etc something like that.

3) The Shop display should be categorized according to the Brand names of


Air-conditioner like if a User wants to see only LG Ac then he click on Some
LG Link/button etc and he will see only That Brand Air-conditioner and so on.

4) A Products of features of Individual Air-conditioner should be displayed on


the Web Page along with the AC but detailed Features should be stored in
Individual Word documents which can be downloaded or viewed by the User
who wishes to see the same.

5) A Brands Web Page should also be there where there is Air-conditioner


comparisons done with various models of same brand or various models of
various brands.

- The Brands information should be provided in Tabular format comparing


the features of different Air-conditioner

- This Brands would be for 5 Air-conditioner of similar brands and 2 C of


different brands for 1 month and then it will change so for the time being the
Page should handle the above requirement.

6) There should be a “Contact Us” page which will have the Address of the
Company which is as follows and the mail address which when clicked will
invoke the local mail client from where they can send an email.
HARDWARE&SOFTWARE/REQUIRMENT

Hardware:
 Intel Core i3/i5 Processor or higher.
 8 GB RAM or above.
 Color SVGA.
 500 GB Hard Disk space.
 Mouse.
 Keyboard.

Software:
 Frontend: HTML5, CSS, Bootstrap, JavaScript, jQuery,
AngularJS, XML.
 Data Source: JSON files or TXT files.
Other Requirements:
Operating Portal: Windows.

Browsers: Edge, Chrome,


Mozilla Firefox, Safari.
SYSTEM REQUIRMENT

No. Items Description

1 Operating WINDOWS XP to 10(latest)


System.

2 Main Processor. Minimum 2.45 or better

3 RAM (Memory) Minimum 256 or better

4 Web Browser Google Chrome/Firefox

5 Software Visual Studio Code


HOME PAGE CODING
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="./Libraries/jQuery/code.jquery.com_jquery-3.7.0.min.js"></script>
<script src="./Libraries/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></
script>
<link rel="stylesheet"
href="./Libraries/bootstrap-5.3.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./Libraries/font-awesome/fontawesome-free-
6.4.0-web/css/all.min.css">
<link rel="stylesheet" href="./stylesheet.css">
<link rel="shortcut icon" href="./Images/favicon.png" type="image/x-icon">
<script src="functions.js"></script>
<!---owl carrousel CSS---->
<link rel="stylesheet" href="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
<!---owl Carrousel JS-->
<script src="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
<!---owl carrousel-->
<title>Bakerz Bite</title>
<script>

//
//back to top
//
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
<header id="header" class="container-fluid">
<div id="navigation" >
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="d-flex align-items-center">
<div id="logo" class="navbar-brand">
<a href="index.html"><img src="./Images/logo.png"
height="60px"></a>
</div>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse collapse smooth-scroll justify-
content-end" id="basicExampleNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-
link">Home</a></li>
<li class="nav-item"><a href="About.html" class="nav-
link">About Us</a></li>
<li class="nav-item"><a href="contact.html" class="nav-
link">Contact Us</a></li>
<li class="nav-item"><a href="#merchandise" class="nav-
link"><i class="fa fa-shirt"></i> Merchandise</a></li>
</ul>
</div>
</div>
</nav>
</div>
<section id="hero-home" class="container-fluid p-0">
<div id="hero-car" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./Images/sliders/angelo-pantazis-2-U0A2tNYhM-
unsplash.jpg" alt="..." class="d-block">
</div>
<div class="carousel-item">
<img src="./Images/sliders/karlis-dambrans-oLHk_WLupSc-
unsplash.jpg" alt="..." class="d-block">
</div>
<div class="carousel-item">
<img src="./Images/sliders/mae-mu-m9pzwmxm2rk-
unsplash.jpg" class="d-block">
</div>
<div class="carousel-item">
<img src="./Images/sliders/mink-mingle-qZ5lPCPvdXE-
unsplash.jpg" class="d-block">
</div>
<div class="carousel-item">
<img src="./Images/sliders/sigmund-p9pCxNIX4lk-
unsplash.jpg" class="d-block">
</div>
</div>
</div>
<div id="heading" class="container-fluid d-flex justify-content-center
align-items-center p-0 m-0">
<div>
<h1 class="display-1 text-center">Bakerz Bite</h1>
<p class="h3 text-center">Where smiles are served daily</p>
</div>
</div>
</section>
<section id="hero-home" class="container-fluid p-0">
<div id="hero-car" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./Images/sliders/angelo-pantazis-2-U0A2tNYhM-
unsplash.
<div class="carousel-item">
<img src="./Images/sliders/mae-mu-m9pzwmxm2rk-
unsplash.jpg" class="d-block">
</div>
<div class="carousel-item">
<img src="./Images/sliders/mink-mingle-qZ5lPCPvdXE-
unsplash.jpg" class="d-block">
</div>
<div class="carousel-item">
<img src="./Images/sliders/sigmund-p9pCxNIX4lk-
unsplash.jpg" class="d-block">
</div>
</div>
</div>
<div id="heading" class="container-fluid d-flex justify-content-center
align-items-center p-0 m-0">
<div>
<h1 class="display-1 text-center">Bakerz Bite</h1>
<p class="h3 text-center">Where smiles are served daily</p>
</div>
</div>
</section>
<section id="sec-home-1" class="container-fluid row">
<div class="col-sm-6 d-flex justify-content-start align-items-center">
<div>
<h1 class="display-4" style="border-left: 2px solid black; padding-
left: 5px;">The best Bakery<br>in Pakistan</h1>
<p class="h5">Since its launch, “Bakerz Bite” has developed into a
reputable bakery & café,
specializing in baked goods, passionately made from the finest
ingredients.</p>
<button id="order-open" class="dark">Order Online</button>
<a href="About.html#abt-sec-3"><button
class="white">Location</button></a>
<script>
$(document).ready(function(){
$("#order-open").click(function(){
$("#form-order").addClass('popup');
<section id="cards" class="container-fluid">
<div class="row">
<div id="card-1" class="col-md-4 d-flex justify-content-center align-
items-center">
<div>
<h4>Order Online</h4>
<p><b>Call: </b><a href="tel: 923161234567"> (92) 316 123
4567 <i class="fa-solid fa-arrow-right"></i></a></p>
<p><b>E-Mail: </b><a href="mailto: book@bakerzbite.com">
book@bakerzbite.com <i class="fa-solid fa-arrow-right"></i></a></p>
<p><b>Form: </b><a href="#"> Reservate now <i class="fa-
solid fa-arrow-right"></i></a></p>
</div>
</div>
<div id="card-1" class="col-md-4 d-flex justify-content-center align-
items-center">
<div>
<h4>Locations</h4>
<p>42-M, P.E.C.H.S. Dr. Mehmood Hussain Road, Karachi</p>
<p>Al-Rehman Building I.I.Chundrigar Road, Karachi</p>
</div>
</div>
<div id="card-1" class="col-md-4 d-flex justify-content-center align-
items-center">
<div>
<h4>Open Hours</h4>
<p><b>Mon-Fri: </b> 9 AM - 8 PM</p>
<p><b>Saturday: </b>10 AM - 11 PM</p>
<p><b>Sunday: </b>10 AM - 10 AM</p>
</div>
</div>
</div>
<script>
(document).ready(function(){

$(window).scroll(function(){
var scrollPosition = $(window).scrollTop();
var windowHeight = $(window).height();
var elementPosition = $("#cards").offset().top;

<section id="menu-caro" class="container-fluid p-0 pb-5">


<div id="menu-content" class="row container">
<div class="col-6 display-4 my-5 pt-5 text-center">Our Menu </div>
<div class="col-6 display-4 my-5 pt-5 text-end">
<div class="slider-controls">
<button class="slider-prev"><i class="fas
fa-arrow-left"></i></button>
<button class="slider-next"><i class="fas
fa-arrow-right"></i></button>
</div>
</div>
</div>
<div id="menu-slider" class="menu-slider owl-carousel container">
<a href="menu-popup.html#crois" target="_blank"><!--Croissants -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/sergio-arze-eH9_kZ92LWQ-
unsplash.jpg" alt="....">
<h1 class="p-3">Croissants</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Butter,
Water, Milk, Sugar, Salt, Instant yeast, Egg (for egg wash),
Filling options (e.g., chocolate, almond paste, ham, cheese)</p>
<p class="p-3"><b>Price: </b>50 PKR to 150 PKR</p>
</div>
</a>
<a href="menu-popup.html#cupcke" target="_blank"><!-- Cupcakes --
>
<div class="menu-card container">
<img class="p-3" src="./Images/menu/michael-chiara-BLy3LMYMVvE-
unsplash.jpg" alt="....">
<h1 class="p-3">Cupcakes</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Butter or Oil,
Milk or Butter Milk, Sugar, Salt, Vanilla Extract,
Optional flavorings (e.g., lemon zest, cocoa powder, cinnamon), </p>
<p class="p-3"><b>Price: </b>50 PKR to 200 PKR</p>
</div>
</a>
<a href="menu-popup.html#cakes" target="_blank"><!-- Cakes -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/ulysse-pointcheval-
1WmlAiYgnoI-unsplash.jpg" alt="....">
<h1 class="p-3">Cakes</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Sugar,
Butter or oil, Eggs, Baking powder,
Milk or buttermilk, flavor extracts depending on the desired flavor,
Salt</p>
<p class="p-3"><b>Price: </b>500 PKR to 7,000 PKR</p>
</div>
</a>
<a href="menu-popup.html#pastries" target="_blank"><!-- pastries -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/geri-chapple-fXdoHjQ2Pyg-
unsplash.jpg" alt="....">
<h1 class="p-3">Pastries</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Butter,
Cold water, Salt,
Powdered sugar, Water or milk, Vanilla extract, Lemon juice or zest,
Egg wash (for shiny finish)
</p>
<p class="p-3"><b>Price: </b>50 PKR to 200 PKR</p>
</div>
</a>
<a href="menu-popup.html#pies" target="_blank"><!-- Pies -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/kelcie-herald-K_GkRKJJE-I-
unsplash.jpg" alt="....">
<h1 class="p-3">Pies</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Butter or
shortening, Cold water,
Salt, Sugar (optional), Fruit (e.g., apples, berries, peaches,
cherries), Sugar</p>
<p class="p-3"><b>Price: </b>400 PKR to 3,500 PKR</p>
</div>
</a>
<a href="menu-popup.html#cookies" target="_blank"><!-- Cookies -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/conor-brown-H1uISjlRXJE-
unsplash.jpg" alt="....">
<h1 class="p-3">Cookies</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Butter or
margarine, Granulated sugar,
Eggs, Baking powder, Vanilla extract, Salt, Sprinkles, Melted
chocolate</p>
<p class="p-3"><b>Price: </b>20 PKR to 2,500 PKR</p>
</div>
</a>
<a href="menu-popup.html#doughnuts" target="_blank"><!--
Doughnuts -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/anna-sullivan--tR4fnNJW2A-
unsplash.jpg" alt="....">
<h1 class="p-3">Doughnuts</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Sugar,
Powdered sugar glaze,
Chocolate glaze, Vanilla glaze, Cinnamon sugar coating, Sprinkles
or colored sugar</p>
<p class="p-3"><b>Price: </b>30 PKR to 800 PKR</p>
</div>
</a>
<a href="menu-popup.html#bread" target="_blank"><!--Breads -->
<div class="menu-card container">
<img class="p-3" src="./Images/menu/nha-van-9bxJoydEv4U-
unsplash.jpg" alt="....">
<h1 class="p-3">Breads</h1>
<p class="p-3"><b>Ingredients: </b>All-purpose flour, Sugar,
Butter or oil, Eggs, Baking powder,
Milk or buttermilk, flavor extracts depending on the desired flavor,
Salt</p>
<p class="p-3"><b>Price: </b>5 PKR to 350 PKR</p>
</div>
</a>
</div>
<script>
$(document).ready(function() {
$('#menu-slider').owlCarousel({
items: 4,
loop: true,
margin: 10,
nav: false,
dots: false,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
992: {
items: 3
},
1140:{
items: 4
}
}
});
//
//ends

// Custom navigation
$('#menu-content .slider-prev').click(function() {
$('#menu-slider').trigger('prev.owl.carousel');
});

$('#menu-content .slider-next').click(function() {
$('#menu-slider').trigger('next.owl.carousel');
});
});
</script>
</section>
<section id="sec-home-3" class="container-fluid p-0">
<div>
<div class="container">
<h1 class="display-4 text-bold text-center py-5">We believe and are
dedicated<br>in delivering premium quality products.</h1>
</div>
<div id="review-slider" class="owl-carousel container">
<div class="review-card p-5 container"><!---1st review-->
<div class="rev-name">
<h3>John Smith</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star"></i>
<i title="excellent" class="fas fa-star"></i>
</div>
<div class="rev">
<p><i>"I had a fantastic experience with Bakerz Bite. The
customer service was exceptional, and the food was absolutely delicious.
The menu offered a great variety of options, and everything I
tried was fresh and flavorful. I highly recommend Bakerz Bite
for anyone looking for a satisfying and enjoyable dining
experience."</i></p>
</div>
</div>
<div class="review-card p-5 container"><!---2nd review-->
<div class="rev-name">
<h3>Sarah Johnson</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star"></i>
<i title="excellent" class="fas fa-star blank"></i>
</div>
<div class="rev">
<p><i>"Bakerz Bite is a hidden gem! The atmosphere is cozy
and inviting, and the staff is friendly and attentive.
The menu has a good selection of both vegetarian and non-
vegetarian dishes. I particularly loved their signature dish.
The only reason I didn't give it 5 stars is because the portion
sizes were a bit small for the price."</i></p>
</div>
</div>
<div class="review-card p-5 container"><!--3rd review-->
<div class="rev-name">
<h3>David Thompson</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star"></i>
<i title="excellent" class="fas fa-star"></i>
</div>
<div class="rev">
<p><i>"Bakerz Bite exceeded my expectations. The food was
absolutely delicious, and the presentation
was top-notch. The staff was knowledgeable and provided
excellent recommendations. The prices were
reasonable for the quality of food and service. I will definitely
be returning to Bakerz Bite and recommending
it to my friends and family"</i></p>
</div>
</div>
<div class="review-card p-5 container"><!---4th review-->
<div class="rev-name">
<h3>Emily Wilson</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star blank"></i>
<i title="excellent" class="fas fa-star blank"></i>
</div>
<div class="rev">
<p><i>"My experience at Bakerz Bite was average. While the
food tasted good, the service
was slow and the staff seemed overwhelmed. The prices were
a bit high considering the portion
sizes. However, the ambiance of the restaurant was pleasant,
and the menu had a decent variety
of options. It's an okay place to dine if you're not in a
rush."</i></p>
</div>
</div>
<div class="review-card p-5 container"><!---fifth review-->
<div class="rev-name">
<h3>Michael Anderson</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star"></i>
<i title="excellent" class="fas fa-star"></i>
</div>
<div class="rev">
<p><i>"Bakerz Bite is my go-to place for a quick and delicious
meal.
The menu is diverse, offering something for everyone. The
staff is friendly
and efficient, and the food is always fresh and flavorful. I've
never been disappointed
with my experience at Bakerz Bite, and I highly recommend it
to anyone looking for
great food and excellent service."</i></p>

ABOUT US PAGE CODING


<!DOCTYPE html>
<html>
<head>
<title>About | Bakerz Bite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="shortcut icon" href="./Images/favicon.png" type="image/x-
icon">
<link rel="stylesheet" href="./Libraries/font-awesome/fontawesome-free-
6.4.0-web/css/all.min.css">
<link href="./Libraries/bootstrap-5.3.0-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="./Libraries/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
<script
src="./Libraries/jQuery/code.jquery.com_jquery-3.7.0.min.js"></script>
<script src="functions.js"></script>
<link rel="stylesheet" href="stylesheet.css">

<!---owl carousel-->
<link rel="stylesheet" href="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
<script src="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
<!---/owl carousel-->
</head>
<body>

<!---Viewers Count--->
<div id="view-count">
<p class="px-3">Current Viewers: <i id="count">0</i></p>
<script>
const count = document.getElementById('count');

function updateCount(i) {
setTimeout(() => {
count.innerHTML = i;
}, i * 1000); // Adjust the delay time (in milliseconds) as needed
}

for (let i = 0; i < 1000; i++) {


updateCount(i);
}
</script>
</div>
<header id="header" class="container-fluid">
<div id="navigation" >
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="d-flex align-items-center">
<div id="logo" class="navbar-brand">
<img src="./Images/logo.png" height="60px">
</div>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse collapse smooth-scroll
justify-content-end" id="basicExampleNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-
link">Home</a></li>
<li class="nav-item"><a href="About.html" class="nav-
link">About Us</a></li>
<li class="nav-item"><a href="contact.html" class="nav-
link">Contact Us</a></li>
<li class="nav-item"><a href="index.html#merchandise"
class="nav-link"><i class="fa fa-shirt"></i> Merchandise</a></li>
</ul>
</div>
</div>
</nav>
</div>
<script>
<section id="abt-sec-2">
<div class="row">
<div class="col-md-6 d-flex justify-content-center align-items-
center">
<div class="p-5">
<img src="./Images/About/sec2-img-1.jpg">
<h1 class="display-6 mt-5">Our first store opening.</h1>
<p class="h6">
At Bakerz Bite, we cherish the memories of our very first
bakery
opening—a momentous occasion that marked the realization
of our
dreams and aspirations. It was a day filled with anticipation,
excitement, and a sprinkle of nervousness as we embarked on
a
journey to share our passion for baking with the world.
</p>
</div>
</div>
<div class="col-md-6 d-flex justify-content-center align-items-
center">
<div class="p-5">
<h1 class="display-6 mt-3">Our Story.</h1>
<p class="h6 mb-5">
Bakerz Bite was born out of a lifelong love
affair with baking. Our founder,<b> Osama Bin Laden</b>,
discovered their passion for the art of baking at
a young age. Inspired by family recipes and a desire
to share the joy of homemade treats, they embarked
on a mission to create a bakery that would deliver
exceptional flavors and exceptional experiences.
</p>
<img src="./Images/About/sec2-img-2.jpg">
</div>
</div>
</div>
<script>
<section id="abt-sec-3" class="my-5 container-fluid py-5">
<div id="location">
<div id="loc-content my-5 p-y5">
<h1 class="display-3 text-center">
Find us at
</h1>
</div>
<div id="loc-slider" class="owl-carousel container my-5">
<div class="row"><!--1st location-->
<div class="col-md-5 loc-sld-content mx-0 p-5" >
<div class="p-5">
<h1 class="display-5 mb-5">Karachi, Sindh</h1>
<p class="pt-5 pb-2 h5"><i class="fas fa-map-marker-
alt"></i> 42-M, P.E.C.H.S. Dr. Mehmood Hussain Road, Karachi</p>
<p class="h5 py-2"><i class="fas fa-phone"></i> (92) 214
535 042</p>
<p class="h5 py-2"><i class="fas fa-envelope-open"></i>
book@bakerzbite.com</p>
</div>
</div>
<div class="col-md-7 mx-0 p-0">
<img src="./Images/About/locations/loc 1.jpg" alt="...">
</div>
</div>
<div class="row"><!--2nd location-->
<div class="col-md-5 loc-sld-content mx-0 p-5" >
<div class="p-5">
<h1 class="display-5 mb-5">Karachi, Sindh</h1>
<p class="pt-5 pb-2 h5"><i class="fas fa-map-marker-
alt"></i> Al-Rehman Building I.I.Chundrigar Road, Karachi</p>
<p class="h5 py-2"><i class="fas fa-phone"></i> (92) 216
989 615</p>
<p class="h5 py-2"><i class="fas fa-envelope-open"></i>
book@bakerzbite.com</p>
</div>
</div>
<div class="col-md-7 mx-0 p-0">
<img src="./Images/About/locations/loc 2.jpg" alt="...">
</div>
</div>
<div class="row"><!--3rd location-->

<div class="col-md-5 loc-sld-content mx-0 p-5" >


<div class="p-5">
<h1 class="display-5 mb-5">Peshawar, KPK</h1>
<p class="pt-5 pb-2 h5"><i class="fas fa-map-marker-
alt"></i> B-15, Spinzar Plaza, University Road, Peshawar</p>
<p class="h5 py-2"><i class="fas fa-phone"></i> (92) 915
706 120</p>
<p class="h5 py-2"><i class="fas fa-envelope-open"></i>
book@bakerzbite.com</p>
</div>
</div>
<div class="col-md-7 mx-0 p-0">
<img src="./Images/About/locations/loc 3.jpg" alt="...">
</div>
</div>
</div>
<div class="slider-controls display-6 text-center my-3 py-5">
<button class="slider-prev"><i class="fas
fa-arrow-left"></i></button>
<button class="slider-next"><i class="fas
fa-arrow-right"></i></button>
</div>
</div>
<script>
// Custom navigation
$('#location .slider-prev').click(function() {
$('#loc-slider').trigger('prev.owl.carousel');
});

$('#location .slider-next').click(function() {
$('#loc-slider').trigger('next.owl.carousel');
});
});
</script>
</section>

<!---Gallery-->
<section id="abt-sec-4" class="my-5 container-fluid">
<div class="container">
<h1 class="text-center display-1">MENU CATALOGUE</h1>
<p class="mx-5 h5 text-center">At Bakerz Bite, we take great pride
in the visual appeal of our baked goods. Our picture catalogue showcases a
delightful array of treats that are sure to tempt your taste buds. </p>
</div>
<div class="container">
<button id="filter-btn" class="dark"><i class="fa-solid fa-filter"></i>
Filter</button>
<div id="filter-opt">
<input type="checkbox" id="cake" class="filter-checkbox" /> <label
for="cake">Cakes</label>
<input type="checkbox" id="doughnut" class="filter-checkbox" />
<label for="doughnut">Doughnuts</label><br>
<input type="checkbox" id="pie" class="filter-checkbox" /> <label
for="pie">Pies</label>
<input type="checkbox" id="cookie" class="filter-checkbox" />
<label for="cookie">Cookies</label><br>
<input type="checkbox" id="cupcake" class="filter-checkbox" />
<label for="cupcake">Cupcakes</label>
<input type="checkbox" id="pastry" class="filter-checkbox" />
<label for="pastry">Pastries</label><br>
</div>
<script>

CONTACT PAGE CODING


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="./Libraries/jQuery/code.jquery.com_jquery-3.7.0.min.js"></script>
<script src="./Libraries/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></
script>
<link rel="stylesheet"
href="./Libraries/bootstrap-5.3.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./Libraries/font-awesome/fontawesome-free-
6.4.0-web/css/all.min.css">
<link rel="stylesheet" href="./stylesheet.css">
<link rel="shortcut icon" href="./Images/favicon.png" type="image/x-icon">
<script src="functions.js"></script>
<!---owl carrousel CSS---->
<link rel="stylesheet" href="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
<!---owl Carrousel JS-->
<script src="./Libraries/owl
carousel/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
<!---owl carrousel-->
<title>Contact | Bakerz Bite</title>

</head>
<body>

<!---Viewers Count--->
<div id="view-count">
<p class="px-3">Current Viewers: <i id="count">0</i></p>
<script>
const count = document.getElementById('count');

function updateCount(i) {
setTimeout(() => {
count.innerHTML = i;
}, i * 1000); // Adjust the delay time (in milliseconds) as needed
}

for (let i = 0; i < 1000; i++) {


updateCount(i);
}
</script>
</div>
<!--Header----->
<header id="header" class="container-fluid">
<div id="navigation" >
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="d-flex align-items-center">
<div id="logo" class="navbar-brand">
<img src="./Images/logo.png" height="60px">
</div>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse collapse smooth-scroll
justify-content-end" id="basicExampleNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-
link">Home</a></li>
<li class="nav-item"><a href="About.html" class="nav-
link">About Us</a></li>
<li class="nav-item"><a href="contact.html"
class="nav-link">Contact Us</a></li>
<li class="nav-item"><a
href="index.html#merchandise" class="nav-link"><i class="fa fa-shirt"></i>
Merchandise</a></li>
</ul>
</div>
</div>
</nav>
</div>
<script>
$(document).ready(function () {
$('.dropdown-hover').hover(function () {
$(this).addClass('show');
$(this).find('.dropdown-menu').addClass('show');
}, function () {
$(this).removeClass('show');
$(this).find('.dropdown-menu').removeClass('show');
});
});
</script>
<section id="main-cont" class="p-0 container-fluid">
<div class="row">
<div id="cont-img-main" class="col-md-6">
<img src="./Images/contact/main.jpg" alt="">
</div>
<div id="contact-form" class="col-md-6">
<div>
<form>
<table>
<tr><!--heading-->
<td colspan="2">
<h1 class="display-2">Contact Us</h1>
</td>
</tr>
<tr><!--First two inputs-->
<td>
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email Address">
</td>
</tr>
<tr><!--Second two inputs-->
<td>
<input type="tel" placeholder="Phone Number">
<input type="text" placeholder="Subject">
</td>
</tr>
<tr><!--Message-->
<td colspan="2">
<textarea rows="3" placeholder="Your
Message"></textarea>
</td>
</tr>
<tr><!--Submit Button-->
<td style="text-align: right;" colspan="2">
<button id="sub-cont-btn"
class="white">Submit</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</section>
<section id="cont-sec-3" class="my-5 container-fluid py-5">
<div id="location">
<div id="loc-content" class="mx-5">
<h1 class="display-5 text-center">
Come & Visit our Bakeries in Pakistan
</h1>
</div>
<div id="loc-slider" class="owl-carousel container my-5">
<div class="row"><!--1st location-->
<div class="col-md-5 loc-sld-content mx-0 p-5" >
<div class="p-5">
<h1 class="display-5 mb-5">Karachi, Sindh</h1>
<p class="pt-5 pb-2 h5"><i class="fas fa-map-marker-
alt"></i> 42-M, P.E.C.H.S. Dr. Mehmood Hussain Road, Karachi</p>
<p class="h5 py-2"><i class="fas fa-phone"></i> (92) 214
535 042</p>
<p class="h5 py-2"><i class="fas fa-envelope-open"></i>
book@bakerzbite.com</p>
</div>
</div>
<div class="col-md-7 mx-0 p-0">
<img src="./Images/About/locations/loc 1.jpg" alt="...">
</div>
</div>
<div class="row"><!--2nd location-->
<div class="col-md-5 loc-sld-content mx-0 p-5" >
<div class="p-5">
<h1 class="display-5 mb-5">Karachi, Sindh</h1>
<p class="pt-5 pb-2 h5"><i class="fas fa-map-marker-
alt"></i> Al-Rehman Building I.I.Chundrigar Road, Karachi</p>
<p class="h5 py-2"><i class="fas fa-phone"></i> (92) 216
989 615</p>
<p class="h5 py-2"><i class="fas fa-envelope-open"></i>
book@bakerzbite.com</p>
</div>
</div>
<div class="col-md-7 mx-0 p-0">
<img src="./Images/About/locations/loc 2.jpg" alt="...">
</div>
</div>
<div class="row"><!--3rd location-->
<div class="col-md-5 loc-sld-content mx-0 p-5" >
<div class="p-5">
<h1 class="display-5 mb-5">Peshawar, KPK</h1>
<p class="pt-5 pb-2 h5"><i class="fas fa-map-marker-
alt"></i> B-15, Spinzar Plaza, University Road, Peshawar</p>
<p class="h5 py-2"><i class="fas fa-phone"></i> (92) 915
706 120</p>
<p class="h5 py-2"><i class="fas fa-envelope-open"></i>
book@bakerzbite.com</p>
</div>
</div>
<div class="col-md-7 mx-0 p-0">
<img src="./Images/About/locations/loc 3.jpg" alt="...">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#loc-slider').owlCarousel({
items: 1,
loop: true,
margin: 10,
nav: false,
dots: false,
responsive: {
0:{
items: 1
},
768: {
items: 1
},
992: {
items: 1
}
}
});
//
//ends

// Custom navigation
$('#location .slider-prev').click(function() {
$('#loc-slider').trigger('prev.owl.carousel');
});

$('#location .slider-next').click(function() {
$('#loc-slider').trigger('next.owl.carousel');
});
});
</script>
</section>

<section id="faq" class="p-0 container-fluid p-5 my-5">


<div class="row">
<div class="col-sm-6">
<h1 class="display-4">
Frequently Asked<br>Questions
</h1>
<a href="#contact-form"><button class="dark">Contact
Us</button></a>
</div>
<div class="col-sm-6">
<div class="faq-cont"><!--first question-->
<h3 id="hire">Are you currently hiring staff? <i class="fas fa-
arrow-right"></i></h3>
<div id="hire-cont" class="toggle-faq">
<p>Yes, we are currently hiring restaurant staff!
We have open positions in various roles such
as servers, chefs, kitchen staff, and front-of-house
staff. If you're interested in joining our team,
we encourage you to visit our website or reach out
to us directly to learn more about the available
positions and how to apply. We look forward to
hearing from you!</p>
</div>
<script>
$(document).ready(function(){
$('#hire').click(function(){
$('#hire i').toggleClass('fa-arrow-right').toggleClass('fa-
arrow-down');
$('#hire-cont').slideToggle();
});
});
</script>
</div>
<div class="faq-cont"><!--second question-->
<h3 id="pship">Is your restaurant open for partnerships? <i
class="fas fa-arrow-right"></i></h3>
<div id="pship-cont" class="toggle-faq">
<p>Yes, we are open to partnerships! We believe
in collaborating with like-minded businesses
and individuals to create mutually beneficial
relationships. If you have a partnership
proposal or idea you would like to discuss
, we would be happy to hear from you.</p>
</div>
<script>
$(document).ready(function(){
$('#pship').click(function(){
$('#pship i').toggleClass('fa-arrow-right').toggleClass('fa-
arrow-down');
$('#pship-cont').slideToggle();
});
});
</script>
</div>
<div class="faq-cont"><!--third question-->
<h3 id="mloc">Are you planning to open more locations? <i
class="fas fa-arrow-right"></i></h3>
<div id="mloc-cont" class="toggle-faq">
<p>Yes, we are constantly exploring opportunities
for expansion and growth. As a restaurant,
we are always looking for ways to bring our
culinary offerings to more locations and
reach a wider audience.</p>
</div>
<script>
$(document).ready(function(){
$('#mloc').click(function(){
$('#mloc i').toggleClass('fa-arrow-right').toggleClass('fa-
arrow-down');
$('#mloc-cont').slideToggle();
});
});
</script>
</div>
<div class="faq-cont"><!--fourth question-->
<h3 id="ofood">Can I order online or through FoodPanda? <i
class="fas fa-arrow-right"></i></h3>
<div id="ofood-cont" class="toggle-faq">
<p>es, you can definitely order from our
restaurant either directly or through
Foodpanda! We offer the convenience
of multiple ordering options to ensure
our customers can enjoy our delicious
food with ease. You can place an order
directly with us by calling our
restaurant or visiting our website,
or you can choose to order through
the Foodpanda platform for a seamless
delivery experience. Whichever method
you prefer, we are here to satisfy your
cravings and provide you with a
delightful dining experience. Bon appétit!</p>
</div>
<script>
$(document).ready(function(){
$('#ofood').click(function(){
$('#ofood i').toggleClass('fa-arrow-right').toggleClass('fa-
arrow-down');
$('#ofood-cont').slideToggle();
});
});
</script>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scrollPosition = $(window).scrollTop();
var windowHeight = $(window).height();
var elementPosition = $("#faq").offset().top;
if (scrollPosition>(elementPosition - windowHeight)) {
$("#faq").addClass('slide');
}else{
$("#faq").removeClass('slide');
}
});
});
</script>
</section>
<section id="cards" class="container-fluid">
<div class="row">
<div id="card-1" class="col-md-4 d-flex justify-content-center align-
items-center">
<div>
<h4>Order Online</h4>
<p><b>Call: </b><a href="tel: 923161234567"> (92) 316 123
4567 <i class="fa-solid fa-arrow-right"></i></a></p>
<p><b>E-Mail: </b><a href="mailto: book@bakerzbite.com">
book@bakerzbite.com <i class="fa-solid fa-arrow-right"></i></a></p>
<p><b>Form: </b><a href="#"> Reservate now <i class="fa-
solid fa-arrow-right"></i></a></p>
</div>
</div>
<div id="card-1" class="col-md-4 d-flex justify-content-center align-
items-center">
<div>
<h4>Locations</h4>
<p>42-M, P.E.C.H.S. Dr. Mehmood Hussain Road, Karachi</p>
<p>Al-Rehman Building I.I.Chundrigar Road, Karachi</p>
</div>
</div>
<div id="card-1" class="col-md-4 d-flex justify-content-center align-
items-center">
<div>
<h4>Open Hours</h4>
<p><b>Mon-Fri: </b> 9 AM - 8 PM</p>
<p><b>Saturday: </b>10 AM - 11 PM</p>
<p><b>Sunday: </b>10 AM - 10 AM</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scrollPosition = $(window).scrollTop();
var windowHeight = $(window).height();
var elementPosition = $("#cards").offset().top;
if (scrollPosition>(elementPosition - windowHeight)) {
$("#cards").addClass('slide');
}else{
$("#cards").removeClass('slide');
}
});
});
</script>
</section>

<!---Testimonials Section--->
<section id="sec-home-3" class="container-fluid p-0">
<div>
<div class="container">
<h1 class="display-4 text-bold text-center py-5">We believe and are
dedicated<br>in delivering premium quality products.</h1>
</div>
<div id="review-slider" class="owl-carousel container">
<div class="review-card p-5 container"><!---1st review-->
<div class="rev-name">
<h3>John Smith</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star"></i>
<i title="excellent" class="fas fa-star"></i>
</div>
<div class="rev">
<p><i>"I had a fantastic experience with Bakerz Bite. The
customer service was exceptional, and the food was absolutely delicious.
The menu offered a great variety of options, and everything I
tried was fresh and flavorful. I highly recommend Bakerz Bite
for anyone looking for a satisfying and enjoyable dining
experience."</i></p>
</div>
</div>
<div class="review-card p-5 container"><!---2nd review-->
<div class="rev-name">
<h3>Sarah Johnson</h3>
</div>
<div class="ratings">
<i title="worst" class="fas fa-star"></i>
<i title="better" class="fas fa-star"></i>
<i title="good" class="fas fa-star"></i>
<i title="nice" class="fas fa-star"></i>
<i title="excellent" class="fas fa-star blank"></i>
</div>
<div class="rev">
<p><i>"Bakerz Bite is a hidden gem! The atmosphere is cozy
and inviting, and the staff is friendly and attentive.

MENU DISPLAY SECTION


CONTACT US PAGE
THANK YOU

……….YOUR REGARDS……….
“IF YOU HAVE ANY PROBLEMS PLEASE CHECK OUR
WEBSITE.”

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy