MatoshriEducationSociety’s
MATOSHRIINSTITUTEOFTECHNOLOGY
A/P: Dhanore, Tal-Yeola, Dist.-Nasik, 423391
Micro Project Report
Academic year: 2023-24
Title of Project
Pizza shop website
Name of Student: Ghuge Resham Dattu
Class : TYCO
Semester : Fifth
Roll No 10
Enrollment No 2211710050
Seat No 458851
Program : Computer Engineering
Course : CSS
Course code 22519
Name of Teacher : Mr. Giri .P.P
1
MatoshriEducationSociety’s
MATOSHRIINSTITUTEOFTECHNOLOGY
A/P: Dhanore, Tal-Yeola, Dist.-Nasik, 423391
CERTIFICATE
This is to certify that Mr./Ms Ghuge Resham Dattu Roll No-10 Of
Fifth semester of Diploma in Computer Engineering has successfully
completed the for the Academic year 2023-2024 as prescribed MSBTE
Micro Project In Pizza shop website Curriculum under the guidance of
subject teacher.
Place :Yeola Enrollment No:2111710050
Date: Seat No: 458851
MR.Giri. P.P
MR. Ghorpade M.S. MR. Gujrathi G.S.
Course Teacher HOD Principal
2
Micro Project Report Index
AcademicYear-2023-24 Program: Computer Engineering
Class: SYCO Course: CSS
Code: 22519 Roll No: 10
Enrolment No: 2111710050 Seat no: 458851
Title of Micro Project: Pizza shop website
Sr.no Content Page No.
1. ABSTRACT 07
2. INTRODUCTION 08
3. SOURCE CODE 09
4. OUTOUT 21
6. CONCLUSION 22
7 REFERANCE 23
MS. Ghuge Resham Mr. Giri P.P.
Signature of Student Name of Teacher &Sign
3
ANNEXUREI
Rubric for Evaluation of Micro Project
Academic Year: 2023-24 Program: Computer Engineering
Class: TYCO Course: CSS
Course Code: 22519 Roll No: 10
Enrolment No: 2111710050 Seat No: 458851
Title of Micro Project: Pizza shop website
Group Member:
Sr.No. RollNo. Name of Candidates
1 10 Ghuge Resham D
CO coverage:
1.Create interactive web pages using program flow control structure.
Indicator sfor different level f Per form an
Marks ce(EvaluationScale0to 2)
Sr .No Criteria Obtained
(Out of2) Poor(0) Average(1) Good(2)
Submission of Not Submitted proposal or project Project proposal
1 Projectproposal/R anythingintim report submitted in &project report
eport e time submittedijtime
CO/PRO Not attained Attained At
2 attainment anyCO/PRO someCO/PRO tainedmaxi
mum
Containsm
Content of Not
Contains some aximumrel
3 project/For containsrele
relevant information evantinfor
mattedng vantinforma
mation
tion
Total Marks
4
(06)
Question/
5
Answers(04)
Total(10):
Name of Teacher &Sign
Mr. Giri.P.P
4
Micro Project Proposal
Academic Year: 2023-24 Program: Computer Engineering
Class: TYCO Course: CSS
Course Code: 22519 Roll No: 10
Enrollment No: 2111710050 Seat No: 458851
Title of Micro Project: Pizza shop website
Group Members:
Sr .No. Roll No. Name of Candidates
1 10 Ghuge Resham D
Key/points:-
A circular-faced clock with the numbers one to twelve around the outside and
two hands
References:
https://chat.openai.com/c/49f4842c-fd38-4beb-8f9c-5ea4ff90c7db
Comments by guide:
Subject Teacher
Mr. Giri.P.P
5
Micro Project Log Book
Semester: 2023-24 Program: Computer Engineering
Course: CSS Class: TYCO
Title of Micro Project: Pizza shop website
Group member:
Sign
Sr .No. Roll No. Name of group member
1 10 Ghuge Resham.D
Teacher’s
Week No. Discussion &Details Teacher’s Comment
Sign.
1 General discussion about micro project activity.
2 Guidelines for micro project
Discussion on different industry/application/study
3 Orient tectonics
Group member are finalize dander topics
4
Decided ,as
Work distribution to collect the information
5 regarding topic by each member.
Gathered in form action through the various
6 sources, such as internet, book, magazine, journal
and newspaper.
Discussed the difficulty faced during the collection
7 of necessary information among the group
member.
Discussion with the guide to sortie tiffin cult faced
8
whilecollectingtheinformation.
9 Preparedaroughdraft&Shown ittothe guide.
Necessary instructions are given by the guide for its
10 better presentation&Finalized project.
Presentation is given on the topic ,Report is prepare
11 don the topic & final submission of micro project
and Report
Name & Signature of project Guide Name & Signature of HOD
Mr. Giri .P.P Mr. Ghorpade M.S
6
Abstract
The online Pizza shop website is the need of hour because of the recent changes and
the adding use of the internet. BIG SLICE is a website designed primarily for use in the
customized Pizza delivery. Through these services caffs can vend and distribute their coffers
at minimum resource operation effectively with high gains by gaining the client trust. This
Online Pizza order system database will be helpful for the business possessors to extend
their business just by placing the orders online and not visiting the restaurant. To create this
application, the database is the most important component, which will interface with the
application to retrieve information. The Online Pizza Ordering Database will be built using
PHP as the basis. Customers can place orders from a variety of pizzas in the database, and
restaurant employees will process and deliver the specified order.
7
Introduction
Having a website for your pizza shop is crucial in reaching a wider
audience and providing a better customer experience. By creating a responsive
pizza shop website using HTML, CSS, and JavaScript, you can enhance your
online presence and offer your customers an easy and efficient way to order
and pay for their favorite pizzas. In this article, we will guide you through the
process of designing a user-friendly and functional pizza shop website with
online ordering. Whether you are building a website from scratch or upgrading
an existing one, this tutorial will provide you with step-by-step guidance on
creating a website that aligns with your business goals and target audience.
8
HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Pizza Landing Page</title>
<!-- Box Icons -->
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<!-- Link To CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<header>
<a href="#" class="logo">Pizza Pie</a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<!-- Dark Mode -->
<div class="bx bx-moon" id="darkmode"></div>
</ul>
</header>
<!-- Home Section-->
<section class="home" id="home">
<div class="home-text">
<h1>Pizza Taste</h1>
<h2>The tasty pizza of <br> your choice</h2>
<a href="#" class="btn">View Menu</a>
</div>
<div class="home-img">
<img src="data:image/jpeg;
</div>
</section>
<!-- About -->
<section class="about" id="about">
<div class="about-img">
<img src="https://thumbs.dreamstime.com/b/pizza-pepperoni-cheese-
salami- vegetables-58914487.jpg" alt="">
</div>
<div class="about-text">
<span>About Us</span>
9
<h2>We make good and <br> tasty pizzas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quo iure rem
ducimus tenetur deserunt commodi doloribus, quibusdam vel fuga?</p>
<a href="#" class="btn">Learn More</a>
</div>
</section>
<!-- Menu -->
<section class="menu" id="menu">
<div class="heading">
<span>Menu</span>
<h2>Tasty menu of the week</h2>
</div>
<div class="menu-container">
<!-- Box 1 -->
<div class="box">
<div class="box-img">
<img src="https://images.pexels.com/photos/803290/pexels-
photo- 803290.jpeg?cs=srgb&dl=pexels-beqa-tefnadze-803290.jpg&fm=jpg"
alt="">
</div>
<h2>Cheese Pizza</h2>
<h3>Tasty Food</h3>
<span>$30.05</span>
<i class='bx bx-cart-alt'></i>
</div>
<!-- Box 2 -->
<div class="box">
<div class="box-img">
<img src="https://img.freepik.com/free-photo/pepperoni-pizza-with-
sausages- cheese-dark-wooden-table_220768-9277.jpg?size=626&ext=jpg" alt="">
</div>
<h2>Tropical Pizza</h2>
<h3>Tasty Food</h3>
<span>$42.05</span>
<i class='bx bx-cart-alt'></i>
</div>
<!-- Box 3 -->
<div class="box">
<div class="box-img">
<img src="https://img.freepik.com/free-photo/top-view-pepperoni-pizza-with-
mushroom-sausages-bell-pepper-olive-corn-black-wooden_141793- 2158.jpg?
w=740&t=st=1661842808~exp=1661843408~hmac=c40f0c154036b96b1dba1794
7c4e4f7c07f40db983106490402bb0b7b6ec452e" alt="">
</div>
<h2>Mecaroni Pizza</h2>
<h3>Tasty Food</h3>
<span>$12.05</span>
<i class='bx bx-cart-alt'></i>
</div>
</div>
</section>
10
<!-- Service -->
<section class="services" id="services">
<div class="heading">
<span>Services</span>
<h2>We provide best food services</h2>
</div>
<div class="servives-container">
<!-- Box 1 -->
<div class="s-box">
<img src="https://images.pexels.com/photos/280453/pexels-photo- 280453.jpeg?
auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
<h3>You Order</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse
tempore ipsum temporibus.</p>
</div>
<!-- Box 2 -->
<div class="s-box">
<img src="https://images.pexels.com/photos/4391470/pexels-photo- 4391470.jpeg?
auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
<h3>Shipping</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse
tempore ipsum temporibus.</p>
</div>
<!-- Box 3 -->
<div class="s-box">
<img src="https://images.pexels.com/photos/4393426/pexels-photo- 4393426.jpeg?
auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
<h3>Delivered</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse
tempore ipsum temporibus.</p>
</div>
</div>
</section>
<!-- Connect -->
<section class="connect">
<div class="connect-text">
<span>Let's Talk</span>
<h2>Connect now</h2>
</div>
<a href="#" class="btn">Contact</a>
</section>
<!-- Contact -->
<section class="contact" id="contact">
<div class="contact-box">
<h3>Pizza Pie</h3>
<span>Connect With Us</span>
</div>
<div class="contact-box">
11
<h3>Menu Links</h3>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
</div>
<div class="contact-box">
<h3>Quick Links</h3>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Privacy Policy">Privacy Policy</a></li>
<li><a href="#Disclaimer">Disclaimer</a></li>
<li><a href="#Terms Of Use">Terms Of Use</a></li>
</div>
<div class="contact-box address">
<h3>Contact</h3>
<i class='bx bxs-map' ><span>1001, pune carve nagr, sit amet consectetur,
India</span></i>
<i class='bx bxs-phone' ><span>+919309921001</span></i>
<i class='bx bxs-envelope' ><span>[email protected]</span></i>
</div>
</section>
<!-- Copyright -->
<div class="copyright">
<p>© Asslone4 All Right Reserved.</p>
</div>
<!-- Scroll Reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- Link To JavaScript -->
<script src="script.js"></script>
</body>
</html>
12
CSS CODE:-
/* Google Fonts */
@import
url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&displa
y=swap");
*{
margin: 0;
padding: 0;
font-family: "Poppins", sans-
serif; box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top:
2rem; list-style: none;
text-decoration: none;
}
*::selection {
background: var(--main-color);
color: #fff;
}
:root {
--main-color: #ffb411;
--text-color: #1e1c2a;
--bg-color: #fff;
--big-font: 4rem;
--h2-font: 2.24rem;
--p-font: 0.9rem;
}
section {
padding: 50px 10%;
}
body.active {
--bg-color: #1e1c2a;
--text-color: #fff;
}
body {
color: var(--text-color);
background: var(--bg-color);
}
#darkmode
{ font-size:
25px; cursor:
pointer;
}
header
{ position:
fixed; width:
100%;
top: 0;
right: 0;
z-index: 1000;
13
display: flex;
align-items: center;
14
justify-content: space-between;
background: var(--bg-color);
padding: 18px 100px;
box-shadow: 0 0.5rem 50rem rgba(0, 0, 0, 0.1);
}
.logo {
font-size:
1.2rem; font-
weight: 600;
color: var(--main-color);
}
.navbar
{ display: flex;
}
.navbar a {
font-size: 1rem;
padding: 10px 20px;
color: var(--text-
color); font-weight:
500;
}
.navbar a:hover {
color: var(--main-color);
}
#menu-icon
{ font-size:
2rem; cursor:
pointer;
display: none;
}
.home {
width:
100%;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(2,
1fr); align-items: center;
gap: 1.5rem;
}
.home-img img
{ width: 100%;
}
.home-text h1 {
font-size: var(--big-font);
color: var(--main-color);
}
.home-text h2 {
font-size: var(--h2-font);
margin: 1rem 0 1rem;
}
.btn {
display: inline-block;
background: var(--main-color);
15
padding: 10px 20px;
border-radius: 0.5rem;
color: #fff;
16
}
.btn:hover
{ background:
#ffa400;
}
.about
{ display:
grid;
grid-template-columns: repeat(2,
1fr); gap: 1.5rem;
align-items: center;
}
.about-img img
{ max-width:
80%;
border-radius: 0.5rem;
}
.about-text span {
color: var(--main-
color); font-weight:
500;
}
.about-text h2 {
font-size: var(--h2-font);
}
.about-text p {
margin: 0.8rem 0 1.8rem;
}
.heading {
text-align: center;
}
.heading span {
color: var(--main-
color); font-weight:
500;
}
.heading h2 {
font-size: var(--h2-font);
}
.menu-container
{ display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
gap: 1.5rem;
align-items: center;
}
.box {
position: relative;
margin-top:
2rem; height:
auto; display:
flex;
flex-direction:
column; justify-
17
content: center; align-
items: center; border-
radius: 0.5rem;
box-shadow: 0 2px 4px rgb(4 64 54 / 10%);
padding: 10px;
}
18
.box-img
{ width:
200px; height:
200px;
}
.box-img img
{ width: 100%;
height: 100%;
object-fit:
contain;
object-position: center;
}
.box h2 {
font-size: 1.2rem;
}
.box h3 {
font-size: 1rem;
font-weight: 400;
margin: 4px 0
10px;
}
.box span {
font-size: var(--p-
font); font-weight:
500;
}
.box .bx {
position: absolute;
right: 0;
top: 0;
font-size: 20px;
background: var(--main-color);
border-radius: 0 0.5rem 0
0.5rem; padding: 5px 8px;
}
.box .bx:hover
{ background: #ffa400;
}
.servives-container
{ display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
gap: 1.5rem;
margin-top: 2rem;
}
.s-box {
text-align: center;
}
.s-box img
{ width: 60px;
}
.s-box h3 {
margin: 4px 0 10px;
}
19
.connect
{ display: flex;
align-items: center;
20
justify-content: space-around;
}
.connect-text span
{ color: var(--main-
color); font-weight:
500;
}
.connect-text h2 {
font-size: var(--h2-font);
}
.contact
{ display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 1.5rem;
}
.contact-box h3
{ margin-bottom:
1rem;
}
.social
{ display:
flex;
margin-top: 1.5rem;
}
.social i {
font-size: 20px;
margin-right: 1rem;
color: var(--text-
color);
}
.social i:hover {
color: var(--main-color);
}
.contact-box li a {
color: var(--text-color);
}
.contact-box li a:hover
{ color: var(--main-
color);
}
.address
{ display: flex;
flex-direction: column;
}
.address i {
margin-bottom:
0.5rem; font-size:
1rem;
}
.address span
{ margin-left:
1rem;
}
21
.copyright
{ padding: 20px;
text-align:
center;
}
@media (max-width: 921px)
{ header {
22
padding: 14px 41px;
}
:root {
--big-font: 3rem;
--h2-font: 1.7rem;
}
}
@media (max-width: 768px)
{ section {
padding: 50px 8%;
}
#menu-icon
{ display:
initial;
color: var(--text-color);
}
header .navbar
{ position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction:
column; text-align:
center;
background: var(--bg-color);
box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
transition: 0.2s ease;
}
.navbar.active
{ top: 100%;
}
.navbar a
{ padding:
1.5rem; display:
block;
background: var(--bg-color);
}
#darkmode
{ position:
absolute; top:
1.4rem;
right: 2rem;
}
}
@media (max-width: 715px)
{ header {
padding: 10px 16px;
}
.home {
grid-template-columns: 1fr;
}
23
.about {
grid-template-columns:
1fr; text-align: center;
}
24
.about-img
{ order: 2;
}
}
@media (max-width: 515px) {
.connect {
flex-direction: column;
}
.connect .btn
{ margin-top:
1rem;
}
}
@media (max-width: 450px) {
:root {
--big-font: 2rem;
--h2-font: 1.4rem;
}
.home-text
{ padding-top:
4rem;
}
}
25
script.js:-
// Navbar
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menu.onclick = () => {
navbar.classList.toggle('active');
}
window.onscroll = () => {
navbar.classList.remove('active');
}
// Dark Mode
let darkmode = document.querySelector('#darkmode');
darkmode.onclick = () => {
if(darkmode.classList.contains('bx-moon')){
darkmode.classList.replace('bx-moon','bx-sun');
document.body.classList.add('active');
}else{
darkmode.classList.replace('bx-sun','bx-moon');
document.body.classList.remove('active');
}
}
// Scroll Reveal
const sr = ScrollReveal
({ origin: 'top',
distance: '40px',
duration: 2000,
reset: true
});
sr.reveal(`.home-text, .home-img,
.about-img, .about-text,
.box, .s-box,
.btn, .connect-text,
.contact-box`,
{ interval: 200
})
26
OUTPUT
27
Conclusion
In conclusion, creating a responsive pizza shop website using HTML, CSS, and
JavaScript can help you enhance your online presence, reach a wider audience, and provide a
better customer experience. By following the steps outlined in this tutorial, you can design a
website that is user-friendly, functional and optimized for search engine visibility.
Remember to define your website goals and target audience, sketch out your website layout
and navigation, and use responsive design techniques for optimal viewing experience on
different devices. With a well-designed pizza shop website, you can attract new customers,
increase your revenue, and stand out in a highly competitive market.
28
Reference
Make Your Own Responsive Pizza Shop Website Using HTML, CSS and JavaScript
https://www.codewithfaraz.com/content/59/make-your-own-responsive-pizza-shop-website-
using-html-css-and-javascript#introduction
https://www.codewithfaraz.com/content/59/make-your-own-responsive-pizza-shop-website-
using-html-css-and-javascript#html-code
https://www.codewithfaraz.com/content/59/make-your-own-responsive-pizza-shop-website-
using-html-css-and-javascript#css-code
https://www.codewithfaraz.com/content/59/make-your-own-responsive-pizza-shop-website-
using-html-css-and-javascript#javascript-code
29
