SlideShare a Scribd company logo
1 of 62
Name : Tejveer Arvind Singh
Roll no: 70
Course: Ty.Bsc.Computer Science
Project Title: Mobile Shopping
Project Guide: Prof. Siddhesh Kadam
Index:
Sr. Topics Page No.
1 Introduction 3
a) Synopsis 4
b) Overviewof MobileShopping 5
2 MobileShopping 7
a) Proposed System 7
b) No. of Modules 8
c) SoftwareRequirements 8
d) HardwareRequirements 8
3 System Analysis& Design 9
4 Code Implemtation 13
5 Data Flow Diagrams 46
6 Screenshotof Website 51
7 Interpretation of Result 57
8 Advantages 59
9 Conclusion 61
9 References 62
 The Project entitled "Mobile Shopping" is a web-based application
Software developed in PHP LANGUAGE using PHP and Mysql on
Pentium machine.
 The main aim of "Mobile Shopping" is to improve the services of
Customers and vendors.
 It maintains the details of customer payments, addition of new
customers, products and also updating, deletion for the same.
 It also stores the details of invoices generated by customer and
payments made by them with all Payments details like credit card.
 The primary featuresofthe project entitled"MobileShopping"arehigh
accuracy, design flexibility and easy availability.
 And also it uses database tables Representing entities and
relationships between entities.
The central concept of the webpage is to allow the customer to shop
virtually using the Internet and allow customers to buy the items and
articles of their desire from the store. The information pertaining to the
products are stores on an DBMS at the server side (store). The Server
process the customers and the items are shipped to the address submitted
by them. The webpage was designed into two modules first Os for the
customerswho wish to buythe articles.Secondisforthe storekeeperswho
maintains and updates the information pertaining to the articles and
those of the customers? The end user of this product is a departmental
store where the application is hosted on the web and the administrator
maintains the database. The application which is deployed at the
customerdatabase, the details of the items are brought forward from the
database for the customerviewbased on the selection throughthe menu
and the database of all the products are updated at the end of each
transaction. Data entry into the application can be done throughvarious
screensdesignedforvariouslevelsofusers.Oncetheauthorizedpersonnel
feed the relevant data into the system, several reports could be generated
as per the security.
Mobile shopping is a form of electronic commerce where the buyeris directly
online to the seller's computer usually via the internet. There is no
intermediary service. The sale and purchase transaction is completed
electronically and interactively in real-time. If an intermediary is present,
then the sale andpurchasetransactionis calledelectroniccommercesuchas
eBay.com.
Proposed System:
The development of this new system contains the following activities, which try to develop
on-line application by keeping the entire process in the view of database integration
approach.
 Secure registration and profile management facilities for Customers.
 Browsing through the website, user can see a lot of sections like Top Sales, New
Phones, Special Prices and many more.
 Customers should be able to mail the Shop about the items they would like to see
in the Shop
 Secured mechanism for checking out from the Shop( Credit card verification
mechanism )
 Updates to customers about the Recent Items in the Shop.
 Uploading ‘Most Purchased’ Phones in Top Sales Section
Number of Modules:
The system after careful analysis has been identified to be presented with the following
modules:
1. Customer.
2. Security and Authentication
Software Requirements:
Operating System : Windows XP/7/8/8.1 or Linux
User Interface : HTML, CSS
Server-side Scripting : PHP Script
Client-side-Scripting : Java Script
Programming Language : PHP
Web Applications : Xammp Server
IDE/Workbench : PhpStrome, VisualCode, Notepad
Database : MySQL
Server Deployment : Apache
Hardware Requirements:
Processor : Pentium IV
Hard Disk : 40GB
RAM : 512MB or more
Introduction:
Analysis is the focus of system developing and is the stage when system
designers have to work at two levels of definition regarding the study of
situationalissuesandpossiblesolutions in terms of “what to do” and “how to
do”.
System Study:
DEFINITION OF THE SYSTEM:
A system is an orderly grouping of independent components linked together
according to a plan to achieve a specific objective. Its main characteristics
are organization, interaction, independent, integration and central objective
a system does not necessarily mean to a computer system. It may be a
manual system or any other names.
NEEDS OF THE SYSTEM:
Social and economic factor: a wave of social and economic changes often
follows in the wake of the new technology. New opportunities may arise to
improve on a production process orto do something that was not previously
possible.Changesinthe ways individualsareorganizedintogroupsmaythen
be necessary, and the newgroups may completeforeconomicresources with
established units.
Technological factor: people have never before in a time when the scope of
scientific inquiry was so broad, so when the speed of applying the new
technology accounts for many changes in the organization.
High level decisions and operating processes: in response to technological,
socio-economical factors, top level managers may decide to recognize
operations and introduce new products. To deal with these needs, people
commonlyseeknewmodifiedinformationtosupportthedecision.Whenthat
happens,thentheyobtainturnto a computersystemforhelpthe information
users and data processing specialist then work togetherto complete a series
of steps in a system study to produce output results to satisfy information
needs.
System analysis:
System Analysis is a process by which we attribute process or goals to a
human activity, determine how well those purpose are being achieved and
specify the requirements of the various tools and techniques that are to be
used within the system if the system performances are to be achieved.
SYSTEM PLANNING:
Planning forinformation systems has a time horizon and a focus dimension.
The timehorizon dimensionspecifiesthetime rangeof the plan,where as the
focus dimension relates whether the primary concern is strategic,
managerial,oroperational.Thesystemi.e. The Projectthat we were assigned
was requiredtocompletewithin20weeks.Whatwe had plannedisas follows:
Requirements analysis, Preliminary Investigation & Information Gathering
should be covered within the 1st
and 2nd
week. Since I was not aware of PHP
STROME,VISUALCODE,MYSQL IDE it require 1 week for me to adjust with
that tool. 12 Weeks for the design of the system underdevelopment. 1 week
for Testing & Implementation. And rest 2 reserve weeks.
PRELIMINARY INVESTIGATION:
The initial investigation has the objective of determining the validity of the
user’s request for a candidate system and whether a feasibility study should
be conducted.
The objectives of the problem posed by the user must be understood within
the framework of the organization’s MIS plan. I had investigated from the
concerned authority about the project
INFORMATION GATHERING:
A key part of feasibility analysis is gathering information about the present
system. The analyst must knowwhat information to gather, where to find it,
how to collectit, and what to makeof it. The properuse of tools forgathering
information is the key to successful analysis. The tools are the traditional
interview, questionnaires, and on-site observation.
STRUCTURED ANALYSIS:
The traditionaltoolsof data gatheringhavelimitations.AnEnglishnarrative
description is often vague and difficult for the user to grasp. System
flowcharts focus more on physical than on logical implementation of the
candidate system. Because of these drawbacks, structured tools were
introduced for analysis. Structured analysis is a set of techniques and
graphical tools (DFD) that allow the analyst to develop a newkind of system
specifications that are easily understandable to the user.
Index2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Shop</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.
css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!-- Owl-carousel CDN -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
carousel.min.css" integrity="sha256-
UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
theme.default.min.css" integrity="sha256-
kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
<!-- font awesome icons -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css" integrity="sha256-
h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<!-- Custom CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- start #header -->
<header id="header">
<div class="strip d-flex justify-content-between px-4 py-1 bg-
light">
<p class="font-rale font-size-12 text-black-50 m-0">Jordan
Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p>
<div class="font-rale font-size-14">
<a href="#" class="px-3 border-right border-left text-
dark">Login</a>
<a href="#" class="px-3 border-right text-
dark">Whishlist (0)</a>
</div>
</div>
<!-- Primary Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark color-second-
bg">
<a class="navbar-brand" href="#">Mobile Shopping</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav m-auto font-rubik">
<li class="nav-item active">
<a class="nav-link" href="#">On Sale</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products <i class="fas
fa-chevron-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category <i class="fas
fa-chevron-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Coming Soon</a>
</li>
</ul>
<form action="#" class="font-size-14 font-rale">
<a href="#" class="py-2 rounded-pill color-primary-
bg">
<span class="font-size-16 px-2 text-white"><i
class="fas fa-shopping-cart"></i></span>
<span class="px-3 py-2 rounded-pill text-dark bg-
light">0</span>
</a>
</form>
</div>
</nav>
<!-- !Primary Navigation -->
</header>
<!-- !start #header -->
<!-- start #main-site -->
<main id="main-site">
<!-- Owl-carousel -->
<section id="banner-area">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="../assets/Banner1.png" alt="Banner1">
</div>
<div class="item">
<img src="../assets/Banner2.png" alt="Banner2">
</div>
<div class="item">
<img src="../assets/Banner1.png" alt="Banner3">
</div>
<div class="item">
<img src="../assets/tej (1).jpg" alt="Banner4">
</div>
</div>
</section>
<!-- !Owl-carousel -->
<!-- Top Sale -->
<section id="top-sale">
<div class="container py-5">
<h4 class="font-rubik font-size-20">Top Sale</h4>
<hr>
<!-- owl carousel -->
<div class="owl-carousel owl-theme">
<div class="item py-2">
<div class="product font-rale">
<a href="product.html"><img
src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="product.html"><img
src="../assets/products/2.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/3.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/6.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/1.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/1.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/2.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- !owl carousel -->
</div>
</section>
<!-- !Top Sale -->
<!-- Special Price -->
<section id="special-price">
<div class="container">
<h4 class="font-rubik font-size-20">Special Price</h4>
<div id="filters" class="button-group text-right font-baloo
font-size-16">
<button class="btn is-checked" data-filter="*">All
Brand</button>
<button class="btn" data-filter=".Apple">Apple</button>
<button class="btn" data-filter=".Samsung">Samsung</button>
<button class="btn" data-filter=".Redmi">Redmi</button>
</div>
<div class="grid">
<div class="grid-item Apple border">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<a href="#"><img src="../assets/products/13.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Apple iPhone 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="grid-item Samsung border">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<a href="#"><img src="../assets/products/11.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="grid-item Redmi border">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<a href="#"><img src="../assets/products/3.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Redmi Note 7 Pro</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="grid-item Apple border">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<a href="#"><img src="../assets/products/14.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Apple iPhone 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="grid-item Samsung border">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<a href="#"><img src="../assets/products/12.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="grid-item Redmi border ">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/4.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Redmi Note 7 Pro</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item Redmi border ">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/5.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Redmi Note 7 Pro</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item Redmi border ">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/6.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Redmi Note 7 Pro</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item Redmi border">
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/10.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Redmi Note 7 Pro</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item Apple border " >
<div class="item py-2" style="width: 200px;">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/13.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Apple iPhone 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$252</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- !Special Price -->
<!-- Banner Ads -->
<section id="banner_adds">
<div class="container py-5 text-center">
<img src="../assets/banner1-cr-500x150.jpg" alt="banner1"
class="img-fluid">
<img src="../assets/banner2-cr-500x150.jpg" alt="banner1"
class="img-fluid">
</div>
</section>
<!-- !Banner Ads -->
<!-- New Phones -->
<section id="new-phones">
<div class="container">
<h4 class="font-rubik font-size-20">New Phones</h4>
<hr>
<!-- owl carousel -->
<div class="owl-carousel owl-theme">
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img src="../assets/products/1.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img src="../assets/products/2.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img src="../assets/products/3.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img src="../assets/products/6.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img src="../assets/products/1.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/1.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/2.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- !owl carousel -->
</div>
</section>
<!-- !New Phones -->
<!-- Blogs -->
<section id="blogs">
<div class="container py-4">
<h4 class="font-rubik font-size-20">Latest Blogs</h4>
<hr>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card border-0 font-rale mr-5" style="width:
18rem;">
<h5 class="card-title font-size-16">Upcoming
Mobiles</h5>
<img src="../assets/blog/blog1.jpg" alt="cart image"
class="card-img-top">
<p class="card-text font-size-14 text-black-50 py-
1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non
iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
<a href="#" class="color-second text-left">Go
somewhere</a>
</div>
</div>
<div class="item">
<div class="card border-0 font-rale mr-5" style="width:
18rem;">
<h5 class="card-title font-size-16">Upcoming
Mobiles</h5>
<img src="../assets/blog/blog2.jpg" alt="cart image"
class="card-img-top">
<p class="card-text font-size-14 text-black-50 py-
1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non
iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
<a href="#" class="color-second text-left">Go
somewhere</a>
</div>
</div>
<div class="item">
<div class="card border-0 font-rale mr-5" style="width:
18rem;">
<h5 class="card-title font-size-16">Upcoming
Mobiles</h5>
<img src="../assets/blog/blog3.jpg" alt="cart image"
class="card-img-top">
<p class="card-text font-size-14 text-black-50 py-
1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non
iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
<a href="#" class="color-second text-left">Go
somewhere</a>
</div>
</div>
</div>
</div>
</section>
<!-- !Blogs -->
</main>
<!-- !start #main-site -->
<!-- start #footer -->
<footer id="footer" class="bg-dark text-white py-5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-12">
<h4 class="font-rubik font-size-20">Mobile Shopping</h4>
<p class="font-size-14 font-rale text-white-50">Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
</div>
<div class="col-lg-4 col-12">
<h4 class="font-rubik font-size-20">Newslatter</h4>
<form class="form-row">
<div class="col">
<input type="text" class="form-control"
placeholder="Email *">
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-
2">Subscribe</button>
</div>
</form>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Information</h4>
<div class="d-flex flex-column flex-wrap">
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">About Us</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Delivery Information</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Privacy Policy</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Terms & Conditions</a>
</div>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Account</h4>
<div class="d-flex flex-column flex-wrap">
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">My Account</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Order History</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Wish List</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Newslatters</a>
</div>
</div>
</div>
</div>
</footer>
<div class="copyright text-center bg-dark text-white py-2">
<p class="font-rale font-size-14">&copy; Copyrights 2020. Desing
By <a href="#" class="color-second">Tejveer Singh</a></p>
</div>
<!-- !start #footer -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js
" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Owl Carousel Js file -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel
.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0="
crossorigin="anonymous"></script>
<!-- isotope plugin cdn -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pk
gd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI="
crossorigin="anonymous"></script>
<!-- Custom Javascript -->
<script src="index.js"></script>
</body>
</html>
Product.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Shopee</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.
css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!-- Owl-carousel CDN -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
carousel.min.css" integrity="sha256-
UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
theme.default.min.css" integrity="sha256-
kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
<!-- font awesome icons -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css" integrity="sha256-
h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<!-- Custom CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- start #header -->
<header id="header">
<div class="strip d-flex justify-content-between px-4 py-1 bg-
light">
<p class="font-rale font-size-12 text-black-50 m-0">Jordan
Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p>
<div class="font-rale font-size-14">
<a href="#" class="px-3 border-right border-left text-
dark">Login</a>
<a href="#" class="px-3 border-right text-
dark">Whishlist (0)</a>
</div>
</div>
<!-- Primary Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark color-second-
bg">
<a class="navbar-brand" href="#">Mobile Shopee</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav m-auto font-rubik">
<li class="nav-item active">
<a class="nav-link" href="#">On Sale</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products <i class="fas
fa-chevron-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category <i class="fas
fa-chevron-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Coming Soon</a>
</li>
</ul>
<form action="#" class="font-size-14 font-rale">
<a href="#" class="py-2 rounded-pill color-primary-
bg">
<span class="font-size-16 px-2 text-white"><i
class="fas fa-shopping-cart"></i></span>
<span class="px-3 py-2 rounded-pill text-dark bg-
light">0</span>
</a>
</form>
</div>
</nav>
<!-- !Primary Navigation -->
</header>
<!-- !start #header -->
<!-- start #main-site -->
<main id="main-site">
<!-- product -->
<section id="product" class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="../assets/products/1.png"
alt="product" class="img-fluid">
<div class="form-row pt-4 font-size-16 font-
baloo">
<div class="col">
<button type="submit" class="btn btn-
danger form-control">Proceed to Buy</button>
</div>
<div class="col">
<a href="cart.html"> <button
type="submit" class="btn btn-warning form-control">Add to Cart</button>
</div>
</div>
</div>
<div class="col-sm-6 py-5">
<h5 class="font-baloo font-size-20">Samsung
Galaxy 10</h5>
<small>by Samsung</small>
<div class="d-flex">
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="far fa-
star"></i></span>
</div>
<a href="#" class="px-2 font-rale font-
size-14">20,534 ratings | 1000+ answered questions</a>
</div>
<hr class="m-0">
<!--- product price -->
<table class="my-3">
<tr class="font-rale font-size-14">
<td>M.R.P:</td>
<td><strike>$162.00</strike></td>
</tr>
<tr class="font-rale font-size-14">
<td>Deal Price:</td>
<td class="font-size-20 text-
danger">$<span>152.00</span><small class="text-dark font-size-
12">&nbsp;&nbsp;Inclusive of all taxes</small></td>
</tr>
<tr class="font-rale font-size-14">
<td>You Save:</td>
<td><span class="font-size-16 text-
danger">$152.00</span></td>
</tr>
</table>
<!--- !product price -->
<!-- #policy -->
<div id="policy">
<div class="d-flex">
<div class="return text-center mr-
5">
<div class="font-size-20 my-2
color-second">
<span class="fas fa-retweet
border p-3 rounded-pill"></span>
</div>
<a href="#" class="font-rale
font-size-12">10 Days <br> Replacement</a>
</div>
<div class="return text-center mr-
5">
<div class="font-size-20 my-2
color-second">
<span class="fas fa-truck
border p-3 rounded-pill"></span>
</div>
<a href="#" class="font-rale
font-size-12">Tejveer <br>Deliverd</a>
</div>
<div class="return text-center mr-
5">
<div class="font-size-20 my-2
color-second">
<span class="fas fa-check-
double border p-3 rounded-pill"></span>
</div>
<a href="#" class="font-rale
font-size-12">1 Year <br>Warranty</a>
</div>
</div>
</div>
<!-- !policy -->
<hr>
<!-- order-details -->
<div id="order-details" class="font-rale d-
flex flex-column text-dark">
<small>Delivery by : Mar 29 - Apr
1</small>
<small>Sold by <a href="#">Tejveer
</a>(4.5 out of 5 | 18,198 ratings)</small>
<small><i class="fas fa-map-marker-alt
color-primary"></i>&nbsp;&nbsp;Deliver to Customer - 424201</small>
</div>
<!-- !order-details -->
<div class="row">
<div class="col-6">
<!-- color -->
<div class="color my-3">
<div class="d-flex justify-
content-between">
<h6 class="font-
baloo">Color:</h6>
<div class="p-2 color-
yellow-bg rounded-circle"><button class="btn font-size-14"></button></div>
<div class="p-2 color-
primary-bg rounded-circle"><button class="btn font-size-14"></button></div>
<div class="p-2 color-
second-bg rounded-circle"><button class="btn font-size-14"></button></div>
</div>
</div>
<!-- !color -->
</div>
<div class="col-6">
<!-- product qty section -->
<div class="qty d-flex">
<h6 class="font-baloo">Qty</h6>
<div class="px-4 d-flex font-
rale">
<button class="qty-up border
bg-light" data-id="pro1"><i class="fas fa-angle-up"></i></button>
<input type="text" data-
id="pro1" class="qty_input border px-2 w-50 bg-light" disabled value="1"
placeholder="1">
<button data-id="pro1"
class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
</div>
</div>
<!-- !product qty section -->
</div>
</div>
<!-- size -->
<div class="size my-3">
<h6 class="font-baloo">Size :</h6>
<div class="d-flex justify-content-
between w-75">
<div class="font-rubik border p-2">
<button class="btn p-0 font-
size-14">4GB RAM</button>
</div>
<div class="font-rubik border p-2">
<button class="btn p-0 font-
size-14">6GB RAM</button>
</div>
<div class="font-rubik border p-2">
<button class="btn p-0 font-
size-14">8GB RAM</button>
</div>
</div>
</div>
<!-- !size -->
</div>
<div class="col-12">
<h6 class="font-rubik">Product Description</h6>
<hr>
<p class="font-rale font-size-14">Quad Camera
Setup - 64MP (F1.8) Main Camera +8MP (F2.2) Ultra Wide Camera +5MP(F2.2)
Depth Camera +5MP(F2.4) Macro Camera and 32MP (F2.0) front facing Camera
6.4-inch(16.21 centimeters) Super Amoled -
Infinity U Cut Display , FHD+ Resolution (2340 x 1080) , 404 ppi pixel
density and 16M color support
Android v10.0 operating system with 2.3GHz +
1.7GHz Exynos 9611 Octa core processor , 6GB RAM, 128GB internal memory
expandable up to 512GB and dual SIM
6000 mAh Battery
1 year manufacturer warranty for device and 6
months manufacturer warranty for in-box accessories including batteries
from the date of purchase
Please contact Samsung helpline number 1800
407 267864 for any assistance related to device</p>
<p class="font-rale font-size-14"></p>
</div>
</div>
</div>
</section>
<!-- !product -->
<!-- Top Sale -->
<section id="top-sale">
<div class="container py-5">
<h4 class="font-rubik font-size-20">Top Sale</h4>
<hr>
<!-- owl carousel -->
<div class="owl-carousel owl-theme">
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/1.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/2.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/3.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/6.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<a href="#"><img src="../assets/products/1.png"
alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-warning font-
size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/1.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="item py-2">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img src="../assets/products/2.png"
class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-warning
font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- !owl carousel -->
</div>
</section>
<!-- !Top Sale -->
</main>
<!-- !start #main-site -->
<!-- start #footer -->
<footer id="footer" class="bg-dark text-white py-5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-12">
<h4 class="font-rubik font-size-20">Mobile Shop</h4>
<p class="font-size-14 font-rale text-white-50">Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
</div>
<div class="col-lg-4 col-12">
<h4 class="font-rubik font-size-20">Newslatter</h4>
<form class="form-row">
<div class="col">
<input type="text" class="form-control"
placeholder="Email *">
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-
2">Subscribe</button>
</div>
</form>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Information</h4>
<div class="d-flex flex-column flex-wrap">
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">About Us</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Delivery Information</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Privacy Policy</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Terms & Conditions</a>
</div>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Account</h4>
<div class="d-flex flex-column flex-wrap">
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">My Account</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Order History</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Wish List</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Newslatters</a>
</div>
</div>
</div>
</div>
</footer>
<div class="copyright text-center bg-dark text-white py-2">
<p class="font-rale font-size-14">&copy; Copyrights 2020. Desing
By <a href="#" class="color-second">Tejveer Singh</a></p>
</div>
<!-- !start #footer -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js
" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Owl Carousel Js file -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel
.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0="
crossorigin="anonymous"></script>
<!-- isotope plugin cdn -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pk
gd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI="
crossorigin="anonymous"></script>
<!-- Custom Javascript -->
<script src="./index.js"></script>
</body>
</html>
Cart.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Shop</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.
css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!-- Owl-carousel CDN -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
carousel.min.css" integrity="sha256-
UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
theme.default.min.css" integrity="sha256-
kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
<!-- font awesome icons -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css" integrity="sha256-
h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<!-- Custom CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- start #header -->
<header id="header">
<div class="strip d-flex justify-content-between px-4 py-1 bg-
light">
<p class="font-rale font-size-12 text-black-50 m-0">Jordan
Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p>
<div class="font-rale font-size-14">
<a href="#" class="px-3 border-right border-left text-
dark">Login</a>
<a href="#" class="px-3 border-right text-
dark">Whishlist (0)</a>
</div>
</div>
<!-- Primary Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark color-second-
bg">
<a class="navbar-brand" href="#">Mobile Shopee</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav m-auto font-rubik">
<li class="nav-item active">
<a class="nav-link" href="#">On Sale</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products <i class="fas
fa-chevron-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category <i class="fas
fa-chevron-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Coming Soon</a>
</li>
</ul>
<form action="#" class="font-size-14 font-rale">
<a href="#" class="py-2 rounded-pill color-primary-
bg">
<span class="font-size-16 px-2 text-white"><i
class="fas fa-shopping-cart"></i></span>
<span class="px-3 py-2 rounded-pill text-dark bg-
light">0</span>
</a>
</form>
</div>
</nav>
<!-- !Primary Navigation -->
</header>
<!-- !start #header -->
<!-- start #main-site -->
<main id="main-site">
<!-- Shopping cart section -->
<section id="cart" class="py-3">
<div class="container-fluid w-75">
<h5 class="font-baloo font-size-20">Shopping
Cart</h5>
<!-- shopping cart items -->
<div class="row">
<div class="col-sm-9">
<!-- cart item -->
<div class="row border-top py-3 mt-
3">
<div class="col-sm-2">
<img
src="../assets/products/1.png" style="height: 120px;" alt="cart1"
class="img-fluid">
</div>
<div class="col-sm-8">
<h5 class="font-baloo font-
size-20">Samsung Galaxy 10</h5>
<small>by Samsung</small>
<!-- product rating -->
<div class="d-flex">
<div class="rating
text-warning font-size-12">
<span><i class="fas
fa-star"></i></span>
<span><i class="fas
fa-star"></i></span>
<span><i class="fas
fa-star"></i></span>
<span><i class="fas
fa-star"></i></span>
<span><i class="far
fa-star"></i></span>
</div>
<a href="#"
class="px-2 font-rale font-size-14">20,534 ratings</a>
</div>
<!-- !product rating-->
<!-- product qty -->
<div class="qty d-flex
pt-2">
<div class="d-flex
font-rale w-25">
<button
class="qty-up border bg-light" data-id="pro1"><i class="fas fa-angle-
up"></i></button>
<input
type="text" data-id="pro1" class="qty_input border px-2 w-100 bg-light"
disabled value="1" placeholder="1">
<button data-
id="pro1" class="qty-down border bg-light"><i class="fas fa-angle-
down"></i></button>
</div>
<button
type="submit" class="btn font-baloo text-danger px-3 border-
right">Delete</button>
<button
type="submit" class="btn font-baloo text-danger">Save for Later</button>
</div>
<!-- !product qty -->
</div>
<div class="col-sm-2 text-
right">
<div class="font-size-20
text-danger font-baloo">
$<span
class="product_price">152</span>
</div>
</div>
</div>
<!-- !cart item -->
<!-- cart item -->
<div class="row border-top py-3 mt-3">
<div class="col-sm-2">
<img
src="../assets/products/2.png" style="height: 120px;" alt="cart1"
class="img-fluid">
</div>
<div class="col-sm-8">
<h5 class="font-baloo font-
size-20">Samsung Galaxy 10</h5>
<small>by Samsung</small>
<!-- product rating -->
<div class="d-flex">
<div class="rating text-
warning font-size-12">
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="far fa-
star"></i></span>
</div>
<a href="#" class="px-2
font-rale font-size-14">20,534 ratings</a>
</div>
<!-- !product rating-->
<!-- product qty -->
<div class="qty d-flex pt-
2">
<div class="d-flex
font-rale w-25">
<button class="qty-
up border bg-light"><i class="fas fa-angle-up"></i></button>
<input type="text"
class="qty_input border px-2 w-100 bg-light" disabled value="1"
placeholder="1">
<button class="qty-
down border bg-light"><i class="fas fa-angle-down"></i></button>
</div>
<button type="submit"
class="btn font-baloo text-danger px-3 border-right">Delete</button>
<button type="submit"
class="btn font-baloo text-danger">Save for Later</button>
</div>
<!-- !product qty -->
</div>
<div class="col-sm-2 text-right">
<div class="font-size-20 text-
danger font-baloo">
$<span
class="product_price">152</span>
</div>
</div>
</div>
<!-- !cart item -->
</div>
<!-- subtotal section-->
<div class="col-sm-3">
<div class="sub-total border text-
center mt-2">
<h6 class="font-size-12 font-rale
text-success py-3"><i class="fas fa-check"></i> Your order is eligible for
FREE Delivery.</h6>
<div class="border-top py-4">
<h5 class="font-baloo font-
size-20">Subtotal (2 item):&nbsp; <span class="text-danger">$<span
class="text-danger" id="deal-price">152.00</span> </span> </h5>
<button type="submit"
class="btn btn-warning mt-3">Proceed to Buy</button>
</div>
</div>
</div>
<!-- !subtotal section-->
</div>
<!-- !shopping cart items -->
</div>
</section>
<!-- !Shopping cart section -->
<!-- New Phones -->
<section id="new-phones">
<div class="container py-5">
<h4 class="font-rubik font-size-20">New Phones</h4>
<hr>
<!-- owl carousel -->
<div class="owl-carousel owl-theme">
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img
src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img
src="../assets/products/2.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img
src="../assets/products/3.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img
src="../assets/products/6.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Samsung Galaxy 10</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<a href="#"><img
src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-size-
12">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price py-2">
<span>$152</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img
src="../assets/products/1.png" class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-
size-12">
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="far fa-
star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="item py-2 bg-light">
<div class="product font-rale">
<div class="d-flex flex-column">
<a href="#"><img
src="../assets/products/2.png" class="img-fluid" alt="pro1"></a>
<div class="text-center">
<h6>Readme Note 7</h6>
<div class="rating text-warning font-
size-12">
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="fas fa-
star"></i></span>
<span><i class="far fa-
star"></i></span>
</div>
<div class="price py-2">
<span>$122</span>
</div>
<button type="submit" class="btn btn-
warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- !owl carousel -->
</div>
</section>
<!-- !New Phones -->
</main>
<!-- !start #main-site -->
<!-- start #footer -->
<footer id="footer" class="bg-dark text-white py-5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-12">
<h4 class="font-rubik font-size-20">Mobile Shopee</h4>
<p class="font-size-14 font-rale text-white-50">Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
</div>
<div class="col-lg-4 col-12">
<h4 class="font-rubik font-size-20">Newslatter</h4>
<form class="form-row">
<div class="col">
<input type="text" class="form-control"
placeholder="Email *">
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-
2">Subscribe</button>
</div>
</form>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Information</h4>
<div class="d-flex flex-column flex-wrap">
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">About Us</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Delivery Information</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Privacy Policy</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Terms & Conditions</a>
</div>
</div>
<div class="col-lg-2 col-12">
<h4 class="font-rubik font-size-20">Account</h4>
<div class="d-flex flex-column flex-wrap">
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">My Account</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Order History</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Wish List</a>
<a href="#" class="font-rale font-size-14 text-white-50
pb-1">Newslatters</a>
</div>
</div>
</div>
</div>
</footer>
<div class="copyright text-center bg-dark text-white py-2">
<p class="font-rale font-size-14">&copy; Copyrights 2020. Desing
By <a href="#" class="color-second">Daily Tuition</a></p>
</div>
<!-- !start #footer -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js
" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Owl Carousel Js file -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel
.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0="
crossorigin="anonymous"></script>
<!-- isotope plugin cdn -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pk
gd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI="
crossorigin="anonymous"></script>
<!-- Custom Javascript -->
<script src="index.js"></script>
</body>
</html>
SELLER
Mobile
Shopping
BUYER
 User
 Product
 Cart
 Wishlist
 A data flow diagram (DFD) is a
graphical representation of the "flow" of
data through an information system.
Database:-
User Details
Product
Cart
Wishlist
User Case Diagram:-
––––
-
User
Logout
Payment
Cart
Registration
Login
Home
Product
Class Diagram:
Payment
Receipt
Admin
Update
Delete
Create
InvalidLogin
Details
Register Login Product
Cart
If Successfull
ll
If Not
ll
Payment
Checkout
Successful
Payment
RegistrationPage:
Login Page:
Home Page:
Product Page:
Cart Page:
Payment:
The system has been implemented and tested successfully.
It meets the information requirements specifiedto the
great extent. Although the system has been designed
keeping the present and future requirements in mind and
made very flexible.
There are limitations of the system. proper consideration
has been given for a wide range of new enhancements. The
system is developed user friendly.In future , if it is required
to generate reports other than provided by the system it
can be simply achieved by a separate module to the main
menu without affecting the design of the system.
(1) It simplifies the operation.
(2) It avoids a lot of manual work.
(3) Every transaction is obtained and processed
immediately.
(4) Avoids errors by avoiding the manual work.
(5) User friendly screen to enter the data and enquire the
database tables.
(6) Online help messages available to the operating
system.
(7) User can easily access the system without much
experience.
(8) Provide hardware and software securities.
(9) Portable and flexible for further extensions.
The central concept of the application is to allow the customer to shop
virtuallyusingthe Internetandallowcustomersto buy the itemsand articles
of their desire from the store.
The information pertaining to the products are stores on an DBMS at the
server side (store). The Server process the customers and the items are
shipped to the address submitted by them.
The application was designed into two modules first Os for the customers
who wish to buy the articles. Second is for the storekeepers who maintains
and updates the information pertaining to the articles and those of the
customers.
The end user of this product is a departmental store where the application is
hosted on the web and the administrator maintains the database. The
application which is deployed at the customer database, the details of the
items are brought forward from the database forthe customerviewbased on
the selection through the menu and the database of all the products are
updated at the end of each transaction.
1. Google
2. Bootstrap
3. Owl carsoual
4. Git

More Related Content

What's hot

Mobile Bill Management System - Project Proposal
Mobile Bill Management System - Project ProposalMobile Bill Management System - Project Proposal
Mobile Bill Management System - Project ProposalAnuja Herath
 
127801976 mobile-shop-management-system-documentation
127801976 mobile-shop-management-system-documentation127801976 mobile-shop-management-system-documentation
127801976 mobile-shop-management-system-documentationNitesh Kumar
 
Medical store management system
Medical store management systemMedical store management system
Medical store management systemUpendra Sengar
 
Software Requirement Specification
Software Requirement SpecificationSoftware Requirement Specification
Software Requirement SpecificationVishal Singh
 
Mobile store management
Mobile store management Mobile store management
Mobile store management Rupendra Verma
 
Bussiness needs
Bussiness needsBussiness needs
Bussiness needshunni123
 
Library Management System Waterfall Model
Library Management System Waterfall ModelLibrary Management System Waterfall Model
Library Management System Waterfall Modelmitwa1990
 
Chapter 11 Enterprise Resource Planning System
Chapter 11 Enterprise Resource Planning SystemChapter 11 Enterprise Resource Planning System
Chapter 11 Enterprise Resource Planning SystemMuhammad Azmy
 
Information Technology - Module 4: Software and Information Systems Building ...
Information Technology - Module 4: Software and Information Systems Building ...Information Technology - Module 4: Software and Information Systems Building ...
Information Technology - Module 4: Software and Information Systems Building ...El Bucho
 
PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...
PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...
PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...IJDKP
 
Sample Business Requirement Document
Sample Business Requirement DocumentSample Business Requirement Document
Sample Business Requirement DocumentIsabel Elaine Leong
 
Medical Store Management System Software Engineering Project
Medical Store Management System Software Engineering ProjectMedical Store Management System Software Engineering Project
Medical Store Management System Software Engineering Projecthani2253
 
Hedging the process
Hedging the processHedging the process
Hedging the processDATA Inc.
 
SE18_Lec 01_Introduction to Software Engineering
SE18_Lec 01_Introduction to Software EngineeringSE18_Lec 01_Introduction to Software Engineering
SE18_Lec 01_Introduction to Software EngineeringAmr E. Mohamed
 

What's hot (20)

Mobile Bill Management System - Project Proposal
Mobile Bill Management System - Project ProposalMobile Bill Management System - Project Proposal
Mobile Bill Management System - Project Proposal
 
Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
Brilient login system
Brilient login systemBrilient login system
Brilient login system
 
127801976 mobile-shop-management-system-documentation
127801976 mobile-shop-management-system-documentation127801976 mobile-shop-management-system-documentation
127801976 mobile-shop-management-system-documentation
 
Medical store management system
Medical store management systemMedical store management system
Medical store management system
 
Software Requirement Specification
Software Requirement SpecificationSoftware Requirement Specification
Software Requirement Specification
 
Mobile store management
Mobile store management Mobile store management
Mobile store management
 
Bussiness needs
Bussiness needsBussiness needs
Bussiness needs
 
Online computer shop 111 35-181
Online computer shop 111 35-181Online computer shop 111 35-181
Online computer shop 111 35-181
 
Library Management System Waterfall Model
Library Management System Waterfall ModelLibrary Management System Waterfall Model
Library Management System Waterfall Model
 
System Development Proecess
System Development ProecessSystem Development Proecess
System Development Proecess
 
Chapter 11 Enterprise Resource Planning System
Chapter 11 Enterprise Resource Planning SystemChapter 11 Enterprise Resource Planning System
Chapter 11 Enterprise Resource Planning System
 
Information Technology - Module 4: Software and Information Systems Building ...
Information Technology - Module 4: Software and Information Systems Building ...Information Technology - Module 4: Software and Information Systems Building ...
Information Technology - Module 4: Software and Information Systems Building ...
 
PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...
PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...
PROCESS ENGINEERING AND AI SALES PREDICTION: THE CASE STUDY OF AN ITALIAN SMA...
 
Sample Business Requirement Document
Sample Business Requirement DocumentSample Business Requirement Document
Sample Business Requirement Document
 
Input and output design
Input and output designInput and output design
Input and output design
 
Medical Store Management System Software Engineering Project
Medical Store Management System Software Engineering ProjectMedical Store Management System Software Engineering Project
Medical Store Management System Software Engineering Project
 
Hedging the process
Hedging the processHedging the process
Hedging the process
 
SE18_Lec 01_Introduction to Software Engineering
SE18_Lec 01_Introduction to Software EngineeringSE18_Lec 01_Introduction to Software Engineering
SE18_Lec 01_Introduction to Software Engineering
 
Unit1
Unit1Unit1
Unit1
 

Similar to Mobile shopping

Shopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docxShopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docxkrushnaborade2
 
Shopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docxShopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docxkrushnaborade2
 
Online Shopping project report
Online Shopping project report Online Shopping project report
Online Shopping project report Surjeet Art
 
INTERNAL Assign no 207( JAIPUR NATIONAL UNI)
INTERNAL Assign no   207( JAIPUR NATIONAL UNI)INTERNAL Assign no   207( JAIPUR NATIONAL UNI)
INTERNAL Assign no 207( JAIPUR NATIONAL UNI)Partha_bappa
 
System analysis and_design.docx
System analysis and_design.docxSystem analysis and_design.docx
System analysis and_design.docxAlaJebnoun
 
Medical Store Management System Software Engineering 1
Medical Store Management System Software Engineering 1Medical Store Management System Software Engineering 1
Medical Store Management System Software Engineering 1hani2253
 
A CASE Lab Report - Project File on "ATM - Banking System"
A CASE Lab Report - Project File on  "ATM - Banking System"A CASE Lab Report - Project File on  "ATM - Banking System"
A CASE Lab Report - Project File on "ATM - Banking System"joyousbharat
 
Hospital E-Token Management(outdoor)
Hospital E-Token Management(outdoor)Hospital E-Token Management(outdoor)
Hospital E-Token Management(outdoor)ANISUR RAHMAN
 
Mingle box - Online Job seeking System
Mingle box - Online Job seeking SystemMingle box - Online Job seeking System
Mingle box - Online Job seeking SystemBharat Kalia
 
GERSIS INDUSTRY CASES
GERSIS INDUSTRY CASESGERSIS INDUSTRY CASES
GERSIS INDUSTRY CASESSergej Markov
 
System Analysis And Design_FinalPPT_NirmishaK
System Analysis And Design_FinalPPT_NirmishaKSystem Analysis And Design_FinalPPT_NirmishaK
System Analysis And Design_FinalPPT_NirmishaKShehla Ghori
 
Library mangement system project srs documentation
Library mangement system project srs documentationLibrary mangement system project srs documentation
Library mangement system project srs documentationSuchit Moon
 
PRESS MANAGEMENT Documentation
PRESS MANAGEMENT DocumentationPRESS MANAGEMENT Documentation
PRESS MANAGEMENT Documentationanuj_rakheja
 
Library Management System using oracle database
Library Management System using oracle databaseLibrary Management System using oracle database
Library Management System using oracle databaseSaikot Roy
 
Ijsred v2 i5p95
Ijsred v2 i5p95Ijsred v2 i5p95
Ijsred v2 i5p95IJSRED
 
Issue Management System
Issue Management SystemIssue Management System
Issue Management SystemPratik Vipul
 
Project Documentation Student Management System format.pptx
Project Documentation Student Management System format.pptxProject Documentation Student Management System format.pptx
Project Documentation Student Management System format.pptxAjayPatre1
 
SAD_UnitII.docx
SAD_UnitII.docxSAD_UnitII.docx
SAD_UnitII.docx8759000398
 

Similar to Mobile shopping (20)

Shopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docxShopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docx
 
Shopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docxShopping-Portal online shopping saystam.docx
Shopping-Portal online shopping saystam.docx
 
Online Shopping project report
Online Shopping project report Online Shopping project report
Online Shopping project report
 
INTERNAL Assign no 207( JAIPUR NATIONAL UNI)
INTERNAL Assign no   207( JAIPUR NATIONAL UNI)INTERNAL Assign no   207( JAIPUR NATIONAL UNI)
INTERNAL Assign no 207( JAIPUR NATIONAL UNI)
 
System analysis and_design.docx
System analysis and_design.docxSystem analysis and_design.docx
System analysis and_design.docx
 
Medical Store Management System Software Engineering 1
Medical Store Management System Software Engineering 1Medical Store Management System Software Engineering 1
Medical Store Management System Software Engineering 1
 
A CASE Lab Report - Project File on "ATM - Banking System"
A CASE Lab Report - Project File on  "ATM - Banking System"A CASE Lab Report - Project File on  "ATM - Banking System"
A CASE Lab Report - Project File on "ATM - Banking System"
 
Hospital E-Token Management(outdoor)
Hospital E-Token Management(outdoor)Hospital E-Token Management(outdoor)
Hospital E-Token Management(outdoor)
 
Mingle box - Online Job seeking System
Mingle box - Online Job seeking SystemMingle box - Online Job seeking System
Mingle box - Online Job seeking System
 
GERSIS INDUSTRY CASES
GERSIS INDUSTRY CASESGERSIS INDUSTRY CASES
GERSIS INDUSTRY CASES
 
System Analysis And Design_FinalPPT_NirmishaK
System Analysis And Design_FinalPPT_NirmishaKSystem Analysis And Design_FinalPPT_NirmishaK
System Analysis And Design_FinalPPT_NirmishaK
 
Job portal
Job portalJob portal
Job portal
 
Library mangement system project srs documentation
Library mangement system project srs documentationLibrary mangement system project srs documentation
Library mangement system project srs documentation
 
PRESS MANAGEMENT Documentation
PRESS MANAGEMENT DocumentationPRESS MANAGEMENT Documentation
PRESS MANAGEMENT Documentation
 
Library Management System using oracle database
Library Management System using oracle databaseLibrary Management System using oracle database
Library Management System using oracle database
 
Ijsred v2 i5p95
Ijsred v2 i5p95Ijsred v2 i5p95
Ijsred v2 i5p95
 
Issue Management System
Issue Management SystemIssue Management System
Issue Management System
 
Session3
Session3Session3
Session3
 
Project Documentation Student Management System format.pptx
Project Documentation Student Management System format.pptxProject Documentation Student Management System format.pptx
Project Documentation Student Management System format.pptx
 
SAD_UnitII.docx
SAD_UnitII.docxSAD_UnitII.docx
SAD_UnitII.docx
 

Recently uploaded

Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...
Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...
Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...Niamh verma
 
Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝
Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝
Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝soniya singh
 
CALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun serviceCALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun serviceanilsa9823
 
9892124323 | Book Call Girls in Juhu and escort services 24x7
9892124323 | Book Call Girls in Juhu and escort services 24x79892124323 | Book Call Girls in Juhu and escort services 24x7
9892124323 | Book Call Girls in Juhu and escort services 24x7Pooja Nehwal
 
哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...
哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...
哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...wyqazy
 
CALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual service
CALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual serviceCALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual service
CALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual serviceanilsa9823
 
Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,
Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,
Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,Pooja Nehwal
 

Recently uploaded (7)

Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...
Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...
Chandigarh Call Girls Service ❤️🍑 9115573837 👄🫦Independent Escort Service Cha...
 
Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝
Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝
Model Call Girl in Shalimar Bagh Delhi reach out to us at 🔝8264348440🔝
 
CALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun serviceCALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Gomti Nagar Lucknow best Night Fun service
 
9892124323 | Book Call Girls in Juhu and escort services 24x7
9892124323 | Book Call Girls in Juhu and escort services 24x79892124323 | Book Call Girls in Juhu and escort services 24x7
9892124323 | Book Call Girls in Juhu and escort services 24x7
 
哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...
哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...
哪里有卖的《俄亥俄大学学历证书+俄亥俄大学文凭证书+俄亥俄大学学位证书》Q微信741003700《俄亥俄大学学位证书复制》办理俄亥俄大学毕业证成绩单|购买...
 
CALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual service
CALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual serviceCALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual service
CALL ON ➥8923113531 🔝Call Girls Saharaganj Lucknow best sexual service
 
Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,
Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,
Call US Pooja 9892124323 ✓Call Girls In Mira Road ( Mumbai ) secure service,
 

Mobile shopping

  • 1. Name : Tejveer Arvind Singh Roll no: 70 Course: Ty.Bsc.Computer Science Project Title: Mobile Shopping Project Guide: Prof. Siddhesh Kadam
  • 2. Index: Sr. Topics Page No. 1 Introduction 3 a) Synopsis 4 b) Overviewof MobileShopping 5 2 MobileShopping 7 a) Proposed System 7 b) No. of Modules 8 c) SoftwareRequirements 8 d) HardwareRequirements 8 3 System Analysis& Design 9 4 Code Implemtation 13 5 Data Flow Diagrams 46 6 Screenshotof Website 51 7 Interpretation of Result 57 8 Advantages 59 9 Conclusion 61 9 References 62
  • 3.
  • 4.  The Project entitled "Mobile Shopping" is a web-based application Software developed in PHP LANGUAGE using PHP and Mysql on Pentium machine.  The main aim of "Mobile Shopping" is to improve the services of Customers and vendors.  It maintains the details of customer payments, addition of new customers, products and also updating, deletion for the same.  It also stores the details of invoices generated by customer and payments made by them with all Payments details like credit card.  The primary featuresofthe project entitled"MobileShopping"arehigh accuracy, design flexibility and easy availability.  And also it uses database tables Representing entities and relationships between entities.
  • 5.
  • 6. The central concept of the webpage is to allow the customer to shop virtually using the Internet and allow customers to buy the items and articles of their desire from the store. The information pertaining to the products are stores on an DBMS at the server side (store). The Server process the customers and the items are shipped to the address submitted by them. The webpage was designed into two modules first Os for the customerswho wish to buythe articles.Secondisforthe storekeeperswho maintains and updates the information pertaining to the articles and those of the customers? The end user of this product is a departmental store where the application is hosted on the web and the administrator maintains the database. The application which is deployed at the customerdatabase, the details of the items are brought forward from the database for the customerviewbased on the selection throughthe menu and the database of all the products are updated at the end of each transaction. Data entry into the application can be done throughvarious screensdesignedforvariouslevelsofusers.Oncetheauthorizedpersonnel feed the relevant data into the system, several reports could be generated as per the security.
  • 7. Mobile shopping is a form of electronic commerce where the buyeris directly online to the seller's computer usually via the internet. There is no intermediary service. The sale and purchase transaction is completed electronically and interactively in real-time. If an intermediary is present, then the sale andpurchasetransactionis calledelectroniccommercesuchas eBay.com. Proposed System: The development of this new system contains the following activities, which try to develop on-line application by keeping the entire process in the view of database integration approach.  Secure registration and profile management facilities for Customers.  Browsing through the website, user can see a lot of sections like Top Sales, New Phones, Special Prices and many more.  Customers should be able to mail the Shop about the items they would like to see in the Shop  Secured mechanism for checking out from the Shop( Credit card verification mechanism )  Updates to customers about the Recent Items in the Shop.  Uploading ‘Most Purchased’ Phones in Top Sales Section Number of Modules:
  • 8. The system after careful analysis has been identified to be presented with the following modules: 1. Customer. 2. Security and Authentication Software Requirements: Operating System : Windows XP/7/8/8.1 or Linux User Interface : HTML, CSS Server-side Scripting : PHP Script Client-side-Scripting : Java Script Programming Language : PHP Web Applications : Xammp Server IDE/Workbench : PhpStrome, VisualCode, Notepad Database : MySQL Server Deployment : Apache Hardware Requirements: Processor : Pentium IV Hard Disk : 40GB RAM : 512MB or more
  • 9.
  • 10. Introduction: Analysis is the focus of system developing and is the stage when system designers have to work at two levels of definition regarding the study of situationalissuesandpossiblesolutions in terms of “what to do” and “how to do”. System Study: DEFINITION OF THE SYSTEM: A system is an orderly grouping of independent components linked together according to a plan to achieve a specific objective. Its main characteristics are organization, interaction, independent, integration and central objective a system does not necessarily mean to a computer system. It may be a manual system or any other names. NEEDS OF THE SYSTEM: Social and economic factor: a wave of social and economic changes often follows in the wake of the new technology. New opportunities may arise to improve on a production process orto do something that was not previously possible.Changesinthe ways individualsareorganizedintogroupsmaythen be necessary, and the newgroups may completeforeconomicresources with established units. Technological factor: people have never before in a time when the scope of scientific inquiry was so broad, so when the speed of applying the new technology accounts for many changes in the organization. High level decisions and operating processes: in response to technological, socio-economical factors, top level managers may decide to recognize
  • 11. operations and introduce new products. To deal with these needs, people commonlyseeknewmodifiedinformationtosupportthedecision.Whenthat happens,thentheyobtainturnto a computersystemforhelpthe information users and data processing specialist then work togetherto complete a series of steps in a system study to produce output results to satisfy information needs. System analysis: System Analysis is a process by which we attribute process or goals to a human activity, determine how well those purpose are being achieved and specify the requirements of the various tools and techniques that are to be used within the system if the system performances are to be achieved. SYSTEM PLANNING: Planning forinformation systems has a time horizon and a focus dimension. The timehorizon dimensionspecifiesthetime rangeof the plan,where as the focus dimension relates whether the primary concern is strategic, managerial,oroperational.Thesystemi.e. The Projectthat we were assigned was requiredtocompletewithin20weeks.Whatwe had plannedisas follows: Requirements analysis, Preliminary Investigation & Information Gathering should be covered within the 1st and 2nd week. Since I was not aware of PHP STROME,VISUALCODE,MYSQL IDE it require 1 week for me to adjust with that tool. 12 Weeks for the design of the system underdevelopment. 1 week for Testing & Implementation. And rest 2 reserve weeks.
  • 12. PRELIMINARY INVESTIGATION: The initial investigation has the objective of determining the validity of the user’s request for a candidate system and whether a feasibility study should be conducted. The objectives of the problem posed by the user must be understood within the framework of the organization’s MIS plan. I had investigated from the concerned authority about the project INFORMATION GATHERING: A key part of feasibility analysis is gathering information about the present system. The analyst must knowwhat information to gather, where to find it, how to collectit, and what to makeof it. The properuse of tools forgathering information is the key to successful analysis. The tools are the traditional interview, questionnaires, and on-site observation. STRUCTURED ANALYSIS: The traditionaltoolsof data gatheringhavelimitations.AnEnglishnarrative description is often vague and difficult for the user to grasp. System flowcharts focus more on physical than on logical implementation of the candidate system. Because of these drawbacks, structured tools were introduced for analysis. Structured analysis is a set of techniques and graphical tools (DFD) that allow the analyst to develop a newkind of system specifications that are easily understandable to the user.
  • 13. Index2.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile Shop</title> <!-- Bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min. css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Owl-carousel CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl. carousel.min.css" integrity="sha256- UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl. theme.default.min.css" integrity="sha256- kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" /> <!-- font awesome icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/5.13.0/css/all.min.css" integrity="sha256- h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> <!-- Custom CSS file --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- start #header --> <header id="header"> <div class="strip d-flex justify-content-between px-4 py-1 bg- light"> <p class="font-rale font-size-12 text-black-50 m-0">Jordan Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p> <div class="font-rale font-size-14"> <a href="#" class="px-3 border-right border-left text- dark">Login</a>
  • 14. <a href="#" class="px-3 border-right text- dark">Whishlist (0)</a> </div> </div> <!-- Primary Navigation --> <nav class="navbar navbar-expand-lg navbar-dark color-second- bg"> <a class="navbar-brand" href="#">Mobile Shopping</a> <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria- expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav m-auto font-rubik"> <li class="nav-item active"> <a class="nav-link" href="#">On Sale</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Category</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Products <i class="fas fa-chevron-down"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Category <i class="fas fa-chevron-down"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Coming Soon</a> </li> </ul> <form action="#" class="font-size-14 font-rale"> <a href="#" class="py-2 rounded-pill color-primary- bg"> <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span> <span class="px-3 py-2 rounded-pill text-dark bg- light">0</span> </a> </form> </div> </nav> <!-- !Primary Navigation --> </header> <!-- !start #header --> <!-- start #main-site --> <main id="main-site"> <!-- Owl-carousel --> <section id="banner-area"> <div class="owl-carousel owl-theme"> <div class="item"> <img src="../assets/Banner1.png" alt="Banner1">
  • 15. </div> <div class="item"> <img src="../assets/Banner2.png" alt="Banner2"> </div> <div class="item"> <img src="../assets/Banner1.png" alt="Banner3"> </div> <div class="item"> <img src="../assets/tej (1).jpg" alt="Banner4"> </div> </div> </section> <!-- !Owl-carousel --> <!-- Top Sale --> <section id="top-sale"> <div class="container py-5"> <h4 class="font-rubik font-size-20">Top Sale</h4> <hr> <!-- owl carousel --> <div class="owl-carousel owl-theme"> <div class="item py-2"> <div class="product font-rale"> <a href="product.html"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="product.html"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div>
  • 16. </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-
  • 17. size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/1.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/2.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div> <!-- !owl carousel --> </div> </section> <!-- !Top Sale --> <!-- Special Price --> <section id="special-price"> <div class="container"> <h4 class="font-rubik font-size-20">Special Price</h4> <div id="filters" class="button-group text-right font-baloo
  • 18. font-size-16"> <button class="btn is-checked" data-filter="*">All Brand</button> <button class="btn" data-filter=".Apple">Apple</button> <button class="btn" data-filter=".Samsung">Samsung</button> <button class="btn" data-filter=".Redmi">Redmi</button> </div> <div class="grid"> <div class="grid-item Apple border"> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <a href="#"><img src="../assets/products/13.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Apple iPhone 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> </div> <div class="grid-item Samsung border"> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <a href="#"><img src="../assets/products/11.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> </div> <div class="grid-item Redmi border"> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a> <div class="text-center">
  • 19. <h6>Redmi Note 7 Pro</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> </div> <div class="grid-item Apple border"> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <a href="#"><img src="../assets/products/14.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Apple iPhone 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> </div> <div class="grid-item Samsung border"> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <a href="#"><img src="../assets/products/12.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div>
  • 20. </div> </div> <div class="grid-item Redmi border "> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/4.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Redmi Note 7 Pro</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div> <div class="grid-item Redmi border "> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/5.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Redmi Note 7 Pro</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div> <div class="grid-item Redmi border "> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/6.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Redmi Note 7 Pro</h6> <div class="rating text-warning font-size-12">
  • 21. <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div> <div class="grid-item Redmi border"> <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/10.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Redmi Note 7 Pro</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div> <div class="grid-item Apple border " > <div class="item py-2" style="width: 200px;"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/13.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Apple iPhone 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$252</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
  • 22. </div> </div> </div> </div> </div> </div> </div> </section> <!-- !Special Price --> <!-- Banner Ads --> <section id="banner_adds"> <div class="container py-5 text-center"> <img src="../assets/banner1-cr-500x150.jpg" alt="banner1" class="img-fluid"> <img src="../assets/banner2-cr-500x150.jpg" alt="banner1" class="img-fluid"> </div> </section> <!-- !Banner Ads --> <!-- New Phones --> <section id="new-phones"> <div class="container"> <h4 class="font-rubik font-size-20">New Phones</h4> <hr> <!-- owl carousel --> <div class="owl-carousel owl-theme"> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span>
  • 23. <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span>
  • 24. <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/1.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size- 12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/2.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size- 12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div>
  • 25. <!-- !owl carousel --> </div> </section> <!-- !New Phones --> <!-- Blogs --> <section id="blogs"> <div class="container py-4"> <h4 class="font-rubik font-size-20">Latest Blogs</h4> <hr> <div class="owl-carousel owl-theme"> <div class="item"> <div class="card border-0 font-rale mr-5" style="width: 18rem;"> <h5 class="card-title font-size-16">Upcoming Mobiles</h5> <img src="../assets/blog/blog1.jpg" alt="cart image" class="card-img-top"> <p class="card-text font-size-14 text-black-50 py- 1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p> <a href="#" class="color-second text-left">Go somewhere</a> </div> </div> <div class="item"> <div class="card border-0 font-rale mr-5" style="width: 18rem;"> <h5 class="card-title font-size-16">Upcoming Mobiles</h5> <img src="../assets/blog/blog2.jpg" alt="cart image" class="card-img-top"> <p class="card-text font-size-14 text-black-50 py- 1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p> <a href="#" class="color-second text-left">Go somewhere</a> </div> </div> <div class="item"> <div class="card border-0 font-rale mr-5" style="width: 18rem;"> <h5 class="card-title font-size-16">Upcoming Mobiles</h5> <img src="../assets/blog/blog3.jpg" alt="cart image" class="card-img-top"> <p class="card-text font-size-14 text-black-50 py- 1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p> <a href="#" class="color-second text-left">Go somewhere</a> </div> </div> </div> </div> </section> <!-- !Blogs --> </main>
  • 26. <!-- !start #main-site --> <!-- start #footer --> <footer id="footer" class="bg-dark text-white py-5"> <div class="container"> <div class="row"> <div class="col-lg-3 col-12"> <h4 class="font-rubik font-size-20">Mobile Shopping</h4> <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p> </div> <div class="col-lg-4 col-12"> <h4 class="font-rubik font-size-20">Newslatter</h4> <form class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="Email *"> </div> <div class="col"> <button type="submit" class="btn btn-primary mb- 2">Subscribe</button> </div> </form> </div> <div class="col-lg-2 col-12"> <h4 class="font-rubik font-size-20">Information</h4> <div class="d-flex flex-column flex-wrap"> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a> </div> </div> <div class="col-lg-2 col-12"> <h4 class="font-rubik font-size-20">Account</h4> <div class="d-flex flex-column flex-wrap"> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a> </div> </div> </div> </div> </footer> <div class="copyright text-center bg-dark text-white py-2"> <p class="font-rale font-size-14">&copy; Copyrights 2020. Desing By <a href="#" class="color-second">Tejveer Singh</a></p> </div> <!-- !start #footer --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
  • 27. J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384- Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384- wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!-- Owl Carousel Js file --> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel .min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script> <!-- isotope plugin cdn --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pk gd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script> <!-- Custom Javascript --> <script src="index.js"></script> </body> </html> Product.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile Shopee</title> <!-- Bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min. css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Owl-carousel CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl. carousel.min.css" integrity="sha256- UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl. theme.default.min.css" integrity="sha256- kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" /> <!-- font awesome icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
  • 28. awesome/5.13.0/css/all.min.css" integrity="sha256- h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> <!-- Custom CSS file --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- start #header --> <header id="header"> <div class="strip d-flex justify-content-between px-4 py-1 bg- light"> <p class="font-rale font-size-12 text-black-50 m-0">Jordan Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p> <div class="font-rale font-size-14"> <a href="#" class="px-3 border-right border-left text- dark">Login</a> <a href="#" class="px-3 border-right text- dark">Whishlist (0)</a> </div> </div> <!-- Primary Navigation --> <nav class="navbar navbar-expand-lg navbar-dark color-second- bg"> <a class="navbar-brand" href="#">Mobile Shopee</a> <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria- expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav m-auto font-rubik"> <li class="nav-item active"> <a class="nav-link" href="#">On Sale</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Category</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Products <i class="fas fa-chevron-down"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Category <i class="fas fa-chevron-down"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Coming Soon</a> </li> </ul> <form action="#" class="font-size-14 font-rale"> <a href="#" class="py-2 rounded-pill color-primary- bg"> <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span> <span class="px-3 py-2 rounded-pill text-dark bg- light">0</span>
  • 29. </a> </form> </div> </nav> <!-- !Primary Navigation --> </header> <!-- !start #header --> <!-- start #main-site --> <main id="main-site"> <!-- product --> <section id="product" class="py-3"> <div class="container"> <div class="row"> <div class="col-sm-6"> <img src="../assets/products/1.png" alt="product" class="img-fluid"> <div class="form-row pt-4 font-size-16 font- baloo"> <div class="col"> <button type="submit" class="btn btn- danger form-control">Proceed to Buy</button> </div> <div class="col"> <a href="cart.html"> <button type="submit" class="btn btn-warning form-control">Add to Cart</button> </div> </div> </div> <div class="col-sm-6 py-5"> <h5 class="font-baloo font-size-20">Samsung Galaxy 10</h5> <small>by Samsung</small> <div class="d-flex"> <div class="rating text-warning font-size- 12"> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="far fa- star"></i></span> </div> <a href="#" class="px-2 font-rale font- size-14">20,534 ratings | 1000+ answered questions</a> </div> <hr class="m-0"> <!--- product price --> <table class="my-3"> <tr class="font-rale font-size-14"> <td>M.R.P:</td> <td><strike>$162.00</strike></td> </tr> <tr class="font-rale font-size-14">
  • 30. <td>Deal Price:</td> <td class="font-size-20 text- danger">$<span>152.00</span><small class="text-dark font-size- 12">&nbsp;&nbsp;Inclusive of all taxes</small></td> </tr> <tr class="font-rale font-size-14"> <td>You Save:</td> <td><span class="font-size-16 text- danger">$152.00</span></td> </tr> </table> <!--- !product price --> <!-- #policy --> <div id="policy"> <div class="d-flex"> <div class="return text-center mr- 5"> <div class="font-size-20 my-2 color-second"> <span class="fas fa-retweet border p-3 rounded-pill"></span> </div> <a href="#" class="font-rale font-size-12">10 Days <br> Replacement</a> </div> <div class="return text-center mr- 5"> <div class="font-size-20 my-2 color-second"> <span class="fas fa-truck border p-3 rounded-pill"></span> </div> <a href="#" class="font-rale font-size-12">Tejveer <br>Deliverd</a> </div> <div class="return text-center mr- 5"> <div class="font-size-20 my-2 color-second"> <span class="fas fa-check- double border p-3 rounded-pill"></span> </div> <a href="#" class="font-rale font-size-12">1 Year <br>Warranty</a> </div> </div> </div> <!-- !policy --> <hr> <!-- order-details --> <div id="order-details" class="font-rale d- flex flex-column text-dark"> <small>Delivery by : Mar 29 - Apr 1</small> <small>Sold by <a href="#">Tejveer </a>(4.5 out of 5 | 18,198 ratings)</small> <small><i class="fas fa-map-marker-alt color-primary"></i>&nbsp;&nbsp;Deliver to Customer - 424201</small> </div>
  • 31. <!-- !order-details --> <div class="row"> <div class="col-6"> <!-- color --> <div class="color my-3"> <div class="d-flex justify- content-between"> <h6 class="font- baloo">Color:</h6> <div class="p-2 color- yellow-bg rounded-circle"><button class="btn font-size-14"></button></div> <div class="p-2 color- primary-bg rounded-circle"><button class="btn font-size-14"></button></div> <div class="p-2 color- second-bg rounded-circle"><button class="btn font-size-14"></button></div> </div> </div> <!-- !color --> </div> <div class="col-6"> <!-- product qty section --> <div class="qty d-flex"> <h6 class="font-baloo">Qty</h6> <div class="px-4 d-flex font- rale"> <button class="qty-up border bg-light" data-id="pro1"><i class="fas fa-angle-up"></i></button> <input type="text" data- id="pro1" class="qty_input border px-2 w-50 bg-light" disabled value="1" placeholder="1"> <button data-id="pro1" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button> </div> </div> <!-- !product qty section --> </div> </div> <!-- size --> <div class="size my-3"> <h6 class="font-baloo">Size :</h6> <div class="d-flex justify-content- between w-75"> <div class="font-rubik border p-2"> <button class="btn p-0 font- size-14">4GB RAM</button> </div> <div class="font-rubik border p-2"> <button class="btn p-0 font- size-14">6GB RAM</button> </div> <div class="font-rubik border p-2"> <button class="btn p-0 font- size-14">8GB RAM</button> </div> </div> </div> <!-- !size -->
  • 32. </div> <div class="col-12"> <h6 class="font-rubik">Product Description</h6> <hr> <p class="font-rale font-size-14">Quad Camera Setup - 64MP (F1.8) Main Camera +8MP (F2.2) Ultra Wide Camera +5MP(F2.2) Depth Camera +5MP(F2.4) Macro Camera and 32MP (F2.0) front facing Camera 6.4-inch(16.21 centimeters) Super Amoled - Infinity U Cut Display , FHD+ Resolution (2340 x 1080) , 404 ppi pixel density and 16M color support Android v10.0 operating system with 2.3GHz + 1.7GHz Exynos 9611 Octa core processor , 6GB RAM, 128GB internal memory expandable up to 512GB and dual SIM 6000 mAh Battery 1 year manufacturer warranty for device and 6 months manufacturer warranty for in-box accessories including batteries from the date of purchase Please contact Samsung helpline number 1800 407 267864 for any assistance related to device</p> <p class="font-rale font-size-14"></p> </div> </div> </div> </section> <!-- !product --> <!-- Top Sale --> <section id="top-sale"> <div class="container py-5"> <h4 class="font-rubik font-size-20">Top Sale</h4> <hr> <!-- owl carousel --> <div class="owl-carousel owl-theme"> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a> <div class="text-center">
  • 33. <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png"
  • 34. alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn-warning font- size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/1.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div> </div> </div> </div> <div class="item py-2"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/2.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button> </div>
  • 35. </div> </div> </div> </div> <!-- !owl carousel --> </div> </section> <!-- !Top Sale --> </main> <!-- !start #main-site --> <!-- start #footer --> <footer id="footer" class="bg-dark text-white py-5"> <div class="container"> <div class="row"> <div class="col-lg-3 col-12"> <h4 class="font-rubik font-size-20">Mobile Shop</h4> <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p> </div> <div class="col-lg-4 col-12"> <h4 class="font-rubik font-size-20">Newslatter</h4> <form class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="Email *"> </div> <div class="col"> <button type="submit" class="btn btn-primary mb- 2">Subscribe</button> </div> </form> </div> <div class="col-lg-2 col-12"> <h4 class="font-rubik font-size-20">Information</h4> <div class="d-flex flex-column flex-wrap"> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a> </div> </div> <div class="col-lg-2 col-12"> <h4 class="font-rubik font-size-20">Account</h4> <div class="d-flex flex-column flex-wrap"> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a> </div> </div> </div>
  • 36. </div> </footer> <div class="copyright text-center bg-dark text-white py-2"> <p class="font-rale font-size-14">&copy; Copyrights 2020. Desing By <a href="#" class="color-second">Tejveer Singh</a></p> </div> <!-- !start #footer --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384- J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384- Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384- wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!-- Owl Carousel Js file --> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel .min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script> <!-- isotope plugin cdn --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pk gd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script> <!-- Custom Javascript --> <script src="./index.js"></script> </body> </html> Cart.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile Shop</title> <!-- Bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min. css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Owl-carousel CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.
  • 37. carousel.min.css" integrity="sha256- UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl. theme.default.min.css" integrity="sha256- kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" /> <!-- font awesome icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/5.13.0/css/all.min.css" integrity="sha256- h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> <!-- Custom CSS file --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- start #header --> <header id="header"> <div class="strip d-flex justify-content-between px-4 py-1 bg- light"> <p class="font-rale font-size-12 text-black-50 m-0">Jordan Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p> <div class="font-rale font-size-14"> <a href="#" class="px-3 border-right border-left text- dark">Login</a> <a href="#" class="px-3 border-right text- dark">Whishlist (0)</a> </div> </div> <!-- Primary Navigation --> <nav class="navbar navbar-expand-lg navbar-dark color-second- bg"> <a class="navbar-brand" href="#">Mobile Shopee</a> <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria- expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav m-auto font-rubik"> <li class="nav-item active"> <a class="nav-link" href="#">On Sale</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Category</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Products <i class="fas fa-chevron-down"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Category <i class="fas fa-chevron-down"></i></a> </li> <li class="nav-item">
  • 38. <a class="nav-link" href="#">Coming Soon</a> </li> </ul> <form action="#" class="font-size-14 font-rale"> <a href="#" class="py-2 rounded-pill color-primary- bg"> <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span> <span class="px-3 py-2 rounded-pill text-dark bg- light">0</span> </a> </form> </div> </nav> <!-- !Primary Navigation --> </header> <!-- !start #header --> <!-- start #main-site --> <main id="main-site"> <!-- Shopping cart section --> <section id="cart" class="py-3"> <div class="container-fluid w-75"> <h5 class="font-baloo font-size-20">Shopping Cart</h5> <!-- shopping cart items --> <div class="row"> <div class="col-sm-9"> <!-- cart item --> <div class="row border-top py-3 mt- 3"> <div class="col-sm-2"> <img src="../assets/products/1.png" style="height: 120px;" alt="cart1" class="img-fluid"> </div> <div class="col-sm-8"> <h5 class="font-baloo font- size-20">Samsung Galaxy 10</h5> <small>by Samsung</small> <!-- product rating --> <div class="d-flex"> <div class="rating text-warning font-size-12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <a href="#" class="px-2 font-rale font-size-14">20,534 ratings</a> </div>
  • 39. <!-- !product rating--> <!-- product qty --> <div class="qty d-flex pt-2"> <div class="d-flex font-rale w-25"> <button class="qty-up border bg-light" data-id="pro1"><i class="fas fa-angle- up"></i></button> <input type="text" data-id="pro1" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1"> <button data- id="pro1" class="qty-down border bg-light"><i class="fas fa-angle- down"></i></button> </div> <button type="submit" class="btn font-baloo text-danger px-3 border- right">Delete</button> <button type="submit" class="btn font-baloo text-danger">Save for Later</button> </div> <!-- !product qty --> </div> <div class="col-sm-2 text- right"> <div class="font-size-20 text-danger font-baloo"> $<span class="product_price">152</span> </div> </div> </div> <!-- !cart item --> <!-- cart item --> <div class="row border-top py-3 mt-3"> <div class="col-sm-2"> <img src="../assets/products/2.png" style="height: 120px;" alt="cart1" class="img-fluid"> </div> <div class="col-sm-8"> <h5 class="font-baloo font- size-20">Samsung Galaxy 10</h5> <small>by Samsung</small> <!-- product rating --> <div class="d-flex"> <div class="rating text- warning font-size-12"> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="far fa-
  • 40. star"></i></span> </div> <a href="#" class="px-2 font-rale font-size-14">20,534 ratings</a> </div> <!-- !product rating--> <!-- product qty --> <div class="qty d-flex pt- 2"> <div class="d-flex font-rale w-25"> <button class="qty- up border bg-light"><i class="fas fa-angle-up"></i></button> <input type="text" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1"> <button class="qty- down border bg-light"><i class="fas fa-angle-down"></i></button> </div> <button type="submit" class="btn font-baloo text-danger px-3 border-right">Delete</button> <button type="submit" class="btn font-baloo text-danger">Save for Later</button> </div> <!-- !product qty --> </div> <div class="col-sm-2 text-right"> <div class="font-size-20 text- danger font-baloo"> $<span class="product_price">152</span> </div> </div> </div> <!-- !cart item --> </div> <!-- subtotal section--> <div class="col-sm-3"> <div class="sub-total border text- center mt-2"> <h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-check"></i> Your order is eligible for FREE Delivery.</h6> <div class="border-top py-4"> <h5 class="font-baloo font- size-20">Subtotal (2 item):&nbsp; <span class="text-danger">$<span class="text-danger" id="deal-price">152.00</span> </span> </h5> <button type="submit" class="btn btn-warning mt-3">Proceed to Buy</button> </div> </div> </div> <!-- !subtotal section--> </div> <!-- !shopping cart items --> </div> </section> <!-- !Shopping cart section -->
  • 41. <!-- New Phones --> <section id="new-phones"> <div class="container py-5"> <h4 class="font-rubik font-size-20">New Phones</h4> <hr> <!-- owl carousel --> <div class="owl-carousel owl-theme"> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size- 12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size- 12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size- 12">
  • 42. <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Samsung Galaxy 10</h6> <div class="rating text-warning font-size- 12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font-size- 12"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="far fa-star"></i></span> </div> <div class="price py-2"> <span>$152</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <div class="d-flex flex-column">
  • 43. <a href="#"><img src="../assets/products/1.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font- size-12"> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="far fa- star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> </div> <div class="item py-2 bg-light"> <div class="product font-rale"> <div class="d-flex flex-column"> <a href="#"><img src="../assets/products/2.png" class="img-fluid" alt="pro1"></a> <div class="text-center"> <h6>Readme Note 7</h6> <div class="rating text-warning font- size-12"> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="fas fa- star"></i></span> <span><i class="far fa- star"></i></span> </div> <div class="price py-2"> <span>$122</span> </div> <button type="submit" class="btn btn- warning font-size-12">Add to Cart</button> </div> </div> </div> </div> </div> <!-- !owl carousel --> </div> </section> <!-- !New Phones -->
  • 44. </main> <!-- !start #main-site --> <!-- start #footer --> <footer id="footer" class="bg-dark text-white py-5"> <div class="container"> <div class="row"> <div class="col-lg-3 col-12"> <h4 class="font-rubik font-size-20">Mobile Shopee</h4> <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p> </div> <div class="col-lg-4 col-12"> <h4 class="font-rubik font-size-20">Newslatter</h4> <form class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="Email *"> </div> <div class="col"> <button type="submit" class="btn btn-primary mb- 2">Subscribe</button> </div> </form> </div> <div class="col-lg-2 col-12"> <h4 class="font-rubik font-size-20">Information</h4> <div class="d-flex flex-column flex-wrap"> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a> </div> </div> <div class="col-lg-2 col-12"> <h4 class="font-rubik font-size-20">Account</h4> <div class="d-flex flex-column flex-wrap"> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a> <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a> </div> </div> </div> </div> </footer> <div class="copyright text-center bg-dark text-white py-2"> <p class="font-rale font-size-14">&copy; Copyrights 2020. Desing By <a href="#" class="color-second">Daily Tuition</a></p> </div> <!-- !start #footer -->
  • 45. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384- J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384- Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384- wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!-- Owl Carousel Js file --> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel .min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script> <!-- isotope plugin cdn --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pk gd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script> <!-- Custom Javascript --> <script src="index.js"></script> </body> </html>
  • 47.  User  Product  Cart  Wishlist
  • 48.  A data flow diagram (DFD) is a graphical representation of the "flow" of data through an information system. Database:- User Details Product Cart Wishlist
  • 50. Class Diagram: Payment Receipt Admin Update Delete Create InvalidLogin Details Register Login Product Cart If Successfull ll If Not ll Payment Checkout Successful Payment
  • 53.
  • 54.
  • 57.
  • 58. The system has been implemented and tested successfully. It meets the information requirements specifiedto the great extent. Although the system has been designed keeping the present and future requirements in mind and made very flexible. There are limitations of the system. proper consideration has been given for a wide range of new enhancements. The system is developed user friendly.In future , if it is required to generate reports other than provided by the system it can be simply achieved by a separate module to the main menu without affecting the design of the system.
  • 59.
  • 60. (1) It simplifies the operation. (2) It avoids a lot of manual work. (3) Every transaction is obtained and processed immediately. (4) Avoids errors by avoiding the manual work. (5) User friendly screen to enter the data and enquire the database tables. (6) Online help messages available to the operating system. (7) User can easily access the system without much experience. (8) Provide hardware and software securities. (9) Portable and flexible for further extensions.
  • 61. The central concept of the application is to allow the customer to shop virtuallyusingthe Internetandallowcustomersto buy the itemsand articles of their desire from the store. The information pertaining to the products are stores on an DBMS at the server side (store). The Server process the customers and the items are shipped to the address submitted by them. The application was designed into two modules first Os for the customers who wish to buy the articles. Second is for the storekeepers who maintains and updates the information pertaining to the articles and those of the customers. The end user of this product is a departmental store where the application is hosted on the web and the administrator maintains the database. The application which is deployed at the customer database, the details of the items are brought forward from the database forthe customerviewbased on the selection through the menu and the database of all the products are updated at the end of each transaction.
  • 62. 1. Google 2. Bootstrap 3. Owl carsoual 4. Git