Add Card items(Java script)
<!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>Add card </title>
</head>
<body>
<style>
*{
margin:0;
padding:0;
color:#fff;
font-style: oblique;
}
.container{
width:90%;
height:max-content;
margin: 100px auto;
background-image: linear-gradient(120deg, rgb(81, 187, 81),yellow,orange);
padding: 40px;
}
.product{
width: 25%;
height: max-content;
padding: 20px 16px;
background-color: #00000082;;
border: 4px solid purple;
}
.box{
margin: 80px 30px;
display: flex;
justify-content: space-between;
}
h3{
margin: 15px 0;
}
h1{
color: green;
border-bottom: 8px double ;
}
.nav{
display: flex;
justify-content: center;
text-align: center;
flex-direction: row;
width: 100%;
height: max-content;
padding: 14px 0;
background-color: rgb(169, 126, 210);
position: fixed;
top: 0;
}
.nav a{
color: #fff;
padding: 16px 18px;
background:yellowgreen;
margin-left: 12px;
text-decoration: none;
border-radius:12px;
}
.nav a:hover{
border-radius: 0;
color: gray;
background-color: antiquewhite;
}
.buy{
float: right;
padding: 5px;
margin: 5px 10px;
display: flex;
align-items: center;
}
.buy .round{
width: 15px;
height: 15px;
background-color: red;
border-radius: 50%;
float: right;
padding: 4px;
margin: 4px;
cursor:pointer;
}
.buy .ok{
width: 20px;
height: .5px;
background-color: green;
float: right;
padding: 4px;
margin: 4px;
cursor:pointer;
}
.card_add{
position: fixed;
right: 0;
top: 35%;
padding: 10px 10px;
background-color: #00000082;
border-radius: 10px;
cursor: pointer;
}
.show_add_items{
position: fixed;
right: 120px;
top: 15%;
width: 25vw;
height: 400px;
background-color: #000000c2;
padding: 30px;
border: 5px solid rgb(255, 0, 132);
border-radius: 5px;
box-shadow: 2px 8px 20px 10px rgb(255 0 132);
display: none;
}
</style>
<section class="nav">
<a href="">Home</a>
<a href="#mobile">Mobiles</a>
<a href="#computer">Computers</a>
<a href="#car">car</a>
</section>
<section class="container">
<h1 id="mobile">Mobile secion</h1>
<div class="box">
<div class="product">
<h3>Xioami poco f1</h3>
<p>Price: <b>30000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy1" class="round" onclick="buyOne('Xioami poco f1','buy1')"></div></p>
</div>
</div>
<div class="product">
<h3>Realme s20</h3>
<p>Price: <b>12000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy2" class="round" onclick="buyOne('Realme s20','buy2')"></div></p>
</div>
</div>
<div class="product">
<h3>i phone 11</h3>
<p>Price: <b>45000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy3" class="round" onclick="buyOne('i phone 11','buy3')"></div></p>
</div>
</div>
</div>
<h1 id="computer">Computer secion</h1>
<div class="box">
<div class="product">
<h3>Macbook M1</h3>
<p>Price: <b>120000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy4" class="round" onclick="buyOne('Macbook M1','buy4')"></div></p>
</div>
</div>
<div class="product">
<h3>HP pavilon</h3>
<p>Price: <b>70000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy5" class="round" onclick="buyOne('HP pavilon','buy5')"></div></p>
</div>
</div>
<div class="product">
<h3>Lenovo</h3>
<p>Price: <b>50000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy6" class="round" onclick="buyOne('Lenovo','buy6')"></div></p>
</div>
</div>
</div>
<h1 id="car">Car secion</h1>
<div class="box">
<div class="product">
<h3>Tesla</h3>
<p>Price: <b>4509000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy7" class="round" onclick="buyOne('Tesla','buy7')"></div></p>
</div>
</div>
<div class="product">
<h3>Farary</h3>
<p>Price: <b>9000000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy8" class="round" onclick="buyOne('Farary','buy8')"></div></p>
</div>
</div>
<div class="product">
<h3>Toyota</h3>
<p>Price: <b>200000tk</b></p>
<div class="buy">
<p>Buy: <div id="buy9" class="round" onclick="buyOne('Toyota','buy9')"></div></p>
</div>
</div>
<div onclick="displayProparty()" class="card_add">
<h3 id="addItems">Total items</h3>
<div id="dNone" class="show_add_items">
<h2>Comming soon</h2>
</div>
</div>
</div>
</section>