Black Book 69 PDF

COFFEE STORE WEBSITE
A
PROJECT REPORT
“COFFEE STORE WEBSITE”
SUBMITTED BY
DHARMIK VELANI
DHEERAJ KUMAR SINGH
DIPESH AWALE
ABHISHEK DALAL
UNDER THE GUIDANCE OF

PROF.MADHURI LONE
Diploma in computer engineering
Affiliated To
SHIVAJIRAO S JHONDHALE POLYTECHNIC, ASANGAON

OPP.ASANGAON RAILWAY STATION
SHAHAPUR 421601
1
2021-2022
2
SHIVAJIRAO S. JONDHLE POLYTECHNIC, ASANGAON

CERTIFICATE
This is to certify that Mr. Dharmik Velani from SHIVAJIRAO S JONDHLE having Enrolment
No:1909350270 has completed project of final year having title “COFFEE STORE WEBSITE
“during the academic year 2021-2022. The project is completed by group consisting of 4
persons under the guidance of the faculty Guide.
...……………… …………………..
Internal Examiner External Examiner
………………….. …………………..
Mr.Naresh Shende Mrs. Madhuri Lone
Head of Department Project Guide
Computer engineering
……………………….
Mrs. Sneha H Jondhle
(Principal)
3

CERTIFICATE
This is to certify that Mr. Dheeraj Kumar Singh From SHIVAJIRAO S JONDHLE having
Enrolment No:1909350276 has completed project of final year having title “COFFEE
WEBSITE STORE “during the academic year 2021-2022. The project is completed by group
consisting of 4 persons under the guidance of the faculty Guide.
...……………… …………………..
………………….. …………………..
……………………….
(Principal)
4

CERTIFICATE
This is to certify that Mr. Dipesh Awale From SHIVAJIRAO S JONDHLE having Enrolment
No:1909350246 has completed project of final year having title “COFFEE STORE WEBSITE“
during the academic year 2021-2022. The project is completed by group consisting of 4
...……………… …………………..
………………….. …………………..
……………………….
(principal)
5

CERTIFICATE
This is to certify that Mr. Abhishek Dalal From SHIVAJIRAO S JONDHLE having Enrolment
No:1909350245 has completed project of final year having title “COFFEE STORE WEBSITE
“during the academic year 2021-2022. The project is completed by group consisting of 4
...……………… …………………..
………………….. …………………..
……………………….
(principal)
6
ACKNOWLEDGEMENTS
It gives me a great pleasure to submit this project report on “COFFEE STORE WEBSITE”.
I express my sincere thanks to my guide Mrs. Madhuri Lone for her guidance and time
for valuable suggestion and providing constant support throughout this work.
I would like to express honest gratitude to Mr. Naresh Shende Head of the Department
of Computer Engineering.
I express my sincere thanks to Mr. Naresh Shende Head of the Department of Computer
Engineering. I am very thankful to the staff members of Computer Engineering. department
for their persistent inspection inspiration.
I am also very much thankful to Principal, Dr. Sneha H.Jondhle who has been a constant
source of inspiration to complete the work.
Name of Student
1. Dharmik Velani
2. Dheeraj Kumar Singh
3. Dipesh Awale
4. Abhishek Dalal
7
ABSTRACT
Now-a-days, people face various and a lot of time issues due to the environmental condition
and their living habits or maybe their works. So the coffee website allows them to order their
favourite coffee and yet do the same time management as usual as we take care of your bad
mood and covert is to your good mood in a few minutes and then gets ti to delivered to you as
soon as its made and every time you order you get the fresh thin g and always with a better
taste.
Interestingly, several studies suggest that coffee could support liver health and protect
against disease.For instance, one study found that drinking more than two cups of coffee per
day was linked to lower rates of liver scarring and liver cancer in people with liver disease.
Other research shows that the more coffee people drank, the lower their risk of death from
chronic liver disease. Drinking one cup of coffee per day was tied to a 15% lower risk, while
drinking four cups per day was linked to a 71% lower risk
Another recent study found that coffee consumption was associated with decreased liver
stiffness, which is a measure healthcare professionals use to assess fibrosis, the formation of
scar tissue in the liver.
8
CONTENTS
CONTENTS PAGE NO.

LIST OF TABLES AND FIGURES
CHAPTER 1
INTODUCTION 11
CHAPTER 2
LITERATURE SURVEY 12
2.1 SOFTWARE REQUIREMENT: 13
2.2 HARDWARE REQUIREMENT: 15

CHAPTER 3
SCOPE 16
CHAPTER 4
IMPLEMENTATION 16
METHODOLOGY
4.1 PROCEDURE 17
4.2 ALGORITHMS 18
CHAPTER 5
5.1 SYSTEM ARCHITECTURE 22
5.2 DFD ( Data Flow Diagram 23
5.3 FLOW-CHART 24
CHAPTER 6
CODE 25
CHAPTER 7
USER INTERFACE 46
CHAPTER 8
CONCLUSION 49
CHAPTER 9
REFFRENCE 50
9
List of Figures
Figure No Figure Name Page No
Fig. 1 System Architecture 22

Fig. 2 Interactions Basics 23
Fig. 3 Flow Chart of Working 24
10
List of Screen Shot
Screen Shot No Screen Shot Name Page No
Fig.7.1 Home 46
Fig. 7.3 About Us 47
Fig. 7.4 Our menu 47
Fig. 7.2 Conatct us 48
11
1. INTRODUCTION
Coffee is one of the world’s most popular beverages. Some claim it is the most widely
consumed liquid in the world aside from water.
Coffee is more than a beverage, however. It is a memory, an anticipation, a lifetime of
consoling moments of modest pleasure woven into our lives.
Coffee’s success as a beverage undoubtedly is owing both to the caffeine it harbors
and to its sensory pleasure. Coffee lovers come to associate the energizing lift of the
caffeine with the richness and aroma of the beverage that delivers it.
Coffee is produced from the seeds of a small red (sometimes yellow) fruit that grows
on plants halfway in size between shrub and tree. The process that turns these seeds
into beverage is a long and complex process, perhaps the most complex process
associated with any major beverage.
It is also a very labor intensive process involving a vast intercontinental collaboration
that starts with the coffee grower, moves from there to the picker, then to the mill
workers who meticulously remove the fruit and dry the beans, then to those who clean
and grade the beans, to those who roast them, to those consumers and baristas who
finally grind the beans and prepare the beverage. Every act along the way can be
performed either with passion and precision or with careless shoddiness. It is the
cumulative quality of all of these creative contributions that together make the
difference between a lackluster cup and a fine and distinctive one.
Coffee Review is devoted to promoting the fine, distinctive cup and celebrating its
lore and pleasures.
learning when implemented in healthcare can leads to increased patient satisfaction.

The Naïve Bayes algorithm, Decision Tree Algorithm and Random Forest algorithm
are used to predict diseases using patient treatment history and health data.
12
EXISTING SYSTEM:
PROPOSED SYSTEM:
In this Website, we have used visual studios, html, java scripts for the completion of
this website. All of the above mentioned softwares are easy to use and and very
affective in making any website and providing smooth work experience while
working. Details of all the software used will be given in the section software
requirement section below for more open explaination for the same.
2. LITERATURE SURVEY
Coffee is one of the world’s most popular beverages. Some claim it is the most widely
consumed liquid in the world aside from water.
Coffee is more than a beverage, however. It is a memory, an anticipation, a lifetime of

consoling moments of modest pleasure woven into our lives.
Coffee’s success as a beverage undoubtedly is owing both to the caffeine it harbors

and to its sensory pleasure. Coffee lovers come to associate the energizing lift of the
caffeine with the richness and aroma of the beverage that delivers it. Coffee is
produced from the seeds of a small red (sometimes yellow) fruit that grows on
plants halfway in size between shrub and tree. The process that turns these seeds
into beverage is a long and complex process, perhaps the most complex process
associated with any major beverage.
13
2.1 SOFTWARE REQUIREMENT:
Following are the tools which are used in development of this project.
2.1.1 Java: Java is the #1 programming language and development platform. It reduces
costs, shortens development timeframes, drives innovation, and improves
application services. With millions of developers running more than 51 billion Java
Virtual Machines worldwide, Java continues to be the development platform of
choice for enterprises and developers.
2.1.2 HTML: HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications. Let's see what is meant by Hypertext
Markup Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it,
is a hypertext. Whenever you click on a link which brings you to a new webpage,
you have clicked on a hypertext. HyperText is a way to link two or more web pages
(HTML documents) with each other.
Markup language: A markup language is a computer language that is used to apply
layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.
2.1.3 XML FILE : An XML file is an Extensible Markup Language file. They are plain
text files that don't do anything in and of themselves except describe the
transportation, structure, and storage of data.
And RSS file is one common example of an XML-based file.
Some XML files are instead Cinelerra Video Project files used with the Cinelerra
video editing program. The file holds project-related settings like a list of past edits
made to the project as well as paths to where the media files are located.
Android Studio : It is the official Integrated Development Environment (IDE) for android
application development. Android Studio provides more features that enhance our
productivity while building Android apps.
14
Android Studio was announced on 16th May 2013 at the Google I/O conference as an
official IDE for Android app development. It started its early access preview from
version 0.1 in May 2013. The first stable built version was released in December 2014,
starts from version 1.0.
Since 7th May 2019, Kotlin is Google's preferred language for Android application
development. Besides this, other programming languages are supported by Android
Studio.
2.1.4 Visual Studios : It is an Integrated Development Environment (IDE)

developed by Microsoft to develop GUI(Graphical User Interface),
console, Web applications, web apps, mobile apps, cloud, and web
services, etc. With the help of this IDE, you can create managed code as
well as native code. It uses the various platforms of Microsoft software
development software like Windows store, Microsoft Silverlight, and
Windows API, etc. It is not a language-specific IDE as you can use this
to write code in C#, C++, VB(Visual Basic), Python, JavaScript, and
many more languages. It provides support for 36 different programming
languages. It is available for Windows as well as for macOS
2.1.5 Java Script: JavaScript is a lightweight, interpreted programming language. It is

designed for creating network-centric applications. It is complimentary to and
integrated with Java. JavaScript is very easy to implement because it is integrated
with HTML. It is open and cross-platform.
2.1.6 PHP: PHP is a general-purpose scripting language widely used as a server-side

language for creating dynamic web pages. Though its reputation is mixed, PHP is
still extremely popular and is used in over 75% of all websites where the server-side
programming language is known.
15
2.2 HARDWARE REQUIREMENT:
1. i3, 5 gen intel core processing unit

2. 4GB RAM
3. Integrated GPU
4. Internet Connection with 1MBPS speed
- Scope of eCommerce: The Future of Online Shopping
Before we launch into the future and scope of eCommerce in India, let us
first understand what is e-commerce. To put it simply, electronic commerce
refers to the purchase and sale of goods online or via the internet.
Sellers make websites where they display images of their products with price
and description. Shoppers who buy the products have multiple payment
options like COD, e-wallet, net banking, credit card, and so on.
Online sellers have the responsibility of shipping the product to the buyer
and ensuring safe and timely delivery.
There are different models of E-Commerce:
● B2C – Business to consumer; this refers to the sale of goods to the end-
user directly
● B2B – a business that sells to another business; for example, office

equipment, wholesalers, construction equipment sellers.
● B2G – Businesses that sell or deal only with Government organizations.

16
● C2B – this is when a customer creates something that adds value to a

business, and the business consumes it. The best example is positive
customer reviews.
3. IMPLEMENTATION METHODOLOGY
- A 7-Step Framework for Successful Ecommerce Implementation
● Planning for eCommerce Business

● Technology Selection/Website Audit & Analysis
● Customer Acquisition
● Customer Engagement
● Customer Retention
● Optimizing Key Metrics, and
● Business Analysis & Customer Insights
3.1 PROCEDURE:
3.1.1 Step 1: Data collection and dataset preparation
This will involve collection of customer liking information artefacts

from various sources like cafes,hotels and ratings of the similar
products on other websites. Applying things up keeping it in mind to
provide better product each time.
3.1.2 Step 2: Developing a rough chart before making the actual work.
In this step creating a rough chart/ info chart from the information
gathered which makes it easier to create the website more effective
without any confusion and stuff. Afterall everyone needs a flawless
expereicne.
17
Step 3: Practicing before publishing online.

In this step, the working is checked and hence things are fixed if there
is any flaw in the process or maybe any technical glitch. After we get
satisfied with the work, we apply for publishing.
Step 4: MAIN TARGET
We try to make it as accurate even the products as everyone
loves having and trying fresh and flavourful item they chose
to pay for.
3.2 ALGORITHMS:
3.2.1 ALGORITHMS USED BY ECOMMERCE WEBSITES :
What you are talking about is known as "Recommendation Engine" and is one of the many
areas explored in "Machine Learning".
The primary method is to :
● recommend products similar to or complimenting those that user

purchased/visited earlier.
● use user's purchase/visit information to find similar users and recommend
products bought by users having similar interest.
but e-commerce companies may also use data gathered through social networks to
determining keyword that user use frequently and which matches with their products. For
example, a Facebook message "looking out for a new android mobile" may result in
android mobile recommendations when searching mobile/
3.2.2 How do eCommerce websites work?
18
eCommerce websites work through a series of steps, utilizing website

code, the database, and 3rd party applications such as a payment
processor or payment gateway.
eCommerce websites use SSL certificates to secure and encrypt all
transferred data. Sensitive data, including credit card information, should
never be stored within the website’s database unless the website adheres
to all mandated regulations, including PCI Compliance.
- Pros of eCommerce Websites:

● Increased market reach (global customer base).
● Reduced costs for goods, services, shipping, etc.
● Secure & encrypted transactions.
● Shortened distribution chain.
● Faster order fulfillment.
● Better, more precise data for future sales forecasting.
● Targeted markets can be razor-focused, based on age, demographics,
interests, etc.
● The potential for anonymity.
- Cons of eCommerce Websites:

The disadvantages of eCommerce websites are few and far between, and if you
work with a reputable eCommerce website development company, are easily
mitigated. Disadvantages of eCommerce sites include:
19
● Customers can’t always see and touch the product in real life before
purchasing.
● Potential customers must be somewhat tech-savvy, potentially limiting
market reach.
● Less ‘personal’ shopping experiences.
● Potential for fraud, data privacy issues, etc
- BUSSINESS MODELS OF ANY ECOMMERCE WEBSITE

● B2B (business to business)
● B2C (business to consumer)
● C2C (consumer to consumer)
● C2B (consumer to business)
● B2A (business to public administrations)
● C2A (consumer to public administrations)
- Working of Coffee website:

In a website, we expect very less traffic experience or smooth and flawless experience.So in
this we tried to make it as simpler as it could for every aspect the one is looking for while
ordering their daily go to coffee or the products available on the website. The complete
process can be better understood using the below working steps:
Step-1: Starting off by heading ponto our website once its launched.
Step-2: Find the best attribute taste according to your mood and eager or the
new taste, just anything.
Step-3: Add the item to your cart, look for more stuffs on the website if needed.
Step-4: Head on to basket/cart, situated on the right upper corner.

20
Step-5: Proceed to checkout and complete the payment and wait for your
delivery and enjoy!
3.2.3 RANDOM FAQs ABOUT THE SERVICE
Q. What will be the delivery time?
A. ASA your order is ready, we ensure 30 min delivery in a range of

distance.
Q. What about the quality?
A. There is no doubt about the quality as it will be handmade and

freshly be delivered to you.
Q. Faster delivery available?
A. Depends on what you order, Extra changes may be applied.
21
4. DESIGN
4.1 SYSTEM ARCHITECTURE:
Fig. 1 System Architecture
22
4.2 DFD ( Data Flow Diagram ):
4.2.1 Interactions : Through this website we ensure that customer and the
store gets connected to eachother for better communication and the
overall service. We ensure that there is no third party involved in the
order resulting delays and confusion and stuff.
Fig. 2 Interactions Basics
23
4.3 FLOW-CHART:
The flowchart shows the steps as boxes of various kinds, and their order by
connecting the boxes with arrows. This diagrammatic representation illustrates
a solution model to a given problem. Flowcharts are used in analysing,
designing, documenting or managing a process or program in various fields.
24
Fig. 3 Flow-Chart of the Working
5. CODES
Preprocess.py
<!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">
25
<title>complete responsive coffee shop website design</title>


<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">


<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="header">
<a href="#" class="logo">

<img src="images/logo.png" alt="">
</a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#menu">menu</a>
<a href="#products">products</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
<a href="#blogs">blogs</a>
</nav>
<div class="icons">
<div class="fas fa-search" id="search-btn"></div>
<div class="fas fa-shopping-cart" id="cart-btn"></div>
<div class="fas fa-bars" id="menu-btn"></div>
</div>
<div class="search-form">
<input type="search" id="search-box" placeholder="search
here...">
<label for="search-box" class="fas fa-search"></label>
</div>
<div class="cart-items-container">
<div class="cart-item">
<span class="fas fa-times"></span>
<img src="images/cart-item-1.png" alt="">
<div class="content">
<h3>Coffee Classic</h3>
<div class="price">Rs 349/-</div>
</div>
</div>
<h3>Brown Beans</h3>
26

</div>
</div>
<h3>Mixed Beans</h3>
</div>
</div>
<h3>Hasselnuts Beans</h3>
</div>
</div>
<a href="#" class="btn">checkout now</a>
</div>
</header>


<section class="home" id="home">
<h3>fresh coffee in the morning</h3>
<p>Fresh start to the day with stunning taste which ends up
lightning your day. What more to ask for?</p>
<a href="#" class="btn">get yours now</a>
</div>
</section>


<section class="about" id="about">
<h1 class="heading"> <span>about</span> us </h1>
<div class="row">
<div class="image">
<img src="images/about-img.jpeg" alt="">
</div>
<h3>what makes our coffee special?</h3>
<p>Do you know how many people need to drink coffee in
the morning? More so is the number of people that drinks coffee
27
throughout the day. Opening a coffee shop with a unique brand of

service is one of the best business decisions you can
make these days. Also, you will do far better if
you put some thought behind your business strategy and come up with a
good coffee slogan to make people remember your place.</p>
<p>The flavor that brings life to your body in the
morning.</p>
<a href="#" class="btn">learn more</a>
</div>
</div>
</section>


<section class="menu" id="menu">
<h1 class="heading"> our <span>menu</span> </h1>
<div class="box-container">
<div class="box">
<img src="images/menu-1.png" alt="">
<h3>Classic creme</h3>
<div class="price">Rs 349 <span>Rs 399</span></div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<h3>Cremel Delight</h3>
</div>
<div class="box">
<h3>The Classic</h3>
<div class="price">Rs 449<span>Rs 499</span></div>
</div>
<div class="box">
<h3>Cold Delight</h3>
</div>
<div class="box">
<h3>Hasselnuts </h3>
</div>
28
<div class="box">
<h3>For the dates</h3>
</div>
</div>
</section>

<section class="products" id="products">
<h1 class="heading"> our <span>products</span> </h1>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="images/product-1.png" alt="">
</div>
<h3>fresh coffee</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price">Rs 1499 <span>Rs
2299</span></div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
<div class="stars">
29

</div>
2299</span></div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
<div class="stars">
</div>
2299</span></div>
</div>
</div>
</div>
</section>

<section class="review" id="review">
<h1 class="heading"> customer's <span>review</span> </h1>
<div class="box">
<img src="images/quote-img.png" alt="" class="quote">
<p>The texture and the flavours are just so stunning,
just gets my everyday morning beautiful.</p>
<img src="images/pic-1.png" class="user" alt="">
<h3>Akash </h3>
<div class="stars">
</div>
</div>
30
<div class="box">
<p>Loving the aroma of these coffees and loving it
already. Loved it.</p>
<h3>Suman</h3>
<div class="stars">
</div>
</div>
<div class="box">
<p>cheap in price yet best in flavours.</p>
<h3>Ashley</h3>
<div class="stars">
</div>
</div>
</div>
</section>


<section class="contact" id="contact">
<h1 class="heading"> <span>contact</span> us </h1>
<div class="row">
<iframe class="map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252
261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1
024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJo
geshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin
!4v1629452077891!5m2!1sen!2sin"
allowfullscreen="" loading="lazy"></iframe>
<form action="">
<h3>get in touch</h3>
<div class="inputBox">
<span class="fas fa-user"></span>
<input type="text" placeholder="name">
</div>
31
<span class="fas fa-envelope"></span>

<input type="email" placeholder="email">
</div>
<span class="fas fa-phone"></span>
<input type="number" placeholder="number">
</div>
<input type="submit" value="contact now" class="btn">
</form>
</div>
</section>


<section class="blogs" id="blogs">
<h1 class="heading"> our <span>blogs</span> </h1>
<div class="box">
<div class="image">
<img src="images/blog-1.jpeg" alt="">
</div>
<a href="#" class="title">tasty and refreshing
coffee</a>
<span>by admin / 21st may, 2021</span>
<p>Start a new change, make best in affordable
price.</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="box">
<div class="image">
</div>
coffee</a>
<p>Bad mood? How about a coffee?</p>
</div>
</div>
<div class="box">
<div class="image">
</div>
coffee</a>
32

<p>cheers to the Good Morning.</p>
</div>
</div>
</div>
</section>


<section class="footer">
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-pinterest"></a>
</div>
<div class="links">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">menu</a>
<a href="#">products</a>
<a href="#">review</a>
<a href="#">contact</a>
<a href="#">blogs</a>
</div>
<div class="credit">Project Idea by<span> Diploma

Students</span> | all rights reserved</div>
</section>


33
<script src="js/script.js"></script>
</body>
</html>
// Coding of style.css
@import
url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;5
00;700&display=swap');
:root{
--main-color:#d3ad7f;
--black:#13131a;
--bg:#010103;
--border:.1rem solid rgba(255,255,255,.3);
}
*{
font-family: 'Roboto', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: .8rem;
}
html::-webkit-scrollbar-track{
background: transparent;
}
html::-webkit-scrollbar-thumb{
background: #fff;
border-radius: 5rem;
}
body{
background: var(--bg);
}
section{
padding:2rem 7%;
}
.heading{
34
text-align: center;
color:#fff;
text-transform: uppercase;
padding-bottom: 3.5rem;
font-size: 4rem;
}
.heading span{
color:var(--main-color);
}
.btn{
margin-top: 1rem;
display: inline-block;
padding:.9rem 3rem;
font-size: 1.7rem;
color:#fff;
background: var(--main-color);
cursor: pointer;
}
.btn:hover{
letter-spacing: .2rem;
}
.header{
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
padding:1.5rem 7%;
border-bottom: var(--border);
position: fixed;
top:0; left: 0; right: 0;
z-index: 1000;
}
.header .logo img{

height: 6rem;
}
.header .navbar a{
margin:0 1rem;
font-size: 1.6rem;
color:#fff;
}
.header .navbar a:hover{

border-bottom: .1rem solid var(--main-color);
padding-bottom: .5rem;
}
.header .icons div{

color:#fff;
cursor: pointer;
font-size: 2.5rem;
35
margin-left: 2rem;
}
.header .icons div:hover{

}
#menu-btn{
display: none;
}
.header .search-form{
position: absolute;
top:115%; right: 7%;
background: #fff;
width: 50rem;
height: 5rem;
display: flex;
transform: scaleY(0);
transform-origin: top;
}
.header .search-form.active{
transform: scaleY(1);
}
.header .search-form input{

height: 100%;
width: 100%;
font-size: 1.6rem;
color:var(--black);
padding:1rem;
text-transform: none;
}
.header .search-form label{

cursor: pointer;
font-size: 2.2rem;
margin-right: 1.5rem;
color:var(--black);
}
.header .search-form label:hover{

}
.header .cart-items-container{
position: absolute;
top:100%; right: -100%;
height: calc(100vh - 9.5rem);
width: 35rem;
background: #fff;
padding:0 1.5rem;
}
.header .cart-items-container.active{
right: 0;
36
.header .cart-items-container .cart-item{

position: relative;
margin:2rem 0;
display: flex;
gap:1.5rem;
}
.header .cart-items-container .cart-item .fa-times{

position: absolute;
top:1rem; right: 1rem;
font-size: 2rem;
cursor: pointer;
color: var(--black);
}
.header .cart-items-container .cart-item .fa-times:hover{

}
.header .cart-items-container .cart-item img{

height: 7rem;
}
.header .cart-items-container .cart-item .content h3{

font-size: 2rem;
color:var(--black);
padding-bottom: .5rem;
}
.header .cart-items-container .cart-item .content .price{

font-size: 1.5rem;
}
.header .cart-items-container .btn{

width: 100%;
text-align: center;
}
.home{
min-height: 100vh;
display: flex;
background:url(../images/home-img.jpeg) no-repeat;
background-size: cover;
background-position: center;
}
.home .content{
max-width: 60rem;
}
.home .content h3{

font-size: 6rem;
37
color:#fff;
}
.home .content p{
font-size: 2rem;
font-weight: lighter;
line-height: 1.8;
padding:1rem 0;
color:#eee;
}
.about .row{
display: flex;
background:var(--black);
flex-wrap: wrap;
}
.about .row .image{

flex:1 1 45rem;
}
.about .row .image img{

width: 100%;
}
.about .row .content{
flex:1 1 45rem;
padding:2rem;
}
.about .row .content h3{

font-size: 3rem;
color:#fff;
}
.about .row .content p{

font-size: 1.6rem;
color:#ccc;
padding:1rem 0;
line-height: 1.8;
}
.menu .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.menu .box-container .box{

padding:5rem;
text-align: center;
border:var(--border);
}
.menu .box-container .box img{

height: 10rem;
}
38
.menu .box-container .box h3{

color: #fff;
font-size: 2rem;
padding:1rem 0;
}
.menu .box-container .box .price{

color: #fff;
font-size: 2.5rem;
padding:.5rem 0;
}
.menu .box-container .box .price span{

font-size: 1.5rem;
text-decoration: line-through;
}
.menu .box-container .box:hover{

background:#fff;
}
.menu .box-container .box:hover > *{

color:var(--black);
}
.products .box-container{
display: grid;
gap:1.5rem;
}
.products .box-container .box{

text-align: center;
padding: 2rem;
}
.products .box-container .box .icons a{

height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
color:#fff;
margin:.3rem;
}
.products .box-container .box .icons a:hover{

background:var(--main-color);
}
.products .box-container .box .image{

padding: 2.5rem 0;
}
.products .box-container .box .image img{

height: 25rem;
39
.products .box-container .box .content h3{

color:#fff;
font-size: 2.5rem;
}
.products .box-container .box .content .stars{

padding: 1.5rem;
}
.products .box-container .box .content .stars i{

font-size: 1.7rem;
color: var(--main-color);
}
.products .box-container .box .content .price{

color:#fff;
font-size: 2.5rem;
}
.products .box-container .box .content .price span{

text-decoration: line-through;
font-size: 1.5rem;
}
.review .box-container{
display: grid;
gap:1.5rem;
}
.review .box-container .box{

text-align: center;
padding:3rem 2rem;
}
.review .box-container .box p{

font-size: 1.5rem;
line-height: 1.8;
color:#ccc;
padding:2rem 0;
}
.review .box-container .box .user{

height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.review .box-container .box h3{

padding:1rem 0;
font-size: 2rem;
color:#fff;
}
40
.review .box-container .box .stars i{

font-size: 1.5rem;
}
.contact .row{
display: flex;
flex-wrap: wrap;
gap:1rem;
}
.contact .row .map{

flex:1 1 45rem;
width: 100%;
object-fit: cover;
}
.contact .row form{

flex:1 1 45rem;
padding:5rem 2rem;
text-align: center;
}
.contact .row form h3{

font-size: 3.5rem;
color:#fff;
}
.contact .row form .inputBox{

display: flex;
margin-top: 2rem;
margin-bottom: 2rem;
background:var(--bg);
}
.contact .row form .inputBox span{

color:#fff;
font-size: 2rem;
padding-left: 2rem;
}
.contact .row form .inputBox input{

width: 100%;
padding:2rem;
font-size: 1.7rem;
color:#fff;
text-transform: none;
background:none;
}
.blogs .box-container{
display: grid;
41
gap:1.5rem;
}
.blogs .box-container .box{

}
.blogs .box-container .box .image{

height: 25rem;
overflow:hidden;
width: 100%;
}
.blogs .box-container .box .image img{

height: 100%;
object-fit: cover;
width: 100%;
}
.blogs .box-container .box:hover .image img{

transform: scale(1.2);
}
.blogs .box-container .box .content{

padding:2rem;
}
.blogs .box-container .box .content .title{

font-size: 2.5rem;
line-height: 1.5;
color:#fff;
}
.blogs .box-container .box .content .title:hover{

}
.blogs .box-container .box .content span{

display: block;
padding-top: 1rem;
font-size: 2rem;
}
.blogs .box-container .box .content p{

font-size: 1.6rem;
line-height: 1.8;
color:#ccc;
padding:1rem 0;
}
.footer{
text-align: center;
}
.footer .share{
padding:1rem 0;
42
.footer .share a{
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
color:#fff;
margin:.3rem;
border-radius: 50%;
}
.footer .share a:hover{

background-color: var(--main-color);
}
.footer .links{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
gap:1rem;
}
.footer .links a{
padding:.7rem 2rem;
color:#fff;
font-size: 2rem;
}
.footer .links a:hover{

background:var(--main-color);
}
.footer .credit{
font-size: 2rem;
color:#fff;
padding:1.5rem;
}
.footer .credit span{

}
43
/* media queries */
@media (max-width:991px){
html{
font-size: 55%;
}
.header{
padding:1.5rem 2rem;
}
section{
padding:2rem;
}
#menu-btn{
display: inline-block;
}
.header .navbar{
position: absolute;
top:100%; right: -100%;
background: #fff;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar.active{
right:0;
}
.header .navbar a{
color:var(--black);
display: block;
margin:1.5rem;
padding:.5rem;
font-size: 2rem;
}
.header .search-form{
width: 90%;
right: 2rem;
}
.home{
background-position: left;
justify-content: center;
text-align: center;
}
.home .content h3{

font-size: 4.5rem;
}
44
.home .content p{
font-size: 1.5rem;
}
html{
font-size: 50%;
}
//Coding of script.js
let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.toggle('active');
searchForm.classList.remove('active');
cartItem.classList.remove('active');
}
let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').onclick = () =>{
searchForm.classList.toggle('active');
navbar.classList.remove('active');
}
let cartItem = document.querySelector('.cart-items-container');
document.querySelector('#cart-btn').onclick = () =>{
cartItem.classList.toggle('active');
}
window.onscroll = () =>{
}
45
6. USER INTERFACE
46
Fig. 7.1 Home
Fig. 7.3 About Us
Fig. 7.4 Our Menu
47
Fig. 7.5 Our Products
Fig. 7.6 Stay Connected
48
CONCLUSION
In this website, we have used the datas and created this ecommerce website which
makes it easier to get your favourite coffee on the go without any much suffer either
in waiting queues, everytime you get your prder done, we make sure to provide you
the delivery asap. By using our experiences as we have seen the trouble happens
while eagering to get a cup of coffee but due to less time we end up not having one
and hence the perfect start to the day remains undone.
49
7. REFFERENCES
● https://codeastro.com/ecommerce-site-in-php/
● https://github.com/topics/ecommerce-website
● https://youtu.be/P8YuWEkTeuE
● https://soft-loft.com/ecommerce-website-development-plan/
50
51

Black Book 69 PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Black Book 69 PDF

Uploaded by

Copyright:

Available Formats

COFFEE STORE WEBSITE

“COFFEE STORE WEBSITE”

UNDER THE GUIDANCE OF

SHIVAJIRAO S JHONDHALE POLYTECHNIC, ASANGAON

SHIVAJIRAO S. JONDHLE POLYTECHNIC, ASANGAON

SHIVAJIRAO S. JONDHLE POLYTECHNIC, ASANGAON

SHIVAJIRAO S. JONDHLE POLYTECHNIC, ASANGAON

SHIVAJIRAO S. JONDHLE POLYTECHNIC, ASANGAON

CONTENTS PAGE NO.

2.2 HARDWARE REQUIREMENT: 15

Fig. 1 System Architecture 22

Fig. 3 Flow Chart of Working 24

List of Screen Shot

Screen Shot No Screen Shot Name Page No

learning when implemented in healthcare can leads to increased patient satisfaction.

Coffee is more than a beverage, however. It is a memory, an anticipation, a lifetime of

Coffee’s success as a beverage undoubtedly is owing both to the caffeine it harbors

2.1 SOFTWARE REQUIREMENT:

2.1.4 Visual Studios : It is an Integrated Development Environment (IDE)

2.1.5 Java Script: JavaScript is a lightweight, interpreted programming language. It is

2.1.6 PHP: PHP is a general-purpose scripting language widely used as a server-side

2.2 HARDWARE REQUIREMENT:

1. i3, 5 gen intel core processing unit

- Scope of eCommerce: The Future of Online Shopping

There are different models of E-Commerce:

● B2B – a business that sells to another business; for example, office

● B2G – Businesses that sell or deal only with Government organizations.

● C2B – this is when a customer creates something that adds value to a

- A 7-Step Framework for Successful Ecommerce Implementation

● Planning for eCommerce Business

3.1.1 Step 1: Data collection and dataset preparation

This will involve collection of customer liking information artefacts

Step 3: Practicing before publishing online.

Step 4: MAIN TARGET

We try to make it as accurate even the products as everyone

3.2.1 ALGORITHMS USED BY ECOMMERCE WEBSITES :

The primary method is to :

● recommend products similar to or complimenting those that user

3.2.2 How do eCommerce websites work?

eCommerce websites work through a series of steps, utilizing website

- Pros of eCommerce Websites:

- Cons of eCommerce Websites:

- BUSSINESS MODELS OF ANY ECOMMERCE WEBSITE

- Working of Coffee website:

Step-4: Head on to basket/cart, situated on the right upper corner.

3.2.3 RANDOM FAQs ABOUT THE SERVICE

Q. What will be the delivery time?

A. ASA your order is ready, we ensure 30 min delivery in a range of

Q. What about the quality?

A. There is no doubt about the quality as it will be handmade and

Q. Faster delivery available?

A. Depends on what you order, Extra changes may be applied.

Fig. 1 System Architecture

4.2 DFD ( Data Flow Diagram ):

Fig. 2 Interactions Basics

Fig. 3 Flow-Chart of the Working

<title>complete responsive coffee shop website design</title>

<a href="#" class="logo">

<div class="price">Rs 399/-</div>