Scribd
Upload
9 views

Document (project report

Uploaded by

malik cp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Document (project report

Uploaded by

malik cp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

ACKNOWLEDGEMENT

We convey our sincere gratitude to MR. Manoj Pal Sir for giving us

the Oppournity to prepare our project work in Cosmetic Shop


Management System. We express our sincere thanks to all the
faculty Members of Computer Science Department.We are
Thankful to Mr. Manoj Pal Sir for his guidance during our Project
work and sparing his valuable time for the same.We express our
sincere obligation and thanks to the all Faculties of the Department
of Computer Science of Quantum School of Technology for
providing us with guidance, help,

Motivation and valuable advice at every stage for completing the


Project work successfully.

INTRODUCTION

A Cosmetic store is a web based application where users can view


Various cosmetic products along with their description. The project
Provides user with a flexible & attractive GUI & shows them a list
of Products & carry out all the shopping activities online.This
project is developed for users to have a brief look at theCosmetics
products without actually visiting the store. The website Displays
different kinds of products of different brands so that user Can
easily get their expected cosmetic products.

OBJECTIVE

Provides the good user interface to ease of use and it also


Provides the security to the database. This system can view the
details of any record. Locate any cosmetic product information
wanted by the user. Reduced clerical work as most of the work
done by computer. Provide greater speed & reduced time
consumptions.

SCOPE OF WORK

Manage online shopping easily. Secure registration & profile


management facilitiesfor Customer Easy & Quick access to
particular product & services This System is easy in handle & user
friendly. Time required for accessing any detail will be very less.
User can view details of the parts without going anywhere.It is
Convenient for users as this system provides accurate cost and
description of the system.

Front End

• HTML

•CSS

•Javascript

HTML

HTML is the standard markup language for Web pages.With HTML


you can create your own Website.HTML is easy to learn

CSS

CSS is the language we use to style an HTML document.CSS


describes how HTML elements should be displayed.

JAVASCRIPT

JavaScript is the world’s most popular programming


language.JavaScript is the programming language of the
Web.avaScript is easy to learn.

Website View

<!DOCTYPE html>

Purpose The
DOCTYPE declaration is an instruction to the web
browser about what version of HTML the page is written in. This
ensures that the web page is parsed the same way by different web
browsers.
<html lang=”en”>

<head>

<meta charset=”UTF-8” />

Is an HTML tag that is used to indicate the web page’s character encoding. In order to see the
correct content, the tag’s function is used which let the browser know what character encoding
was used in the HTML documen

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

Ensures that IE uses the latest available rendering engine to render a web page, helping to ensure
compatibility with modern web standards and features. This tells IE to render the web page using
the IE9 rendering engine

<meta name=”viewport” content=”width=device-width, initial-scale=1.0” />

The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level
when the page is first loaded by the browser.

<title>All Skincare</title>

<link rel=”stylesheet” href=”./navbar.css” />

To create responsive navigation bar

<link rel=”stylesheet” href=”./AllSkincare.css” />

<link rel=”stylesheet” href=https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/6.2.0/css/all.min.css integrity=”sha512-
xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCc
JHgXloTyT2A==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />

</head>

The head tag is an HTML element used to define the head section of an HTML document.

<body>

Its major activities or functions are responding to changes in the body’s environment, exchanging
materials between the environment and cells, metabolizing foods, and integrating all of the body’s
diverse activities

Div tag

Defines a division or a section in an HTML document.

<div id=”navbar”></div>

<div id=”offer”></div>
<div id=”search”></div>

<div class=”navi”><p>

The href attribute specifies the URL of the page the link goes to

<a href=”/-rhetorical-division-3531/index.html”>Home</a> / SkinCare / View

All Skincare

</p></div>

P define paragraph

<h1>View All Skincare</h1>

<div id=”containers”>

<!-- <div id=”refine”></div> →

<div id=”Products”>

</div>

</div>

<div id=”footer”></div>

Footer tag

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

Authorship information

Copyright information

Contact information

Sitemap

Back to top links

Related documents

You can have several <footer> elements in one document.

</body>

</html>

<script type=”module” src=”./AllSkincare.js”></script>

.navi {
Width: 100%;

Margin-left: 40px;

Margin-top: 16px;

#containers {

Display: flex;

Margin-top: 30px;

/* #refine {

Width: 30%;

} */

#Products {

Width: 80%;

Display: grid;

Grid-template-columns: repeat(3, 1fr);

Gap: 30px;

Margin-left: 13%;

H1 {

Width: 100%;

Margin-bottom: 10px;

#Products>div {

/* width: 20%; */

Text-align: center;

Display: flex;
The display: flex property enables the flexbox layout mode, allowing you to manipulate elements’
alignment, spacing, and order within a container.

Flex-direction: column;

Gap: 25px;

Margin-bottom: 20px;

Height: 100%;

Box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

#Products>div>img {

Width: 60%;

Height: 250px;

Margin-left: 3.5rem;

#Products>div>button {

Color: white;

Background-color: rgb(32, 32, 32);

Padding: 10px 15px;

The CSS padding properties are used to generate space around an element’s content, inside of any
defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for
each side of an element (top, right, bottom, and left).

Padding – Individual Sides

CSS has properties for specifying the padding for each side of an element:

Padding-top

Padding-right

Padding-bottom

Padding-left
All the padding properties can have the following values:

Length – specifies a padding in px, pt, cm, etc.

% - specifies a padding in % of the width of the containing element

Inherit – specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Border: none;

Display: flex;

Gap: 10px;

Justify-content: center;

Align-items: center;

#Products>div>button:hover {

Color: black;

Background-color: rgb(197, 255, 255);

#cartcontent {

Display: flex;

Flex-direction: column;

#cartcontent>div {

Display: flex;

Import navbar from “./componet/navbar.js”;

Let nav = document.getElementById(“navbar”);

Nav.innerHTML = navbar();

Import offers from “./componet/offer.js”;

Let offer = document.getElementById(“offer”);


Offer.innerHTML = offers();

Import search from “./componet/search.js”;

Let searchs = document.getElementById(“search”);

Searchs.innerHTML = search();

Import footer from “./componet/footer.js”;

Let sfooter = document.getElementById(“footer”);

Sfooter.innerHTML = footer();

Const getData = async () => {

Try {

Let res = await fetch(

`https://makeup-
api.herokuapp.com/api/v1/products.json?brand=covergirl&product_type=eyeliner`

);

Let data = await res.json();

Console.log(data);

appendData(data);

appendData(data);

appendData(data);

} catch (err) {

Console.log(err);

};

getData();

const appendData = (data) => {

let products = document.getElementById(“Products”);

// products.innerHTML = null;
Data.forEach((el) => {

REGISTRATION FORM

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

Meta Tag: A tag with the http-equiv attribute set to “X-UA-Compatible” and the content attribute
set to “IE=edge” is used to force Internet Explorer (IE) to use the latest version of the rendering
engine. Regardless of the document’s compatibility mode.

When IE detects this meta tag, it renders the web page using the latest rendering engine available
on the user’s computer. This ensures that the page is rendered using a newer standards-compliant
rendering engine, rather than an older or compatibility-mode engine.

Here’s an example of how the <meta> tag might be used in the <head> section of an HTML
document:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Registration</title>

<link rel=”stylesheet” href=”registration.css”>

</head>

<body>

<div id=”nav”>

<div class=”conatiner_logo”>

<a href=”\”>

<img

Src=https://s1.thcdn.com/enterprise/assets/skstr-global-113e023e-ecc9-45df-abad-
eb92ce1956c9-logo-default.svg

Alt=””>
</a>

</div>

</div>

<form>

<div class=”container”>

<h2>About You</h2>

<h3>Sign Up With</h3>

<div id=”socialconnect”>

<div class=”facebook”>

<img class=”fb”

Src=https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-
512.png alt=””>

<div id=”ff”>Facebook</div>

</div>

<div class=”google”>

<img class=”go” src=https://cdn1.iconfinder.com/data/icons/google-s-


logo/150/Google_Icons-09-512.png alt=””>

<span id=”gg”>&nbsp;Google</span>

</div>

</div>

<hr>

<h3>Or create an email account</h3>

<label for=”name”><b>Full Name</b></label>

<input type=”text” placeholder=”Enter Full name” name=”name” id=”name” required>


<label for=”email”><b>Email</b></label>

<input type=”text” placeholder=”Enter Email” name=”email” id=”email” required>

<label for=”cemail”><b> Confirm Email</b></label>

<input type=”text” placeholder=”Enter confirm Email” name=”email” id=”cemail” required>

<label for=”psw”><b>Password</b></label>

<input type=”password” placeholder=”Enter Password” name=”psw” id=”password” required>

<label for=”psw-repeat”><b>Confirm Password</b></label>

<input type=”password” placeholder=”confirm Password” name=”psw-repeat” id=”psw-repeat”


required>

<label for=”number”><b>Phone Name</b></label>

<input type=”text” placeholder=”Enter phone name” name=”name” id=”number” required>

<button type=”submit” class=”registerbtn”>CONTINUE</button>

<p>By preceeding you are confirming that you agree to our <a href=””>Terms and
Conditions</a> and <a

Href=””>Privacy Policy</a></p>

</div>

</form>

</body>

</html>

<script>

Document.querySelector(“form”).addEventListener(“submit”, registration)
Returns the first element with the selector provided. When using a generic tag name like form as a
selector, if the document has more than one form you run the risk of not getting the expected
element.

Var userArr = JSON.parse(localStorage.getItem(“userInfo”)) || [];

To find user I’d that has already login

// console.log(userDetails)

Function registration(event) {

Event.preventDefault();

Var fullname = document.querySelector(“#name”).value

Var email = document.querySelector(“#email”).value

Var confirm_email = document.querySelector(“#cemail”).value

Var password = document.querySelector(“#password”).value

Var confirm_password1 = document.querySelector(“#psw-repeat”).value

Var phone_num1 = document.querySelector(“#number”).value

// console.log(fullname,email,confirm_email,password,cofirm_password,phone_num)

Var userInfo = {

Represents the name of a variable in a mathematical expression or a programming context.

Name: fullname,

Email: email,

Confirm_email: confirm_email,

Password: password,

Confirm_password: confirm_password1,

Phone_num: phone_num1,

alert(“Registration Successfully Done”)

window.location.href = “login.html”

</script>

• {
Box-sizing: border-box;

Body{

Margin: 0px;

Padding: 0px;

Box-sizing: border-box;

Background-color: #f1f1f1;

#nav{

Width: 100%;

Height: 80px;

Background-color: white;

Position: fixed;

Margin-top: -100px;

Img{

Width: 500px;

Height: 60px;

Margin: 10px 0 0 5px;

/* Add padding to containers */

.container {

Width: 40%;

Padding: 16px;

Background-color: white;

/* border: 1px solid rebeccapurple; */


Margin: auto;

Margin-top: 100px;

/* Full-width input fields */

Input[type=text], input[type=password] {

Width: 100%;

Padding: 15px;

Margin: 5px 0 22px 0;

Display: inline-block;

Border: none;

Background: #f1f1f1;

Input[type=text]:focus, input[type=password]:focus {

Background-color: #ddd;

Outline: none;

H3{

Margin-top: 50px;

Margin-bottom: 30px;

#socialconnect{

Width: 90%;

Height: 100px;

Padding: 20px;

Display: block;

Display: flex;

Margin: auto;
/* border: 1px solid rebeccapurple; */

.facebook{

Width: 48%;

Height: 90%;

Display: block;

Border: 1px solid black;

Display: flex;

.fb{

Width:20% ;

Height: 30px;

Margin-left: 30px;

Margin-top: 14px;

#ff{

Color: gray;

Font-weight: bold;

Margin-top: 20px;

Margin-left: 10px;

.google{

Width: 48%;

Height: 90%;

Border: 1px solid black;

Display: flex;

Margin-left: 30px;

.go{
Width:25% ;

Height: 35px;

Margin-left: 30px;

Margin-top: 14px;

/* padding: 10px 0 0 20px; */

#gg{

Color: gray;

Margin-top: 20px;

Margin-left: 10px;

Font-weight: bold;

Hr {

Border: 1px solid #f1f1f1;

Margin-bottom: 25px;

/* Set a style for the submit button */

.registerbtn {

Background-color: #2E3337;

Color: white;

Padding: 16px 20px;

Margin: 8px 0;

Border: none;

Cursor: pointer;

Width: 100%;

Opacity: 0.9;

}
.registerbtn:hover {

Opacity: 1;

Color: #000;

Background-color: turquoise;

/* Add a blue text color to links */

A{

Color:rgb(88, 87, 87);

P{

Font-size: 20px;

Login Page

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Login</title>

<link rel=”stylesheet” href=”login.css”>

</head>

<body>

<div id=”nav”>

<div class=”conatiner_logo”>

<a href=”\”>

<img src=https://s1.thcdn.com/enterprise/assets/skstr-global-113e023e-ecc9-45df-abad-
eb92ce1956c9-logo-default.svg alt=””>
</a>

</div>

</div>

<div id=”main”>

<div class=”container”>

<div class=”container_login”>

<div class=”login_box”>

<h2>Existing Customers</h2>

<form>

<label>*Email Address</label>

<div class=”c1”>

<input id=”email” type=”text” placeholder=”Email Address” required>

</div>

<label>*Password</label>

<div>

<input id=”password” type=”password” placeholder=”Password” required>

</div>

<a href=”forgot_pass.html”>FORGOTTEN YOUR PASSWORD?</a>

<input type=”submit” value=”SIGN IN” name=”contine” id=”button”>

<p>Or, Continue with</p>

<div>

<div id=”socialconnect”>

<div class=”facebook”>

<img class=”fb” src=https://cdn3.iconfinder.com/data/icons/free-social-


icons/67/facebook_circle_color-512.png alt=””>
<span id=”ff”>&nbsp;Facebook</span>

</div>

<div class=”google”>

<img class=”go” src=https://cdn1.iconfinder.com/data/icons/google-s-


logo/150/Google_Icons-09-512.png alt=””>

<

</div>

</div>

</div>

</form>

</div>

</div>

</div>

<div class=”container2”>

<h2>New Customers</h2>

<a href=”registration.html”> <input type=”submit” value=”REGISTER” id=”button1” ></a>

</div>

</div>

</div>

</body>
</html>

<script>

Document.querySelector(“form”).addEventListener(“submit”,login)

Var loginArr=JSON.parse(localStorage.getItem(“userInfo”))||[];.

JSON has become popular as a data format for developers because of its human-readable text,
which is lightweight, requires less coding, and processes faster …

Function login(event){

Event.preventDefault();

Var email=document.querySelector(“#email”).value

Var password=document.querySelector(“#password”).value

If(loginArr.length>0){

For(i=0;i<loginArr.length;i++){

Console.log(loginArr[i].email,email,loginArr[i].password,password)

If(loginArr[i].email==email && loginArr[i].password==password){

Alert(“Login Successfully Done”);

Window.location.href=”index.html”

Break;

}else{

If((loginArr.length-1)==i){

Alert(“check email and password correct or Wrong else goto REGISTER”);

}else{
Alert(“check email and password correct or Wrong else goto REGISTER”);

</script>

Body{

Margin: 0px;

Padding: 0px;

Background-color: #F2F2F2;

Box-sizing: border-box;

#nav{

Width: 100%;

Height: 80px;

Background-color: white;

.conatiner_logo img{

Width: 500px;

Height: 60px;

Margin: 10px 0 0 5px;

#main{

Display:grid ;

Padding: 2% 8%;

Grid-template-columns: repeat(12, 1fr);

Grid-template-areas:
“. . a a a . b b b b b .”;

.container2 h2{

Margin-top: 0px;

.container{

Grid-area: a;

Width: 460px;

Height: 600px;

Margin: auto;

Margin-top: 50px;

Box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

/* border: 1px solid black; */

Background-color: white;

/* background-color: blue; */

Display: block;

.container2{

Width: 100%;

Margin-top: 49px;

Background-color: white;

Grid-area: b;

Height: 20vh;

Padding: 30px;
}

.container_reg{

Width: 100%;

Height: 600px;

.container_reg>.reg_box{

Width: 400px;

Height: 600px;

Margin-left: 15%;

#email,#password{

Margin: 20px;

Width: 400px;

Height: 40px;

Padding-left: 10px;

Font-size: 15px;

Border-radius: 3px;

Margin-left: 20px;

Label{

Font-size: 16px;

Font-family: sans-serif;

Margin-left: 25px;

Font-weight: bold;

Color: #2E3337;

}
P{

Font-size: 18px;

Margin-left: 20px;

A{

Color:#2E3337;

Font-weight: bold;

A{

Margin-left: 20px;

Font-family: sans-serif;

Font-weight: lighter;

#button{

Display: block;

Width: 90%;

Height: 40px;

Font-size: 16px;

Border: 0;

Color: white;

Font-weight: 700;

Background-color: #2E3337;

Margin: 20px 0px 0 20px;

#button:hover{

Cursor: pointer;

Color: black;
Background-color: turquoise;

#socialconnect{

Width: 450px;

Height: 50px;

Display: flex;

Margin: auto;

Padding: 20px;

#button1{

Display: block;

Width: 100%;

Height: 40px;

Font-size: 16px;

Border: 0;

Color: white;

Font-weight: 700;

Background-color: #2E3337;

#button1:hover{

Cursor: pointer;

Color: black;

Background-color: turquoise;
}

.login_box h2{

/* background-color: coral; */

Margin: 30px 25px;

.facebook{

Display: flex;

Border: 1px solid gray;

Padding: 5px 6%;

.google{

Display: flex;

Border: 1px solid gray;

Padding: 5px 8%;

Margin: 0px 10px 0px 12%;

.facebook img{

Width: 40px;

Display: inline-block;

#gg{

/* background-color: cornflowerblue; */

Display: inline-block;

Padding: 13px 5px 0px;

Font-weight: 900;

Color: gray;
}

#ff{

/* background-color: cornflowerblue; */

Display: inline-block;

Padding: 13px 5px 0px;

Font-weight: 900;

Color: gray;

@media only screen and (min-width:0px) and (max-width:950px){

#main{

Display:grid ;

Grid-template-areas:

“. . a a a a a a a a . .”

“. . b b b b b b b . . .”;

.login_box> div >small{

Color: red;

Position: absolute;

bottom: 0;

left: 0;

visibility: visible;

CART

<!DOCTYPE html>
<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<!—Here I linked the landingPageStyle →

<link rel=”stylesheet” href=”shopStyles.css”>

<link rel=”stylesheet” href=”./navbar.css”>

<link rel=”stylesheet” href=https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/6.2.0/css/all.min.css integrity=”sha512-
xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCc
JHgXloTyT2A==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />

<link rel=”stylesheet” type=”text/css”

Href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css>

<!—Here I linked the font awesome Style →

<script src=https://kit.fontawesome.com/239b8919c6.js crossorigin=”anonymous”></script>

<title>Cart</title>

</head>

<body>

<!—Here I created the landingPage-container→

<div id=”navbar”></div>

<div id=”offer”></div>

<div id=”search”></div>

Var cartThings = JSON.parse(localStorage.getItem(“cartthings”)) || [];

Let Tprice=0;

reLoadM(cartThings);

function reLoadM(cartThings){
creatcart(cartThings);

function creatcart(cartThings) {

document.querySelector(“#container”).textContent = “”;

cartThings.map(function (data, index) {

var div = document.createElement(“div”)

document.querySelector(“#container”).append(div)

// inside div creating image and image_url

Var image = document.createElement(“img”);

Image.src=data.image_link;

div.append(image);

var btn1 = document.createElement(“button”)

btn1.setAttribute(“id”, “btnwish”)

btn1.textContent = “Wish”

btn1.style.display = “block”

div.append(btn1)

var name = document.createElement(“p”);

name.style.height = “35px”

name.textContent = data.name;

name.style.marginTop = “3%”

div.append(name);

var box = document.createElement(“div”)

box.textContent = data.box

box.setAttribute(“id”, “boxer”)

div.append(box)
var p1 = document.createElement(“p”);

check0(data.MSRP);

function check0(val){

if(val!=undefined){

p1.innerHTML = `MSRP: <s>$${data.MSRP}</s>`;

P1.style.marginTop = “5%”

P1.style.color = “gray”

Var p2 = document.createElement(“p”)

P2.textContent = `$${data.price}`;

Tprice=Tprice+Number(data.price);

P2.style.marginTop = “1%”

P2.style.fontSize = “24px”

P2.style.fontWeight = “bold”

div.append(p1, p2)

var btn2 = document.createElement(“button”)

btn2.setAttribute(“id”, “btnbuy”);

btn2.textContent = “Delete Item”

div.append(btn2);
btn2.addEventListener(“click”, function () {

deletItems(index,data)

});

});

Function deletItems(index,data) {

Tprice=Tprice-Number(data.price);

totalPrice.innerHTML=Tprice;

cartThings.splice(index, 1)

localStorage.setItem(“cartthings”, JSON.stringify(cartThings));

alert(“Item Deleted”);

reLoadM(cartThings);

window.location.reload();

Let totalPrice= document.getElementById(“totalPrice”);

totalPrice.innerHTML=Tprice;

//
==================================================================================
============================================================

Var cartLength =JSON.parse(localStorage.getItem(“cartthings”))


Document.querySelector(“#cardAval”).innerHTML=`There are currently ${cartLength.length}
items in your cart.`;

Document.querySelector(“#cartLen”).innerHTML=`${cartLength.length}`;

Var total = cartLength.reduce(function (a,b) {

Return a+Number(b.price)

},0)

Document.querySelector(“#totalPrice”).innerHTML=` $${total.toFixed(2)}`;

Function navSlideOut(){

Document.querySelector(“#nav-link”).style.left=”-16px”

Function navSlideIn(){

Document.querySelector(“#nav-link”).style.left=”-2000px”

Function Tsort(){

Var valT=document.querySelector(“#sortT”).value

Console.log(valT)
If(valT==””){

reLoadM(cartThings);

}else if(valT==”high”){

cartThings.sort(function(a,b){

return (Number(b.price)-Number(a.price))

})

reLoadM(cartThings);

}else{

cartThings.sort(function(a,b){

return (Number(a.price)-Number(b.price));

})

reLoadM(cartThings);

CHECKOUT

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Checkout Page</title>

<link rel=”stylesheet” href=”checkout.css”>

</head>

<body>

<div class=”container121”>

<div class=”subcontainer”>

<div class=”container”>
<form>

<div class=”container121”>

<div class=”add”>

<h3>Billing Address</h3>

<label for=”fname”>Full Name</label>

<input type=”text” id=”fname” name=”firstname” placeholder=”John M. Doe”>

<label for=”email”> Email</label>

<input type=”text” id=”email” name=”email” [email protected]>

<label for=”adr”> Address</label>

<input type=”text” id=”adr” name=”address” placeholder=”542 W. 15 th Street”>

<label for=”city”>City</label>

<input type=”text” id=”city” name=”city” placeholder=”New York”>

<div class=”container121”>

<div class=”add”>

<label for=”state”>State</label>

<input type=”text” id=”state” name=”state” placeholder=”NY”>

</div>

<div class=”add”>

<label for=”zip”>Zip</label>

<input type=”text” id=”zip” name=”zip” placeholder=”10001”>

</div>

</div>

</div>

<div class=”add”>

<label for=”cname”>Name on Card</label>

<input type=”text” id=”cname” name=”cardname” placeholder=”John More Doe”>

<label for=”ccnum”>Credit card number</label>


<input type=”text” id=”ccnum” name=”cardnumber” placeholder=”1111-2222-
3333-4444”>

<label for=”expmonth”>Exp Month</label>

<input type=”text” id=”expmonth” name=”expmonth” placeholder=”September”>

<div class=”container121”>

<div class=”add”>

<label for=”expyear”>Exp Year</label>

<input type=”text” id=”expyear” name=”expyear” placeholder=”2018”>

</div>

<div class=”add”>

<label for=”cvv”>CVV</label>

<input type=”text” id=”cvv” name=”cvv” placeholder=”352”>

</div>

</div>

</div>

</div>

<label>

<input type=”checkbox” checked=”checked”> Shipping address same as billing

</label>

<a href=”payment_success.html”> <input type=”button” value=”Continue to checkout”


class=”btn”></a>

</form>

</div>

</div>

</div>

</body>

</html>

Body {
Font-family: Arial;

Font-size: 17px;

Padding: 8px;

• {

Box-sizing: border-box;

.container121 {

Display: -ms-flexbox;

Display: flex;

-ms-flex-wrap: wrap;

Flex-wrap: wrap;

Margin: 0 -16px;

.add,

.subcontainer {

Margin: auto;

.add,

.subcontainer {

Padding: 0 16px;

.container {

Background-color: #f2f2f2;

Padding: 5px 20px 15px 20px;

Border: 1px solid lightgrey;


Border-radius: 3px;

Input[type=text] {

Width: 100%;

Margin-bottom: 15px;

Padding: 12px;

Border: 1px solid #ccc;

Border-radius: 3px;

Label {

Margin-bottom: 15px;

Display: block;

Font-size: 18px;

.btn {

Background-color: #04AA6D;

Color: white;

Padding: 12px;

Margin: 10px 0;

Border: none;

Width: 100%;

Border-radius: 3px;

Cursor: pointer;

Font-size: 17px;

.btn:hover {

Background-color: #45a049;
}

PAYMENT

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Document</title>

<link rel=”stylesheet” href=”payment_success.css”>

</head>

<body>

<div class=”container”>

<form >

<div>

<img
src=”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxATEA8SExAPFRIXD
w8VFRUVDw8QEBUQFREXFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OFxA
QGy0fIB4vKy0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QM
BIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAAAQcCBQYEA//EAD4QAAIBAQUGAwUFBw
MFAAAAAAABAgMEESExYQUGEkFRcSKBsRNCkaHBByMyUtEUYmNykuHwQ4LxM1OissL/xAAaAQEA
AgMBAAAAAAAAAAAAAAAABAUCAwYB/8QAMhEAAgEBAwsEAwACAwEAAAAAAAECAwQRMQUS
EyFBUWFxkaHRMoGx8CLB4RTxQkOCI//aAAwDAQACEQMRAD8AvAi/oJdBogCG+SJb5cyMsFmTl3A
DfxDdxGXcZYvMAm+7MashLm/+Dm9tb4Wei3GP3tRe7F3RT/el+l5hOpGCvk7jXVrQpRzpu5fep0q6s1
W0d4bNRT460U1yTcpeaWXmV1tXeW1V7+Kb”D8kfDHzeb8zTkCplDZBdfBUVssbKUfd+P6uR3ds+0C
P+lQb1nNR+Ub/AFNNad9bZO/hnGC0hF/OV5zoIkrVVl/y6aitqW+0Txndy1fBsam8FslnaanlLh9Dzy2l
Wf8Aq1P6n+p5gaXOW99SO6tR4yfV+T0raNZZVZ/1P9T709u2yP4a9T43+prwFOS2vqFVqLCT6s39n3x
tsLvvYz0lGHqrmbmx/aB/3aHnCeP9L/U4cG2Fpqxwl11/Jip260Qwm/fX8lsbP3oslW7hqpSfuyTi7+ivwf
xN0pYX8ijTY7M27aaDXBVfD+SSUk/J5eRLp5QeE108FhRyw8KsfdeH59i4Uwnf2OT2NvrRq3Rqr2Uut7
lBvv7vn8TqoyUkmmmuqxT7FhTqRqK+LvLijXp1lfB3/dq2GSd/YXkaInRGZtIb5I’vkRoicu4Ab+JN5jl3JS6
5gGQAAMG+SGWCzJk+mYy7gDLuRl3GXcZYvMAZYvM8e09pUrPB1KsrlyWcm+kVzZ4’4dvU7LC93SqN
eGF93m3yRWG0doVa9R1KsnKXLlGK6JckQ7Ta1S/Got/HMrrblCND8Y65dlz/AEvg2u8G9Na0NxTdOjyi
n4mv3nz7I0IBUTnKbzpO9nOVKs6ks6bvf3sAAYmsEAAAAAAAAAAkAAAAG22HvFXszSjLip3405Pw68L
5M1IMoycXfF3MzhOVOWdB3Mt7Yu2qNphfTdzS8UHhKPlz7m00RSNltM6c4zpycZrJrF/37Fl7sbzQtC9
nO6NZLFX4S6yX6FtZrYqn4y1P58HQ2LKKrfhPVLs/D4dDo8u4y7kZdxli8yaWgyx’YS5snVkJc2AZgAAxb
+JGXclu4jLF5gDLF5mm3j25Cy0+J3OpJPgj6t6I9u1doQs9KVWpkrrlzcnlFalR7Rt1SvVnVqPxN5cox5RWi
IlrtGiWasX24ldlC26CObH1Pst/heD52u0TqzlUqScpSd7b/wAwWh8gCles5htt3sAEAAAAAAAAAAAAk
AAAAAGy2BsadqrKEcIK5zlyjHl5vkexi5NJYsyhCU5KMVe3geOFkquEqkac3Tj+Kai3Fdz4l1WWzQpwjTh
FKKjclmrtepxe8+5+dWzK94uVLm+ri36fAm1bDKEb469/8LO0ZKnTgpQec9q8b/nVtwOJJpzcWpRbUk7
007mn1TMbru/zJIJVFnbp7xK0R4KlyrxWPJSj1j8MudJqykLPWnTn’pCTU4u9NcmWxu7tiNpoqpgpq5T
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
eLihqpY/28iryhT9M/bwUOWKOuNVcn8r99”XAAr’kAAAJpVJRlGUW1JNNNYNNZMtTdjbqtNLkqsblN
ekloyqj07Mt9ShVjVpvxLlylHmnoyRZ67pSv2PEmWK1uzzv/wCLxX75oujLuMu54tk7Rp16UasHnmucZ
c4s9uWLzLxNNXo6uMlJJrWmMsXmNWNWNWeno1ZGeLyGeLyJz7eoBjOSubbSSTbbwVy5vQrDe7eB
2mpwwbVGDwX55fmf0NlvvvHxOVmpS8Kd1SS954PhWi5nGlVbbTnPRxw2+Dn8pW3PbowwWL3vd
y/fLWIAK8pwSAAACAAASAAAACyvs/sXBZXO651Jt/7Itxj9X5leWCySrVadKOc5KPZLN+SvZc1noxhCMI
q6MYqK0SVxPyfTvk57v2W+SKN9SVR4LUub/nyfcAFsdCYtHJ7/AGyva0VWivHSvv6uEmr/AIZ/E6xq/sY
SSkmrsLrnquhhUpqpFxe01V6Sq05Qlt+p+xSANvvRsd2avKKv9nLxU3+770b+v9jUHPyi4ycXijj6kJU5OE
sUQASYmAAABt92duSstXixdOVynHTk1qi1bPWjOMZxknGSTi1lc+hSZ1O5W8HsZKjVf3cn4W8oSf6k6
x2nMeZLB9vv9LXJtt0b0U3+Lw4Pw+xZGrI”xeRO’PL/ADEZ9vUtzoxn29Tk99N4fZRdGm/vJLxNe7F9N
WbLebbsbNSvVzqSvUI+reiKqrVZTlKUm3Jttt5tsg2y05izI4vHgVOUrdo1ooep4vcvL2bsdxiQSCoOdIJAA
ABAAAJAAAAAB7NjbNnaK0KUb8X4pcopZv8Azm0epNtJbT2MXJqMVe2dZ9ney8J2mS6xp/NSa9Pid1
oj4WazxpwhTgroxiktF+p91hgX9GkqUFFfWdfZaCoUlTWzHi9v3cSCQbSQYtX9iNES+g0QBq9vbJhaaLp
O5NYwl+WXL0uZUtrs06c5U5xunF3Na/oXdojnN7N3VaYccElWindy4l0k/LBkK12bSLOjiu5V5RsWmWf
D1LuvK2dCsATODi3GSakm008Gms0yCnObBAABIAAO/wByN4PaJWeq/Gl93J+/Fe69V80dJtfaVOhSl
Um8Fkucpcoop2M2mmm000007mmuh7dp7Wr2hx9rNy4VcsEkuruXPUn07c408163s/pbUcqShRcGr
5LB+eR8tp2+pXqyqTeLeC5RjyitEeYEEFtt3sqm2229bZIAPDwAEAAAkAAAAAAAmMW2oxTbbSSWbb
dySLT3V2GrNSxudWSTm+nRLsa/c7dr2N1arH71rwxfuRfN6v5HW5YLMtrHZsz85Y/H3sdDk2wumtLUx
eC3f19lzGWCzCw7jLuSld3J5bmQAAMG+SGiJb6DLuAMu5GXcnLuRli8wDnN6N2Y2he0hdGsln7sl+V/
qVpaKE6c5QnFxmnc01c0XfqzU7c2FRtMfGrpJeGaS4o9+q0IVpsiqflHU/kq7dk5Vr509Uuz8Pj1KjBs9s7
Cr2aXjjfC/wANRfhfde69GawqJRcXc1cznZwlCTjJXNAAHhiAQAASAAACAAASAAAAAD27K2VWtE+ClB
v80vwqK1f0zPUm3ctZ7GLk1GKvvPFGLbUYptt3JJNtvolzLE3U3V9jw1ayTq5xjnGGr/M/Q2G7+7dKzK/
CdW7GbWWiXI3uWCzLWzWPM/KeO779R0Fhybo2qlXW9i3c977LiMsFmMu4y7jLuTy3GXcJc2TqyEu
bAMgSADFv4kZdzJkJc+YBGWLzJ1ZCXNhLmwBqxni8ibrxdf2APnUpxmnGSTi1c00mmtUchtrceE75UJc
D/JK9wb/dd98fmdnn2D6cjXUpQqK6SNNaz06yuqK/59imdo7Mr0HdVpyjrdxJ9msDxl31YKS4Wk080
0mruxz+0dzbJUvcYypyfOLk4/0t3fC4rqmT5LXB38ymrZHktdKV/B6u+HwVgDrbZuFaI/8ATqwqd/u5fV
GltG7tshfxWefeN0l8VeRJUakcYv7yK6pZK8PVB9L+6vRrAZ1KE4/ihJd4y+p8rzURm0sTIGKa/wATPpTp
yllGT7Rf0F4vRiDY0Ng2updw2ed3Vx4V8XcbmybiWmf45xprvxy+Cw+ZtjRqSwi/vMkQstafpg+l3d3HK
n3sViq1pcNKnKb/AHVgu7yRYVg3IssLuPjqNdXKEP6Yv1Z0lChCEVCEYxj0ikkiVTyfJ+t3ffu8sKOSKj11Hct
y1vwu5xWx9xVhK0Tv/hxfycl6L4nZ2azwpxUKcIxiuSyX9z76IXXZFjSowpK6K8lzQstKgroK7jtfv9RGWCz
GXcXXdyUru5tJBGXcnVkJc2EubAJ1YXUXdRn2AMgAAAAAAAAAAAAAACAACQAeo9R8LX+HzOZtub
ANNbA0WnAws2a7nTWHLyQAomNmPUADcyS8QADw8IJAAAAAIJAAAAAIAAB//9k=” alt=””>

</div>

<div>

<h2>payment success</h2>

</div>

<div>

<p>Your payment was Successfully completed</p>

</div>

<div>

<a href=”./index.html”> <input id=”button” type=”button” value=”Continue Shopping”></a>

</div>

</form>

</div>
</body>

</html>

</body>

</html>

• {

Box-sizing: border-box;

Body{

Background-color: #e0dcdc;

.container{

Width: 30%;

Height: 400px;

Background-color: white;

Margin: auto;

Margin-top: 180px;

Grid-template-columns: repeat(1, 1fr);

Img{

Width: 25%;

Height: 70px;

Margin-top: 70px;

Margin-left: 160px;

H2{

Text-align: center;
Margin-top: 60px;

Color: rgb(59, 58, 58);

Font-family: sans-serif;

P{

Text-align: center;

Margin-top: 30px;

Font-size: 18px;

#button{

Width: 200px;

Height: 40px;

Font-size: 16px;

Border: 0;

Color: white;

Font-weight: 700;

Background-color: #1ABE2B;

Margin: 20px 40px 0 97px;

@media only screen and (min-width:0px) and (max-width:320px) {

.container{

Grid-template-columns: repeat(1,1fr);

The grid-template-columns CSS property defines the line names and track sizing functions of the
grid columns.

Grid Column

A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid
lines. It is defined by the grid-template-columns property or in the shorthand grid or grid-template
properties.
In addition, columns may be created in the implicit grid when items are placed outside of columns
created in the explicit grid. These columns will be auto-sized by default, or can have a size specified
with the grid-auto-columns property.

When working with alignment in CSS Grid Layout, the axis down which columns run is known as
the block, or column, axis.

See also

Property reference

Grid-template-columns

Grid-auto-columns

Grid

Grid-template

Further reading

CSS Grid Layout Guide: Basic concepts of grid layout

@media only screen and (min-width:321px) and (max-width:720px) {

.container{

Grid-template-columns: repeat(1,1fr);

Future Enhancement

No project is ever complete in itself; there are always minor or

Major changes in the project according to user requirements.

This project could be enhanced in the sense that it can overcome


Its limitations in the future as sample scope for enhancement.This system can generate various
reports useful for the

Management and as it is quite user friendly it saves time and

Reduce the chances of error occurrences. The co-ordination of

Various functions can be achieved and miss management does

Not take place.

Latest technologies and software technologies can help to bring

In more enhancements which would help the management to

Take quick decision. Proper security is maintained and data is

Protected from an unauthorized user.

Conclusion

The system can generate various reports useful for the management

And as it is quite user friendly it saves time and reduce the chances of

Error occurrences. The co-ordination of various functions can be

Achieved and miss management does not take place.

This System guide lines the user in maintaining proper and Appropriate data generation of report
is easy and fast which can help

The management to take quick decision. Proper security is maintained

And data is protected from and unauthorized user.

You might also like