1 Codes

HTML codes: for Home page[FileName:HelloUser.
html]
<!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>SuppyBox</title>
<link rel="stylesheet" href="../HomePage/css/HELLO.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"
crossorigin="anonymous"></script>
</head>
<body>
<section class="Hello">
<nav>
<a href="HelloUser.html" target="_self"><img
src="./image/OurLogo-removebg-preview.png"></a>
<div class="nav-links">
<ul>
<li><a href="../HomePage/HelloUser.html">HOME</a></li>
</ul>
src="./image/SchooLogo.png"></a>
</div>
</nav>
<div class="text-box">
<h1>Categories</h1>
<p>You can choose to any categories to find which you could give
someone a GiftBox</p>
<a
href="https://www.facebook.com/profile.php?id=100093555525249&mibextid
=ZbWKwL" class="hero-btn">Visit our Facebook page</a>
<div class="categories-row">
<div class="categories-col">
<img src="image/Blckpnkpht.jpg">
<div class="name"><h3><a
href="../ShoppingPage/Humm.html">BlackPink</a></h3></div>
</div>
<img src="image/Men.jpg">
href="../ShoppingPage/Hemm.html">Men</a></h3></div>
</div>
<img src="image/Women.jpg">
href="../ShoppingPage/Hamm.html">Women</a></h3></div>
</div>
<img src="image/SwtOv.jpg">
href="../ShoppingPage/Homm.html">Sweetness Overload</a></h3></div>
</div>
</div>
</div>
<script src="kamusta.js"></script>
</section>
</body>
</html>
CSS codes: For Home page
[FileName:HELLO.css]
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.Hello{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(29, 69, 230, 0.7), rgba(155, 24,
142, 0.7));
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 80px;
height: 80px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover:after{
width: 100%;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1{
font-size: 62px;
color: #f44336;
}
.text-box{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
.hero-btn{
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.text-box .categories-row{
width: 80%;
margin: auto;
text-align: center;
padding-top: 50px;
}
.categories-row{
display: flex;
}
.categories-col{
display: flex;
flex-direction: column;
flex-basis: 100%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.categories-col img{
width: 100%;
}
.name{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.name a{
color: #fff;
font-size: 30px;
}
.name:hover{
background: rgba(113, 32, 128, 0.7);
}
.name h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translate(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.name:hover h3{
bottom: 49%;
opacity: 1;
}
HTML codes for: Blackpink Shopping page [FileName:Humm.html]

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../ShoppingPage/css/Hey.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awes
ome.min.css">
</head>
<body>
<nav>
src="./image/OurLogo-removebg-preview.png"></a><a href="HelloUser.html"
target="_self"><img src="./image/SchooLogo.png"></a>
<ul>
</ul>
</div>
</nav>
<div class="header">
<h2 class="category">BLACKPINK IN YOUR AREA</h2>
<div class="cart"><i class="fa-solid fa-cart-shopping"><p
id="count">0</p></i></div>
</div>
<div class="uhmm">
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div class="head"><p>My Cart</p></div>
<div id="cartItem">Your cart is empty</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">Php 0.00</h2>
</div>
<div class="Adress">
<form action="../ShoppingPage/db.php" method="post">
<input type="text" name="name" placeholder="Enter Name"
required>
<input type="number" name="number" placeholder="Enter
Number" required>
<input type="email" name="name" placeholder="Enter Email"
required>
<textarea cols="24" rows="4" name="address"
placeholder="Enter Address"></textarea>
<button type="submit">Buy Now!</button>
</form>
</div>
</div>
</div>
</div>
<script src="cartadd.js"></script>
</section>
</body>
</html>
CSS codes for: Shopping page

[FileName:Hey.css]
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
font-size: 18px;
color: goldenrod;
}
.Hello{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(29, 69, 230, 0.7), rgba(155, 24,
142, 0.7));
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2%;
}
nav img{
width: 80px;
height: 80px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover:after{
width: 100%;
}
body{
display: flex;
justify-content: center;
}
.header{
height: 80px;
width: 100%;
background-color: goldenrod;
border-radius: 3px;
margin: 30px 0px;
display: flex;
padding: 15px;
}
.cart{
display: flex;
background-color: white;
padding: 15px 20px;
border-radius: 4px;
width: 80px;
}
.fa-solid{
columns: goldenrod;
}
.cart p{
height: 44px;
width: 44px;
display: flex;
color: white;
}
.container{
display: flex;
width: 100%;
}
#root{
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.sidebar{
width: 40%;
border-radius: 5px;
background-color: #eee;
margin-left: 20px;
padding: 15px;
text-align: center;
align-self: flex-start;
}
.head{
border-radius: 3px;
height: 40px;
padding: 10px;
color: white;
display: flex;
}
.foot{
display: flex;
margin: 20px 0px;
padding: 10px 0px;
border-top: 1px solid #333;
}
.box{
display: flex;
border: 1px solid goldenrod;
border-radius: 5px;
padding: 15px;
}
.img-box{
width: 100%;
height: 180px;
display: flex;
}
.images{
max-width: 110%;
max-height: 110%;
object-fit: cover;
object-position: center;
}
.bottom{
margin-top: 20px;
width: 100%;
text-align: center;
display: flex;
height: 110px;
}
h2{
font-size: 20px;
color: red;
}
button{
width: 100%;
border: none;
border-radius: 5px;
padding: 7px 25px;
cursor: pointer;
color: white;
}
button:hover{
background-color: #333;
}
.cart-item{
display: flex;
padding: 10px;
border-bottom: 1px solid #aaa;
border-radius: 3px;
margin: 10px 10px;
}
.row-img{
width: 50px;
height: 50px;
display: flex;
}
.rowimg{
max-width: 43px;
max-height: 43px;
border-radius: 50%;
}
.fa-trash:hover{
cursor: pointer;
color: #333;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
.nav-links ul li a{
font-size: 20px;
}
.nav-links ul li{
display: block;
}
nav .fa{
display: block;
color: #0c0707;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
.header{
height: 40px;
width: 100%;
background-color: #f44336;
border-radius: 3px;
margin: 15px 0px;
display: flex;
padding: 8px;
}
.cart{
display: flex;
padding: 8px 10px;
border-radius: 2px;
width: 40px;
}
.cart p{
height: 22px;
width: 22px;
display: flex;
color: #f44336;
}
.container{
display: flex;
width: 100%;
}
#root{
width: 100%;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
}
.sidebar{
width: 60%;
background-color: #eee;
margin-left: 40px;
padding: 30px;
text-align: center;
align-self: flex-start;
}
.head{
border-radius: 3px;
height: 20px;
padding: 5px;
color: whitesmoke;
display: flex;
}
.foot{
display: flex;
margin: 10px 0px;
padding: 5px 0px;
border-top: 1px solid #333;
}
.box{
display: flex;
border-radius: 3px;
padding: 8px;
}
.img-box{
width: 100%;
height: 90px;
display: flex;
}
.images{
max-width: 120%;
max-height: 120%;
object-fit: cover;
object-position: center;
}
.bottom{
margin-top: 20px;
width: 100%;
text-align: center;
display: flex;
height: 110px;
}
h2{
font-size: 20px;
color: #333;
}
button{
width: 100%;
border: none;
border-radius: 5px;
padding: 7px 25px;
cursor: pointer;
color: white;
}
button:hover{
background-color: #333;
}
}
JavaScript codes for: Blackpink Shopping page [FileName:cartadd.js]
const product = [
{
id: 0,
image: 'BlackPink/pckg1.jpg',
title: 'Package 1',
price: 220,
},
{
id: 1,
title: 'Package 2',
price: 220,
},
{
id: 2,
title: 'Package 3',
price: 220,
},
{
id: 3,
title: 'Package 4',
price: 220,
}
];
const categories = [...new Set(product.map((item)=>

{return item}))]
let i = 0;
document.getElementById('root').innerHTML = categories.map((item)=>
{
var {image, title, price} = item;
return(
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
"<button onclick='addtocart("+(i++)+")'>Add to cart</button>"+
`</div>
</div>`
)
}).join('')
var cart =[];
function addtocart(a){
cart.push({...categories[a]});
displaycart();
}
function delElement(a){
cart.splice(a, 1);
displaycart();
}
function displaycart(a){
let j = 0, total=0;
document.getElementById("count").innerHTML=cart.length;
if(cart.length==0){
document.getElementById('cartItem').innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "Php "+0+".00";
}
else{
document.getElementById('cartItem').innerHTML = cart.map((items)=>
{
var {image, title, price} = items;
total=total+price;
document.getElementById("total").innerHTML = "Php "+total+".00";
return(
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size:15px;'>Php ${price}.00</h2>`+
"<i class='fa-solid fa-trash'
onclick='delElement("+(j++)+")'></i></div>"
)
}).join('');
}
}
HTML codes for: Sweetness Overload Shopping page [FileName:Homm.html]
<!DOCTYPE html>
<html lang="en">
<head>
ome.min.css">
</head>
<body>
<nav>
<ul>
</ul>
</div>
</nav>
<h2 class="category">Sweetness Overload</h2>
</div>
<div class="uhmm">
<div class="foot">
<h3>Total</h3>
</div>
required>
Number" required>
required>
</form>
</div>
</div>
</div>
</div>
<script src="../ShoppingPage/Homm.js"></script>
</section>
</body>
</html>
JavaScript codes for: Sweetness Overload Shopping page [FileName:Homm.js]
const product = [
{
id: 0,
image: 'Sweetness/pckg1.jpg',
title: 'Package 1',
price: 150,
},
{
id: 1,
title: 'Package 2',
price: 150,
},
{
id: 2,
title: 'Package 3',
price: 155,
},
{
id: 3,
title: 'Package 4',
price: 155,
},
{
id: 4,
title: 'Package 5',
price: 160,
},
{
id: 5,
title: 'Package 6',
price: 160,
},
{
id: 6,
title: 'Package 7',
price: 160,
}
];
{return item}))]
let i = 0;
{
return(
`<div class='box'>
</div>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
`</div>
</div>`
)
}).join('')
var cart =[];
displaycart();
}
cart.splice(a, 1);
displaycart();
}
let j = 0, total=0;
if(cart.length==0){
}
else{
{
total=total+price;
return(
</div>
)
}).join('');
}
}
HTML codes for: Women Shopping page [FileName:Hamm.html]
<!DOCTYPE html>
<html lang="en">
<head>
ome.min.css">
</head>
<body>
<nav>
<ul>
</ul>
</div>
</nav>
<h2 class="category">FOR WOMEN</h2>
</div>
<div class="uhmm">
<div class="foot">
<h3>Total</h3>
</div>
required>
Number" required>
required>
</form>
</div>
</div>
</div>
</div>
<script src="../ShoppingPage/Hamm.js"></script>
</section>
</body>
</html>
JavaScript codes for: Women Shopping page [FileName:Hamm.js]
const product = [
{
id: 0,
image: 'Women/pckgA.jpg',
title: 'Package A',
price: 230,
},
{
id: 1,
image: 'Women/pckgB.jpg',
title: 'Package B',
price: 230,
},
{
id: 2,
image: 'Women/pckgD.jpg',
title: 'Package D',
price: 230,
},
{
id: 3,
image: 'Women/pckgE.jpg',
title: 'Package E',
price: 230,
},
{
id: 4,
image: 'Women/pckgF.jpg',
title: 'Package F',
price: 230,
},
{
id: 5,
image: 'Women/pckg.jpg',
title: 'Package',
price: 230,
},
{
id: 6,
image: 'Women/pckg1.jpg',
title: 'Package 1',
price: 230,
},
{
id: 7,
title: 'Package 2',
price: 230,
},
{
id: 8,
title: 'Package 3',
price: 230,
},
{
id: 9,
title: 'Package 4',
price: 230,
},
{
id: 10,
title: 'Package 5',
price: 230,
},
{
id: 11,
title: 'Package 6',
price: 230,
},
{
id: 12,
title: 'Package 7',
price: 230,
},
{
id: 13,
title: 'Package 8',
price: 230,
},
{
id: 14,
title: 'Package 9',
price: 230,
},
{
id: 15,
title: 'Package 10',
price: 230,
},
{
id: 16,
price: 230,
},
{
id: 17,
price: 230,
},
{
id: 18,
price: 230,
},
{
id: 19,
price: 230,
},
{
id: 20,
price: 230,
}
];

{return item}))]
let i = 0;
{
return(
`<div class='box'>
</div>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
`</div>
</div>`
)
}).join('')
var cart =[];
displaycart();
}
cart.splice(a, 1);
displaycart();
}
let j = 0, total=0;
if(cart.length==0){
}
else{
{
total=total+price;
return(
</div>
)
}).join('');
}
}
HTML codes for: Men Shopping page [FileName:Hemm.html]
<!DOCTYPE html>
<html lang="en">
<head>
ome.min.css">
</head>
<body>
<nav>
<ul>
</ul>
</div>
</nav>
<h2 class="category">FOR MEN</h2>
</div>
<div class="uhmm">
<div class="foot">
<h3>Total</h3>
</div>
required>
Number" required>
required>
</form>
</div>
</div>
</div>
</div>
<script src="../ShoppingPage/Hemm.js"></script>
</section>
</body>
</html>
JavaScript codes for: Men Shopping page [FileName:Hemm.js]
const product = [
{
id: 0,
image: 'Men/EauDeParfum.jpg',
title: 'EAU DE PARFUM',
price: 230,
},
{
id: 1,
image: 'Men/Pckg1.jpg',
title: 'Package 1',
price: 230,
},
{
id: 2,
title: 'Package 2',
price: 230,
},
{
id: 3,
title: 'Package 3',
price: 230,
},
{
id: 4,
title: 'Package 4',
price: 230,
},
{
id: 5,
title: 'Package 5',
price: 230,
},
{
id: 6,
title: 'Package 6',
price: 230,
},
{
id: 7,
title: 'Package 7',
price: 230,
},
{
id: 8,
title: 'Package 8',
price: 230,
},
{
id: 9,
title: 'Package 9',
price: 230,
},
{
id: 10,
price: 230,
},
{
id: 11,
price: 230,
}
];
{return item}))]
let i = 0;
{
return(
`<div class='box'>
</div>
<p>${title}</p>
<h2>Php ${price}.00</h2>`+
`</div>
</div>`
)
}).join('')
var cart =[];
displaycart();
}
cart.splice(a, 1);
displaycart();
}
let j = 0, total=0;
if(cart.length==0){
}
else{
{
total=total+price;
return(
</div>
)
}).join('');
}
}
PhP codes for: Shopping page [FileName:db.php]
<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$number = $_POST['number'];
$address = $_POST['address'];
$email_from = 'tenxiejiereg@gmail.com';
$email_subject = 'New Order Submission';
$email_body = "User Name: $name.\n".
"User Email: $visitor_email.\n".
"User Subject: $subject.\n".
"User Message: $message.\n";
$to = 'tenxiejiereg@gmail.com';
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to,$email_subject,$email_body,$headers);
?>

1 Codes

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

1 Codes

Transféré par

Droits d'auteur :

Formats disponibles

HTML codes: for Home page[FileName:HelloUser.

HTML codes for: Blackpink Shopping page [FileName:Humm.html]

CSS codes for: Shopping page

JavaScript codes for: Blackpink Shopping page [FileName:cartadd.js]

const categories = [...new Set(product.map((item)=>

const categories = [...new Set(product.map((item)=>

Vous aimerez peut-être aussi