├── signUp.js
├── signUp.css
├── crazyDeal.js
├── login.css
├── login.js
├── footer.css
├── navbar.js
├── checkOut.css
├── crayzDeal.css
├── showProduct.css
├── checkOut.js
├── navbar.html
├── cart.css
├── login.html
├── signUp.html
├── README.md
├── cart.js
├── showProduct.js
├── footer.html
├── gifting.css
├── new.css
├── perfume.css
├── skin.css
├── bathAndBody.css
├── bestSellers.css
├── shopall.css
├── cart.html
├── showProduct.html
├── gifting.html
├── shopall.html
├── skin.html
├── bathAndBody.html
├── bestSellers.html
├── perfume.html
├── new.html
├── checkOut.html
├── navbar.css
├── crazyDeal.html
├── bestSellers.js
├── gifting.js
├── new.js
├── skin.js
├── bathAndBody.js
├── shopall.js
└── perfume.js


/signUp.js:
--------------------------------------------------------------------------------
 1 | let form = document.querySelector("#form");
 2 | let name = document.querySelector("#name");
 3 | let email = document.querySelector("#email");
 4 | let password = document.querySelector("#password");
 5 | 
 6 | form.addEventListener("submit",function(event){
 7 |     event.preventDefault()
 8 |     // console.log(name.value,email.value,password.value);
 9 |     let userDetail = {
10 |         name: name.value,
11 |         email: email.value,
12 |         password: password.value,
13 |     }
14 |     localStorage.setItem("userDetail",JSON.stringify(userDetail));
15 | })


--------------------------------------------------------------------------------
/signUp.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-family: 'Open Sans', sans-serif;
 3 | }
 4 | h2{
 5 |     /* border: 1px solid black; */
 6 |     text-align: center;
 7 |     margin-top: 40px;
 8 |     margin-bottom: 0px;
 9 | }
10 | #container{
11 |     border: 1px solid black;
12 |     width: 20%;
13 |     margin: 20px auto;
14 |     text-align: center;
15 |     padding: 20px;
16 | }
17 | form>input{
18 |     width: 100%;
19 |     height: 50px;
20 | }
21 | form>#submit{
22 |     width: 103%;
23 |     color: white;
24 |     background-color: black;
25 |     border: none;
26 | }
27 | #submit:hover{
28 |     cursor: pointer;
29 | }
30 | a{
31 |     color: blue;
32 | }
33 | 


--------------------------------------------------------------------------------
/crazyDeal.js:
--------------------------------------------------------------------------------
 1 | let btns = document.querySelectorAll("#crazy-deals-container button")
 2 | let loginBtn = document.querySelector("#login");
 3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated"
 4 | if(isAuth !== "Authenticated"){
 5 |     loginBtn.innerText = "Login";
 6 | }else{
 7 |     loginBtn.innerText = "Logout";
 8 |     loginBtn.addEventListener("click",function(){
 9 |         localStorage.setItem("isAuth", "Not Authenticated");
10 |         window.location.reload();
11 |     })
12 | }
13 | btns.forEach(function(el){
14 |     // console.log(el);
15 |     el.addEventListener("click",function(){
16 |         window.location.href = "./bestSellers.html";
17 |     })
18 | })
19 | 


--------------------------------------------------------------------------------
/login.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-family: 'Open Sans', sans-serif;
 3 | }
 4 | h2{
 5 |     /* border: 1px solid black; */
 6 |     text-align: center;
 7 |     margin-top: 40px;
 8 |     margin-bottom: 0px;
 9 | }
10 | #container{
11 |     border: 1px solid black;
12 |     width: 20%;
13 |     margin: 20px auto;
14 |     text-align: center;
15 |     padding: 20px;
16 | }
17 | form>input{
18 |     width: 100%;
19 |     height: 50px;
20 | }
21 | form>#submit{
22 |     width: 103%;
23 |     color: white;
24 |     background-color: black;
25 |     border: none;
26 | }
27 | #submit:hover{
28 |     cursor: pointer;
29 | }
30 | button{
31 |     border: 1px solid black;
32 |     margin-top: 20px;
33 |     width: 101%;
34 |     height: 50px;
35 |     background-color: transparent;
36 |     font-weight: bold;
37 | }
38 | button:hover{
39 |     cursor: pointer;
40 | }


--------------------------------------------------------------------------------
/login.js:
--------------------------------------------------------------------------------
 1 | let form = document.querySelector("#form");
 2 | // let loginBtn = document.querySelector("#login");
 3 | let email = document.querySelector("#email");
 4 | let password = document.querySelector("#password");
 5 | let btn = document.querySelector("button");
 6 | let checkUserDetail = JSON.parse(localStorage.getItem("userDetail")) || {};
 7 | console.log(checkUserDetail)
 8 | form.addEventListener("submit",function(event){
 9 |     event.preventDefault()
10 |     if(checkUserDetail.email === email.value && checkUserDetail.password === password.value){
11 |         localStorage.setItem("isAuth","Authenticated");
12 |         window.location.href = "./index.html";
13 |         alert("Login Successful");
14 |     }else{
15 |         alert("Wrong Credentials");
16 |     }
17 | })
18 | btn.addEventListener("click",function(){
19 |     window.location.href = "./signUp.html";
20 | })
21 | 
22 | 
23 | 


--------------------------------------------------------------------------------
/footer.css:
--------------------------------------------------------------------------------
 1 | .customer-footer{
 2 | 
 3 |     background-color: #434343;
 4 |     height: 400px;
 5 |     display: flex;
 6 |     justify-content: space-evenly;
 7 |     /* align-items: center;  */
 8 |     padding: 40px;
 9 |     margin-top: 40px;
10 | }
11 | 
12 | .cust-first{
13 |     color: White;
14 |     font-size: 18px;
15 |     font-weight: 700;
16 |     font-family: Arial, Helvetica, sans-serif;
17 |     margin-bottom: 25px;
18 |     display: flex;
19 |     justify-content: space-around;
20 | }
21 | 
22 | .cust-Second{
23 |     color: white;
24 |     font-size: 14px;
25 |     font-family: Arial, Helvetica, sans-serif;
26 |     margin-bottom: 25px;
27 |     align-items: center;
28 |     display: flex;
29 |     justify-content: space-around;
30 | }
31 | 
32 | /* .search-box{
33 |     position: static;
34 |     height: 400px;
35 |     width: 40px;
36 | margin: 200px;
37 | }
38 | .search-box .input-box input{
39 |     position: absolute;
40 |     top: 50%;
41 |     left: 45%;
42 |     border-radius: 4px;
43 |     transform: translate(-50%, -50%);
44 |     height: 35px;
45 |     width: 280px;
46 |     outline: none;
47 |     padding: 0 15px;
48 |     font-size: 16px;
49 |     border: none;
50 | } */
51 | .end{
52 |     background-color: #3E8DA8;
53 |     font-size: 10px;
54 |     display: flex;
55 |     justify-content: center;
56 |     color: white;
57 | }
58 | 
59 | 


--------------------------------------------------------------------------------
/navbar.js:
--------------------------------------------------------------------------------
 1 | // search-box open close
 2 | let navbar = document.querySelector(".navbar");
 3 | let searchBox = document.querySelector(".search-box .bx-search");
 4 | // let searchBoxCancel = document.querySelector(".search-box .bx-x");
 5 | 
 6 | searchBox.addEventListener("click", ()=>{
 7 |   navbar.classList.toggle("showInput");
 8 |   if(navbar.classList.contains("showInput")){
 9 |     searchBox.classList.replace("bx-search" ,"bx-x");
10 |   }else {
11 |     searchBox.classList.replace("bx-x" ,"bx-search");
12 |   }
13 | });
14 | 
15 | // sidebar open close 
16 | let navLinks = document.querySelector(".nav-links");
17 | let menuOpenBtn = document.querySelector(".navbar .bx-menu");
18 | let menuCloseBtn = document.querySelector(".nav-links .bx-x");
19 | menuOpenBtn.onclick = function() {
20 | navLinks.style.left = "0";
21 | }
22 | menuCloseBtn.onclick = function() {
23 | navLinks.style.left = "-100%";
24 | }
25 | 
26 | 
27 | // sidebar submenu open close 
28 | let htmlcssArrow = document.querySelector(".htmlcss-arrow");
29 | htmlcssArrow.onclick = function() {
30 |  navLinks.classList.toggle("show1");
31 | }
32 | let moreArrow = document.querySelector(".more-arrow");
33 | moreArrow.onclick = function() {
34 |  navLinks.classList.toggle("show2");
35 | }
36 | let jsArrow = document.querySelector(".js-arrow");
37 | jsArrow.onclick = function() {
38 |  navLinks.classList.toggle("show3");
39 | }


--------------------------------------------------------------------------------
/checkOut.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-family: 'Open Sans', sans-serif;
 3 | }
 4 | h1{
 5 |     text-align: center;
 6 | }
 7 | #main-checkout{
 8 |     /* border: 1px solid red; */
 9 |     width: 80%;
10 |     margin: auto;
11 |     display: flex;
12 |     /* justify-content: space-around; */
13 |     gap: 100px;
14 |     background-color: #fefefe;
15 |     padding: 20px;
16 |     border: 1px solid #888;
17 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18 |     border-radius: 8px;
19 | }
20 | #input{
21 |     width: 50%;
22 | }
23 | 
24 | #input>form{
25 |     /* border: 1px solid green; */
26 |     display: flex;
27 |     flex-direction: column;
28 |     width: 100%;
29 |     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
30 |     border-radius: 10px;
31 | }
32 | #input>form>input{
33 |     margin: 20px;
34 |     height: 40px;
35 | }
36 | #submit{
37 |     color: white;
38 |     background-color: black;
39 |     font-size: 20px;
40 |     font-weight: bold;
41 |     border: none;
42 | }
43 | 
44 | #amount{
45 |     /* border: 1px solid blue; */
46 |     width: 100%;
47 | }
48 | 
49 | #amount>div{
50 |     /* border: 2px solid black; */
51 |     margin-bottom: 10px;
52 |     border-radius: 10px;
53 |     padding: 15px;
54 |     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
55 | 
56 |     /* height: 40px; */
57 | }


--------------------------------------------------------------------------------
/crayzDeal.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     font-family: 'Open Sans', sans-serif;
 3 | }
 4 | #crazy-deals-container{
 5 |     /* border: 1px solid red; */
 6 |     width: 80%;
 7 |     margin: auto;
 8 | }
 9 | #crazy-deals-container>div{
10 |     /* border: 1px solid blue; */
11 |     display: flex;
12 |     justify-content: center;
13 |     align-items: center;
14 |     margin-bottom: 60px;
15 | }
16 | .image-div{
17 |     /* border: 1px solid green; */
18 |     width: 80%;
19 | }
20 | .image-div>img{
21 |     /* border: 1px solid green; */
22 |     width: 100%;
23 | }
24 | #crazy-deals-container>div>.crazy-deals-margin-left{
25 |     /* border: 1px solid red; */
26 |     margin-left: 100px;
27 |     line-height: 25px;
28 |     font-size: 15px;
29 |     width: 80%;
30 | }
31 | #crazy-deals-container>div>.crazy-deals-margin-right{
32 |     /* border: 1px solid green; */
33 |     margin-right: 100px;
34 |     line-height: 25px;
35 |     font-size: 15px;
36 |     text-align: right;
37 |     width: 80%;
38 | }
39 | #crazy-deals-container button{
40 |     padding:10px 60px;
41 |     color: white;
42 |     background-color: black;
43 |     border:none;
44 |     font-size: 12px;
45 |     font-weight: 500;
46 |     margin-top: 20px;
47 | }
48 | #crazy-deals-container button:hover{
49 |     cursor: pointer;
50 |     animation: bgTransparent 1s ease-in 1 forwards;
51 | }
52 | 
53 | 
54 | @keyframes bgTransparent {
55 |     0%{
56 |         /* opacity: 3; */
57 |         background: rgb(0 0 0/ 1);
58 |     }
59 |     50%{
60 |         /* opacity: 1; */
61 |         background: rgb(0 0 0/ 0.7);
62 |     }
63 |     100%{
64 |         /* opacity: 2; */
65 |         background: rgb(0 0 0/ 1);
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/showProduct.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-family: 'Open Sans', sans-serif;
 3 | }
 4 | h1{
 5 |     text-align: center;
 6 | }
 7 | #product-container{
 8 |     /* border: 1px solid green; */
 9 |     display: flex;
10 |     gap: 100px;
11 |     width: 80%;
12 |     margin: auto;
13 | }
14 | #svg{
15 |     /* border: 1px solid green; */
16 |     display: flex;
17 |     justify-content: center;
18 |     align-items: center;
19 |     gap: 10px;
20 |     margin-top: 20px;
21 |     margin-bottom: 20px;
22 | }
23 | #svg>div{
24 |     /* border: 1px solid blue; */
25 |     background-color: rgb(247, 244, 244);
26 |     text-align: center;
27 |     padding: 10px 0;
28 |     /* height: 100px; */
29 | }
30 | #svg>div>img{
31 |     /* border: 1px solid green; */
32 |     width: 50%;
33 | }
34 | #svg>div>p{
35 |     /* border: 1px solid red; */
36 |     font-size: 14px;
37 | }
38 | .rating {
39 |     /* border: 1px solid green; */
40 |     display: flex;
41 |     /* justify-content: center; */
42 |     align-items: center;
43 |     height: 50px;
44 | }
45 | 
46 | .material-icons {
47 |     /* border: 1px solid green; */
48 |     color: goldenrod;
49 | }
50 | 
51 | button{
52 |     width: 100%;
53 |     height: 50px;
54 |     color: white;
55 |     background-color: black;
56 |     border: none;
57 |     /* font-size: large; */
58 |     font-weight: bold;
59 |     letter-spacing: 3px;
60 | }
61 | button:hover {
62 |     cursor: pointer;
63 |     animation: bgTransparent 1s ease-in 1 forwards;
64 | }
65 | @keyframes bgTransparent {
66 |     0%{
67 |         /* opacity: 3; */
68 |         background: rgb(0 0 0/ 1);
69 |     }
70 |     50%{
71 |         /* opacity: 1; */
72 |         background: rgb(0 0 0/ 0.7);
73 |     }
74 |     100%{
75 |         /* opacity: 2; */
76 |         background: rgb(0 0 0/ 1);
77 |     }
78 | }


--------------------------------------------------------------------------------
/checkOut.js:
--------------------------------------------------------------------------------
 1 | let form = document.querySelector("form");
 2 | let amountDiv = document.querySelector("#amount")
 3 | let cartItem = JSON.parse(localStorage.getItem("cartItems")) || [];
 4 | let loginBtn = document.querySelector("#login");
 5 | console.log(loginBtn);
 6 | 
 7 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
 8 | 
 9 | if(isAuth !== "Authenticated"){
10 |     window.location.href ="./login.html";
11 | }else{
12 |     loginBtn.innerText = "Logout";
13 |     loginBtn.addEventListener("click",function(){
14 |         localStorage.setItem("isAuth", "Not Authenticated");
15 |         window.location.reload();
16 |     })
17 | }
18 | let total = cartItem.reduce(function(accu,el){
19 |     return accu + el.price;
20 | },0)
21 | 
22 | console.log(total);
23 | // let name = document.querySelector("#name");
24 | // let price = document.querySelector("#price");
25 | // let total = document.querySelector("#total");
26 | 
27 | form.addEventListener("submit",function(event){
28 |     event.preventDefault();
29 |     console.log("clicked on submit");
30 |     alert("Order Placed")
31 |     amountDiv.innerHTML = "";
32 | })
33 | cartItem.forEach(function(el){
34 |     console.log(el)
35 |     let div = document.createElement("div")
36 |     let h3 = document.createElement("h3");
37 |     h3.innerText = `Name: ${el.name}`;
38 |     let h4 = document.createElement("h4");
39 |     h4.innerText = `Price: ₹${el.price}`;
40 |     h4.style.color = "tomato"
41 | 
42 |     div.append(h3,h4);
43 |     amountDiv.append(div);
44 | })
45 | let totalDiv = document.createElement("div");
46 | let totalAmount = document.createElement("h4");
47 | totalAmount.innerText = `Total Amount: ₹${total}`;
48 | totalAmount.style.color = "tomato"
49 | 
50 | 
51 | totalDiv.append(totalAmount)
52 | amountDiv.append(totalDiv)


--------------------------------------------------------------------------------
/navbar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |    <title> NAVBAR </title>
 6 |     <link rel="stylesheet" href="navbar.css">
 7 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 8 |      <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |    </head>
10 | <body>
11 |   <nav>
12 |     <div class="navbar">
13 |         <i class='bx bx-menu'></i>
14 |         <div class="logo"><img src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a></div>
15 |         <div class="nav-links">
16 |           <div class="sidebar-logo">
17 |             <span class="logo-name"></span>
18 |             <i class='bx bx-x' ></i>
19 |         </div>
20 |         <ul class="links">
21 |           <!-- <li><a href="./index.html">Home</a></li> -->
22 |           <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
23 |           <li><a href="./shopall.html">SHOP ALL</a></li>
24 |           <li><a href="./bestSellers.html">BESTSELLERS</a></li>
25 |           <li><a href="./perfume.html">PERFUMES</a></li>
26 |           <li><a href="./bathAndBody.html">BATH & BODY</a></li>
27 |           <li><a href="./new.html">NEW ARRIVALS</a></li>
28 |           <li><a href="./skin.html">SKINCARE</a></li>
29 |           <li><a href="./gifting.html">GIFTING</a></li>
30 |           <li><a href="./login.html">Login</a></li>
31 |           <li><a href="./cart.html">Cart</a></li>
32 |         </ul>
33 |       </div>
34 |       <div class="search-box">
35 |         <i class='bx bx-search'></i>
36 |         <div class="input-box">
37 |           <input type="text" placeholder="Search...">
38 |         </div>
39 |       </div>
40 |     </div>
41 |   </nav>
42 |   <script src="navbar.js"></script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/cart.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-family: 'Open Sans', sans-serif;
 3 | }
 4 | h1{
 5 |     
 6 |     text-align: center;
 7 | }
 8 | #total-checkout{
 9 |     border: 1px solid black;
10 |     display: flex;
11 |     justify-content: space-between;
12 |     align-items: center;
13 |     width: 80%;
14 |     margin: auto;
15 |     margin-bottom: 40px;
16 | }
17 | #checkoutBtn{
18 |     width: 20%;
19 |     /* border: 1px solid red; */
20 |     /* height: 100%; */
21 | }
22 | #cart-container{
23 |     /* border: 1px solid green; */
24 |     /* display: flex; */
25 |     /* gap: 100px; */
26 |     width: 80%;
27 |     margin: auto;
28 | }
29 | .flex-div{
30 |     /* border: 1px solid red; */
31 |     display: flex;
32 |     gap: 100px;
33 |     margin-bottom: 20px;
34 | }
35 | /* #imgDiv{
36 |     border: 1px solid red;
37 | 
38 | } */
39 | 
40 | #detailsDiv{
41 |     /* border: 1px solid blue; */
42 |     width: 100%;
43 | }
44 | .rating {
45 |     /* border: 1px solid green; */
46 |     display: flex;
47 |     /* justify-content: center; */
48 |     align-items: center;
49 |     height: 50px;
50 | }
51 | 
52 | .material-icons {
53 |     /* border: 1px solid green; */
54 |     color: goldenrod;
55 | }
56 | 
57 | button{
58 |     width: 100%;
59 |     height: 50px;
60 |     color: white;
61 |     background-color: black;
62 |     border: none;
63 |     /* font-size: large; */
64 |     font-weight: bold;
65 |     letter-spacing: 3px;
66 | }
67 | button:hover {
68 |     cursor: pointer;
69 |     animation: bgTransparent 1s ease-in 1 forwards;
70 | }
71 | @keyframes bgTransparent {
72 |     0%{
73 |         /* opacity: 3; */
74 |         background: rgb(0 0 0/ 1);
75 |     }
76 |     50%{
77 |         /* opacity: 1; */
78 |         background: rgb(0 0 0/ 0.7);
79 |     }
80 |     100%{
81 |         /* opacity: 2; */
82 |         background: rgb(0 0 0/ 1);
83 |     }
84 | }
85 | 
86 | #amount{
87 |     border: 1px solid green;
88 |     /* display: flex; */
89 | }


--------------------------------------------------------------------------------
/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Login</title>
 7 |     <link rel="stylesheet" href="./login.css">
 8 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 9 |     <link rel="stylesheet" href="navbar.css">
10 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
11 | </head>
12 | <body>
13 |     <nav>
14 |         <div class="navbar">
15 |             <i class='bx bx-menu'></i>
16 |             <div class="logo"><a href="./index.html"><img src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a></div>
17 |             <div class="nav-links">
18 |               <div class="sidebar-logo">
19 |                 <span class="logo-name"></span>
20 |                 <i class='bx bx-x' ></i>
21 |             </div>
22 |             <ul class="links">
23 |               <!-- <li><a href="./index.html">Home</a></li> -->
24 |               <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
25 |               <li><a href="./shopall.html">SHOP ALL</a></li>
26 |               <li><a href="./bestSellers.html">BESTSELLERS</a></li>
27 |               <li><a href="./perfume.html">PERFUMES</a></li>
28 |               <li><a href="./bathAndBody.html">BATH & BODY</a></li>
29 |               <li><a href="./new.html">NEW ARRIVALS</a></li>
30 |               <li><a href="./skin.html">SKINCARE</a></li>
31 |               <li><a href="./gifting.html">GIFTING</a></li>
32 |               <li><a id="login" href="./login.html">Login</a></li>
33 |               <li><a href="./cart.html">Cart</a></li>
34 |             </ul>
35 |           </div>
36 |           <div class="search-box">
37 |             <i class='bx bx-search'></i>
38 |             <div class="input-box">
39 |               <input type="text" placeholder="Search...">
40 |             </div>
41 |           </div>
42 |         </div>
43 |       </nav>
44 |     <h2>BELLAVITA</h2>
45 |     <div id="container">
46 |     <h3>Login</h3>
47 |     <form id="form">
48 |         <input id="email" type="email" placeholder="Enter Your E-mail" required>
49 |         <br><br>
50 |         <input id="password" type="password" placeholder="Enter Your Password" required>
51 |         <br><br>
52 |         <input id="submit" type="submit">
53 |     </form>
54 |     <button>Create new account</button>
55 | </div>
56 | </body>
57 | </html>
58 | <script src="login.js"></script>
59 | <script src="./navbar.js"></script>
60 | 


--------------------------------------------------------------------------------
/signUp.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Sign Up</title>
 7 |     <link rel="stylesheet" href="./signUp.css">
 8 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 9 |     <link rel="stylesheet" href="navbar.css">
10 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
11 | </head>
12 | <body>
13 |     <nav>
14 |         <div class="navbar">
15 |             <i class='bx bx-menu'></i>
16 |             <div class="logo"><a href="./index.html"><img src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a></div>
17 |             <div class="nav-links">
18 |               <div class="sidebar-logo">
19 |                 <span class="logo-name"></span>
20 |                 <i class='bx bx-x' ></i>
21 |             </div>
22 |             <ul class="links">
23 |               <!-- <li><a href="./index.html">Home</a></li> -->
24 |               <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
25 |               <li><a href="./shopall.html">SHOP ALL</a></li>
26 |               <li><a href="./bestSellers.html">BESTSELLERS</a></li>
27 |               <li><a href="./perfume.html">PERFUMES</a></li>
28 |               <li><a href="./bathAndBody.html">BATH & BODY</a></li>
29 |               <li><a href="./new.html">NEW ARRIVALS</a></li>
30 |               <li><a href="./skin.html">SKINCARE</a></li>
31 |               <li><a href="./gifting.html">GIFTING</a></li>
32 |               <li><a href="./login.html">Login</a></li>
33 |               <li><a href="./cart.html">Cart</a></li>
34 |             </ul>
35 |           </div>
36 |           <div class="search-box">
37 |             <i class='bx bx-search'></i>
38 |             <div class="input-box">
39 |               <input type="text" placeholder="Search...">
40 |             </div>
41 |           </div>
42 |         </div>
43 |       </nav>
44 |     <h2>BELLAVITA</h2>
45 |     <div id="container">
46 |     <h3>Sign Up</h3>
47 |     <form id="form">
48 |         <input id="name" type="text" placeholder="Enter Your Name" required>
49 |         <br><br>
50 |         <input id="email" type="email" placeholder="Enter Your E-mail" required>
51 |         <br><br>
52 |         <input id="password" type="password" placeholder="Enter Your Password" required>
53 |         <br><br>
54 |         <input id="submit" type="submit">
55 |     </form>
56 |     <p>Already have account? <a href="./login.html">Login</a></p>
57 | </div>
58 | </body>
59 | </html>
60 | <script src="signUp.js"></script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bellavita-Project
 2 | 
 3 | 
 4 | # Overview
 5 | 
 6 | Bellavita is a full-fledged e-commerce website clone designed to offer users a seamless and delightful shopping experience. The project's primary goal is to replicate the functionalities and aesthetics of a modern online cosmetics store, catering to the diverse needs of beauty enthusiasts.
 7 | 
 8 | 
 9 | # Features
10 | 
11 | ## Product Catalog
12 | Categorized Display: Products are organized by brands and types, making it easy for users to navigate and explore.
13 | 
14 | Detailed Product Pages: Each product page includes essential details such as descriptions, prices, and images to help users make informed purchasing decisions.
15 | 
16 | Filtering and Sorting: Users can filter products based on various criteria like price range, brand, and product type. Sorting options are also available for convenience.
17 | 
18 | ## User Authentication and Profile
19 | 
20 | Secure Registration and Login: Users can create accounts securely and log in to access personalized features.
21 | 
22 | User Profile: Registered users have profiles where they can manage their orders, saved items, and personal information.
23 | 
24 | ## Shopping Cart and Checkout
25 | 
26 | Add to Cart: Users can add products to their shopping cart for later purchase.
27 | 
28 | Checkout Process: Seamless checkout process with options for shipping, billing, and payment methods.
29 | 
30 | Order Tracking: Registered users can track their orders and view order history.
31 | 
32 | ## Search Functionality
33 | Quick Search: A search bar allows users to find specific products quickly.
34 | 
35 | Autocomplete and Suggestions: As users type in the search bar, autocomplete suggestions help streamline the search process.
36 | 
37 | ## Responsive Design
38 | 
39 | Mobile-Friendly: Bellavita is fully responsive, ensuring a consistent and optimized experience across devices of all sizes, including smartphones, tablets, and desktops.
40 | 
41 | Fluid Layout: The layout adapts dynamically to different screen resolutions, maintaining usability and aesthetics.
42 | 
43 | # Technologies Used
44 | ## Frontend
45 | HTML5, CSS3 (with modern styling techniques like Flexbox and Grid), JavaScript 
46 | 
47 | # IMAGES
48 | 
49 | ![Screenshot (129)](https://github.com/uttammane1/Bellavita-Project/assets/151371801/40855d7a-7cb9-4e1e-ad74-fd7315fe4d26)
50 | 
51 | ![Screenshot (133)](https://github.com/uttammane1/Bellavita-Project/assets/151371801/cdd90281-877d-4875-b097-03b87f771b8b)
52 | 
53 | ![Screenshot (135)](https://github.com/uttammane1/Bellavita-Project/assets/151371801/77ed4ab0-724c-4552-bac6-dfea981394af)
54 | 
55 | ![Screenshot (136)](https://github.com/uttammane1/Bellavita-Project/assets/151371801/e5d36254-61df-43ef-ba6e-3d6b6b86bb73)
56 | 
57 | ![Screenshot (138)](https://github.com/uttammane1/Bellavita-Project/assets/151371801/a9b76643-da59-4b22-82b6-310a9a6e7f79)
58 | 
59 | ![Screenshot (139)](https://github.com/uttammane1/Bellavita-Project/assets/151371801/a1f70780-98db-459f-9862-110e086fa08b)
60 | 


--------------------------------------------------------------------------------
/cart.js:
--------------------------------------------------------------------------------
  1 | let container = document.querySelector("#cart-container");
  2 | let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
  3 | let loginBtn = document.querySelector("#login");
  4 | console.log(loginBtn);
  5 | 
  6 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  7 | 
  8 | if(isAuth !== "Authenticated"){
  9 |     window.location.href ="./login.html";
 10 | }else{
 11 |     loginBtn.innerText = "Logout";
 12 |     loginBtn.addEventListener("click",function(){
 13 |         localStorage.setItem("isAuth", "Not Authenticated");
 14 |         window.location.reload();
 15 |     })
 16 | }
 17 | 
 18 | let h2 = document.querySelector("h2");
 19 | let chekoutBtn = document.querySelector("#checkoutBtn");
 20 | chekoutBtn.addEventListener("click",function(){
 21 |     window.location.href = "./checkOut.html";
 22 | })
 23 | 
 24 | //Aparna code 
 25 | 
 26 | 
 27 | //Aparna code end
 28 | 
 29 | // console.log(cartArr);
 30 | cartTotal(cartArr)
 31 | function cartTotal(cartArr){
 32 |     let total = cartArr.reduce(function(accu,el){
 33 |         return accu + el.price;
 34 |     },0)
 35 |     h2.innerText = `Total Amount:- ₹${total}`
 36 | }
 37 | cartArr.forEach(function (el) {
 38 |     let flexDiv = document.createElement("div");
 39 |     flexDiv.setAttribute("class","flex-div");
 40 | 
 41 |     let imgDiv = document.createElement("div"); //#imgDiv
 42 |     imgDiv.setAttribute("id","imgDiv");
 43 | 
 44 |     let detailDiv = document.createElement("div"); //#detailsDiv
 45 |     detailDiv.setAttribute("id","detailsDiv");
 46 |     // console.log(img, detail)
 47 | 
 48 |     let img = document.createElement("img");
 49 |     img.src = el.imageUrl;
 50 | 
 51 |     let h2 = document.createElement("h2");
 52 |     h2.innerText = el.name;
 53 |     h2.style.marginBottom = "0"
 54 | 
 55 |     let p1 = document.createElement("p");
 56 |     p1.innerText = el.title;
 57 |     p1.style.color = "grey";
 58 |     p1.style.margin = "0px"
 59 | 
 60 |     // let p2 = document.createElement("p");
 61 |     let ratingDiv = document.createElement("div");
 62 |     ratingDiv.setAttribute("class", "rating")
 63 |     let ratingP = document.createElement("p");
 64 |     ratingP.setAttribute("class", "material-icons")
 65 |     ratingP.innerText = "star"
 66 | 
 67 |     let p2 = document.createElement("p");
 68 |     p2.innerText = el.rating;
 69 | 
 70 |     let p3 = document.createElement("p");
 71 |     p3.innerText = `Price:₹${el.price}`;
 72 |     p3.style.color = "tomato";
 73 |     p3.style.fontSize = "20px";
 74 |     p3.style.fontWeight = "bold";
 75 |     p3.style.margin = "0";
 76 | 
 77 |     let p4 = document.createElement("p");
 78 |     p4.innerText = `M.R.P.:  ₹${el.strikedPrice}`;
 79 |     p4.style.color = "grey";
 80 |     p4.style.marginTop = "0px";
 81 |     p4.style.textDecoration = "line-through";
 82 | 
 83 |     let btn = document.createElement("button");
 84 |     btn.innerText = "REMOVE ITEM";
 85 |     btn.addEventListener("click", function () {
 86 |         removeItem(el.imageUrl);
 87 |         window.location.reload();
 88 |     })
 89 | 
 90 |     ratingDiv.append(ratingP, p2)
 91 |     imgDiv.append(img)
 92 |     detailDiv.append(h2, p1, ratingDiv, p3, p4, btn)
 93 |     flexDiv.append(imgDiv,detailDiv);
 94 |     container.append(flexDiv);
 95 | })
 96 | 
 97 | function removeItem(image){
 98 |     cartArr = cartArr.filter(function(el){
 99 |         return el.imageUrl !== image;
100 |     })
101 |     // console.log(cartArr);
102 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
103 | }
104 | 
105 | 


--------------------------------------------------------------------------------
/showProduct.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | // console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let svgArr = [
 16 |     {
 17 |         imageUrl:"https://bellavitaorganic.com/cdn/shop/files/Long_Lasting_1_70a277fc-8142-4cfb-b036-fc4084c6cee5.svg?crop=center&height=40&v=1694673851&width=40",
 18 |         title:"LONG LASTING"
 19 |     },
 20 |     {
 21 |         imageUrl:"https://bellavitaorganic.com/cdn/shop/files/ifra_1.svg?crop=center&height=40&v=1694674058&width=40",
 22 |         title:"IFRA - CERTIFIED"
 23 |     },
 24 |     {
 25 |         imageUrl:"https://bellavitaorganic.com/cdn/shop/files/Imported_Oils_1.svg?crop=center&height=40&v=1694674059&width=40",
 26 |         title:"IMPORTED OILS"
 27 |     },
 28 |     {
 29 |         imageUrl:"https://bellavitaorganic.com/cdn/shop/files/made_in_india.svg?crop=center&height=40&v=1694092823&width=40",
 30 |         title:"MAKE IN INDIA"
 31 |     },
 32 | ]
 33 | let product = JSON.parse(localStorage.getItem("showProduct")) || {};
 34 | console.log(product)
 35 | 
 36 | let imgDiv = document.querySelector("#imgDiv");
 37 | let detailDiv = document.querySelector("#detailsDiv");
 38 | // console.log(img, detail)
 39 | 
 40 | let img = document.createElement("img");
 41 | img.src = product.imageUrl;
 42 | 
 43 | let h2 = document.createElement("h2");
 44 | h2.innerText = product.name;
 45 | h2.style.marginBottom = "0"
 46 | 
 47 | let p1 = document.createElement("p");
 48 | p1.innerText = product.title;
 49 | p1.style.color = "grey";
 50 | p1.style.margin = "0px"
 51 | 
 52 | // let p2 = document.createElement("p");
 53 | let ratingDiv = document.createElement("div");
 54 | ratingDiv.setAttribute("class", "rating")
 55 | let ratingP = document.createElement("p");
 56 | ratingP.setAttribute("class", "material-icons")
 57 | ratingP.innerText = "star"
 58 | let p2 = document.createElement("p");
 59 | p2.innerText = product.rating;
 60 | 
 61 | let p3 = document.createElement("p");
 62 | p3.innerText = `Price:₹${product.price}`;
 63 | p3.style.color = "tomato";
 64 | p3.style.fontSize = "20px";
 65 | p3.style.fontWeight = "bold";
 66 | p3.style.margin = "0";
 67 | 
 68 | let p4 = document.createElement("p");
 69 | p4.innerText = `M.R.P.:  ₹${product.strikedPrice}`;
 70 | p4.style.color = "grey";
 71 | p4.style.marginTop = "0px";
 72 | p4.style.textDecoration = "line-through";
 73 | 
 74 | let btn = document.createElement("button");
 75 | btn.innerText = "ADD TO CART";
 76 | btn.addEventListener("click",function(){
 77 |     alert("Added to Cart")
 78 |     addToCart(product);
 79 | })
 80 | let svgDiv = document.createElement("div");
 81 | svgDiv.setAttribute("id","svg")
 82 | 
 83 | 
 84 | let para = document.createElement("p");
 85 | para.innerText ="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
 86 | 
 87 | 
 88 | 
 89 | svgArr.forEach(function(el){
 90 |     let div = document.createElement("div");
 91 |     let img2 = document.createElement("img");
 92 |     img2.src = el.imageUrl;
 93 |     let p = document.createElement("p");
 94 |     p.innerText = el.title;
 95 | 
 96 |     div.append(img2,p)
 97 |     svgDiv.append(div)
 98 | })
 99 | 
100 | // console.log(product.imageUrl)
101 | 
102 | ratingDiv.append(ratingP, p2)
103 | imgDiv.append(img)
104 | detailDiv.append(h2,p1,ratingDiv,p3,p4,btn,svgDiv,para)
105 | 
106 | function addToCart(el){
107 |     // console.log(el);
108 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
109 |     cartArr.push(el);
110 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
111 | }


--------------------------------------------------------------------------------
/footer.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Footer</title>
  7 |     <link rel="stylesheet" href="./footer.css">
  8 |     <!-- <style>
  9 |         .customer-footer{
 10 |               background-color: #2569bd;
 11 |               height: 400px;
 12 |               display: flex;
 13 |               justify-content: space-evenly;
 14 |               /* align-items: center;  */
 15 |         }
 16 | 
 17 |         .cust-first{
 18 |               color: black;
 19 |               font-size: 18px;
 20 |               font-weight: 700;
 21 |               font-family: Arial, Helvetica, sans-serif;
 22 |               margin-bottom: 15px;
 23 |               display: flex;
 24 |               justify-content: space-around;
 25 |         }
 26 | 
 27 |         .cust-Second{
 28 |               color: white;
 29 |               font-size: 14px;
 30 |               font-family: Arial, Helvetica, sans-serif;
 31 |               margin-bottom: 10px;
 32 |               align-items: center;
 33 |               display: flex;
 34 |               justify-content: space-around;
 35 |         }
 36 | 
 37 |         .search-box{
 38 |               position: static;
 39 |               height: 400px;
 40 |               width: 40px;
 41 | 
 42 |         }
 43 |         .search-box .input-box input{
 44 |               position: absolute;
 45 |               top: 50%;
 46 |               left: 45%;
 47 |               border-radius: 4px;
 48 |               transform: translate(-50%, -50%);
 49 |               height: 35px;
 50 |               width: 280px;
 51 |               outline: none;
 52 |               padding: 0 15px;
 53 |               font-size: 16px;
 54 |               border: none;
 55 |         }
 56 |         .end{
 57 |               background-color: aqua;
 58 |               font-size: 10px;
 59 |               display: flex;
 60 |               justify-content: center;
 61 | 
 62 |         }
 63 | 
 64 | 
 65 |     </style> -->
 66 | </head>
 67 | <body>
 68 |     <footer>
 69 |         <div class="customer-footer">
 70 |           <div class="cust1">
 71 |             <p class="cust-first">Best Sellers</p>
 72 |             <p class="cust-Second">Ultimate Perfume Box</p>
 73 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 74 |             <p class="cust-Second">Perfume Gift Set For</p>
 75 |             <p class="cust-Second">Women</p>
 76 |             <p class="cust-Second">Under Eye Cream for</p>
 77 |             <p class="cust-Second">Dark Circles</p>
 78 |             <p class="cust-Second">Perfume For Men</p>
 79 |             <p class="cust-Second">Perfume For Women</p>
 80 |             <p class="cust-Second">Unisex Perfume</p>
 81 | 
 82 |           </div>
 83 |           <div class="cust1">
 84 |             <p class="cust-first">INFORMATION</p>
 85 |             <p class="cust-Second">Blogs</p>
 86 |             <p class="cust-Second">Newsroom</p>
 87 |             <p class="cust-Second">Terms & Conditions</p>
 88 |             <p class="cust-Second">Privacy Policy</p>
 89 |             <p class="cust-Second">Refund and Return</p>
 90 |             <p class="cust-Second">Shipping Policy</p>
 91 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 92 | 
 93 |           </div>
 94 |           <div class="cust1">
 95 |             <p class="cust-first">SUPPORT</p>
 96 |             <p class="cust-Second">About Us</p>
 97 |             <p class="cust-Second">Contact Us</p>
 98 |             <p class="cust-Second">Order Tracking</p>
 99 |             <p class="cust-Second">All Products</p>
100 |             <p class="cust-Second">FAQ</p>
101 |             <p class="cust-Second">Sitemap</p>
102 | 
103 |           </div>
104 | 
105 | 
106 |           <!-- <div class="cust1">
107 |             <p class="cust-first">CONTACT US</p>
108 |             <p class="cust-Second">Office Location: Plot no. 417, Udyog Vihar Phase III, Gurgaon, Haryana, India</p>
109 |             <p class="cust-Second">shop@bellavitaorganic.com
110 |                 +91-9311732440
111 |                 
112 |                 Timing: 10:00 AM to 7:00 PM, Monday to Sunday</p>
113 |                 
114 |           </div> -->
115 | 
116 |           <div class="search-box">
117 |             <i class='bx bx-search'></i>
118 |             <div class="input-box">
119 |               <input type="text" placeholder="Enter your E-mail....">
120 |             </div>
121 |           </div>
122 | 
123 |           <div class="cust1">
124 | 
125 | 
126 |       </footer>
127 | 
128 |       <footer>
129 |         <div class="end">
130 |         <h1>
131 |         <b>Code Written By #Team Quantum Nexus</b>
132 |         </h1>
133 |         </div>
134 |       </footer>
135 | 
136 | 
137 | 
138 | </body>
139 | </html>


--------------------------------------------------------------------------------
/gifting.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #bestSellers-container {
 12 |     /* border: 1px solid red; */
 13 |     width: 80%;
 14 |     margin: auto;
 15 | }
 16 | 
 17 | #bestSellers-container>h3 {
 18 |     text-align: center;
 19 |     font-size: 20px;
 20 | }
 21 | 
 22 | #sort-by {
 23 |     /* border: 1px solid blue; */
 24 |     /* width: 20%; */
 25 |     height: 50px;
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 | }
 29 | 
 30 | #sort {
 31 |     border: 1px solid black;
 32 |     width: 20%;
 33 |     height: 100%;
 34 |     font-weight: 500;
 35 |     font-size: 16px;
 36 |     padding-left: 20px;
 37 |     /* background-color: black;
 38 |     color: white; */
 39 | }
 40 | 
 41 | #content {
 42 |     /* border: 1px solid green; */
 43 |     display: grid;
 44 |     grid-template-columns: repeat(4, 1fr);
 45 |     grid-template-rows: auto;
 46 |     gap: 40px;
 47 |     margin-top: 60px;
 48 | }
 49 | 
 50 | /* #content>div{
 51 |     border: 1px solid blue;
 52 | } */
 53 | #content>div>img {
 54 |     width: 100%;
 55 | }
 56 | 
 57 | .hide-text {
 58 |     text-overflow: ellipsis;
 59 |     overflow: hidden;
 60 |     width: 270px;
 61 |     white-space: nowrap;
 62 |     /* height: 1.2em;  */
 63 |     margin: 0px 0px;
 64 | }
 65 | 
 66 | /* p{
 67 |     margin: 10px 0px;
 68 | } */
 69 | img+p {
 70 |     /* border: 1px solid green; */
 71 |     font-size: 12px;
 72 |     text-overflow: ellipsis;
 73 |     overflow: hidden;
 74 |     width: 260px;
 75 |     white-space: nowrap;
 76 |     margin-bottom: 0px;
 77 |     color: grey;
 78 |     font-weight: 500;
 79 | }
 80 | 
 81 | .rating {
 82 |     /* border: 1px solid green; */
 83 |     display: flex;
 84 |     /* justify-content: center; */
 85 |     align-items: center;
 86 |     height: 50px;
 87 | }
 88 | 
 89 | .material-icons {
 90 |     /* border: 1px solid green; */
 91 |     color: rgb(203, 203, 8);
 92 | }
 93 | 
 94 | /* p+p{
 95 |     display: inline-block;
 96 |     border: 1px solid green;
 97 |     margin: 0px 0px;
 98 |     width: 50%;
 99 | 
100 | } */
101 | div+span {
102 |     /* border: 1px solid red; */
103 |     font-size: 20px;
104 |     font-weight: bold;
105 | }
106 | 
107 | span+span {
108 |     /* border: 1px solid green; */
109 |     margin-left: 10px;
110 |     color: grey;
111 | }
112 | 
113 | button {
114 |     /* display: block; */
115 |     width: 100%;
116 |     height: 40px;
117 |     color: white;
118 |     background-color: black;
119 |     border: none;
120 |     /* font-size: large; */
121 |     font-weight: bold;
122 |     letter-spacing: 3px;
123 | }
124 | 
125 | button:hover {
126 |     cursor: pointer;
127 |     animation: bgTransparent 1s ease-in 1 forwards;
128 | }
129 | @keyframes bgTransparent {
130 |     0%{
131 |         /* opacity: 3; */
132 |         background: rgb(0 0 0/ 1);
133 |     }
134 |     50%{
135 |         /* opacity: 1; */
136 |         background: rgb(0 0 0/ 0.7);
137 |     }
138 |     100%{
139 |         /* opacity: 2; */
140 |         background: rgb(0 0 0/ 1);
141 |     }
142 | }
143 | 
144 | 
145 | 
146 | @media all and (min-width:750px) and (max-width:990px) {
147 |     #bestSellers-container {
148 |         /* border: 1px solid red; */
149 |         width: 90%;
150 |         margin: auto;
151 |     }
152 | 
153 |     #content {
154 |         /* border: 1px solid green; */
155 |         display: grid;
156 |         grid-template-columns: repeat(3, 1fr);
157 |         gap: 10px;
158 |     }
159 | 
160 |     .hide-text {
161 |         text-overflow: ellipsis;
162 |         overflow: hidden;
163 |         width: 190px;
164 |         white-space: nowrap;
165 |         /* height: 1.2em;  */
166 |         margin: 0px 0px;
167 |     }
168 | }
169 | 
170 | @media all and (min-width:320px) and (max-width:749px) {
171 |     #bestSellers-container {
172 |         /* border: 1px solid red; */
173 |         width: 95%;
174 |     }
175 | 
176 |     #content {
177 |         /* border: 1px solid green; */
178 |         display: grid;
179 |         grid-template-columns: repeat(2, 1fr);
180 |         grid-template-rows: auto;
181 |         gap: 10px;
182 |         margin-top: 60px;
183 |     }
184 | 
185 |     #sort-by {
186 |         /* border: 1px solid blue; */
187 |         /* width: 20%; */
188 |         height: 50px;
189 |         display: flex;
190 |         justify-content: space-between;
191 |         flex-direction: column;
192 |     }
193 | 
194 |     #sort {
195 |         border: 1px solid black;
196 |         width: 100%;
197 |         height: 100%;
198 |         font-weight: 500;
199 |         font-size: 16px;
200 |         padding-left: 20px;
201 |         /* background-color: black;
202 |     color: white; */
203 |     }
204 | }


--------------------------------------------------------------------------------
/new.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #bestSellers-container {
 12 |     /* border: 1px solid red; */
 13 |     width: 80%;
 14 |     margin: auto;
 15 | }
 16 | 
 17 | #bestSellers-container>h3 {
 18 |     text-align: center;
 19 |     font-size: 20px;
 20 | }
 21 | 
 22 | #sort-by {
 23 |     /* border: 1px solid blue; */
 24 |     /* width: 20%; */
 25 |     height: 50px;
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 | }
 29 | 
 30 | #sort {
 31 |     border: 1px solid black;
 32 |     width: 20%;
 33 |     height: 100%;
 34 |     font-weight: 500;
 35 |     font-size: 16px;
 36 |     padding-left: 20px;
 37 |     /* background-color: black;
 38 |     color: white; */
 39 | }
 40 | 
 41 | #content {
 42 |     /* border: 1px solid green; */
 43 |     display: grid;
 44 |     grid-template-columns: repeat(4, 1fr);
 45 |     grid-template-rows: auto;
 46 |     gap: 40px;
 47 |     margin-top: 60px;
 48 | }
 49 | 
 50 | /* #content>div{
 51 |     border: 1px solid blue;
 52 | } */
 53 | #content>div>img {
 54 |     width: 100%;
 55 | }
 56 | 
 57 | .hide-text {
 58 |     text-overflow: ellipsis;
 59 |     overflow: hidden;
 60 |     width: 270px;
 61 |     white-space: nowrap;
 62 |     /* height: 1.2em;  */
 63 |     margin: 0px 0px;
 64 | }
 65 | 
 66 | /* p{
 67 |     margin: 10px 0px;
 68 | } */
 69 | img+p {
 70 |     /* border: 1px solid green; */
 71 |     font-size: 12px;
 72 |     text-overflow: ellipsis;
 73 |     overflow: hidden;
 74 |     width: 260px;
 75 |     white-space: nowrap;
 76 |     margin-bottom: 0px;
 77 |     color: grey;
 78 |     font-weight: 500;
 79 | }
 80 | 
 81 | .rating {
 82 |     /* border: 1px solid green; */
 83 |     display: flex;
 84 |     /* justify-content: center; */
 85 |     align-items: center;
 86 |     height: 50px;
 87 | }
 88 | 
 89 | .material-icons {
 90 |     /* border: 1px solid green; */
 91 |     color: rgb(203, 203, 8);
 92 | }
 93 | 
 94 | /* p+p{
 95 |     display: inline-block;
 96 |     border: 1px solid green;
 97 |     margin: 0px 0px;
 98 |     width: 50%;
 99 | 
100 | } */
101 | div+span {
102 |     /* border: 1px solid red; */
103 |     font-size: 20px;
104 |     font-weight: bold;
105 | }
106 | 
107 | span+span {
108 |     /* border: 1px solid green; */
109 |     margin-left: 10px;
110 |     color: grey;
111 | }
112 | 
113 | button {
114 |     /* display: block; */
115 |     width: 100%;
116 |     height: 40px;
117 |     color: white;
118 |     background-color: black;
119 |     border: none;
120 |     /* font-size: large; */
121 |     font-weight: bold;
122 |     letter-spacing: 3px;
123 | }
124 | 
125 | button:hover {
126 |     cursor: pointer;
127 |     animation: bgTransparent 1s ease-in 1 forwards;
128 | }
129 | @keyframes bgTransparent {
130 |     0%{
131 |         /* opacity: 3; */
132 |         background: rgb(0 0 0/ 1);
133 |     }
134 |     50%{
135 |         /* opacity: 1; */
136 |         background: rgb(0 0 0/ 0.7);
137 |     }
138 |     100%{
139 |         /* opacity: 2; */
140 |         background: rgb(0 0 0/ 1);
141 |     }
142 | }
143 | 
144 | 
145 | 
146 | @media all and (min-width:750px) and (max-width:990px) {
147 |     #bestSellers-container {
148 |         /* border: 1px solid red; */
149 |         width: 90%;
150 |         margin: auto;
151 |     }
152 | 
153 |     #content {
154 |         /* border: 1px solid green; */
155 |         display: grid;
156 |         grid-template-columns: repeat(3, 1fr);
157 |         gap: 10px;
158 |     }
159 | 
160 |     .hide-text {
161 |         text-overflow: ellipsis;
162 |         overflow: hidden;
163 |         width: 190px;
164 |         white-space: nowrap;
165 |         /* height: 1.2em;  */
166 |         margin: 0px 0px;
167 |     }
168 | }
169 | 
170 | @media all and (min-width:320px) and (max-width:749px) {
171 |     #bestSellers-container {
172 |         /* border: 1px solid red; */
173 |         width: 95%;
174 |     }
175 | 
176 |     #content {
177 |         /* border: 1px solid green; */
178 |         display: grid;
179 |         grid-template-columns: repeat(2, 1fr);
180 |         grid-template-rows: auto;
181 |         gap: 10px;
182 |         margin-top: 60px;
183 |     }
184 | 
185 |     #sort-by {
186 |         /* border: 1px solid blue; */
187 |         /* width: 20%; */
188 |         height: 50px;
189 |         display: flex;
190 |         justify-content: space-between;
191 |         flex-direction: column;
192 |     }
193 | 
194 |     #sort {
195 |         border: 1px solid black;
196 |         width: 100%;
197 |         height: 100%;
198 |         font-weight: 500;
199 |         font-size: 16px;
200 |         padding-left: 20px;
201 |         /* background-color: black;
202 |     color: white; */
203 |     }
204 | }


--------------------------------------------------------------------------------
/perfume.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #bestSellers-container {
 12 |     /* border: 1px solid red; */
 13 |     width: 80%;
 14 |     margin: auto;
 15 | }
 16 | 
 17 | #bestSellers-container>h3 {
 18 |     text-align: center;
 19 |     font-size: 20px;
 20 | }
 21 | 
 22 | #sort-by {
 23 |     /* border: 1px solid blue; */
 24 |     /* width: 20%; */
 25 |     height: 50px;
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 | }
 29 | 
 30 | #sort {
 31 |     border: 1px solid black;
 32 |     width: 20%;
 33 |     height: 100%;
 34 |     font-weight: 500;
 35 |     font-size: 16px;
 36 |     padding-left: 20px;
 37 |     /* background-color: black;
 38 |     color: white; */
 39 | }
 40 | 
 41 | #content {
 42 |     /* border: 1px solid green; */
 43 |     display: grid;
 44 |     grid-template-columns: repeat(4, 1fr);
 45 |     grid-template-rows: auto;
 46 |     gap: 40px;
 47 |     margin-top: 60px;
 48 | }
 49 | 
 50 | /* #content>div{
 51 |     border: 1px solid blue;
 52 | } */
 53 | #content>div>img {
 54 |     width: 100%;
 55 | }
 56 | 
 57 | .hide-text {
 58 |     text-overflow: ellipsis;
 59 |     overflow: hidden;
 60 |     width: 270px;
 61 |     white-space: nowrap;
 62 |     /* height: 1.2em;  */
 63 |     margin: 0px 0px;
 64 | }
 65 | 
 66 | /* p{
 67 |     margin: 10px 0px;
 68 | } */
 69 | img+p {
 70 |     /* border: 1px solid green; */
 71 |     font-size: 12px;
 72 |     text-overflow: ellipsis;
 73 |     overflow: hidden;
 74 |     width: 260px;
 75 |     white-space: nowrap;
 76 |     margin-bottom: 0px;
 77 |     color: grey;
 78 |     font-weight: 500;
 79 | }
 80 | 
 81 | .rating {
 82 |     /* border: 1px solid green; */
 83 |     display: flex;
 84 |     /* justify-content: center; */
 85 |     align-items: center;
 86 |     height: 50px;
 87 | }
 88 | 
 89 | .material-icons {
 90 |     /* border: 1px solid green; */
 91 |     color: rgb(203, 203, 8);
 92 | }
 93 | 
 94 | /* p+p{
 95 |     display: inline-block;
 96 |     border: 1px solid green;
 97 |     margin: 0px 0px;
 98 |     width: 50%;
 99 | 
100 | } */
101 | div+span {
102 |     /* border: 1px solid red; */
103 |     font-size: 20px;
104 |     font-weight: bold;
105 | }
106 | 
107 | span+span {
108 |     /* border: 1px solid green; */
109 |     margin-left: 10px;
110 |     color: grey;
111 | }
112 | 
113 | button {
114 |     /* display: block; */
115 |     width: 100%;
116 |     height: 40px;
117 |     color: white;
118 |     background-color: black;
119 |     border: none;
120 |     /* font-size: large; */
121 |     font-weight: bold;
122 |     letter-spacing: 3px;
123 | }
124 | 
125 | button:hover {
126 |     cursor: pointer;
127 |     animation: bgTransparent 1s ease-in 1 forwards;
128 | }
129 | @keyframes bgTransparent {
130 |     0%{
131 |         /* opacity: 3; */
132 |         background: rgb(0 0 0/ 1);
133 |     }
134 |     50%{
135 |         /* opacity: 1; */
136 |         background: rgb(0 0 0/ 0.7);
137 |     }
138 |     100%{
139 |         /* opacity: 2; */
140 |         background: rgb(0 0 0/ 1);
141 |     }
142 | }
143 | 
144 | 
145 | 
146 | @media all and (min-width:750px) and (max-width:990px) {
147 |     #bestSellers-container {
148 |         /* border: 1px solid red; */
149 |         width: 90%;
150 |         margin: auto;
151 |     }
152 | 
153 |     #content {
154 |         /* border: 1px solid green; */
155 |         display: grid;
156 |         grid-template-columns: repeat(3, 1fr);
157 |         gap: 10px;
158 |     }
159 | 
160 |     .hide-text {
161 |         text-overflow: ellipsis;
162 |         overflow: hidden;
163 |         width: 190px;
164 |         white-space: nowrap;
165 |         /* height: 1.2em;  */
166 |         margin: 0px 0px;
167 |     }
168 | }
169 | 
170 | @media all and (min-width:320px) and (max-width:749px) {
171 |     #bestSellers-container {
172 |         /* border: 1px solid red; */
173 |         width: 95%;
174 |     }
175 | 
176 |     #content {
177 |         /* border: 1px solid green; */
178 |         display: grid;
179 |         grid-template-columns: repeat(2, 1fr);
180 |         grid-template-rows: auto;
181 |         gap: 10px;
182 |         margin-top: 60px;
183 |     }
184 | 
185 |     #sort-by {
186 |         /* border: 1px solid blue; */
187 |         /* width: 20%; */
188 |         height: 50px;
189 |         display: flex;
190 |         justify-content: space-between;
191 |         flex-direction: column;
192 |     }
193 | 
194 |     #sort {
195 |         border: 1px solid black;
196 |         width: 100%;
197 |         height: 100%;
198 |         font-weight: 500;
199 |         font-size: 16px;
200 |         padding-left: 20px;
201 |         /* background-color: black;
202 |     color: white; */
203 |     }
204 | }


--------------------------------------------------------------------------------
/skin.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #bestSellers-container {
 12 |     /* border: 1px solid red; */
 13 |     width: 80%;
 14 |     margin: auto;
 15 | }
 16 | 
 17 | #bestSellers-container>h3 {
 18 |     text-align: center;
 19 |     font-size: 20px;
 20 | }
 21 | 
 22 | #sort-by {
 23 |     /* border: 1px solid blue; */
 24 |     /* width: 20%; */
 25 |     height: 50px;
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 | }
 29 | 
 30 | #sort {
 31 |     border: 1px solid black;
 32 |     width: 20%;
 33 |     height: 100%;
 34 |     font-weight: 500;
 35 |     font-size: 16px;
 36 |     padding-left: 20px;
 37 |     /* background-color: black;
 38 |     color: white; */
 39 | }
 40 | 
 41 | #content {
 42 |     /* border: 1px solid green; */
 43 |     display: grid;
 44 |     grid-template-columns: repeat(4, 1fr);
 45 |     grid-template-rows: auto;
 46 |     gap: 40px;
 47 |     margin-top: 60px;
 48 | }
 49 | 
 50 | /* #content>div{
 51 |     border: 1px solid blue;
 52 | } */
 53 | #content>div>img {
 54 |     width: 100%;
 55 | }
 56 | 
 57 | .hide-text {
 58 |     text-overflow: ellipsis;
 59 |     overflow: hidden;
 60 |     width: 270px;
 61 |     white-space: nowrap;
 62 |     /* height: 1.2em;  */
 63 |     margin: 0px 0px;
 64 | }
 65 | 
 66 | /* p{
 67 |     margin: 10px 0px;
 68 | } */
 69 | img+p {
 70 |     /* border: 1px solid green; */
 71 |     font-size: 12px;
 72 |     text-overflow: ellipsis;
 73 |     overflow: hidden;
 74 |     width: 260px;
 75 |     white-space: nowrap;
 76 |     margin-bottom: 0px;
 77 |     color: grey;
 78 |     font-weight: 500;
 79 | }
 80 | 
 81 | .rating {
 82 |     /* border: 1px solid green; */
 83 |     display: flex;
 84 |     /* justify-content: center; */
 85 |     align-items: center;
 86 |     height: 50px;
 87 | }
 88 | 
 89 | .material-icons {
 90 |     /* border: 1px solid green; */
 91 |     color: rgb(203, 203, 8);
 92 | }
 93 | 
 94 | /* p+p{
 95 |     display: inline-block;
 96 |     border: 1px solid green;
 97 |     margin: 0px 0px;
 98 |     width: 50%;
 99 | 
100 | } */
101 | div+span {
102 |     /* border: 1px solid red; */
103 |     font-size: 20px;
104 |     font-weight: bold;
105 | }
106 | 
107 | span+span {
108 |     /* border: 1px solid green; */
109 |     margin-left: 10px;
110 |     color: grey;
111 | }
112 | 
113 | button {
114 |     /* display: block; */
115 |     width: 100%;
116 |     height: 40px;
117 |     color: white;
118 |     background-color: black;
119 |     border: none;
120 |     /* font-size: large; */
121 |     font-weight: bold;
122 |     letter-spacing: 3px;
123 | }
124 | 
125 | button:hover {
126 |     cursor: pointer;
127 |     animation: bgTransparent 1s ease-in 1 forwards;
128 | }
129 | @keyframes bgTransparent {
130 |     0%{
131 |         /* opacity: 3; */
132 |         background: rgb(0 0 0/ 1);
133 |     }
134 |     50%{
135 |         /* opacity: 1; */
136 |         background: rgb(0 0 0/ 0.7);
137 |     }
138 |     100%{
139 |         /* opacity: 2; */
140 |         background: rgb(0 0 0/ 1);
141 |     }
142 | }
143 | 
144 | 
145 | 
146 | @media all and (min-width:750px) and (max-width:990px) {
147 |     #bestSellers-container {
148 |         /* border: 1px solid red; */
149 |         width: 90%;
150 |         margin: auto;
151 |     }
152 | 
153 |     #content {
154 |         /* border: 1px solid green; */
155 |         display: grid;
156 |         grid-template-columns: repeat(3, 1fr);
157 |         gap: 10px;
158 |     }
159 | 
160 |     .hide-text {
161 |         text-overflow: ellipsis;
162 |         overflow: hidden;
163 |         width: 190px;
164 |         white-space: nowrap;
165 |         /* height: 1.2em;  */
166 |         margin: 0px 0px;
167 |     }
168 | }
169 | 
170 | @media all and (min-width:320px) and (max-width:749px) {
171 |     #bestSellers-container {
172 |         /* border: 1px solid red; */
173 |         width: 95%;
174 |     }
175 | 
176 |     #content {
177 |         /* border: 1px solid green; */
178 |         display: grid;
179 |         grid-template-columns: repeat(2, 1fr);
180 |         grid-template-rows: auto;
181 |         gap: 10px;
182 |         margin-top: 60px;
183 |     }
184 | 
185 |     #sort-by {
186 |         /* border: 1px solid blue; */
187 |         /* width: 20%; */
188 |         height: 50px;
189 |         display: flex;
190 |         justify-content: space-between;
191 |         flex-direction: column;
192 |     }
193 | 
194 |     #sort {
195 |         border: 1px solid black;
196 |         width: 100%;
197 |         height: 100%;
198 |         font-weight: 500;
199 |         font-size: 16px;
200 |         padding-left: 20px;
201 |         /* background-color: black;
202 |     color: white; */
203 |     }
204 | }


--------------------------------------------------------------------------------
/bathAndBody.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #bestSellers-container {
 12 |     /* border: 1px solid red; */
 13 |     width: 80%;
 14 |     margin: auto;
 15 | }
 16 | 
 17 | #bestSellers-container>h3 {
 18 |     text-align: center;
 19 |     font-size: 20px;
 20 | }
 21 | 
 22 | #sort-by {
 23 |     /* border: 1px solid blue; */
 24 |     /* width: 20%; */
 25 |     height: 50px;
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 | }
 29 | 
 30 | #sort {
 31 |     border: 1px solid black;
 32 |     width: 20%;
 33 |     height: 100%;
 34 |     font-weight: 500;
 35 |     font-size: 16px;
 36 |     padding-left: 20px;
 37 |     /* background-color: black;
 38 |     color: white; */
 39 | }
 40 | 
 41 | #content {
 42 |     /* border: 1px solid green; */
 43 |     display: grid;
 44 |     grid-template-columns: repeat(4, 1fr);
 45 |     grid-template-rows: auto;
 46 |     gap: 40px;
 47 |     margin-top: 60px;
 48 | }
 49 | 
 50 | /* #content>div{
 51 |     border: 1px solid blue;
 52 | } */
 53 | #content>div>img {
 54 |     width: 100%;
 55 | }
 56 | 
 57 | .hide-text {
 58 |     text-overflow: ellipsis;
 59 |     overflow: hidden;
 60 |     width: 270px;
 61 |     white-space: nowrap;
 62 |     /* height: 1.2em;  */
 63 |     margin: 0px 0px;
 64 | }
 65 | 
 66 | /* p{
 67 |     margin: 10px 0px;
 68 | } */
 69 | img+p {
 70 |     /* border: 1px solid green; */
 71 |     font-size: 12px;
 72 |     text-overflow: ellipsis;
 73 |     overflow: hidden;
 74 |     width: 260px;
 75 |     white-space: nowrap;
 76 |     margin-bottom: 0px;
 77 |     color: grey;
 78 |     font-weight: 500;
 79 | }
 80 | 
 81 | .rating {
 82 |     /* border: 1px solid green; */
 83 |     display: flex;
 84 |     /* justify-content: center; */
 85 |     align-items: center;
 86 |     height: 50px;
 87 | }
 88 | 
 89 | .material-icons {
 90 |     /* border: 1px solid green; */
 91 |     color: rgb(203, 203, 8);
 92 | }
 93 | 
 94 | /* p+p{
 95 |     display: inline-block;
 96 |     border: 1px solid green;
 97 |     margin: 0px 0px;
 98 |     width: 50%;
 99 | 
100 | } */
101 | div+span {
102 |     /* border: 1px solid red; */
103 |     font-size: 20px;
104 |     font-weight: bold;
105 | }
106 | 
107 | span+span {
108 |     /* border: 1px solid green; */
109 |     margin-left: 10px;
110 |     color: grey;
111 | }
112 | 
113 | button {
114 |     /* display: block; */
115 |     width: 100%;
116 |     height: 40px;
117 |     color: white;
118 |     background-color: black;
119 |     border: none;
120 |     /* font-size: large; */
121 |     font-weight: bold;
122 |     letter-spacing: 3px;
123 | }
124 | 
125 | button:hover {
126 |     cursor: pointer;
127 |     animation: bgTransparent 1s ease-in 1 forwards;
128 | }
129 | @keyframes bgTransparent {
130 |     0%{
131 |         /* opacity: 3; */
132 |         background: rgb(0 0 0/ 1);
133 |     }
134 |     50%{
135 |         /* opacity: 1; */
136 |         background: rgb(0 0 0/ 0.7);
137 |     }
138 |     100%{
139 |         /* opacity: 2; */
140 |         background: rgb(0 0 0/ 1);
141 |     }
142 | }
143 | 
144 | 
145 | 
146 | @media all and (min-width:750px) and (max-width:990px) {
147 |     #bestSellers-container {
148 |         /* border: 1px solid red; */
149 |         width: 90%;
150 |         margin: auto;
151 |     }
152 | 
153 |     #content {
154 |         /* border: 1px solid green; */
155 |         display: grid;
156 |         grid-template-columns: repeat(3, 1fr);
157 |         gap: 10px;
158 |     }
159 | 
160 |     .hide-text {
161 |         text-overflow: ellipsis;
162 |         overflow: hidden;
163 |         width: 190px;
164 |         white-space: nowrap;
165 |         /* height: 1.2em;  */
166 |         margin: 0px 0px;
167 |     }
168 | }
169 | 
170 | @media all and (min-width:320px) and (max-width:749px) {
171 |     #bestSellers-container {
172 |         /* border: 1px solid red; */
173 |         width: 95%;
174 |     }
175 | 
176 |     #content {
177 |         /* border: 1px solid green; */
178 |         display: grid;
179 |         grid-template-columns: repeat(2, 1fr);
180 |         grid-template-rows: auto;
181 |         gap: 10px;
182 |         margin-top: 60px;
183 |     }
184 | 
185 |     #sort-by {
186 |         /* border: 1px solid blue; */
187 |         /* width: 20%; */
188 |         height: 50px;
189 |         display: flex;
190 |         justify-content: space-between;
191 |         flex-direction: column;
192 |     }
193 | 
194 |     #sort {
195 |         border: 1px solid black;
196 |         width: 100%;
197 |         height: 100%;
198 |         font-weight: 500;
199 |         font-size: 16px;
200 |         padding-left: 20px;
201 |         /* background-color: black;
202 |     color: white; */
203 |     }
204 | }


--------------------------------------------------------------------------------
/bestSellers.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #bestSellers-container {
 12 |     /* border: 1px solid red; */
 13 |     width: 80%;
 14 |     margin: auto;
 15 | }
 16 | 
 17 | #bestSellers-container>h3 {
 18 |     text-align: center;
 19 |     font-size: 20px;
 20 | }
 21 | 
 22 | #sort-by {
 23 |     /* border: 1px solid blue; */
 24 |     /* width: 20%; */
 25 |     height: 50px;
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 | }
 29 | 
 30 | #sort {
 31 |     border: 1px solid black;
 32 |     width: 20%;
 33 |     height: 100%;
 34 |     font-weight: 500;
 35 |     font-size: 16px;
 36 |     padding-left: 20px;
 37 |     /* background-color: black;
 38 |     color: white; */
 39 | }
 40 | 
 41 | #content {
 42 |     /* border: 1px solid green; */
 43 |     display: grid;
 44 |     grid-template-columns: repeat(4, 1fr);
 45 |     grid-template-rows: auto;
 46 |     gap: 40px;
 47 |     margin-top: 60px;
 48 | }
 49 | 
 50 | /* #content>div{
 51 |     border: 1px solid blue;
 52 | } */
 53 | #content>div>img {
 54 |     width: 100%;
 55 | }
 56 | 
 57 | .hide-text {
 58 |     text-overflow: ellipsis;
 59 |     overflow: hidden;
 60 |     width: 270px;
 61 |     white-space: nowrap;
 62 |     /* height: 1.2em;  */
 63 |     margin: 0px 0px;
 64 | }
 65 | 
 66 | /* p{
 67 |     margin: 10px 0px;
 68 | } */
 69 | img+p {
 70 |     /* border: 1px solid green; */
 71 |     font-size: 12px;
 72 |     text-overflow: ellipsis;
 73 |     overflow: hidden;
 74 |     width: 260px;
 75 |     white-space: nowrap;
 76 |     margin-bottom: 0px;
 77 |     color: grey;
 78 |     font-weight: 500;
 79 | }
 80 | 
 81 | .rating {
 82 |     /* border: 1px solid green; */
 83 |     display: flex;
 84 |     /* justify-content: center; */
 85 |     align-items: center;
 86 |     height: 50px;
 87 | }
 88 | 
 89 | .material-icons {
 90 |     /* border: 1px solid green; */
 91 |     color: rgb(203, 203, 8);
 92 | }
 93 | 
 94 | /* p+p{
 95 |     display: inline-block;
 96 |     border: 1px solid green;
 97 |     margin: 0px 0px;
 98 |     width: 50%;
 99 | 
100 | } */
101 | div+span {
102 |     /* border: 1px solid red; */
103 |     font-size: 20px;
104 |     font-weight: bold;
105 | }
106 | 
107 | span+span {
108 |     /* border: 1px solid green; */
109 |     margin-left: 10px;
110 |     color: grey;
111 | }
112 | 
113 | button {
114 |     /* display: block; */
115 |     width: 100%;
116 |     height: 40px;
117 |     color: white;
118 |     background-color: black;
119 |     border: none;
120 |     /* font-size: large; */
121 |     font-weight: bold;
122 |     letter-spacing: 3px;
123 | }
124 | 
125 | button:hover {
126 |     cursor: pointer;
127 |     animation: bgTransparent 1s ease-in 1 forwards;
128 | }
129 | @keyframes bgTransparent {
130 |     0%{
131 |         /* opacity: 3; */
132 |         background: rgb(0 0 0/ 1);
133 |     }
134 |     50%{
135 |         /* opacity: 1; */
136 |         background: rgb(0 0 0/ 0.7);
137 |     }
138 |     100%{
139 |         /* opacity: 2; */
140 |         background: rgb(0 0 0/ 1);
141 |     }
142 | }
143 | 
144 | 
145 | 
146 | @media all and (min-width:750px) and (max-width:990px) {
147 |     #bestSellers-container {
148 |         /* border: 1px solid red; */
149 |         width: 90%;
150 |         margin: auto;
151 |     }
152 | 
153 |     #content {
154 |         /* border: 1px solid green; */
155 |         display: grid;
156 |         grid-template-columns: repeat(3, 1fr);
157 |         gap: 10px;
158 |     }
159 | 
160 |     .hide-text {
161 |         text-overflow: ellipsis;
162 |         overflow: hidden;
163 |         width: 190px;
164 |         white-space: nowrap;
165 |         /* height: 1.2em;  */
166 |         margin: 0px 0px;
167 |     }
168 | }
169 | 
170 | @media all and (min-width:320px) and (max-width:749px) {
171 |     #bestSellers-container {
172 |         /* border: 1px solid red; */
173 |         width: 95%;
174 |     }
175 | 
176 |     #content {
177 |         /* border: 1px solid green; */
178 |         display: grid;
179 |         grid-template-columns: repeat(2, 1fr);
180 |         grid-template-rows: auto;
181 |         gap: 10px;
182 |         margin-top: 60px;
183 |     }
184 | 
185 |     #sort-by {
186 |         /* border: 1px solid blue; */
187 |         /* width: 20%; */
188 |         height: 50px;
189 |         display: flex;
190 |         justify-content: space-between;
191 |         flex-direction: column;
192 |     }
193 | 
194 |     #sort {
195 |         border: 1px solid black;
196 |         width: 100%;
197 |         height: 100%;
198 |         font-weight: 500;
199 |         font-size: 16px;
200 |         padding-left: 20px;
201 |         /* background-color: black;
202 |     color: white; */
203 |     }
204 | }


--------------------------------------------------------------------------------
/shopall.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     font-family: 'Open Sans', sans-serif;
  3 |     /* text-overflow: ellipsis;
  4 |     overflow: hidden; 
  5 |     width: 160px; 
  6 |     height: 1.2em; 
  7 |     white-space: nowrap; */
  8 | 
  9 | }
 10 | 
 11 | #shopAll{
 12 |     width: 100%;
 13 |     margin: auto;
 14 | }
 15 | 
 16 | #shopAll>h3{
 17 |     text-align: center;
 18 |     font-size: 20px;
 19 |     font-family: 'Barlow', sans-serif;
 20 |     font-family: 'Playfair Display', serif;
 21 |     }
 22 | 
 23 | #sort-by {
 24 |     /* border: 1px solid blue; */
 25 |     width: 80%;
 26 |     height: 50px;
 27 |     display: flex;
 28 |     justify-content: space-between;
 29 |     margin: auto;
 30 | }
 31 | 
 32 | #sort {
 33 |     border: 1px solid black;
 34 |     width: 20%;
 35 |     height: 100%;
 36 |     font-weight: 500;
 37 |     font-size: 16px;
 38 |     padding-left: 20px;
 39 |     /* background-color: black;
 40 |     color: white; */
 41 | }
 42 | 
 43 | #content {
 44 |     /* border: 1px solid green; */
 45 |     display: grid;
 46 |     grid-template-columns: repeat(4, 1fr);
 47 |     grid-template-rows: auto;
 48 |     gap: 50px;
 49 |     width: 80%;
 50 |     margin: 60px auto;
 51 | }
 52 | 
 53 | /* #content>div{
 54 |     border: 1px solid blue;
 55 | } */
 56 | #content>div>img {
 57 |     width: 100%;
 58 | }
 59 | 
 60 | .hide-text {
 61 |     text-overflow: ellipsis;
 62 |     overflow: hidden;
 63 |     width: 270px;
 64 |     white-space: nowrap;
 65 |     /* height: 1.2em;  */
 66 |     margin: 0px 0px;
 67 | }
 68 | 
 69 | /* p{
 70 |     margin: 10px 0px;
 71 | } */
 72 | img+p {
 73 |     /* border: 1px solid green; */
 74 |     font-size: 12px;
 75 |     text-overflow: ellipsis;
 76 |     overflow: hidden;
 77 |     width: 260px;
 78 |     white-space: nowrap;
 79 |     margin-bottom: 0px;
 80 |     color: grey;
 81 |     font-weight: 500;
 82 | }
 83 | 
 84 | .rating {
 85 |     /* border: 1px solid green; */
 86 |     display: flex;
 87 |     /* justify-content: center; */
 88 |     align-items: center;
 89 |     height: 50px;
 90 | }
 91 | 
 92 | .material-icons {
 93 |     /* border: 1px solid green; */
 94 |     color: rgb(203, 203, 8);
 95 | }
 96 | 
 97 | /* p+p{
 98 |     display: inline-block;
 99 |     border: 1px solid green;
100 |     margin: 0px 0px;
101 |     width: 50%;
102 | 
103 | } */
104 | div+span {
105 |     /* border: 1px solid red; */
106 |     font-size: 20px;
107 |     font-weight: bold;
108 | }
109 | 
110 | span+span {
111 |     /* border: 1px solid green; */
112 |     margin-left: 10px;
113 |     color: grey;
114 | }
115 | 
116 | button {
117 |     /* display: block; */
118 |     width: 100%;
119 |     height: 40px;
120 |     color: white;
121 |     background-color: black;
122 |     border: none;
123 |     /* font-size: large; */
124 |     font-weight: bold;
125 |     letter-spacing: 3px;
126 | }
127 | 
128 | button:hover {
129 |     cursor: pointer;
130 |     animation: bgTransparent 1s ease-in 1 forwards;
131 | }
132 | @keyframes bgTransparent {
133 |     0%{
134 |         /* opacity: 3; */
135 |         background: rgb(0 0 0/ 1);
136 |     }
137 |     50%{
138 |         /* opacity: 1; */
139 |         background: rgb(0 0 0/ 0.5);
140 |     }
141 |     100%{
142 |         /* opacity: 2; */
143 |         background: rgb(0 0 0/ 1);
144 |     }
145 | }
146 | 
147 | 
148 | 
149 | @media all and (min-width:750px) and (max-width:990px) {
150 |     #shopAll {
151 |         /* border: 1px solid red; */
152 |         width: 90%;
153 |         margin: auto;
154 |     }
155 | 
156 |     #content {
157 |         /* border: 1px solid green; */
158 |         display: grid;
159 |         grid-template-columns: repeat(3, 1fr);
160 |         gap: 10px;
161 |     }
162 | 
163 |     .hide-text {
164 |         text-overflow: ellipsis;
165 |         overflow: hidden;
166 |         width: 190px;
167 |         white-space: nowrap;
168 |         /* height: 1.2em;  */
169 |         margin: 0px 0px;
170 |     }
171 | }
172 | 
173 | @media all and (min-width:320px) and (max-width:749px) {
174 |     #shopAll {
175 |         /* border: 1px solid red; */
176 |         width: 95%;
177 |     }
178 | 
179 |     #content {
180 |         /* border: 1px solid green; */
181 |         display: grid;
182 |         grid-template-columns: repeat(2, 1fr);
183 |         grid-template-rows: auto;
184 |         gap: 10px;
185 |         margin-top: 60px;
186 |     }
187 | 
188 |     #sort-by {
189 |         /* border: 1px solid blue; */
190 |         /* width: 20%; */
191 |         height: 50px;
192 |         display: flex;
193 |         justify-content: space-between;
194 |         flex-direction: column;
195 |     }
196 | 
197 |     #sort {
198 |         border: 1px solid black;
199 |         width: 100%;
200 |         height: 100%;
201 |         font-weight: 500;
202 |         font-size: 16px;
203 |         padding-left: 20px;
204 |         /* background-color: black;
205 |     color: white; */
206 |     }
207 | }


--------------------------------------------------------------------------------
/cart.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 
  6 |   <meta charset="UTF-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Cart Page</title>
  9 |   <link rel="stylesheet" href="./cart.css">
 10 |   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 11 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 12 |   <link rel="stylesheet" href="navbar.css">
 13 |   <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 14 |   <link rel="stylesheet" href="./footer.css">
 15 | </head>
 16 | 
 17 | <body>
 18 |   <nav>
 19 |     <div class="navbar">
 20 |       <i class='bx bx-menu'></i>
 21 |       <div class="logo"><a href="./index.html"><img
 22 |             src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 23 |       </div>
 24 |       <div class="nav-links">
 25 |         <div class="sidebar-logo">
 26 |           <span class="logo-name"></span>
 27 |           <i class='bx bx-x'></i>
 28 |         </div>
 29 |         <ul class="links">
 30 |           <!-- <li><a href="./index.html">Home</a></li> -->
 31 |           <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 32 |           <li><a href="./shopall.html">SHOP ALL</a></li>
 33 |           <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 34 |           <li><a href="./perfume.html">PERFUMES</a></li>
 35 |           <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 36 |           <li><a href="./new.html">NEW ARRIVALS</a></li>
 37 |           <li><a href="./skin.html">SKINCARE</a></li>
 38 |           <li><a href="./gifting.html">GIFTING</a></li>
 39 |           <li><a id="login" href="./login.html">Login</a></li>
 40 |           <li><a href="./cart.html">Cart</a></li>
 41 |         </ul>
 42 |       </div>
 43 |       <div class="search-box">
 44 |         <i class='bx bx-search'></i>
 45 |         <div class="input-box">
 46 |           <input type="text" placeholder="Search...">
 47 |         </div>
 48 |       </div>
 49 |     </div>
 50 |   </nav>
 51 |   <h1>- Cart Page -</h1>
 52 |   <div id="total-checkout">
 53 |     <h2>Total</h2>
 54 | 
 55 |     <button id="checkoutBtn">CHECKOUT</button>
 56 |   </div>
 57 | 
 58 | 
 59 |   <div id="cart-container">
 60 | 
 61 |   </div>
 62 |   <footer>
 63 |     <div class="customer-footer">
 64 |       <div class="cust1">
 65 |         <p class="cust-first">BEST SELLER</p>
 66 |         <p class="cust-Second">Ultimate Perfume Box</p>
 67 |         <p class="cust-Second">Perfume Gift Set For Men</p>
 68 |         <p class="cust-Second">Perfume Gift Set For</p>
 69 |         <p class="cust-Second">Women</p>
 70 |         <p class="cust-Second">Under Eye Cream for</p>
 71 |         <p class="cust-Second">Dark Circles</p>
 72 |         <p class="cust-Second">Perfume For Men</p>
 73 |         <!-- <p class="cust-Second">Perfume For Women</p>
 74 |             <p class="cust-Second">Unisex Perfume</p> -->
 75 | 
 76 |       </div>
 77 |       <div class="cust1">
 78 |         <p class="cust-first">INFORMATION</p>
 79 |         <p class="cust-Second">Blogs</p>
 80 |         <p class="cust-Second">Newsroom</p>
 81 |         <p class="cust-Second">Terms & Conditions</p>
 82 |         <p class="cust-Second">Privacy Policy</p>
 83 |         <p class="cust-Second">Refund and Return</p>
 84 |         <p class="cust-Second">Shipping Policy</p>
 85 |         <p class="cust-Second">Bulk Order - GST Invoice</p>
 86 | 
 87 |       </div>
 88 |       <div class="cust1">
 89 |         <p class="cust-first">SUPPORT</p>
 90 |         <p class="cust-Second">About Us</p>
 91 |         <p class="cust-Second">Contact Us</p>
 92 |         <p class="cust-Second">Order Tracking</p>
 93 |         <p class="cust-Second">All Products</p>
 94 |         <p class="cust-Second">FAQ</p>
 95 |         <p class="cust-Second">Sitemap</p>
 96 | 
 97 |       </div>
 98 |       <div class="cust1">
 99 |         <p class="cust-first">Exclusive</p>
100 |         <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
101 |         <p class="cust-Second">Sign up here to get the latest news,</p>
102 |         <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
103 |         <p class="cust-Second">shop@bellavitaorganic.com</p>
104 |         <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
105 |         <p class="cust-Second">+91-9311732440</p>
106 |       </div>
107 |     </div>
108 |   </footer>
109 | 
110 |   <footer>
111 |     <div class="end">
112 |       <h1>
113 |         <b>Code Written By #Team Quantum Nexus</b>
114 |       </h1>
115 |     </div>
116 |   </footer>
117 | </body>
118 | 
119 | </html>
120 | <script src="./cart.js"></script>
121 | <script src="./navbar.js"></script>
122 | 
123 | 
124 | <!-- <div id="imgDiv"></div>
125 |         <div id="detailsDiv"></div> -->


--------------------------------------------------------------------------------
/showProduct.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Product</title>
  8 |     <link rel="stylesheet" href="./showProduct.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 |     <nav>
 19 |         <div class="navbar">
 20 |             <i class='bx bx-menu'></i>
 21 |             <div class="logo"><a href="./index.html"><img
 22 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 23 |             </div>
 24 |             <div class="nav-links">
 25 |                 <div class="sidebar-logo">
 26 |                     <span class="logo-name"></span>
 27 |                     <i class='bx bx-x'></i>
 28 |                 </div>
 29 |                 <ul class="links">
 30 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 31 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 32 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 33 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 34 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 35 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 36 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 37 |                     <li><a href="./skin.html">SKINCARE</a></li>
 38 |                     <li><a href="./gifting.html">GIFTING</a></li>
 39 |                     <li><a id="login" href="./login.html">Login</a></li>
 40 |                     <li><a href="./cart.html">Cart</a></li>
 41 |                 </ul>
 42 |             </div>
 43 |             <div class="search-box">
 44 |                 <i class='bx bx-search'></i>
 45 |                 <div class="input-box">
 46 |                     <input type="text" placeholder="Search...">
 47 |                 </div>
 48 |             </div>
 49 |         </div>
 50 |     </nav>
 51 |     <h1>- Product Detail -</h1>
 52 |     <div id="product-container">
 53 |         <div id="imgDiv"></div>
 54 |         <div id="detailsDiv"></div>
 55 |     </div>
 56 | 
 57 |     <footer>
 58 |         <div class="customer-footer">
 59 |           <div class="cust1">
 60 |             <p class="cust-first">BEST SELLER</p>
 61 |             <p class="cust-Second">Ultimate Perfume Box</p>
 62 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 63 |             <p class="cust-Second">Perfume Gift Set For</p>
 64 |             <p class="cust-Second">Women</p>
 65 |             <p class="cust-Second">Under Eye Cream for</p>
 66 |             <p class="cust-Second">Dark Circles</p>
 67 |             <p class="cust-Second">Perfume For Men</p>
 68 |             <!-- <p class="cust-Second">Perfume For Women</p>
 69 |             <p class="cust-Second">Unisex Perfume</p> -->
 70 | 
 71 |           </div>
 72 |           <div class="cust1">
 73 |             <p class="cust-first">INFORMATION</p>
 74 |             <p class="cust-Second">Blogs</p>
 75 |             <p class="cust-Second">Newsroom</p>
 76 |             <p class="cust-Second">Terms & Conditions</p>
 77 |             <p class="cust-Second">Privacy Policy</p>
 78 |             <p class="cust-Second">Refund and Return</p>
 79 |             <p class="cust-Second">Shipping Policy</p>
 80 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 81 | 
 82 |           </div>
 83 |           <div class="cust1">
 84 |             <p class="cust-first">SUPPORT</p>
 85 |             <p class="cust-Second">About Us</p>
 86 |             <p class="cust-Second">Contact Us</p>
 87 |             <p class="cust-Second">Order Tracking</p>
 88 |             <p class="cust-Second">All Products</p>
 89 |             <p class="cust-Second">FAQ</p>
 90 |             <p class="cust-Second">Sitemap</p>
 91 | 
 92 |           </div>
 93 |           <div class="cust1">
 94 |             <p class="cust-first">Exclusive</p>
 95 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
 96 |             <p class="cust-Second">Sign up here to get the latest news,</p>
 97 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
 98 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
 99 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
100 |             <p class="cust-Second">+91-9311732440</p>
101 |           </div>
102 |         </div>
103 |       </footer>
104 | 
105 |       <footer>
106 |         <div class="end">
107 |         <h1>
108 |         <b>Code Written By #Team Quantum Nexus</b>
109 |         </h1>
110 |         </div>
111 |       </footer>
112 | </body>
113 | 
114 | </html>
115 | <script src="showProduct.js"></script>
116 | <script src="./navbar.js"></script>
117 | 


--------------------------------------------------------------------------------
/gifting.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Gift</title>
  8 |     <link rel="stylesheet" href="./gifting.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 |     <nav>
 19 |         <div class="navbar">
 20 |             <i class='bx bx-menu'></i>
 21 |             <div class="logo"><a href="./index.html"><img
 22 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 23 |             </div>
 24 |             <div class="nav-links">
 25 |                 <div class="sidebar-logo">
 26 |                     <span class="logo-name"></span>
 27 |                     <i class='bx bx-x'></i>
 28 |                 </div>
 29 |                 <ul class="links">
 30 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 31 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 32 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 33 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 34 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 35 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 36 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 37 |                     <li><a href="./skin.html">SKINCARE</a></li>
 38 |                     <li><a href="./gifting.html">GIFTING</a></li>
 39 |                     <li><a id="login" href="./login.html">Login</a></li>
 40 |                     <li><a href="./cart.html">Cart</a></li>
 41 |                 </ul>
 42 |             </div>
 43 |             <div class="search-box">
 44 |                 <i class='bx bx-search'></i>
 45 |                 <div class="input-box">
 46 |                     <input type="text" placeholder="Search...">
 47 |                 </div>
 48 |             </div>
 49 |         </div>
 50 |     </nav>
 51 |     <div id="bestSellers-container">
 52 |         <h3>Gift Sets</h3>
 53 |         <div id="sort-by">
 54 |             <select id="sort">
 55 |                 <option value="">SORT BY:</option>
 56 |                 <option value="lowToHigh">Price, low to high</option>
 57 |                 <option value="highToLow">Price, high to low</option>
 58 |             </select>
 59 |             <p id="productNumber">25</p>
 60 |         </div>
 61 |         <div id="content">
 62 |         </div>
 63 |     </div>
 64 |     <footer>
 65 |         <div class="customer-footer">
 66 |           <div class="cust1">
 67 |             <p class="cust-first">BEST SELLER</p>
 68 |             <p class="cust-Second">Ultimate Perfume Box</p>
 69 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 70 |             <p class="cust-Second">Perfume Gift Set For</p>
 71 |             <p class="cust-Second">Women</p>
 72 |             <p class="cust-Second">Under Eye Cream for</p>
 73 |             <p class="cust-Second">Dark Circles</p>
 74 |             <p class="cust-Second">Perfume For Men</p>
 75 |             <!-- <p class="cust-Second">Perfume For Women</p>
 76 |             <p class="cust-Second">Unisex Perfume</p> -->
 77 | 
 78 |           </div>
 79 |           <div class="cust1">
 80 |             <p class="cust-first">INFORMATION</p>
 81 |             <p class="cust-Second">Blogs</p>
 82 |             <p class="cust-Second">Newsroom</p>
 83 |             <p class="cust-Second">Terms & Conditions</p>
 84 |             <p class="cust-Second">Privacy Policy</p>
 85 |             <p class="cust-Second">Refund and Return</p>
 86 |             <p class="cust-Second">Shipping Policy</p>
 87 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 88 | 
 89 |           </div>
 90 |           <div class="cust1">
 91 |             <p class="cust-first">SUPPORT</p>
 92 |             <p class="cust-Second">About Us</p>
 93 |             <p class="cust-Second">Contact Us</p>
 94 |             <p class="cust-Second">Order Tracking</p>
 95 |             <p class="cust-Second">All Products</p>
 96 |             <p class="cust-Second">FAQ</p>
 97 |             <p class="cust-Second">Sitemap</p>
 98 | 
 99 |           </div>
100 |           <div class="cust1">
101 |             <p class="cust-first">Exclusive</p>
102 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
103 |             <p class="cust-Second">Sign up here to get the latest news,</p>
104 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
105 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
106 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
107 |             <p class="cust-Second">+91-9311732440</p>
108 |           </div>
109 |         </div>
110 |       </footer>
111 | 
112 |       <footer>
113 |         <div class="end">
114 |         <h1>
115 |         <b>Code Written By #Team Quantum Nexus</b>
116 |         </h1>
117 |         </div>
118 |       </footer>
119 | </body>
120 | 
121 | </html>
122 | <script src="./gifting.js"></script>
123 | <script src="./navbar.js"></script>
124 | 
125 | <!-- <span class="material-icons-outlined">
126 |     star
127 |     </span> -->


--------------------------------------------------------------------------------
/shopall.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>shopAll</title>
  8 |     <link rel="stylesheet" href="./shopall.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 |     <nav>
 19 |         <div class="navbar">
 20 |             <i class='bx bx-menu'></i>
 21 |             <div class="logo"><a href="./index.html"><img
 22 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 23 |             </div>
 24 |             <div class="nav-links">
 25 |                 <div class="sidebar-logo">
 26 |                     <span class="logo-name"></span>
 27 |                     <i class='bx bx-x'></i>
 28 |                 </div>
 29 |                 <ul class="links">
 30 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 31 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 32 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 33 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 34 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 35 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 36 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 37 |                     <li><a href="./skin.html">SKINCARE</a></li>
 38 |                     <li><a href="./gifting.html">GIFTING</a></li>
 39 |                     <li><a id="login" href="./login.html">Login</a></li>
 40 |                     <li><a href="./cart.html">Cart</a></li>
 41 |                 </ul>
 42 |             </div>
 43 |             <div class="search-box">
 44 |                 <i class='bx bx-search'></i>
 45 |                 <div class="input-box">
 46 |                     <input type="text" placeholder="Search...">
 47 |                 </div>
 48 |             </div>
 49 |         </div>
 50 |     </nav>
 51 |     <div id="shopAll">
 52 |         <h3>ALL PRODUCTS</h3>
 53 |         <div id="sort-by">
 54 |             <select id="sort">
 55 |                 <option value="">SORT BY</option>
 56 |                 <option value="lowToHigh">Price, low to high</option>
 57 |                 <option value="highToLow">Price, high to low</option>
 58 | 
 59 |             </select>
 60 |             <p id="productNumber">25</p>
 61 |         </div>
 62 |         <div id="content">
 63 | 
 64 |         </div>
 65 |     </div>
 66 |     <footer>
 67 |         <div class="customer-footer">
 68 |           <div class="cust1">
 69 |             <p class="cust-first">BEST SELLER</p>
 70 |             <p class="cust-Second">Ultimate Perfume Box</p>
 71 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 72 |             <p class="cust-Second">Perfume Gift Set For</p>
 73 |             <p class="cust-Second">Women</p>
 74 |             <p class="cust-Second">Under Eye Cream for</p>
 75 |             <p class="cust-Second">Dark Circles</p>
 76 |             <p class="cust-Second">Perfume For Men</p>
 77 |             <!-- <p class="cust-Second">Perfume For Women</p>
 78 |             <p class="cust-Second">Unisex Perfume</p> -->
 79 | 
 80 |           </div>
 81 |           <div class="cust1">
 82 |             <p class="cust-first">INFORMATION</p>
 83 |             <p class="cust-Second">Blogs</p>
 84 |             <p class="cust-Second">Newsroom</p>
 85 |             <p class="cust-Second">Terms & Conditions</p>
 86 |             <p class="cust-Second">Privacy Policy</p>
 87 |             <p class="cust-Second">Refund and Return</p>
 88 |             <p class="cust-Second">Shipping Policy</p>
 89 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 90 | 
 91 |           </div>
 92 |           <div class="cust1">
 93 |             <p class="cust-first">SUPPORT</p>
 94 |             <p class="cust-Second">About Us</p>
 95 |             <p class="cust-Second">Contact Us</p>
 96 |             <p class="cust-Second">Order Tracking</p>
 97 |             <p class="cust-Second">All Products</p>
 98 |             <p class="cust-Second">FAQ</p>
 99 |             <p class="cust-Second">Sitemap</p>
100 | 
101 |           </div>
102 |           <div class="cust1">
103 |             <p class="cust-first">Exclusive</p>
104 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
105 |             <p class="cust-Second">Sign up here to get the latest news,</p>
106 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
107 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
108 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
109 |             <p class="cust-Second">+91-9311732440</p>
110 |           </div>
111 |         </div>
112 |       </footer>
113 | 
114 |       <footer>
115 |         <div class="end">
116 |         <h1>
117 |         <b>Code Written By #Team Quantum Nexus</b>
118 |         </h1>
119 |         </div>
120 |       </footer>
121 | </body>
122 | 
123 | </html>
124 | <script src="./shopall.js"></script>
125 | <script src="./navbar.js"></script>
126 | 
127 | <!-- <span class="material-icons-outlined">
128 |     star
129 |     </span> -->


--------------------------------------------------------------------------------
/skin.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Skincare</title>
  8 |     <link rel="stylesheet" href="./skin.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | </head>
 15 | 
 16 | <body>
 17 |     <nav>
 18 |         <div class="navbar">
 19 |             <i class='bx bx-menu'></i>
 20 |             <div class="logo"><a href="./index.html"><img
 21 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 22 |             </div>
 23 |             <div class="nav-links">
 24 |                 <div class="sidebar-logo">
 25 |                     <span class="logo-name"></span>
 26 |                     <i class='bx bx-x'></i>
 27 |                 </div>
 28 |                 <ul class="links">
 29 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 30 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 31 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 32 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 33 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 34 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 35 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 36 |                     <li><a href="./skin.html">SKINCARE</a></li>
 37 |                     <li><a href="./gifting.html">GIFTING</a></li>
 38 |                     <li><a id="login" href="./login.html">Login</a></li>
 39 |                     <li><a href="./cart.html">Cart</a></li>
 40 |                 </ul>
 41 |             </div>
 42 |             <div class="search-box">
 43 |                 <i class='bx bx-search'></i>
 44 |                 <div class="input-box">
 45 |                     <input type="text" placeholder="Search...">
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 |     </nav>
 50 |     <div id="bestSellers-container">
 51 |         <h3>- Skincare Products -</h3>
 52 |         <div id="sort-by">
 53 |             <select id="sort">
 54 |                 <option value="">SORT BY:</option>
 55 |                 <option value="lowToHigh">Price, low to high</option>
 56 |                 <option value="highToLow">Price, high to low</option>
 57 |             </select>
 58 |             <p id="productNumber">25</p>
 59 |         </div>
 60 |         <div id="content">
 61 | 
 62 |         </div>
 63 |     </div>
 64 |     <footer>
 65 |         <div class="customer-footer">
 66 |           <div class="cust1">
 67 |             <p class="cust-first">BEST SELLER</p>
 68 |             <p class="cust-Second">Ultimate Perfume Box</p>
 69 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 70 |             <p class="cust-Second">Perfume Gift Set For</p>
 71 |             <p class="cust-Second">Women</p>
 72 |             <p class="cust-Second">Under Eye Cream for</p>
 73 |             <p class="cust-Second">Dark Circles</p>
 74 |             <p class="cust-Second">Perfume For Men</p>
 75 |             <!-- <p class="cust-Second">Perfume For Women</p>
 76 |             <p class="cust-Second">Unisex Perfume</p> -->
 77 | 
 78 |           </div>
 79 |           <div class="cust1">
 80 |             <p class="cust-first">INFORMATION</p>
 81 |             <p class="cust-Second">Blogs</p>
 82 |             <p class="cust-Second">Newsroom</p>
 83 |             <p class="cust-Second">Terms & Conditions</p>
 84 |             <p class="cust-Second">Privacy Policy</p>
 85 |             <p class="cust-Second">Refund and Return</p>
 86 |             <p class="cust-Second">Shipping Policy</p>
 87 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 88 | 
 89 |           </div>
 90 |           <div class="cust1">
 91 |             <p class="cust-first">SUPPORT</p>
 92 |             <p class="cust-Second">About Us</p>
 93 |             <p class="cust-Second">Contact Us</p>
 94 |             <p class="cust-Second">Order Tracking</p>
 95 |             <p class="cust-Second">All Products</p>
 96 |             <p class="cust-Second">FAQ</p>
 97 |             <p class="cust-Second">Sitemap</p>
 98 | 
 99 |           </div>
100 |           <div class="cust1">
101 |             <p class="cust-first">Exclusive</p>
102 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
103 |             <p class="cust-Second">Sign up here to get the latest news,</p>
104 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
105 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
106 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
107 |             <p class="cust-Second">+91-9311732440</p>
108 |           </div>
109 |         </div>
110 |       </footer>
111 | 
112 |       <footer>
113 |         <div class="end">
114 |         <h1>
115 |         <b>Code Written By #Team Quantum Nexus</b>
116 |         </h1>
117 |         </div>
118 |       </footer>
119 | </body>
120 | 
121 | </html>
122 | <script src="./skin.js"></script>
123 | <script src="./navbar.js"></script>
124 | 
125 | <!-- <span class="material-icons-outlined">
126 |     star
127 |     </span> -->


--------------------------------------------------------------------------------
/bathAndBody.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Bath And Body Product</title>
  8 |     <link rel="stylesheet" href="./bathAndBody.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | </head>
 15 | 
 16 | <body>
 17 |     <nav>
 18 |         <div class="navbar">
 19 |             <i class='bx bx-menu'></i>
 20 |             <div class="logo"><a href="./index.html"><img
 21 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 22 |             </div>
 23 |             <div class="nav-links">
 24 |                 <div class="sidebar-logo">
 25 |                     <span class="logo-name"></span>
 26 |                     <i class='bx bx-x'></i>
 27 |                 </div>
 28 |                 <ul class="links">
 29 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 30 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 31 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 32 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 33 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 34 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 35 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 36 |                     <li><a href="./skin.html">SKINCARE</a></li>
 37 |                     <li><a href="./gifting.html">GIFTING</a></li>
 38 |                     <li><a id="login" href="./login.html">Login</a></li>
 39 |                     <li><a href="./cart.html">Cart</a></li>
 40 |                 </ul>
 41 |             </div>
 42 |             <div class="search-box">
 43 |                 <i class='bx bx-search'></i>
 44 |                 <div class="input-box">
 45 |                     <input type="text" placeholder="Search...">
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 |     </nav>
 50 |     <div id="bestSellers-container">
 51 |         <h3>- Bath And Body -</h3>
 52 |         <div id="sort-by">
 53 |             <select id="sort">
 54 |                 <option value="">SORT BY:</option>
 55 |                 <option value="lowToHigh">Price, low to high</option>
 56 |                 <option value="highToLow">Price, high to low</option>
 57 |             </select>
 58 |             <p id="productNumber">25</p>
 59 |         </div>
 60 |         <div id="content">
 61 | 
 62 |         </div>
 63 |     </div>
 64 |     <footer>
 65 |         <div class="customer-footer">
 66 |           <div class="cust1">
 67 |             <p class="cust-first">BEST SELLER</p>
 68 |             <p class="cust-Second">Ultimate Perfume Box</p>
 69 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 70 |             <p class="cust-Second">Perfume Gift Set For</p>
 71 |             <p class="cust-Second">Women</p>
 72 |             <p class="cust-Second">Under Eye Cream for</p>
 73 |             <p class="cust-Second">Dark Circles</p>
 74 |             <p class="cust-Second">Perfume For Men</p>
 75 |             <!-- <p class="cust-Second">Perfume For Women</p>
 76 |             <p class="cust-Second">Unisex Perfume</p> -->
 77 | 
 78 |           </div>
 79 |           <div class="cust1">
 80 |             <p class="cust-first">INFORMATION</p>
 81 |             <p class="cust-Second">Blogs</p>
 82 |             <p class="cust-Second">Newsroom</p>
 83 |             <p class="cust-Second">Terms & Conditions</p>
 84 |             <p class="cust-Second">Privacy Policy</p>
 85 |             <p class="cust-Second">Refund and Return</p>
 86 |             <p class="cust-Second">Shipping Policy</p>
 87 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 88 | 
 89 |           </div>
 90 |           <div class="cust1">
 91 |             <p class="cust-first">SUPPORT</p>
 92 |             <p class="cust-Second">About Us</p>
 93 |             <p class="cust-Second">Contact Us</p>
 94 |             <p class="cust-Second">Order Tracking</p>
 95 |             <p class="cust-Second">All Products</p>
 96 |             <p class="cust-Second">FAQ</p>
 97 |             <p class="cust-Second">Sitemap</p>
 98 | 
 99 |           </div>
100 |           <div class="cust1">
101 |             <p class="cust-first">Exclusive</p>
102 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
103 |             <p class="cust-Second">Sign up here to get the latest news,</p>
104 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
105 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
106 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
107 |             <p class="cust-Second">+91-9311732440</p>
108 |           </div>
109 |         </div>
110 |       </footer>
111 | 
112 |       <footer>
113 |         <div class="end">
114 |         <h1>
115 |         <b>Code Written By #Team Quantum Nexus</b>
116 |         </h1>
117 |         </div>
118 |       </footer>
119 | 
120 | </body>
121 | 
122 | </html>
123 | <script src="./bathAndBody.js"></script>
124 | <script src="./navbar.js"></script>
125 | <!-- <span class="material-icons-outlined">
126 |     star
127 |     </span> -->


--------------------------------------------------------------------------------
/bestSellers.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Best Sellers</title>
  8 |     <link rel="stylesheet" href="./bestSellers.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 |     <nav>
 19 |         <div class="navbar">
 20 |             <i class='bx bx-menu'></i>
 21 |             <div class="logo"><a href="./index.html"><img
 22 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 23 |             </div>
 24 |             <div class="nav-links">
 25 |                 <div class="sidebar-logo">
 26 |                     <span class="logo-name"></span>
 27 |                     <i class='bx bx-x'></i>
 28 |                 </div>
 29 |                 <ul class="links">
 30 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 31 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 32 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 33 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 34 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 35 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 36 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 37 |                     <li><a href="./skin.html">SKINCARE</a></li>
 38 |                     <li><a href="./gifting.html">GIFTING</a></li>
 39 |                     <li><a id="login" href="./login.html">Login</a></li>
 40 |                     <li><a href="./cart.html">Cart</a></li>
 41 |                 </ul>
 42 |             </div>
 43 |             <div class="search-box">
 44 |                 <i class='bx bx-search'></i>
 45 |                 <div class="input-box">
 46 |                     <input type="text" placeholder="Search...">
 47 |                 </div>
 48 |             </div>
 49 |         </div>
 50 |     </nav>
 51 |     <div id="bestSellers-container">
 52 |         <h3>Bestsellers</h3>
 53 |         <div id="sort-by">
 54 |             <select id="sort">
 55 |                 <option value="">SORT BY:</option>
 56 |                 <option value="lowToHigh">Price, low to high</option>
 57 |                 <option value="highToLow">Price, high to low</option>
 58 |             </select>
 59 |             <p id="productNumber">25</p>
 60 |         </div>
 61 |         <div id="content">
 62 | 
 63 |         </div>
 64 |     </div>
 65 |     <footer>
 66 |         <div class="customer-footer">
 67 |           <div class="cust1">
 68 |             <p class="cust-first">BEST SELLER</p>
 69 |             <p class="cust-Second">Ultimate Perfume Box</p>
 70 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 71 |             <p class="cust-Second">Perfume Gift Set For</p>
 72 |             <p class="cust-Second">Women</p>
 73 |             <p class="cust-Second">Under Eye Cream for</p>
 74 |             <p class="cust-Second">Dark Circles</p>
 75 |             <p class="cust-Second">Perfume For Men</p>
 76 |             <!-- <p class="cust-Second">Perfume For Women</p>
 77 |             <p class="cust-Second">Unisex Perfume</p> -->
 78 | 
 79 |           </div>
 80 |           <div class="cust1">
 81 |             <p class="cust-first">INFORMATION</p>
 82 |             <p class="cust-Second">Blogs</p>
 83 |             <p class="cust-Second">Newsroom</p>
 84 |             <p class="cust-Second">Terms & Conditions</p>
 85 |             <p class="cust-Second">Privacy Policy</p>
 86 |             <p class="cust-Second">Refund and Return</p>
 87 |             <p class="cust-Second">Shipping Policy</p>
 88 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 89 | 
 90 |           </div>
 91 |           <div class="cust1">
 92 |             <p class="cust-first">SUPPORT</p>
 93 |             <p class="cust-Second">About Us</p>
 94 |             <p class="cust-Second">Contact Us</p>
 95 |             <p class="cust-Second">Order Tracking</p>
 96 |             <p class="cust-Second">All Products</p>
 97 |             <p class="cust-Second">FAQ</p>
 98 |             <p class="cust-Second">Sitemap</p>
 99 | 
100 |           </div>
101 |           <div class="cust1">
102 |             <p class="cust-first">Exclusive</p>
103 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
104 |             <p class="cust-Second">Sign up here to get the latest news,</p>
105 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
106 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
107 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
108 |             <p class="cust-Second">+91-9311732440</p>
109 |           </div>
110 |         </div>
111 |       </footer>
112 | 
113 |       <footer>
114 |         <div class="end">
115 |         <h1>
116 |         <b>Code Written By #Team Quantum Nexus</b>
117 |         </h1>
118 |         </div>
119 |       </footer>
120 | 
121 | </body>
122 | 
123 | </html>
124 | <script src="./bestSellers.js"></script>
125 | <script src="./navbar.js"></script>
126 | 
127 | <!-- <span class="material-icons-outlined">
128 |     star
129 |     </span> -->


--------------------------------------------------------------------------------
/perfume.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>All Perfumes</title>
  8 |     <link rel="stylesheet" href="./perfume.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 |     <nav>
 19 |         <div class="navbar">
 20 |             <i class='bx bx-menu'></i>
 21 |             <div class="logo"><a href="./index.html"><img
 22 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 23 |             </div>
 24 |             <div class="nav-links">
 25 |                 <div class="sidebar-logo">
 26 |                     <span class="logo-name"></span>
 27 |                     <i class='bx bx-x'></i>
 28 |                 </div>
 29 |                 <ul class="links">
 30 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 31 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 32 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 33 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 34 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 35 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 36 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 37 |                     <li><a href="./skin.html">SKINCARE</a></li>
 38 |                     <li><a href="./gifting.html">GIFTING</a></li>
 39 |                     <li><a id="login" href="./login.html">Login</a></li>
 40 |                     <li><a href="./cart.html">Cart</a></li>
 41 |                 </ul>
 42 |             </div>
 43 |             <div class="search-box">
 44 |                 <i class='bx bx-search'></i>
 45 |                 <div class="input-box">
 46 |                     <input type="text" placeholder="Search...">
 47 |                 </div>
 48 |             </div>
 49 |         </div>
 50 |     </nav>
 51 |     <div id="bestSellers-container">
 52 |         <h3>All Perfume</h3>
 53 |         <div id="sort-by">
 54 |             <select id="sort">
 55 |                 <option value="">SORT BY:</option>
 56 |                 <option value="lowToHigh">Price, low to high</option>
 57 |                 <option value="highToLow">Price, high to low</option>
 58 |             </select>
 59 |             <p id="productNumber">25</p>
 60 |         </div>
 61 |         <div id="content">
 62 |         </div>
 63 |     </div>
 64 |     <footer>
 65 |         <div class="customer-footer">
 66 |           <div class="cust1">
 67 |             <p class="cust-first">BEST SELLER</p>
 68 |             <p class="cust-Second">Ultimate Perfume Box</p>
 69 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 70 |             <p class="cust-Second">Perfume Gift Set For</p>
 71 |             <p class="cust-Second">Women</p>
 72 |             <p class="cust-Second">Under Eye Cream for</p>
 73 |             <p class="cust-Second">Dark Circles</p>
 74 |             <p class="cust-Second">Perfume For Men</p>
 75 |             <!-- <p class="cust-Second">Perfume For Women</p>
 76 |             <p class="cust-Second">Unisex Perfume</p> -->
 77 | 
 78 |           </div>
 79 |           <div class="cust1">
 80 |             <p class="cust-first">INFORMATION</p>
 81 |             <p class="cust-Second">Blogs</p>
 82 |             <p class="cust-Second">Newsroom</p>
 83 |             <p class="cust-Second">Terms & Conditions</p>
 84 |             <p class="cust-Second">Privacy Policy</p>
 85 |             <p class="cust-Second">Refund and Return</p>
 86 |             <p class="cust-Second">Shipping Policy</p>
 87 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 88 | 
 89 |           </div>
 90 |           <div class="cust1">
 91 |             <p class="cust-first">SUPPORT</p>
 92 |             <p class="cust-Second">About Us</p>
 93 |             <p class="cust-Second">Contact Us</p>
 94 |             <p class="cust-Second">Order Tracking</p>
 95 |             <p class="cust-Second">All Products</p>
 96 |             <p class="cust-Second">FAQ</p>
 97 |             <p class="cust-Second">Sitemap</p>
 98 | 
 99 |           </div>
100 |           <div class="cust1">
101 |             <p class="cust-first">Exclusive</p>
102 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
103 |             <p class="cust-Second">Sign up here to get the latest news,</p>
104 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
105 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
106 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
107 |             <p class="cust-Second">+91-9311732440</p>
108 |           </div>
109 |         </div>
110 |       </footer>
111 | 
112 |       <footer>
113 |         <div class="end">
114 |         <h1>
115 |         <b>Code Written By #Team Quantum Nexus</b>
116 |         </h1>
117 |         </div>
118 |       </footer>
119 | </body>
120 | 
121 | </html>
122 | <script src="./perfume.js"></script>
123 | <script src="./navbar.js"></script>
124 | 
125 | <!-- <span class="material-icons-outlined">
126 |     star
127 |     </span> -->
128 | 
129 | 
130 | <!-- kuch bhi -->


--------------------------------------------------------------------------------
/new.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>New Arrivals</title>
  8 |     <link rel="stylesheet" href="./new.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 11 |     <link rel="stylesheet" href="navbar.css">
 12 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 13 |     <link rel="stylesheet" href="./footer.css">
 14 | </head>
 15 | 
 16 | <body>
 17 |     <nav>
 18 |         <div class="navbar">
 19 |             <i class='bx bx-menu'></i>
 20 |             <div class="logo"><a href="./index.html"><img
 21 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 22 |             </div>
 23 |             <div class="nav-links">
 24 |                 <div class="sidebar-logo">
 25 |                     <span class="logo-name"></span>
 26 |                     <i class='bx bx-x'></i>
 27 |                 </div>
 28 |                 <ul class="links">
 29 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 30 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 31 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 32 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 33 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 34 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 35 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 36 |                     <li><a href="./skin.html">SKINCARE</a></li>
 37 |                     <li><a href="./gifting.html">GIFTING</a></li>
 38 |                     <li><a id="login" href="./login.html">Login</a></li>
 39 |                     <li><a href="./cart.html">Cart</a></li>
 40 |                 </ul>
 41 |             </div>
 42 |             <div class="search-box">
 43 |                 <i class='bx bx-search'></i>
 44 |                 <div class="input-box">
 45 |                     <input type="text" placeholder="Search...">
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 |     </nav>
 50 |     <div id="bestSellers-container">
 51 |         <h3>New Arrivals</h3>
 52 |         <div id="sort-by">
 53 |             <select id="sort">
 54 |                 <option value="">SORT BY:</option>
 55 |                 <option value="lowToHigh">Price, low to high</option>
 56 |                 <option value="highToLow">Price, high to low</option>
 57 |             </select>
 58 |             <p id="productNumber">25</p>
 59 |         </div>
 60 |         <div id="content">
 61 | 
 62 |         </div>
 63 |     </div>
 64 |     <footer>
 65 |         <div class="customer-footer">
 66 |           <div class="cust1">
 67 |             <p class="cust-first">BEST SELLER</p>
 68 |             <p class="cust-Second">Ultimate Perfume Box</p>
 69 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 70 |             <p class="cust-Second">Perfume Gift Set For</p>
 71 |             <p class="cust-Second">Women</p>
 72 |             <p class="cust-Second">Under Eye Cream for</p>
 73 |             <p class="cust-Second">Dark Circles</p>
 74 |             <p class="cust-Second">Perfume For Men</p>
 75 |             <!-- <p class="cust-Second">Perfume For Women</p>
 76 |             <p class="cust-Second">Unisex Perfume</p> -->
 77 | 
 78 |           </div>
 79 |           <div class="cust1">
 80 |             <p class="cust-first">INFORMATION</p>
 81 |             <p class="cust-Second">Blogs</p>
 82 |             <p class="cust-Second">Newsroom</p>
 83 |             <p class="cust-Second">Terms & Conditions</p>
 84 |             <p class="cust-Second">Privacy Policy</p>
 85 |             <p class="cust-Second">Refund and Return</p>
 86 |             <p class="cust-Second">Shipping Policy</p>
 87 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 88 | 
 89 |           </div>
 90 |           <div class="cust1">
 91 |             <p class="cust-first">SUPPORT</p>
 92 |             <p class="cust-Second">About Us</p>
 93 |             <p class="cust-Second">Contact Us</p>
 94 |             <p class="cust-Second">Order Tracking</p>
 95 |             <p class="cust-Second">All Products</p>
 96 |             <p class="cust-Second">FAQ</p>
 97 |             <p class="cust-Second">Sitemap</p>
 98 | 
 99 |           </div>
100 |           <div class="cust1">
101 |             <p class="cust-first">Exclusive</p>
102 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
103 |             <p class="cust-Second">Sign up here to get the latest news,</p>
104 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
105 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
106 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
107 |             <p class="cust-Second">+91-9311732440</p>
108 |           </div>
109 |         </div>
110 |       </footer>
111 | 
112 |       <footer>
113 |         <div class="end">
114 |         <h1>
115 |         <b>Code Written By #Team Quantum Nexus</b>
116 |         </h1>
117 |         </div>
118 |       </footer>
119 | </body>
120 | 
121 | </html>
122 | <script src="./new.js"></script>
123 | <script src="./navbar.js"></script>
124 | 
125 | <!-- <span class="material-icons-outlined">
126 |     star
127 |     </span> -->
128 | 
129 | 
130 | <!-- kuch bhi -->
131 | <!-- Kya hai ye -->


--------------------------------------------------------------------------------
/checkOut.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Checkout page</title>
  7 |     <link rel="stylesheet" href="./checkOut.css">
  8 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
  9 |     <link rel="stylesheet" href="navbar.css">
 10 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 11 |     <link rel="stylesheet" href="./footer.css">
 12 | </head>
 13 | <body>
 14 |     <nav>
 15 |         <div class="navbar">
 16 |           <i class='bx bx-menu'></i>
 17 |           <div class="logo"><a href="./index.html"><img
 18 |                 src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 19 |           </div>
 20 |           <div class="nav-links">
 21 |             <div class="sidebar-logo">
 22 |               <span class="logo-name"></span>
 23 |               <i class='bx bx-x'></i>
 24 |             </div>
 25 |             <ul class="links">
 26 |               <!-- <li><a href="./index.html">Home</a></li> -->
 27 |               <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 28 |               <li><a href="./shopall.html">SHOP ALL</a></li>
 29 |               <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 30 |               <li><a href="./perfume.html">PERFUMES</a></li>
 31 |               <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 32 |               <li><a href="./new.html">NEW ARRIVALS</a></li>
 33 |               <li><a href="./skin.html">SKINCARE</a></li>
 34 |               <li><a href="./gifting.html">GIFTING</a></li>
 35 |               <li><a id="login" href="./login.html">Login</a></li>
 36 |               <li><a href="./cart.html">Cart</a></li>
 37 |             </ul>
 38 |           </div>
 39 |           <div class="search-box">
 40 |             <i class='bx bx-search'></i>
 41 |             <div class="input-box">
 42 |               <input type="text" placeholder="Search...">
 43 |             </div>
 44 |           </div>
 45 |         </div>
 46 |       </nav>
 47 |     <h1>- Checkout Page -</h1>
 48 |     <div id="main-checkout">
 49 |         <div id="input">
 50 |             <form>
 51 |             <!-- <label for="firstName">First Name:</label> -->
 52 |             <input type="text" id="firstName" placeholder="Enter Your First Name" required>
 53 |       
 54 |             <!-- <label for="lastName">Last Name:</label> -->
 55 |             <input type="text" id="lastName" placeholder="Enter Your Last Name" required>
 56 |       
 57 |             <!-- <label for="email">Email:</label> -->
 58 |             <input type="email" id="email" placeholder="Enter Your Email" required>
 59 |       
 60 |             <!-- <label for="address">Address:</label> -->
 61 |             <input type="text" id="address" placeholder="Enter Your Address1" required>
 62 |             <input type="text" id="address" placeholder="Enter Your Address2" >
 63 |             <input type="text" id="address" placeholder="Enter Your Address3" >
 64 |             <input id="submit" type="submit" value="Place Order">
 65 |         </form>
 66 |         </div>
 67 |         <div id="amount">
 68 | 
 69 |         </div>
 70 |     </div>
 71 |     <footer>
 72 |         <div class="customer-footer">
 73 |           <div class="cust1">
 74 |             <p class="cust-first">BEST SELLER</p>
 75 |             <p class="cust-Second">Ultimate Perfume Box</p>
 76 |             <p class="cust-Second">Perfume Gift Set For Men</p>
 77 |             <p class="cust-Second">Perfume Gift Set For</p>
 78 |             <p class="cust-Second">Women</p>
 79 |             <p class="cust-Second">Under Eye Cream for</p>
 80 |             <p class="cust-Second">Dark Circles</p>
 81 |             <p class="cust-Second">Perfume For Men</p>
 82 |             <!-- <p class="cust-Second">Perfume For Women</p>
 83 |                 <p class="cust-Second">Unisex Perfume</p> -->
 84 |     
 85 |           </div>
 86 |           <div class="cust1">
 87 |             <p class="cust-first">INFORMATION</p>
 88 |             <p class="cust-Second">Blogs</p>
 89 |             <p class="cust-Second">Newsroom</p>
 90 |             <p class="cust-Second">Terms & Conditions</p>
 91 |             <p class="cust-Second">Privacy Policy</p>
 92 |             <p class="cust-Second">Refund and Return</p>
 93 |             <p class="cust-Second">Shipping Policy</p>
 94 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
 95 |     
 96 |           </div>
 97 |           <div class="cust1">
 98 |             <p class="cust-first">SUPPORT</p>
 99 |             <p class="cust-Second">About Us</p>
100 |             <p class="cust-Second">Contact Us</p>
101 |             <p class="cust-Second">Order Tracking</p>
102 |             <p class="cust-Second">All Products</p>
103 |             <p class="cust-Second">FAQ</p>
104 |             <p class="cust-Second">Sitemap</p>
105 |     
106 |           </div>
107 |           <div class="cust1">
108 |             <p class="cust-first">Exclusive</p>
109 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
110 |             <p class="cust-Second">Sign up here to get the latest news,</p>
111 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
112 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
113 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
114 |             <p class="cust-Second">+91-9311732440</p>
115 |           </div>
116 |         </div>
117 |       </footer>
118 |     
119 |       <footer>
120 |         <div class="end">
121 |           <h1>
122 |             <b>Code Written By #Team Quantum Nexus</b>
123 |           </h1>
124 |         </div>
125 |       </footer>
126 | </body>
127 | </html>
128 | <script src="./checkOut.js"></script>
129 | <!-- <script src="./navbar.js"></script> -->
130 | 


--------------------------------------------------------------------------------
/navbar.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  2 | *{
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   box-sizing: border-box;
  6 |   font-family: 'Poppins', sans-serif;
  7 | }
  8 | body{
  9 |   min-height: 100vh;
 10 | }
 11 | nav{
 12 |   /* border: 1px solid red; */
 13 |   position: sticky;
 14 |   top: 0;
 15 |   left: 0;
 16 |   width: 100%;
 17 |   height: 100%;
 18 |   height: 70px;
 19 |   background: #3E8DA8;
 20 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 21 |   z-index: 99;
 22 |   margin-bottom: 20px;
 23 | }
 24 | nav .navbar{
 25 |   height: 100%;
 26 |   max-width: 1250px;
 27 |   width: 100%;
 28 |   display: flex;
 29 |   align-items: center;
 30 |   justify-content: space-around;
 31 |   margin: auto;
 32 |   /* background: red; */
 33 |   /* padding: 0 50px; */
 34 | }
 35 | .navbar .logo a{
 36 |   /* border: 1px solid green; */
 37 |   /* margin: 0px; */
 38 |   font-size: 30px;
 39 |   color: #fff;
 40 |   text-decoration: none;
 41 |   font-weight: 600;
 42 | }
 43 | nav .navbar .nav-links{
 44 |   line-height: 70px;
 45 |   height: 100%;
 46 | }
 47 | nav .navbar .links{
 48 |   display: flex;
 49 | }
 50 | nav .navbar .links li{
 51 |   position: relative;
 52 |   display: flex;
 53 |   align-items: center;
 54 |   justify-content: space-between;
 55 |   list-style: none;
 56 |   padding: 0 14px;
 57 | }
 58 | nav .navbar .links li a{
 59 |   height: 100%;
 60 |   text-decoration: none;
 61 |   white-space: nowrap;
 62 |   color: #fff;
 63 |   font-size: 15px;
 64 |   font-weight: 500;
 65 | }
 66 | .links li:hover .htmlcss-arrow,
 67 | .links li:hover .js-arrow{
 68 |   transform: rotate(180deg);
 69 |   }
 70 | 
 71 | nav .navbar .links li .arrow{
 72 |   /* background: red; */
 73 |   height: 100%;
 74 |   width: 22px;
 75 |   line-height: 70px;
 76 |   text-align: center;
 77 |   display: inline-block;
 78 |   color: #fff;
 79 |   transition: all 0.3s ease;
 80 | }
 81 | nav .navbar .links li .sub-menu{
 82 |   position: absolute;
 83 |   top: 70px;
 84 |   left: 0;
 85 |   line-height: 40px;
 86 |   background: #3E8DA8;
 87 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 88 |   border-radius: 0 0 4px 4px;
 89 |   display: none;
 90 |   z-index: 2;
 91 | }
 92 | nav .navbar .links li:hover .htmlCss-sub-menu,
 93 | nav .navbar .links li:hover .js-sub-menu{
 94 |   display: block;
 95 | }
 96 | .navbar .links li .sub-menu li{
 97 |   padding: 0 22px;
 98 |   border-bottom: 1px solid rgba(255,255,255,0.1);
 99 | }
100 | .navbar .links li .sub-menu a{
101 |   color: #fff;
102 |   font-size: 15px;
103 |   font-weight: 500;
104 | }
105 | .navbar .links li .sub-menu .more-arrow{
106 |   line-height: 40px;
107 | }
108 | .navbar .links li .htmlCss-more-sub-menu{
109 |   /* line-height: 40px; */
110 | }
111 | .navbar .links li .sub-menu .more-sub-menu{
112 |   position: absolute;
113 |   top: 0;
114 |   left: 100%;
115 |   border-radius: 0 4px 4px 4px;
116 |   z-index: 1;
117 |   display: none;
118 | }
119 | .links li .sub-menu .more:hover .more-sub-menu{
120 |   display: block;
121 | }
122 | .navbar .search-box{
123 |   position: relative;
124 |    height: 40px;
125 |   width: 40px;
126 | }
127 | .navbar .search-box i{
128 |   position: absolute;
129 |   height: 100%;
130 |   width: 100%;
131 |   line-height: 40px;
132 |   text-align: center;
133 |   font-size: 22px;
134 |   color: #fff;
135 |   font-weight: 600;
136 |   cursor: pointer;
137 |   transition: all 0.3s ease;
138 | }
139 | .navbar .search-box .input-box{
140 |   position: absolute;
141 |   right: calc(100% - 40px);
142 |   top: 80px;
143 |   height: 60px;
144 |   width: 300px;
145 |   background: #3E8DA8;
146 |   border-radius: 6px;
147 |   opacity: 0;
148 |   pointer-events: none;
149 |   transition: all 0.4s ease;
150 | }
151 | .navbar.showInput .search-box .input-box{
152 |   top: 65px;
153 |   opacity: 1;
154 |   pointer-events: auto;
155 |   background: #3E8DA8;
156 | }
157 | .search-box .input-box::before{
158 |   content: '';
159 |   position: absolute;
160 |   height: 20px;
161 |   width: 20px;
162 |   background: #3E8DA8;
163 |   right: 10px;
164 |   top: -6px;
165 |   transform: rotate(45deg);
166 | }
167 | .search-box .input-box input{
168 |   position: absolute;
169 |   top: 50%;
170 |   left: 50%;
171 |   border-radius: 4px;
172 |   transform: translate(-50%, -50%);
173 |   height: 35px;
174 |   width: 280px;
175 |   outline: none;
176 |   padding: 0 15px;
177 |   font-size: 16px;
178 |   border: none;
179 | }
180 | .navbar .nav-links .sidebar-logo{
181 |   display: none;
182 | }
183 | .navbar .bx-menu{
184 |   display: none;
185 | }
186 | @media (max-width:920px) {
187 |   nav .navbar{
188 |     max-width: 100%;
189 |     padding: 0 25px;
190 |   }
191 | 
192 |   nav .navbar .logo a{
193 |     font-size: 27px;
194 |   }
195 |   nav .navbar .links li{
196 |     padding: 0 10px;
197 |     white-space: nowrap;
198 |   }
199 |   nav .navbar .links li a{
200 |     font-size: 15px;
201 |   }
202 | }
203 | @media (max-width:800px){
204 |   nav{
205 |     /* position: relative; */
206 |   }
207 |   .navbar .bx-menu{
208 |     display: block;
209 |   }
210 |   nav .navbar .nav-links{
211 |     position: fixed;
212 |     top: 0;
213 |     left: -100%;
214 |     display: block;
215 |     max-width: 270px;
216 |     width: 100%;
217 |     background:  #3E8DA8;
218 |     line-height: 40px;
219 |     padding: 20px;
220 |     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
221 |     transition: all 0.5s ease;
222 |     z-index: 1000;
223 |   }
224 |   .navbar .nav-links .sidebar-logo{
225 |     display: flex;
226 |     align-items: center;
227 |     justify-content: space-between;
228 |   }
229 |   .sidebar-logo .logo-name{
230 |     font-size: 25px;
231 |     color: #fff;
232 |   }
233 |     .sidebar-logo  i,
234 |     .navbar .bx-menu{
235 |       font-size: 25px;
236 |       color: #fff;
237 |     }
238 |   nav .navbar .links{
239 |     display: block;
240 |     margin-top: 20px;
241 |   }
242 |   nav .navbar .links li .arrow{
243 |     line-height: 40px;
244 |   }
245 | nav .navbar .links li{
246 |     display: block;
247 |   }
248 | nav .navbar .links li .sub-menu{
249 |   position: relative;
250 |   top: 0;
251 |   box-shadow: none;
252 |   display: none;
253 | }
254 | nav .navbar .links li .sub-menu li{
255 |   border-bottom: none;
256 | 
257 | }
258 | .navbar .links li .sub-menu .more-sub-menu{
259 |   display: none;
260 |   position: relative;
261 |   left: 0;
262 | }
263 | .navbar .links li .sub-menu .more-sub-menu li{
264 |   display: flex;
265 |   align-items: center;
266 |   justify-content: space-between;
267 | }
268 | .links li:hover .htmlcss-arrow,
269 | .links li:hover .js-arrow{
270 |   transform: rotate(0deg);
271 |   }
272 |   .navbar .links li .sub-menu .more-sub-menu{
273 |     display: none;
274 |   }
275 |   .navbar .links li .sub-menu .more span{
276 |     /* background: red; */
277 |     display: flex;
278 |     align-items: center;
279 |     /* justify-content: space-between; */
280 |   }
281 | 
282 |   .links li .sub-menu .more:hover .more-sub-menu{
283 |     display: none;
284 |   }
285 |   nav .navbar .links li:hover .htmlCss-sub-menu,
286 |   nav .navbar .links li:hover .js-sub-menu{
287 |     display: none;
288 |   }
289 | .navbar .nav-links.show1 .links .htmlCss-sub-menu,
290 |   .navbar .nav-links.show3 .links .js-sub-menu,
291 |   .navbar .nav-links.show2 .links .more .more-sub-menu{
292 |       display: block;
293 |     }
294 |     .navbar .nav-links.show1 .links .htmlcss-arrow,
295 |     .navbar .nav-links.show3 .links .js-arrow{
296 |         transform: rotate(180deg);
297 | }
298 |     .navbar .nav-links.show2 .links .more-arrow{
299 |       transform: rotate(90deg);
300 |     }
301 | }
302 | @media (max-width:370px){
303 |   nav .navbar .nav-links{
304 |   max-width: 100%;
305 | } 
306 | }


--------------------------------------------------------------------------------
/crazyDeal.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Crazy Deal</title>
  8 |     <link rel="stylesheet" href="./crayzDeal.css">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 10 |     <link rel="stylesheet" href="navbar.css">
 11 |     <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 12 |     <link rel="stylesheet" href="./footer.css">
 13 | 
 14 | </head>
 15 | 
 16 | <body>
 17 |     <nav>
 18 |         <div class="navbar">
 19 |             <i class='bx bx-menu'></i>
 20 |             <div class="logo"><a href="./index.html"><img
 21 |                         src="https://bellavitaorganic.com/cdn/shop/files/Bella_Vita_Logo_360_E_2x_White.png?height=30&v=1689597318"></a>
 22 |             </div>
 23 |             <div class="nav-links">
 24 |                 <div class="sidebar-logo">
 25 |                     <span class="logo-name"></span>
 26 |                     <i class='bx bx-x'></i>
 27 |                 </div>
 28 |                 <ul class="links">
 29 |                     <!-- <li><a href="./index.html">Home</a></li> -->
 30 |                     <li><a href="./crazyDeal.html">CRAZY DEALS</a></li>
 31 |                     <li><a href="./shopall.html">SHOP ALL</a></li>
 32 |                     <li><a href="./bestSellers.html">BESTSELLERS</a></li>
 33 |                     <li><a href="./perfume.html">PERFUMES</a></li>
 34 |                     <li><a href="./bathAndBody.html">BATH & BODY</a></li>
 35 |                     <li><a href="./new.html">NEW ARRIVALS</a></li>
 36 |                     <li><a href="./skin.html">SKINCARE</a></li>
 37 |                     <li><a href="./gifting.html">GIFTING</a></li>
 38 |                     <li><a id="login" href="./login.html">Login</a></li>
 39 |                     <li><a href="./cart.html">Cart</a></li>
 40 |                 </ul>
 41 |             </div>
 42 |             <div class="search-box">
 43 |                 <i class='bx bx-search'></i>
 44 |                 <div class="input-box">
 45 |                     <input type="text" placeholder="Search...">
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 |     </nav>
 50 |     <div id="crazy-deals-container">
 51 |         <div>
 52 |             <div class="image-div">
 53 |                 <img src="https://bellavitaorganic.com/cdn/shop/files/Frame_591.jpg?v=1695733933&width=750" alt="image">
 54 |             </div>
 55 |             <div class="crazy-deals-margin-left">
 56 |                 <h4>ULTIMATE PERFUME BOX</h4>
 57 |                 <p>A unique box for all. Take advantage of BellaVita’s luxury perfume box by selecting a perfume from
 58 |                     any category of perfumes for men, women and unisex fragrances. Enjoy the big savings and a versatile
 59 |                     collection suitable for everyone.</p>
 60 |                 <button>BUY NOW</button>
 61 |             </div>
 62 |         </div>
 63 |         <div>
 64 | 
 65 |             <div class="crazy-deals-margin-right">
 66 |                 <h4>FRESH ALL DAY COMBO</h4>
 67 |                 <p>Choose 1 of our best-selling 100 ml perfumes and 1 Shower Gel to enjoy long-lasting freshness all day
 68 |                     long! Start your day with a shower gel that smells exactly like perfume and carry the scent of
 69 |                     luxury with your favourite perfume.</p>
 70 |                 <button>BUY NOW</button>
 71 |             </div>
 72 |             <div class="image-div">
 73 |                 <img src="https://bellavitaorganic.com/cdn/shop/files/678-548_315e5e2b-4e68-4eca-8c10-db87beb787db.jpg?v=1700215543&width=750"
 74 |                     alt="image">
 75 |             </div>
 76 |         </div>
 77 |         <div>
 78 |             <div class="image-div">
 79 |                 <img src="https://bellavitaorganic.com/cdn/shop/files/678-548_1.jpg?v=1701774461&width=750" alt="image">
 80 |             </div>
 81 |             <div class="crazy-deals-margin-left">
 82 |                 <h4>BADE MIYA CHHOTE MIYA</h4>
 83 |                 <p>Get a full-sized 100ml perfume bottle along with a 20ml perfume of your choice so that your favourite
 84 |                     perfumes stay with you. Keep the big bottle at home and the small bottle with you so that you can
 85 |                     smell fresh, always.</p>
 86 |                 <button>BUY NOW</button>
 87 |             </div>
 88 |         </div>
 89 |         <div>
 90 |             <div class="crazy-deals-margin-right">
 91 |                 <h4>SELF LOVE KIT</h4>
 92 |                 <p>Take care of yourself with our Self Love Kit. It has six items to help you relax and feel good. Only
 93 |                     ₹999 for everything you need for a relaxing day at home.</p>
 94 |                 <button>BUY NOW</button>
 95 |             </div>
 96 |             <div class="image-div">
 97 |                 <img src="https://bellavitaorganic.com/cdn/shop/files/678-548.jpg?v=1697537263&width=750" alt="image">
 98 |             </div>
 99 |         </div>
100 |         <div>
101 |             <div class="image-div">
102 |                 <img src="https://bellavitaorganic.com/cdn/shop/files/678-548_a_30102cd9-7e62-4a2f-b170-30c83468d76e.jpg?v=1701370034&width=750"
103 |                     alt="image">
104 |             </div>
105 |             <div class="crazy-deals-margin-left">
106 |                 <h4>FIVE STAR FRAGRANCE COMBO</h4>
107 |                 <p>Bring home our most premium and exclusive perfumes with Five-Star Fragrances Combo. Buy any 2 Premium
108 |                     100 ml perfumes and enjoy the scent of luxury, perfect for you to wear on special occasions and gift
109 |                     to loved ones. </p>
110 |                 <button>BUY NOW</button>
111 |             </div>
112 |         </div>
113 |         <div>
114 |             <div class="crazy-deals-margin-right">
115 |                 <h4>PERFECT JODI</h4>
116 |                 <p>If you’re struggling to choose your favourite 100 ml perfume, we’re here to sweeten the deal. Instead
117 |                     of choosing just one, use this crazy deal to bring home 2 of our best-selling 100 ml perfumes. </p>
118 |                 <button>BUY NOW</button>
119 |             </div>
120 |             <div class="image-div">
121 |                 <img src="https://bellavitaorganic.com/cdn/shop/files/678-548_a8cbc2a1-89b6-4f61-ba63-88cdd38c075a.jpg?v=1701774255&width=750"
122 |                     alt="image">
123 |             </div>
124 |         </div>
125 |     </div>
126 |     <footer>
127 |         <div class="customer-footer">
128 |           <div class="cust1">
129 |             <p class="cust-first">BEST SELLER</p>
130 |             <p class="cust-Second">Ultimate Perfume Box</p>
131 |             <p class="cust-Second">Perfume Gift Set For Men</p>
132 |             <p class="cust-Second">Perfume Gift Set For</p>
133 |             <p class="cust-Second">Women</p>
134 |             <p class="cust-Second">Under Eye Cream for</p>
135 |             <p class="cust-Second">Dark Circles</p>
136 |             <p class="cust-Second">Perfume For Men</p>
137 |             <!-- <p class="cust-Second">Perfume For Women</p>
138 |             <p class="cust-Second">Unisex Perfume</p> -->
139 | 
140 |           </div>
141 |           <div class="cust1">
142 |             <p class="cust-first">INFORMATION</p>
143 |             <p class="cust-Second">Blogs</p>
144 |             <p class="cust-Second">Newsroom</p>
145 |             <p class="cust-Second">Terms & Conditions</p>
146 |             <p class="cust-Second">Privacy Policy</p>
147 |             <p class="cust-Second">Refund and Return</p>
148 |             <p class="cust-Second">Shipping Policy</p>
149 |             <p class="cust-Second">Bulk Order - GST Invoice</p>
150 | 
151 |           </div>
152 |           <div class="cust1">
153 |             <p class="cust-first">SUPPORT</p>
154 |             <p class="cust-Second">About Us</p>
155 |             <p class="cust-Second">Contact Us</p>
156 |             <p class="cust-Second">Order Tracking</p>
157 |             <p class="cust-Second">All Products</p>
158 |             <p class="cust-Second">FAQ</p>
159 |             <p class="cust-Second">Sitemap</p>
160 | 
161 |           </div>
162 |           <div class="cust1">
163 |             <p class="cust-first">Exclusive</p>
164 |             <p class="cust-Second"><input type="email" placeholder="Enter Email"></p>
165 |             <p class="cust-Second">Sign up here to get the latest news,</p>
166 |             <p class="cust-Second">Aupdates and special offers delivered to your inbox.</p>
167 |             <p class="cust-Second">shop@bellavitaorganic.com</p>
168 |             <p class="cust-Second">Timing: 10:00 AM to 7:00</p>
169 |             <p class="cust-Second">+91-9311732440</p>
170 |           </div>
171 |         </div>
172 |       </footer>
173 | 
174 |       <footer>
175 |         <div class="end">
176 |         <h1>
177 |         <b>Code Written By #Team Quantum Nexus</b>
178 |         </h1>
179 |         </div>
180 |       </footer>
181 | </body>
182 | 
183 | </html>
184 | 
185 | <script src="./crazyDeal.js">
186 | 
187 | </script>
188 | <script src="./navbar.js"></script>
189 | 


--------------------------------------------------------------------------------
/bestSellers.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/ManPerfumeGiftSet-01_2_eb660165-6da9-4e14-bdf0-fabd68113a00.jpg?v=1695204946&width=250",
 18 |         title: "EAU DE PARFUM",
 19 |         name: "Luxury Perfume Gift Set For Men",
 20 |         rating: 4.4,
 21 |         price: 549.00,
 22 |         strikedPrice: 849.00
 23 | 
 24 |     },
 25 |     {
 26 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDGold-01.jpg?v=1698055234&width=250",
 27 |         title: "EAU DE PARFUM FOR ALL",
 28 |         name: "OUD GOLD - 100ml",
 29 |         rating: 4.8,
 30 |         price: 840.00,
 31 |         strikedPrice: 1099.00,
 32 | 
 33 |     },
 34 |     {
 35 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOMAN_3b131d25-7893-4ad5-a17a-4b3de9a3ebd3.jpg?v=1693290059&width=250",
 36 |         title: "EAU DE PARFUM",
 37 |         name: "CEO Man Luxury Perfume - 100ml",
 38 |         rating: 4.9,
 39 |         price: 489.00,
 40 |         strikedPrice: 899.00,
 41 | 
 42 |     },
 43 |     {
 44 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/WomanPerfumeGiftSet_1.jpg?v=1695204304&width=250",
 45 |         title: "EAU DE PARFUM",
 46 |         name: "Luxury Perfume Gift Set For Women",
 47 |         rating: 4.9,
 48 |         price: 549.00,
 49 |         strikedPrice: 849.00,
 50 | 
 51 |     },
 52 |     {
 53 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/UnisexPerfumeGiftSet_1.jpg?v=1695204331&width=250",
 54 |         title: "EAU DE PARFUM",
 55 |         name: "Luxury Unisex Perfume Gift Set",
 56 |         rating: 4.6,
 57 |         price: 549.00,
 58 |         strikedPrice: 849.00,
 59 | 
 60 |     },
 61 |     {
 62 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/WhiteOUD_b00b288c-016d-4071-b71c-f7e9a2cef50f.jpg?v=1698837551&width=250",
 63 |         title: "EAU DE PARFUM",
 64 |         name: "White Oud Unisex - 100ml",
 65 |         rating: 4.7,
 66 |         price: 565.00,
 67 |         strikedPrice: 999.00,
 68 | 
 69 |     },
 70 |     {
 71 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DATEWOMAN.jpg?v=1693290911&width=250",
 72 |         title: "EAU DE PARFUM FOR WOMEN",
 73 |         name: "Date Woman Perfume - 100ml",
 74 |         rating: 4.8,
 75 |         price: 575.00,
 76 |         strikedPrice: 999.00,
 77 | 
 78 |     },
 79 |     {
 80 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/BestOfMenPerfumeCombo-100mlX3.jpg?v=1693932739&width=250",
 81 |         title: "PERFUME COMBO",
 82 |         name: "Best Of Men Perfume Combo",
 83 |         rating: 4.7,
 84 |         price: 1549.00,
 85 |         strikedPrice: 2697.00,
 86 | 
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/GlamWoman.jpg?v=1693289036&width=250",
 90 |         title: "EAU DE PARFUM",
 91 |         name: "Glam Woman Perfume ",
 92 |         rating: 4.8,
 93 |         price: 575.00,
 94 |         strikedPrice: 999.00,
 95 | 
 96 |     },
 97 |     {
 98 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/BLUMAN.jpg?v=1693827097&width=250",
 99 |         title: "EAU DE PARFUM FOR MEN",
100 |         name: "BLU Man - 100ml",
101 |         rating: 4.6,
102 |         price: 840.00,
103 |         strikedPrice: 1099.00,
104 | 
105 |     },
106 |     {
107 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDParfum.jpg?v=1693289126&width=250",
108 |         title: "PARFUM",
109 |         name: "Oud Unisex Luxury Perfume - 100ml",
110 |         rating: 4.7,
111 |         price: 575.00,
112 |         strikedPrice: 999.00,
113 | 
114 |     },
115 |     {
116 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KLUBMan.jpg?v=1693289090&width=250",
117 |         title: "EAU DE PARFUM FOR MEN",
118 |         name: "Klub Man - 100ml",
119 |         rating: 4.6,
120 |         price: 575.00,
121 |         strikedPrice: 799.00,
122 |     },
123 |     {
124 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DeoParfumPackof3-01_e183c74a-e406-47e6-87af-38151cded229.jpg?v=1695649691&width=250",
125 |         title: "BODY DEODORANT FOR MEN",
126 |         name: "Men's No Gas Deodorant Gift Set",
127 |         rating: 4.8,
128 |         price: 599.00,
129 |         strikedPrice: 747.00,
130 |     },
131 |     {
132 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/HoneyOUD_68b92490-5598-445c-a661-4a2d978e9893.jpg?v=1693289057&width=250",
133 |         title: "PARFUM",
134 |         name: "Honey Oud Unisex Perfume - 100ml",
135 |         rating: 4.6,
136 |         price: 575.00,
137 |         strikedPrice: 999.00,
138 |     },
139 |     {
140 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai_2e0d54be-3ab0-458b-a2af-47d666c93e0e.jpg?v=1693289226&width=250",
141 |         title: "EAU DE COLOGNE",
142 |         name: "Skai Aquatic Unisex Perfume - 100ml",
143 |         rating: 4.9,
144 |         price: 489.00,
145 |         strikedPrice: 699.00,
146 |     },
147 |     {
148 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Exfoliate.jpg?v=1693827497&width=250",
149 |         title: "GENTLE EXFOLIATION, NOURISHING & SKIN BRIGHTENING",
150 |         name: "Exfoliate Face And Body Scrub Grit - 75gm",
151 |         rating: 4.9,
152 |         price: 99.00,
153 |         strikedPrice: 275.00,
154 |     },
155 |     {
156 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/C-GlowFaceWash.jpg?v=1693827395&width=250",
157 |         title: "DE-TAN & BRIGHTENING",
158 |         name: "C-Glow Face Wash - 100ml",
159 |         rating: 4.8,
160 |         price: 175.00,
161 |         strikedPrice: 249.00,
162 |     },
163 |     {
164 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/eyelift-website.jpg?v=1696575192&width=250",
165 |         title: "UNDER EYE CREAM FOR WOMEN AND MEN",
166 |         name: "C-Glow Face Wash - 100ml",
167 |         rating: 4.8,
168 |         price: 240.00,
169 |         strikedPrice: 325.00,
170 |     },
171 |     {
172 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/NicoLips_f3481a6f-0bc2-49fc-b035-fd7fa47c96cb.jpg?v=1693827867&width=250",
173 |         title: "LIP BRIGHTENING, NOURISHING & REPAIRING",
174 |         name: "Nicolips Lip Brightening Scrub - 20gm",
175 |         rating: 4.8,
176 |         price: 249.00,
177 |         strikedPrice: 450.00,
178 |     },
179 |     {
180 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/AyurvedicKumkumadiFaceOil.jpg?v=1694081134&width=250",
181 |         title: "SKIN BRIGHTENING & HYDRATING OIL FOR YOUTHFUL SKIN",
182 |         name: "Ayurvedic Kumkumadi Face Oil - 30ml",
183 |         rating: 4.9,
184 |         price: 249.00,
185 |         strikedPrice: 599.00,
186 |     },
187 |     {
188 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Perfume-Trial-Pack-_10-5ml.jpg?v=1693930900&width=250",
189 |         title: "PACK OF 10 X 5ML PERFUMES.",
190 |         name: "Luxury Perfume Trial Pack",
191 |         rating: 4.8,
192 |         price: 349.00,
193 |         strikedPrice: 399.00,
194 |     },
195 |     {
196 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/EverreadyWomenCombo.jpg?v=1693931485&width=250",
197 |         title: "5 PREMIUM FEMININE SCENTS",
198 |         name: "Everready Women Combo",
199 |         rating: 4.5,
200 |         price: 2249.00,
201 |         strikedPrice: 4695.00,
202 |     },
203 |     {
204 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RefreshingYouCombo.jpg?v=1693930765&width=250",
205 |         title: "FAMILY COMBO",
206 |         name: "Refreshing You Combo",
207 |         rating: 4.5,
208 |         price: 2249.00,
209 |         strikedPrice: 4595.00,
210 |     },
211 |     {
212 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LoveIsInTheRoll-OnCombo.jpg?v=1693922129&width=250",
213 |         title: "ROLL ON DEO - MEN & WOMEN",
214 |         name: "Love Is In The Roll-On Combo",
215 |         rating: 4.3,
216 |         price: 349.00,
217 |         strikedPrice: 398.00,
218 |     },
219 |     {
220 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/654.jpg?v=1668147215&width=250",
221 |         title: "PIMPLE SCAR REMOVAL & SKIN CLARIFYING",
222 |         name: "Anti Acne, Pimple Scar Spots Removal Gel For Men & Women - 50gm",
223 |         rating: 4.9,
224 |         price: 249.00,
225 |         strikedPrice: 399.00,
226 |     },
227 | ];
228 | 
229 | 
230 | let container = document.querySelector("#content");
231 | let productNumber = document.querySelector("#productNumber");
232 | productNumber.innerText = `${arrData.length} products`;
233 | 
234 | 
235 | function appendData(arrData){
236 |     container.innerHTML = "";
237 | arrData.forEach(function(el){
238 |     // console.log(el);
239 |     let productDiv = document.createElement("div");
240 |     let img = document.createElement("img")
241 |     img.src=el.imageUrl;
242 |     img.style.cursor = "pointer";
243 |     img.addEventListener("click",function(){
244 |         showProduct(el);
245 |         // console.log(el);
246 |     })
247 |     let p1 = document.createElement("p")
248 |     p1.innerText = el.title
249 |     let h4 = document.createElement("h4");
250 |     h4.innerText = el.name;
251 |     h4.setAttribute("class","hide-text")
252 |     let ratingDiv = document.createElement("div");
253 |     ratingDiv.setAttribute("class","rating")
254 |     let ratingP = document.createElement("p");
255 |     ratingP.setAttribute("class","material-icons")
256 |     ratingP.innerText = "star"
257 |     let p2 = document.createElement("p");
258 |     p2.innerText = el.rating;
259 |     let span1 = document.createElement("span");
260 |     span1.innerText = `₹${el.price}`
261 |     let span2 = document.createElement("span");
262 |     span2.innerText = `₹${el.strikedPrice}`;
263 |     span2.style.textDecoration = "line-through";
264 |     let btn = document.createElement("button")
265 |     btn.innerText = "ADD TO CART";
266 |     btn.addEventListener("click",function(){
267 |         alert("Added to cart");
268 |         addToCart(el);
269 |     })  
270 | 
271 |     ratingDiv.append(ratingP,p2)
272 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
273 |     container.append(productDiv);
274 | })
275 | 
276 | }
277 | appendData(arrData)
278 | 
279 | let select = document.querySelector("#sort");
280 | select.addEventListener("change",function(){
281 |     arrData.sort(function(a,b){
282 |         if(select.value == "lowToHigh"){
283 |             return(a.price - b.price)
284 |         }
285 |         else if(select.value == "highToLow"){
286 |             return(b.price - a.price);
287 |         }
288 |     })
289 |     appendData(arrData);
290 | })
291 | 
292 | function showProduct(el){
293 |     localStorage.setItem("showProduct",JSON.stringify(el));
294 |     window.location.href = "./showProduct.html";
295 | }
296 | 
297 | function addToCart(el){
298 |     // console.log(el);
299 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
300 |     cartArr.push(el);
301 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
302 | }
303 | // console.log(newArr)


--------------------------------------------------------------------------------
/gifting.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Dategiftset-01.jpg?v=1705563221&width=300",
 18 |         title: "BATH AND BODY GIFT SET FOR WOMEN",
 19 |         name: "DATE Woman Premium Gift Set",
 20 |         rating: 5.0,
 21 |         price: 1320.00,
 22 |         strikedPrice: 1699.00
 23 | 
 24 |     },
 25 |     {
 26 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LuxuryCollectionGiftSet-01.jpg?v=1705048050&width=300",
 27 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 28 |         name: "Luxury Experience Gift Set",
 29 |         rating: 4.6,
 30 |         price: 949.00,
 31 |         strikedPrice: 1199.00,
 32 | 
 33 |     },
 34 |     {
 35 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_6326984c-e89a-43ba-b560-e35d40faba70.jpg?v=1703835295&width=300",
 36 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 37 |         name: "Luxury OUD Experience set",
 38 |         rating: 4.9,
 39 |         price: 489.00,
 40 |         strikedPrice: 899.00,
 41 | 
 42 |     },
 43 |     {
 44 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/ManPerfumeGiftSet-01_2_eb660165-6da9-4e14-bdf0-fabd68113a00.jpg?v=1695204946&width=300",
 45 |         title: "EAU DE PARFUM",
 46 |         name: "Luxury Perfume Gift Set For Women",
 47 |         rating: 4.9,
 48 |         price: 549.00,
 49 |         strikedPrice: 849.00,
 50 | 
 51 |     },
 52 |     {
 53 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/WomanPerfumeGiftSet_1.jpg?v=1695204304&width=300",
 54 |         title: "EAU DE PARFUM",
 55 |         name: "Luxury Perfume Gift Set For Women - 4 x 20mls",
 56 |         rating: 4.6,
 57 |         price: 549.00,
 58 |         strikedPrice: 849.00,
 59 | 
 60 |     },
 61 |     {
 62 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/UnisexPerfumeGiftSet_1.jpg?v=1695204331&width=300",
 63 |         title: "EAU DE PARFUM",
 64 |         name: "Luxury Unisex Perfume Gift Set - 4 x 20mls",
 65 |         rating: 4.6,
 66 |         price: 549.00,
 67 |         strikedPrice: 849.00,
 68 | 
 69 |     },
 70 |     {
 71 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RcbLimitedEditionPerfumeGiftBox_1.jpg?v=1693996065&width=300",
 72 |         title: "PERFUME GIFT SET",
 73 |         name: "Rcb Limited Edition Perfume Gift Box - 4 x 20ml",
 74 |         rating: 4.8,
 75 |         price: 549.00,
 76 |         strikedPrice: 849.00,
 77 | 
 78 |     },
 79 |     {
 80 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/BestOfMenPerfumeCombo-100mlX3.jpg?v=1693932739&width=300",
 81 |         title: "PERFUME COMBO",
 82 |         name: "Best Of Men Perfume Combo",
 83 |         rating: 4.7,
 84 |         price: 1483.00,
 85 |         strikedPrice: 2697.00,
 86 | 
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_4_a900c1a7-9f63-44c4-a294-a87562b072bf.jpg?v=1696315519&width=300",
 90 |         title: "BATH AND BODY GIFTING SET FOR MEN AND WOMEN",
 91 |         name: "SKAI Aquatic Gift Set ",
 92 |         rating: 4.7,
 93 |         price: 1320.00,
 94 |         strikedPrice: 1699.00,
 95 | 
 96 |     },
 97 |     {
 98 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai-Travel-pouch-10_2.jpg?v=1695300843&width=300",
 99 |         title: "BATH AND BODY TRAVEL KIT FOR MEN AND WOMEN",
100 |         name: "SKAI Aquatic Travel Minis Kit - 275ml",
101 |         rating: 4.9,
102 |         price: 599.00,
103 |         strikedPrice: 869.00,
104 | 
105 |     },
106 |     {
107 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Date-tRavel-Kit-9.jpg?v=1698342542&width=300",
108 |         title: "BATH AND BODY TRAVEL KIT FOR WOMEN",
109 |         name: "DATE Woman Travel Minis Kit - 275ml",
110 |         rating: 5.0,
111 |         price: 599.00,
112 |         strikedPrice: 899.00,
113 | 
114 |     },
115 |     {
116 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DEOGiftSetPackof4.jpg?v=1693931505&width=300",
117 |         title: "SET OF 4 BODY DEOS FOR MEN",
118 |         name: "Deo Gift Set - Stud, Fyre, Fresh And Game Pack Of 4 x 150ml",
119 |         rating: 4.2,
120 |         price: 499.00,
121 |         strikedPrice: 1196.00,
122 |     },
123 |     {
124 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Perfume-Trial-Pack-_10-5ml.jpg?v=1693930900&width=300",
125 |         title: "PACK OF 10 X 5ML PERFUMES.",
126 |         name: "Luxury Perfume Trial Pack - 10 x 5mls",
127 |         rating: 4.8,
128 |         price: 349.00,
129 |         strikedPrice: 399.00,
130 |     },
131 |     {
132 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/It_s-your-choice-combo.jpg?v=1693931122&width=300",
133 |         title: "UNISEX GIFT SET",
134 |         name: "It'S Your Choice Combo",
135 |         rating: 4.5,
136 |         price: 1449.00,
137 |         strikedPrice: 2797.00,
138 |     },
139 |     {
140 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEO-pouch-listing-10.jpg?v=1695205020&width=300",
141 |         title: "BATH AND BODY TRAVEL KIT FOR MEN",
142 |         name: "CEO Man Travel Minis Kit",
143 |         rating: 4.8,
144 |         price: 599.00,
145 |         strikedPrice: 899.00,
146 |     },
147 |     {
148 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/EverreadyWomenCombo.jpg?v=1693931485&width=300",
149 |         title: "5 PREMIUM FEMININE SCENTS",
150 |         name: "Everready Women Combo",
151 |         rating: 4.5,
152 |         price: 2249.00,
153 |         strikedPrice: 4695.00,
154 |     },
155 |     {
156 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Work-_-play-combo.jpg?v=1693930256&width=300",
157 |         title: "PERFUME COMBO",
158 |         name: "Work & Play Combo",
159 |         rating: 4.5,
160 |         price: 1298.00,
161 |         strikedPrice: 2497.00,
162 |     },
163 |     {
164 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/all-for-women-combo.jpg?v=1693932649&width=300",
165 |         title: "PERFUME COMBO",
166 |         name: "All For Women Combo",
167 |         rating: 4.7,
168 |         price: 1399.00,
169 |         strikedPrice: 2797.00,
170 |     },
171 |     {
172 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RefreshingYouCombo.jpg?v=1693930765&width=300",
173 |         title: "FAMILY COMBO",
174 |         name: "Refreshing You Combo",
175 |         rating: 4.5,
176 |         price: 2249.00,
177 |         strikedPrice: 4595.00,
178 |     },
179 |     {
180 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DeoParfumPackof3-01_e183c74a-e406-47e6-87af-38151cded229.jpg?v=1695649691&width=300",
181 |         title: "BODY DEODORANTS FOR MEN",
182 |         name: "Men`s No Gas Deodorants Gift Set",
183 |         rating: 4.8,
184 |         price: 599.00,
185 |         strikedPrice: 747.00,
186 |     },
187 |     {
188 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Perfume-Trial-Pack-_10-5ml.jpg?v=1693930900&width=250",
189 |         title: "PACK OF 10 X 5ML PERFUMES.",
190 |         name: "Luxury Perfume Trial Pack",
191 |         rating: 4.2,
192 |         price: 499.00,
193 |         strikedPrice: 849.00,
194 |     },
195 |     {
196 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/EverreadyWomenCombo.jpg?v=1693931485&width=250",
197 |         title: "5 PREMIUM FEMININE SCENTS",
198 |         name: "Everready Women Combo",
199 |         rating: 4.5,
200 |         price: 2249.00,
201 |         strikedPrice: 4695.00,
202 |     },
203 |     {
204 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RefreshingYouCombo.jpg?v=1693930765&width=250",
205 |         title: "FAMILY COMBO",
206 |         name: "Refreshing You Combo",
207 |         rating: 4.5,
208 |         price: 2249.00,
209 |         strikedPrice: 4595.00,
210 |     },
211 |     {
212 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LoveIsInTheRoll-OnCombo.jpg?v=1693922129&width=250",
213 |         title: "ROLL ON DEO - MEN & WOMEN",
214 |         name: "Love Is In The Roll-On Combo",
215 |         rating: 4.6,
216 |         price: 349.00,
217 |         strikedPrice: 398.00,
218 |     },
219 |     {
220 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/UnisexPerfumeGiftSet_1.jpg?v=1695204331&width=300",
221 |         title: "EAU DE PARFUM",
222 |         name: "Luxury Unisex Perfume Gift Set - 4 x 20mls",
223 |         rating: 4.7,
224 |         price: 549.00,
225 |         strikedPrice: 949.00,
226 |     },
227 | ];
228 | 
229 | 
230 | let container = document.querySelector("#content");
231 | let productNumber = document.querySelector("#productNumber");
232 | productNumber.innerText = `${arrData.length} products`;
233 | 
234 | 
235 | function appendData(arrData){
236 |     container.innerHTML = "";
237 | arrData.forEach(function(el){
238 |     // console.log(el);
239 |     let productDiv = document.createElement("div");
240 |     let img = document.createElement("img")
241 |     img.src=el.imageUrl;
242 |     img.style.cursor = "pointer";
243 |     img.addEventListener("click",function(){
244 |         showProduct(el);
245 |         // console.log(el);
246 |     })
247 |     let p1 = document.createElement("p")
248 |     p1.innerText = el.title
249 |     let h4 = document.createElement("h4");
250 |     h4.innerText = el.name;
251 |     h4.setAttribute("class","hide-text")
252 |     let ratingDiv = document.createElement("div");
253 |     ratingDiv.setAttribute("class","rating")
254 |     let ratingP = document.createElement("p");
255 |     ratingP.setAttribute("class","material-icons")
256 |     ratingP.innerText = "star"
257 |     let p2 = document.createElement("p");
258 |     p2.innerText = el.rating;
259 |     let span1 = document.createElement("span");
260 |     span1.innerText = `₹${el.price}`
261 |     let span2 = document.createElement("span");
262 |     span2.innerText = `₹${el.strikedPrice}`;
263 |     span2.style.textDecoration = "line-through";
264 |     let btn = document.createElement("button")
265 |     btn.innerText = "ADD TO CART";
266 |     btn.addEventListener("click",function(){
267 |         alert("Added to cart");
268 |         addToCart(el);
269 |     })  
270 | 
271 |     ratingDiv.append(ratingP,p2)
272 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
273 |     container.append(productDiv);
274 | })
275 | 
276 | }
277 | appendData(arrData)
278 | 
279 | let select = document.querySelector("#sort");
280 | select.addEventListener("change",function(){
281 |     arrData.sort(function(a,b){
282 |         if(select.value == "lowToHigh"){
283 |             return(a.price - b.price)
284 |         }
285 |         else if(select.value == "highToLow"){
286 |             return(b.price - a.price);
287 |         }
288 |     })
289 |     appendData(arrData);
290 | })
291 | 
292 | 
293 | function showProduct(el){
294 |     localStorage.setItem("showProduct",JSON.stringify(el));
295 |     window.location.href = "./showProduct.html";
296 | }
297 | function addToCart(el){
298 |     // console.log(el);
299 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
300 |     cartArr.push(el);
301 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
302 | }
303 | // console.log(newArr)


--------------------------------------------------------------------------------
/new.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Dategiftset-01.jpg?v=1705563221&width=300",
 18 |         title: "BATH AND BODY GIFT SET FOR WOMEN",
 19 |         name: "DATE Woman Premium Gift Set",
 20 |         rating: 5.0,
 21 |         price: 1320.00,
 22 |         strikedPrice: 1699.00
 23 | 
 24 |     },
 25 |     {
 26 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LuxuryCollectionGiftSet-01.jpg?v=1705048050&width=300",
 27 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 28 |         name: "Luxury Experience Gift Set",
 29 |         rating: 4.6,
 30 |         price: 949.00,
 31 |         strikedPrice: 1199.00,
 32 | 
 33 |     },
 34 |     {
 35 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/SkaiBodyLotion-01.jpg?v=1704274547&width=250",
 36 |         title: "PERFUME BODY LOTION FOR MEN & WOMEN",
 37 |         name: "SKAI Aquatic Perfume Body Lotion - 200ml",
 38 |         rating: 5.0,
 39 |         price: 235.00,
 40 |         strikedPrice: 325.00,
 41 | 
 42 |     },
 43 |     {
 44 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_6326984c-e89a-43ba-b560-e35d40faba70.jpg?v=1703835295&width=250",
 45 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 46 |         name: "Luxury OUD Experience Set        ",
 47 |         rating: 4.9,
 48 |         price: 849.00,
 49 |         strikedPrice: 1099.00,
 50 | 
 51 |     },
 52 |     {
 53 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_d1b2beae-b500-4b0c-9fef-3124a3608391.jpg?v=1703230947&width=250",
 54 |         title: "SHOWER GEL COMBO FOR WOMEN",
 55 |         name: "Be the 'It' Girl Combo",
 56 |         rating: 4.6,
 57 |         price: 385.00,
 58 |         strikedPrice: 598.00,
 59 | 
 60 |     },
 61 |     {
 62 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_9d74079f-fbae-40e5-9202-0bf761ca2f76.jpg?v=1703228265&width=250",
 63 |         title: "SHOWER GEL COMBO FOR WOMEN AND MEN",
 64 |         name: "Better Together Combo",
 65 |         rating: 4.9,
 66 |         price: 385.00,
 67 |         strikedPrice: 449.00,
 68 | 
 69 |     },
 70 |     {
 71 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KLUBBodyLotion-01_a641aa85-1c11-4d21-8f56-e71ae5ac388f.jpg?v=1702966449&width=250",
 72 |         title: "PERFUME BODY LOTION FOR MEN",
 73 |         name: "KLUB Man Perfume Body Lotion - 200ml",
 74 |         rating: 4.8,
 75 |         price: 235.00,
 76 |         strikedPrice: 349.00,
 77 | 
 78 |     },
 79 |     {
 80 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Glamshowergel-01.jpg?v=1703067258&width=250",
 81 |         title: "SHOWER GEL FOR WOMEN",
 82 |         name: "GLAM Woman Shower Gel - 500ml",
 83 |         rating: 5.0,
 84 |         price: 335.00,
 85 |         strikedPrice: 499.00,
 86 | 
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOManIntense-01.jpg?v=1701772117&width=250",
 90 |         title: "EAU DE PARFUM FOR MEN",
 91 |         name: "CEO Man Intense - 100ml",
 92 |         rating: 4.7,
 93 |         price: 840.00,
 94 |         strikedPrice: 1099.00,
 95 | 
 96 |     },
 97 |     {
 98 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DatewomanBodyLotion-01.jpg?v=1702372768&width=250",
 99 |         title: "PERFUME BODY LOTION FOR WOMEN",
100 |         name: "DATE Woman Perfume Body Lotion",
101 |         rating: 4.9,
102 |         price: 235.00,
103 |         strikedPrice: 369.00,
104 | 
105 |     },
106 |     {
107 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/2_5_e74c0ae4-7b10-49bc-a280-4e9bdde7ce24.jpg?v=1696345483&width=250",
108 |         title: "EAU DE PARFUM FOR WOMEN",
109 |         name: "Hot Mess Perfume for Women - 100ml",
110 |         rating: 5.0,
111 |         price: 840.00,
112 |         strikedPrice: 1099.00,
113 | 
114 |     },
115 |     {
116 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_c00cb947-dade-475f-97a0-bb01a4c9b651.jpg?v=1700138007&width=250",
117 |         title: "WHITE OUD SHOWER GEL 250 ML + WHITE OUD PERFUME 20 ML",
118 |         name: "Win with White Combo",
119 |         rating: 4.9,
120 |         price: 399.00,
121 |         strikedPrice: 796.00,
122 |     },
123 |     {
124 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_25f79680-b265-4423-b0c2-bdf6af78b69a.jpg?v=1700137801&width=250",
125 |         title: "SKAI AQUATIC SHOWER GEL 250 ML + SKAI AQUATIC PERFUME 20 ML",
126 |         name: "Touch the SKAI Combo",
127 |         rating: 4.8,
128 |         price: 399.00,
129 |         strikedPrice: 699.00,
130 |     },
131 |     {
132 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_937f4a4a-64b8-4031-811f-4e3de68048e5.jpg?v=1699960465&width=250",
133 |         title: "CEO MAN SHOWER GEL 250 ML + CEO MAN PERFUME 20 ML",
134 |         name: "Men in Black combo for Him",
135 |         rating: 4.9,
136 |         price: 399.00,
137 |         strikedPrice: 697.00,
138 |     },
139 |     {
140 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_065f669b-8439-4b38-b779-050823e888ce.jpg?v=1700137831&width=250",
141 |         title: "DATE WOMAN SHOWER GEL 250 ML + DATE WOMAN PERFUME 20 ML",
142 |         name: "All Day Romance Combo for Her",
143 |         rating: 4.8,
144 |         price: 399.00,
145 |         strikedPrice: 599.00,
146 |     },
147 |     {
148 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Klub-Travel-kit-9.jpg?v=1699604664&width=250",
149 |         title: "BATH AND BODY TRAVEL KIT FOR MEN",
150 |         name: "KLUB Man Travel Minis Kit - 275ml",
151 |         rating: 4.9,
152 |         price: 599.00,
153 |         strikedPrice: 899.00,
154 |     },
155 |     {
156 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_bcd804df-d2f3-45c4-9684-305bfa4cd0e5.jpg?v=1698398251&width=250",
157 |         title: "SHOWER GEL COMBO FOR MEN",
158 |         name: "You The Man Combo - 250ml each",
159 |         rating: 4.9,
160 |         price: 388.00,
161 |         strikedPrice: 599.00,
162 |     },
163 |     {
164 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_3cb62c5d-863e-4c56-9b51-05cdf63381a2.jpg?v=1698399347&width=250",
165 |         title: "SHOWER GEL COMBO FOR MEN AND WOMEN",
166 |         name: "Power and Pose Combo - 250ml each",
167 |         rating: 4.7,
168 |         price: 385.00,
169 |         strikedPrice: 597.00,
170 |     },
171 |     {
172 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_ad086eff-439c-446d-b1a8-32313a8ec614.jpg?v=1698398921&width=250",
173 |         title: "SHOWER GEL COMBO FOR ALL",
174 |         name: "Calm before Storm Combo - 250ml each",
175 |         rating: 4.5,
176 |         price: 385.00,
177 |         strikedPrice: 599.00,
178 |     },
179 |     {
180 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_8.jpg?v=1698670489&width=250",
181 |         title: "SHOWER GEL COMBO FOR MEN AND WOMEN",
182 |         name: "It’s Getting Hot In Here - 250ml each",
183 |         rating: 4.8,
184 |         price: 358.00,
185 |         strikedPrice: 599.00,
186 |     },
187 |     {
188 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Date-tRavel-Kit-9.jpg?v=1698342542&width=250",
189 |         title: "BATH AND BODY TRAVEL KIT FOR WOMEN",
190 |         name: "DATE Woman Travel Minis Kit - 275ml",
191 |         rating: 5.0,
192 |         price: 599.00,
193 |         strikedPrice: 849.00,
194 |     },
195 |     {
196 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_3.jpg?v=1698055971&width=250",
197 |         title: "EAU DE PARFUM FOR MEN",
198 |         name: "SWAG STAR - 100ml",
199 |         rating: 4.5,
200 |         price: 390.00,
201 |         strikedPrice: 499.00,
202 |     },
203 |     {
204 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RefreshingYouCombo.jpg?v=1693930765&width=250",
205 |         title: "FAMILY COMBO",
206 |         name: "Refreshing You Combo",
207 |         rating: 4.5,
208 |         price: 2249.00,
209 |         strikedPrice: 4595.00,
210 |     },
211 |     {
212 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDWhite500mlShowerGel-01.jpg?v=1697011866&width=250",
213 |         title: "SHOWER GEL FOR ALL",
214 |         name: "OUD WHITE Shower Gel - 500ml",
215 |         rating: 4.6,
216 |         price: 335.00,
217 |         strikedPrice: 499.00,
218 |     },
219 |     {
220 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DateWoman-01.jpg?v=1695109179&width=250",
221 |         title: "DATE SHOWER GEL FOR WOMEN",
222 |         name: "DATE WOMAN Shower Gel - 500ml",
223 |         rating: 4.7,
224 |         price: 335.00,
225 |         strikedPrice: 499.00,
226 |     },
227 | ];
228 | 
229 | 
230 | let container = document.querySelector("#content");
231 | let productNumber = document.querySelector("#productNumber");
232 | productNumber.innerText = `${arrData.length} products`;
233 | 
234 | 
235 | function appendData(arrData){
236 |     container.innerHTML = "";
237 | arrData.forEach(function(el){
238 |     // console.log(el);
239 |     let productDiv = document.createElement("div");
240 |     let img = document.createElement("img")
241 |     img.src=el.imageUrl;
242 |     img.style.cursor = "pointer";
243 |     img.addEventListener("click",function(){
244 |         showProduct(el);
245 |         // console.log(el);
246 |     })
247 |     let p1 = document.createElement("p")
248 |     p1.innerText = el.title
249 |     let h4 = document.createElement("h4");
250 |     h4.innerText = el.name;
251 |     h4.setAttribute("class","hide-text")
252 |     let ratingDiv = document.createElement("div");
253 |     ratingDiv.setAttribute("class","rating")
254 |     let ratingP = document.createElement("p");
255 |     ratingP.setAttribute("class","material-icons")
256 |     ratingP.innerText = "star"
257 |     let p2 = document.createElement("p");
258 |     p2.innerText = el.rating;
259 |     let span1 = document.createElement("span");
260 |     span1.innerText = `₹${el.price}`
261 |     let span2 = document.createElement("span");
262 |     span2.innerText = `₹${el.strikedPrice}`;
263 |     span2.style.textDecoration = "line-through";
264 |     let btn = document.createElement("button")
265 |     btn.innerText = "ADD TO CART";
266 |     btn.addEventListener("click",function(){
267 |         alert("Added to cart");
268 |         addToCart(el);
269 |     })  
270 | 
271 |     ratingDiv.append(ratingP,p2)
272 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
273 |     container.append(productDiv);
274 | })
275 | 
276 | }
277 | appendData(arrData)
278 | 
279 | let select = document.querySelector("#sort");
280 | select.addEventListener("change",function(){
281 |     arrData.sort(function(a,b){
282 |         if(select.value == "lowToHigh"){
283 |             return(a.price - b.price)
284 |         }
285 |         else if(select.value == "highToLow"){
286 |             return(b.price - a.price);
287 |         }
288 |     })
289 |     appendData(arrData);
290 | })
291 | 
292 | function showProduct(el){
293 |     localStorage.setItem("showProduct",JSON.stringify(el));
294 |     window.location.href = "./showProduct.html";
295 | }
296 | function addToCart(el){
297 |     // console.log(el);
298 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
299 |     cartArr.push(el);
300 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
301 | }
302 | 
303 | // console.log(newArr)


--------------------------------------------------------------------------------
/skin.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/NicoLips_f3481a6f-0bc2-49fc-b035-fd7fa47c96cb.jpg?v=1693827867&width=250",
 18 |         title: "LIP BRIGHTENING, NOURISHING & REPAIRING",
 19 |         name: "Nicolips Lip Brightening Scrub - 20gm",
 20 |         rating: 4.8,
 21 |         price: 249.00,
 22 |         strikedPrice: 450.00
 23 | 
 24 |     },
 25 |     {
 26 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/eyelift-website.jpg?v=1696575192&width=250",
 27 |         title: "UNDER EYE CREAM FOR WOMEN AND MEN",
 28 |         name: "Eyelift Under Eye Cream - 20gms",
 29 |         rating: 4.6,
 30 |         price: 240.00,
 31 |         strikedPrice: 325.00,
 32 | 
 33 |     },
 34 |     {
 35 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/C-GlowFaceWash.jpg?v=1693827395&width=250",
 36 |         title: "DE-TAN & BRIGHTENING",
 37 |         name: "C-Glow Face Wash - 100ml",
 38 |         rating: 4.8,
 39 |         price: 175.00,
 40 |         strikedPrice: 249.00,
 41 | 
 42 |     },
 43 |     {
 44 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Exfoliate.jpg?v=1693827497&width=250",
 45 |         title: "GENTLE EXFOLIATION, NOURISHING & SKIN BRIGHTENING",
 46 |         name: "Exfoliate Face And Body Scrub Grit - 75gm",
 47 |         rating: 4.9,
 48 |         price: 99.00,
 49 |         strikedPrice: 275.00,
 50 | 
 51 |     },
 52 |     {
 53 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/C-GlowFaceCream-50ml.jpg?v=1694079553&width=250",
 54 |         title: "BRIGHTENING & ANTI PIGMENTATION",
 55 |         name: "C-Glow Face Cream - 50ml",
 56 |         rating: 4.2,
 57 |         price: 249.00,
 58 |         strikedPrice: 375.00,
 59 | 
 60 |     },
 61 |     {
 62 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/NaturalAntiPollutionCombo.jpg?v=1693922247&width=250",
 63 |         title: "C-GLOW FACE WASH & EXFOLIATE FACE & BODY SCRUB",
 64 |         name: "Natural Anti Pollution Combo",
 65 |         rating: 4.6,
 66 |         price: 249.00,
 67 |         strikedPrice: 524.00,
 68 | 
 69 |     },
 70 |     {
 71 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/C-GlowFacePack_1723f778-80d9-4715-ba0b-7362fcf86574.jpg?v=1693919932&width=250",
 72 |         title: "SKIN BRIGHTENING & ANTI BLEMISH",
 73 |         name: "C-Glow Face Pack - 100gm",
 74 |         rating: 4.6,
 75 |         price: 249.00,
 76 |         strikedPrice: 399.00,
 77 | 
 78 |     },
 79 |     {
 80 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/insta-bright-website.jpg?v=1696575493&width=250",
 81 |         title: "TAN REMOVAL FACE PACK FOR WOMEN AND MEN",
 82 |         name: "De Tan Face Pack For Glowing Skin - 100gm",
 83 |         rating: 4.7,
 84 |         price: 271.00,
 85 |         strikedPrice: 399.00,
 86 | 
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/AntiAcneNeemCombo.jpg?v=1693921602&width=250",
 90 |         title: "DEEP CLEANSES, CONTROLS ACNE MARKS, REDUCES EXCESS OIL PRODUCTION",
 91 |         name: "Anti Acne Neem Combo        ",
 92 |         rating: 4.7,
 93 |         price: 299.00,
 94 |         strikedPrice: 668.00,
 95 | 
 96 |     },
 97 |     {
 98 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KumkumadiBrighteningCombo.jpg?v=1693922064&width=250",
 99 |         title: "DEEP CLEANSES, REJUVENATES AND NOURISHES",
100 |         name: "Kumkumadi Brightening Combo",
101 |         rating: 4.6,
102 |         price: 249.00,
103 |         strikedPrice: 948.00,
104 | 
105 |     },
106 |     {
107 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/AntiAcneFaceWash.jpg?v=1693921385&width=250",
108 |         title: "DEEP CLEANSER, SPOT TREATMENT & PIMPLE REPAIR",
109 |         name: "Anti Acne Face Wash - 100ml        ",
110 |         rating: 4.9,
111 |         price: 149.00,
112 |         strikedPrice: 299.00,
113 | 
114 |     },
115 |     {
116 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/NoseGlow-01.jpg?v=1652169791&width=250",
117 |         title: "DEEP CLEANSING & CLARIFYING",
118 |         name: "Noseglow Nose Scrub - 20gm",
119 |         rating: 3.7,
120 |         price: 198.00,
121 |         strikedPrice: 325.00,
122 |     },
123 |     {
124 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/654.jpg?v=1668147215&width=250",
125 |         title: "PIMPLE SCAR REMOVAL & SKIN CLARIFYING",
126 |         name: "Anti Acne, Pimple Scar Spots Removal Gel For Men & Women - 50gm        ",
127 |         rating: 4.9,
128 |         price: 249.00,
129 |         strikedPrice: 399.00,
130 |     },
131 |     {
132 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOMan500mlShowerGel-01.jpg?v=1692770100&width=250",
133 |         title: "BODY WASH FOR MEN",
134 |         name: "CEO Man Shower Gel - 500ml",
135 |         rating: 4.8,
136 |         price: 335.00,
137 |         strikedPrice: 499.00,
138 |     },
139 |     {
140 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/SkaiAquatic500mlShowerGel-01.jpg?v=1694604006&width=250",
141 |         title: "SKAI AQUATIC SHOWER GEL",
142 |         name: "SKAI Aquatic Shower Gel - 500 ml",
143 |         rating: 4.7,
144 |         price: 335.00,
145 |         strikedPrice: 499.00,
146 |     },
147 |     {
148 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai-Travel-pouch-10_2.jpg?v=1695300843&width=250",
149 |         title: "BATH AND BODY TRAVEL KIT FOR MEN AND WOMEN",
150 |         name: "SKAI Aquatic Travel Minis Kit - 275ml",
151 |         rating: 4.9,
152 |         price: 599.00,
153 |         strikedPrice: 869.00,
154 |     },
155 |     {
156 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DateWoman-01.jpg?v=1695109179&width=250",
157 |         title: "DATE SHOWER GEL FOR WOMEN",
158 |         name: "DATE WOMAN Shower Gel - 500ml",
159 |         rating: 4.7,
160 |         price: 335.00,
161 |         strikedPrice: 499.00,
162 |     },
163 |     {
164 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/NaturalRadianceCombo.jpg?v=1693922321&width=250",
165 |         title: "DEEP CLEANS, REPLENISHES, REJUVENATES",
166 |         name: "Natural Radiance Combo",
167 |         rating: 4.4,
168 |         price: 699.00,
169 |         strikedPrice: 997.00,
170 |     },
171 |     {
172 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/682.jpg?v=1668763806&width=250",
173 |         title: "MOISTURIZING & NOURISHING",
174 |         name: "Glowtion - Face & Body Lotion - 100m",
175 |         rating: 4.7,
176 |         price: 199.00,
177 |         strikedPrice: 299.00,
178 |     },
179 |     {
180 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Tinty-Pomegranate-8gm.jpg?v=1694008819&width=250",
181 |         title: "3 IN 1 LIP CHEEK & EYE TINT",
182 |         name: "Tinty - Pomegranate Maroon - 8gm",
183 |         rating: 4.9,
184 |         price: 149.00,
185 |         strikedPrice: 349.00,
186 |     },
187 |     {
188 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Tinty-PeachyPeach-8gm.jpg?v=1693921845&width=250",
189 |         title: "3 IN 1 LIP CHEEK & EYE TINT",
190 |         name: "Tinty - Peachy Peach - 8gm",
191 |         rating: 4.8,
192 |         price: 149.00,
193 |         strikedPrice: 349.00,
194 |     },
195 |     {
196 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/CelebshineGold-01_e00fff97-54c2-489f-b054-88b90a7e8cac.jpg?v=1652176140&width=250",
197 |         title: "ILLUMINATE, MOISTURISE, NOURISH",
198 |         name: "Celebshine Body Lotion Gold - 50ml",
199 |         rating: 4.5,
200 |         price: 199.00,
201 |         strikedPrice: 499.00,
202 |     },
203 |     {
204 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/Herbal-Sindoor-Red-01.jpg?v=1651698315&width=250",
205 |         title: "LONG LASTING & SMUDGE PROOF",
206 |         name: "Herbal Sindoor - Red - 5ml",
207 |         rating: 4.8,
208 |         price: 129.00,
209 |         strikedPrice: 149.00,
210 |     },
211 |     {
212 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/2.FOP-NoseStrips-Women-6Strips_3632f3f1-01bd-47be-bd37-de64ed7c3feb.jpg?v=1665837737&width=250",
213 |         title: "PAINLESS & INSTANT REMOVAL OF BLACKHEADS, WHITEHEADS, OIL & DIRT",
214 |         name: "Blackhead Remover Strips For Women - 6 Strips        ",
215 |         rating: 1.0,
216 |         price: 199.00,
217 |         strikedPrice: 230.00,
218 |     },
219 |     {
220 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Dategiftset-01.jpg?v=1705563221&width=250",
221 |         title: "BATH AND BODY GIFT SET FOR WOMEN",
222 |         name: "DATE Woman Premium Gift Set",
223 |         rating: 5.0,
224 |         price: 1320.00,
225 |         strikedPrice: 1949.00,
226 |     },
227 | ];
228 | 
229 | 
230 | let container = document.querySelector("#content");
231 | let productNumber = document.querySelector("#productNumber");
232 | productNumber.innerText = `${arrData.length} products`;
233 | 
234 | 
235 | function appendData(arrData){
236 |     container.innerHTML = "";
237 | arrData.forEach(function(el){
238 |     // console.log(el);
239 |     let productDiv = document.createElement("div");
240 |     let img = document.createElement("img")
241 |     img.src=el.imageUrl;
242 |     img.style.cursor = "pointer";
243 |     img.addEventListener("click",function(){
244 |         showProduct(el);
245 |         // console.log(el);
246 |     })
247 |     let p1 = document.createElement("p")
248 |     p1.innerText = el.title
249 |     let h4 = document.createElement("h4");
250 |     h4.innerText = el.name;
251 |     h4.setAttribute("class","hide-text")
252 |     let ratingDiv = document.createElement("div");
253 |     ratingDiv.setAttribute("class","rating")
254 |     let ratingP = document.createElement("p");
255 |     ratingP.setAttribute("class","material-icons")
256 |     ratingP.innerText = "star"
257 |     let p2 = document.createElement("p");
258 |     p2.innerText = el.rating;
259 |     let span1 = document.createElement("span");
260 |     span1.innerText = `₹${el.price}`
261 |     let span2 = document.createElement("span");
262 |     span2.innerText = `₹${el.strikedPrice}`;
263 |     span2.style.textDecoration = "line-through";
264 |     let btn = document.createElement("button")
265 |     btn.innerText = "ADD TO CART";
266 |     btn.addEventListener("click",function(){
267 |         alert("Added to cart");
268 |         addToCart(el);
269 |     })  
270 | 
271 |     ratingDiv.append(ratingP,p2)
272 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
273 |     container.append(productDiv);
274 | })
275 | 
276 | }
277 | appendData(arrData)
278 | 
279 | let select = document.querySelector("#sort");
280 | select.addEventListener("change",function(){
281 |     arrData.sort(function(a,b){
282 |         if(select.value == "lowToHigh"){
283 |             return(a.price - b.price)
284 |         }
285 |         else if(select.value == "highToLow"){
286 |             return(b.price - a.price);
287 |         }
288 |     })
289 |     appendData(arrData);
290 | })
291 | 
292 | function showProduct(el){
293 |     localStorage.setItem("showProduct",JSON.stringify(el));
294 |     window.location.href = "./showProduct.html";
295 | }
296 | 
297 | function addToCart(el){
298 |     // console.log(el);
299 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
300 |     cartArr.push(el);
301 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
302 | }
303 | // console.log(newArr)


--------------------------------------------------------------------------------
/bathAndBody.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Dategiftset-01.jpg?v=1705563221&width=250",
 18 |         title: "BATH AND BODY GIFT SET FOR WOMEN",
 19 |         name: "DATE Woman Premium Gift Set",
 20 |         rating: 4.9,
 21 |         price: 1320.00,
 22 |         strikedPrice: 1699.00
 23 |     },
 24 |     {
 25 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOMan500mlShowerGel-01.jpg?v=1692770100&width=250",
 26 |         title: "BODY WASH FOR MEN",
 27 |         name: "CEO Man Shower Gel - 500ml",
 28 |         rating: 4.8,
 29 |         price: 335.00,
 30 |         strikedPrice: 499.00
 31 |     },
 32 |     {
 33 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEO-pouch-listing-10.jpg?v=1695205020&width=250",
 34 |         title: "BATH AND BODY TRAVEL KIT FOR MEN",
 35 |         name: "CEO Man Travel Minis Kit",
 36 |         rating: 4.8,
 37 |         price: 599.00,
 38 |         strikedPrice: 899.00
 39 |     },
 40 |     {
 41 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/SkaiAquatic500mlShowerGel-01.jpg?v=1694604006&width=250",
 42 |         title: "SKAI AQUATIC SHOWER GEL",
 43 |         name: "SKAI Aquatic Shower Gel - 500 ml",
 44 |         rating: 4.7,
 45 |         price: 335.00,
 46 |         strikedPrice: 499.00
 47 |     },
 48 |     {
 49 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai-Travel-pouch-10_2.jpg?v=1695300843&width=250",
 50 |         title: "BATH AND BODY TRAVEL KIT FOR MEN AND WOMEN",
 51 |         name: "SKAI Aquatic Travel Minis Kit - 275ml",
 52 |         rating: 4.9,
 53 |         price: 599.00,
 54 |         strikedPrice: 869.00
 55 |     },
 56 |     {
 57 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DateWoman-01.jpg?v=1695109179&width=250",
 58 |         title: "DATE SHOWER GEL FOR WOMEN",
 59 |         name: "DATE WOMAN Shower Gel - 500ml",
 60 |         rating: 4.7,
 61 |         price: 335.00,
 62 |         strikedPrice: 499.00
 63 |     },
 64 |     {
 65 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KLUBMan-01.jpg?v=1695892533&width=250",
 66 |         title: "SHOWER GEL FOR MEN",
 67 |         name: "KLUB Man Shower Gel - 500ml",
 68 |         rating: 4.7,
 69 |         price: 335.00,
 70 |         strikedPrice: 499.00
 71 |     },
 72 |     {
 73 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Date-tRavel-Kit-9.jpg?v=1698342542&width=250",
 74 |         title: "BATH AND BODY TRAVEL KIT FOR WOMEN",
 75 |         name: "DATE Woman Travel Minis Kit - 275ml",
 76 |         rating: 4.9,
 77 |         price: 599.00,
 78 |         strikedPrice: 899.00
 79 |     },
 80 |     {
 81 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDWhite500mlShowerGel-01.jpg?v=1697011866&width=250",
 82 |         title: "SHOWER GEL FOR ALL",
 83 |         name: "OUD WHITE Shower Gel - 500ml",
 84 |         rating: 4.9,
 85 |         price: 335.00,
 86 |         strikedPrice: 499.00
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/SkaiBodyLotion-01.jpg?v=1704274547&width=250",
 90 |         title: "PERFUME BODY LOTION FOR MEN & WOMEN",
 91 |         name: "SKAI Aquatic Perfume Body Lotion - 200ml",
 92 |         rating: 4.9,
 93 |         price: 235.00,
 94 |         strikedPrice: 325.00
 95 |     },
 96 |     {
 97 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Glamshowergel-01.jpg?v=1703067258&width=250",
 98 |         title: "SHOWER GEL FOR WOMEN",
 99 |         name: "GLAM Woman Shower Gel - 500ml",
100 |         rating: 4.9,
101 |         price: 335.00,
102 |         strikedPrice: 499.00
103 |     },
104 |     {
105 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_c00cb947-dade-475f-97a0-bb01a4c9b651.jpg?v=1700138007&width=250",
106 |         title: "WHITE OUD SHOWER GEL 250 ML + WHITE OUD PERFUME 20 ML",
107 |         name: "Win with White Combo",
108 |         rating: 4.9,
109 |         price: 399.00,
110 |         strikedPrice: 748.00
111 |     },
112 |     {
113 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_25f79680-b265-4423-b0c2-bdf6af78b69a.jpg?v=1700137801&width=250",
114 |         title: "SKAI AQUATIC SHOWER GEL 250 ML + SKAI AQUATIC PERFUME 20 ML",
115 |         name: "Touch the SKAI Combo",
116 |         rating: 4.9,
117 |         price: 399.00,
118 |         strikedPrice: 698.00
119 |     },
120 |     {
121 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_937f4a4a-64b8-4031-811f-4e3de68048e5.jpg?v=1699960465&width=250",
122 |         title: "CEO MAN SHOWER GEL 250 ML + CEO MAN PERFUME 20 ML",
123 |         name: "Men in Black combo for Him",
124 |         rating: 4.9,
125 |         price: 399.00,
126 |         strikedPrice: 698.00
127 |     },
128 |     {
129 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_065f669b-8439-4b38-b779-050823e888ce.jpg?v=1700137831&width=250",
130 |         title: "DATE WOMAN SHOWER GEL 250 ML + DATE WOMAN PERFUME 20 ML",
131 |         name: "Men in Black combo for Him",
132 |         rating: 4.9,
133 |         price: 399.00,
134 |         strikedPrice: 698.00
135 |     },
136 |     {
137 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_d1b2beae-b500-4b0c-9fef-3124a3608391.jpg?v=1703230947&width=250",
138 |         title: "SHOWER GEL COMBO FOR WOMEN",
139 |         name: "Be the 'It' Girl Combo",
140 |         rating: 4.9,
141 |         price: 385.00,
142 |         strikedPrice: 598.00
143 |     },
144 |     {
145 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_bcd804df-d2f3-45c4-9684-305bfa4cd0e5.jpg?v=1698398251&width=250",
146 |         title: "SHOWER GEL COMBO FOR MEN",
147 |         name: "You The Man Combo - 250ml each",
148 |         rating: 4.9,
149 |         price: 385.00,
150 |         strikedPrice: 598.00
151 |     },
152 |     {
153 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_3cb62c5d-863e-4c56-9b51-05cdf63381a2.jpg?v=1698399347&width=250",
154 |         title: "SHOWER GEL COMBO FOR MEN AND WOMEN",
155 |         name: "Power and Pose Combo - 250ml each",
156 |         rating: 4.9,
157 |         price: 385.00,
158 |         strikedPrice: 598.00
159 |     },
160 |     {
161 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_ad086eff-439c-446d-b1a8-32313a8ec614.jpg?v=1698398921&width=250",
162 |         title: "SHOWER GEL COMBO FOR ALL",
163 |         name: "Calm before Storm Combo - 250ml each",
164 |         rating: 4.9,
165 |         price: 385.00,
166 |         strikedPrice: 598.00
167 |     },
168 |     {
169 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_8.jpg?v=1698670489&width=250",
170 |         title: "SHOWER GEL COMBO FOR MEN AND WOMEN",
171 |         name: "It’s Getting Hot In Here - 250ml each",
172 |         rating: 4.9,
173 |         price: 385.00,
174 |         strikedPrice: 598.00
175 |     },
176 |     {
177 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Klub-Travel-kit-9.jpg?v=1699604664&width=250",
178 |         title: "BATH AND BODY TRAVEL KIT FOR MEN",
179 |         name: "IKLUB Man Travel Minis Kit - 275ml",
180 |         rating: 4.9,
181 |         price:599.00,
182 |         strikedPrice: 899.00
183 |     },
184 |     {
185 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_9d74079f-fbae-40e5-9202-0bf761ca2f76.jpg?v=1703228265&width=250",
186 |         title: "BSHOWER GEL COMBO FOR WOMEN AND MEN",
187 |         name: "Better Together Combo",
188 |         rating: 4.9,
189 |         price:385.00,
190 |         strikedPrice: 598.00
191 |     },
192 |     {
193 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KLUBBodyLotion-01_a641aa85-1c11-4d21-8f56-e71ae5ac388f.jpg?v=1702966449&width=250",
194 |         title: "PERFUME BODY LOTION FOR MEN",
195 |         name: "KLUB Man Perfume Body Lotion - 200ml",
196 |         rating: 4.5,
197 |         price:235.00,
198 |         strikedPrice: 325.00
199 |     },
200 |     {
201 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOMANPerfumeBodyLotion-200ml.jpg?v=1694079521&width=250",
202 |         title: "BODY LOTION FOR MEN",
203 |         name: "CEO MAN Perfume Body Lotion - 200ml",
204 |         rating: 4.9,
205 |         price:235.00,
206 |         strikedPrice: 325.00
207 |     },
208 |     {
209 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CeoManGiftBox.jpg?v=1695206294&width=250",
210 |         title: "BATH AND BODY GIFT SET FOR MEN",
211 |         name: "CEO Man Gift Set",
212 |         rating: 4.6,
213 |         price:1320.00,
214 |         strikedPrice: 1699.00
215 |     },
216 |     {
217 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DatewomanBodyLotion-01.jpg?v=1702372768&width=250",
218 |         title: "PERFUME BODY LOTION FOR WOMEN",
219 |         name: "DATE Woman Perfume Body Lotion",
220 |         rating: 4.5,
221 |         price:235.00,
222 |         strikedPrice: 325.00
223 |     },
224 |     {
225 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_4_a900c1a7-9f63-44c4-a294-a87562b072bf.jpg?v=1696315519&width=250",
226 |         title: "BATH AND BODY GIFTING SET FOR MEN AND WOMEN",
227 |         name: "SKAI Aquatic Gift Set",
228 |         rating: 4.7,
229 |         price:1320.00,
230 |         strikedPrice: 1699.00
231 |     },
232 |     {
233 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/CelebshineGold-01_e00fff97-54c2-489f-b054-88b90a7e8cac.jpg?v=1652176140&width=250",
234 |         title: "ILLUMINATE, MOISTURISE, NOURISH",
235 |         name: "Celebshine Body Lotion Gold - 50ml",
236 |         rating: 4.5,
237 |         price:199.00,
238 |         strikedPrice: 499.00
239 |     },
240 | ];
241 | 
242 | 
243 | let container = document.querySelector("#content");
244 | let productNumber = document.querySelector("#productNumber");
245 | productNumber.innerText = `${arrData.length} products`;
246 | 
247 | 
248 | function appendData(arrData){
249 |     container.innerHTML = "";
250 | arrData.forEach(function(el){
251 |     // console.log(el);
252 |     let productDiv = document.createElement("div");
253 |     let img = document.createElement("img")
254 |     img.src=el.imageUrl;
255 |     img.style.cursor = "pointer";
256 |     img.addEventListener("click",function(){
257 |         showProduct(el);
258 |         // console.log(el);
259 |     })
260 |     let p1 = document.createElement("p")
261 |     p1.innerText = el.title
262 |     let h4 = document.createElement("h4");
263 |     h4.innerText = el.name;
264 |     h4.setAttribute("class","hide-text")
265 |     let ratingDiv = document.createElement("div");
266 |     ratingDiv.setAttribute("class","rating")
267 |     let ratingP = document.createElement("p");
268 |     ratingP.setAttribute("class","material-icons")
269 |     ratingP.innerText = "star"
270 |     let p2 = document.createElement("p");
271 |     p2.innerText = el.rating;
272 |     let span1 = document.createElement("span");
273 |     span1.innerText = `₹${el.price}`
274 |     let span2 = document.createElement("span");
275 |     span2.innerText = `₹${el.strikedPrice}`;
276 |     span2.style.textDecoration = "line-through";
277 |     let btn = document.createElement("button")
278 |     btn.innerText = "ADD TO CART";
279 |     btn.addEventListener("click",function(){
280 |         alert("Added to cart");
281 |         addToCart(el);
282 |     })  
283 | 
284 |     ratingDiv.append(ratingP,p2)
285 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
286 |     container.append(productDiv);
287 | })
288 | 
289 | }
290 | appendData(arrData)
291 | 
292 | let select = document.querySelector("#sort");
293 | select.addEventListener("change",function(){
294 |     arrData.sort(function(a,b){
295 |         if(select.value == "lowToHigh"){
296 |             return(a.price - b.price)
297 |         }
298 |         else if(select.value == "highToLow"){
299 |             return(b.price - a.price);
300 |         }
301 |     })
302 |     appendData(arrData);
303 | })
304 | 
305 | 
306 | function showProduct(el){
307 |     localStorage.setItem("showProduct",JSON.stringify(el));
308 |     window.location.href = "./showProduct.html";
309 | }
310 | 
311 | function addToCart(el){
312 |     // console.log(el);
313 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
314 |     cartArr.push(el);
315 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
316 | }
317 | // console.log(newArr)


--------------------------------------------------------------------------------
/shopall.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_6326984c-e89a-43ba-b560-e35d40faba70.jpg?v=1703835295&width=250",
 18 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 19 |         name: "Luxury OUD Experience Set",
 20 |         rating: 5.0,
 21 |         price: 849.00,
 22 |         strikedPrice: 1099.00
 23 | 
 24 |     },
 25 |     {
 26 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/ManPerfumeGiftSet-01_2_eb660165-6da9-4e14-bdf0-fabd68113a00.jpg?v=1695204946&width=250",
 27 |         title: "EAU DE PARFUM",
 28 |         name: "Luxury Perfume Gift Set For Men - 4 x 20mls",
 29 |         rating: 4.4,
 30 |         price: 549.00,
 31 |         strikedPrice: 849.00,
 32 | 
 33 |     },
 34 |     {
 35 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDGold-01.jpg?v=1698055234&width=250",
 36 |         title: "EAU DE PARFUM FOR ALL",
 37 |         name: "OUD GOLD - 100ml",
 38 |         rating: 5.0,
 39 |         price: 840.00,
 40 |         strikedPrice: 1099.00,
 41 | 
 42 |     },
 43 |     {
 44 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/UnisexPerfumeGiftSet_1.jpg?v=1695204331&width=250",
 45 |         title: "EAU DE PARFUM",
 46 |         name: "Luxury Unisex Perfume Gift Set - 4 x 20mls",
 47 |         rating: 4.6,
 48 |         price: 549.00,
 49 |         strikedPrice: 849.00,
 50 | 
 51 |     },
 52 |     {
 53 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOMAN_3b131d25-7893-4ad5-a17a-4b3de9a3ebd3.jpg?v=1693290059&width=250",
 54 |         title: "EAU DE PARFUM",
 55 |         name: "CEO Man Luxury Perfume - 100ml",
 56 |         rating: 4.9,
 57 |         price: 489.00,
 58 |         strikedPrice: 899.00,
 59 | 
 60 |     },
 61 |     {
 62 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LuxuryCollectionGiftSet-01.jpg?v=1705048050&width=250",
 63 |         title: "EAU DE PARFUM",
 64 |         name: "Luxury Perfume Gift Set For Women - 4 x 20mls",
 65 |         rating: 4.9,
 66 |         price: 549.00,
 67 |         strikedPrice: 849.00,
 68 | 
 69 |     },
 70 |     {
 71 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/WhiteOUD_b00b288c-016d-4071-b71c-f7e9a2cef50f.jpg?v=1698837551&width=250",
 72 |         title: "EAU DE PARFUM",
 73 |         name: "White Oud Unisex - 100ml",
 74 |         rating: 4.7,
 75 |         price: 565.00,
 76 |         strikedPrice: 999.00,
 77 | 
 78 |     },
 79 |     {
 80 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai_2e0d54be-3ab0-458b-a2af-47d666c93e0e.jpg?v=1693289226&width=250",
 81 |         title: "EAU DE COLOGNE",
 82 |         name: "Skai Aquatic Unisex Perfume - 100ml",
 83 |         rating: 4.9,
 84 |         price: 489.00,
 85 |         strikedPrice: 699.00,
 86 | 
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Fresh_5bfea1d7-05d4-4881-afdd-4516f59ff782.jpg?v=1693290928&width=250",
 90 |         title: "EAU DE TOILETTE",
 91 |         name: "Fresh Unisex Perfume - 100ml",
 92 |         rating: 4.9,
 93 |         price: 515.00,
 94 |         strikedPrice: 899.00,
 95 | 
 96 |     },
 97 |     {
 98 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OCEANMan.jpg?v=1693289108&width=250",
 99 |         title: "EAU DE PARFUM FOR MEN",
100 |         name: "Ocean Man - 100ml",
101 |         rating: 4.9,
102 |         price: 840.00,
103 |         strikedPrice: 1099.00,
104 | 
105 |     },
106 |     {
107 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/HoneyOUD_68b92490-5598-445c-a661-4a2d978e9893.jpg?v=1693289057&width=250",
108 |         title: "PARFUM",
109 |         name: "Honey Oud Unisex Perfume - 100ml",
110 |         rating: 4.6,
111 |         price: 575.00,
112 |         strikedPrice: 999.00,
113 | 
114 |     },
115 |     {
116 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KLUBMan.jpg?v=1693289090&width=250",
117 |         title: "EAU DE PARFUM FOR MEN",
118 |         name: "Klub Man - 100ml",
119 |         rating: 4.6,
120 |         price: 575.00,
121 |         strikedPrice: 799.00,
122 |     },
123 |     {
124 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/SENORITA_239a3020-2072-4cdb-93da-8d2519b69f39.jpg?v=1693289176&width=250",
125 |         title: "EAU DE PARFUM",
126 |         name: "Senorita Woman Perfume - 100ml",
127 |         rating: 4.8,
128 |         price: 515.00,
129 |         strikedPrice: 899.00,
130 |     },
131 |     {
132 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDGold-01.jpg?v=1698055234&width=250",
133 |         title: "EAU DE PARFUM FOR ALL",
134 |         name: "OUD GOLD - 100ml",
135 |         rating: 4.9,
136 |         price: 840.00,
137 |         strikedPrice: 1099.00,
138 |     },
139 |     
140 |     {
141 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/HoneyOUD_68b92490-5598-445c-a661-4a2d978e9893.jpg?v=1693289057&width=250",
142 |         title: "PARFUM",
143 |         name: "Honey Oud Unisex Perfume - 100ml",
144 |         rating: 4.6,
145 |         price: 575.00,
146 |         strikedPrice: 999.00,
147 |     },
148 |     {
149 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai_2e0d54be-3ab0-458b-a2af-47d666c93e0e.jpg?v=1693289226&width=250",
150 |         title: "EAU DE COLOGNE",
151 |         name: "Skai Aquatic Unisex Perfume - 100ml",
152 |         rating: 4.9,
153 |         price: 489.00,
154 |         strikedPrice: 699.00,
155 |     },
156 |     {
157 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_3.jpg?v=1698055971&width=250",
158 |         title: "EAU DE PARFUM FOR MEN",
159 |         name: "SWAG STAR - 100ml",
160 |         rating: 4.9,
161 |         price: 390.00,
162 |         strikedPrice: 499.00,
163 |     },
164 |     {
165 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/GOAT.jpg?v=1693288981&width=250",
166 |         title: "EAU DE PARFUM FOR MEN",
167 |         name: "G.O.A.T. Man - 100ml",
168 |         rating: 4.8,
169 |         price: 575.00,
170 |         strikedPrice: 799.00,
171 |     },
172 |     {
173 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/IMPACT.jpg?v=1693289075&width=250",
174 |         title: "EAU DE COLOGNE",
175 |         name: "Impact Man Perfume - 100ml",
176 |         rating: 4.7,
177 |         price: 515.00,
178 |         strikedPrice: 899.00,
179 |     },
180 |     {
181 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Sin_DonDeoCombo.jpg?v=1693930645&width=250",
182 |         title: "UNISEX AND MAN BODY DEODORANTS",
183 |         name: "Sin And Don Deo Combo - 2 x 150ml",
184 |         rating: 4.4,
185 |         price: 299.00,
186 |         strikedPrice: 598.00,
187 |     },
188 |     {
189 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DEOGiftSetPackof4.jpg?v=1693931505&width=250",
190 |         title: "SET OF 4 BODY DEOS FOR MEN",
191 |         name: "Deo Gift Set - Stud, Fyre, Fresh And Game Pack Of 4 x 150ml",
192 |         rating: 4.2,
193 |         price: 499.00,
194 |         strikedPrice: 1196.00,
195 |     },
196 |     {
197 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Perfume-Trial-Pack-_10-5ml.jpg?v=1693930900&width=250",
198 |         title: "PACK OF 10 X 5ML PERFUMES.",
199 |         name: "Luxury Perfume Trial Pack",
200 |         rating: 4.8,
201 |         price: 349.00,
202 |         strikedPrice: 399.00,
203 |     },
204 |     {
205 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/EverreadyWomenCombo.jpg?v=1693931485&width=250",
206 |         title: "5 PREMIUM FEMININE SCENTS",
207 |         name: "Everready Women Combo",
208 |         rating: 4.5,
209 |         price: 2249.00,
210 |         strikedPrice: 4695.00,
211 |     },
212 |     {
213 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RefreshingYouCombo.jpg?v=1693930765&width=250",
214 |         title: "FAMILY COMBO",
215 |         name: "Refreshing You Combo",
216 |         rating: 4.5,
217 |         price: 2249.00,
218 |         strikedPrice: 4595.00,
219 |     },
220 |     {
221 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LoveIsInTheRoll-OnCombo.jpg?v=1693922129&width=250",
222 |         title: "ROLL ON DEO - MEN & WOMEN",
223 |         name: "Love Is In The Roll-On Combo",
224 |         rating: 4.3,
225 |         price: 349.00,
226 |         strikedPrice: 398.00,
227 |     },
228 |     {
229 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DarkOUD-01_1.jpg?v=1698064203&width=250",
230 |         title: "EAU DE PARFUM FOR ALL",
231 |         name: "Dark OUD - 100ml",
232 |         rating: 4.9,
233 |         price: 840.00,
234 |         strikedPrice: 1099.00,
235 |     },
236 |     {
237 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/GOAT.jpg?v=1693288981&width=250",
238 |         title: "G.O.A.T. Man - 100ml",
239 |         name: "EAU DE PARFUM FOR MEN",
240 |         rating: 4.8,
241 |         price: 575.00,
242 |         strikedPrice: 799.00,
243 |     },
244 |     {
245 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/products/KumkumadiFaceScrubMask-01_508c26a7-953b-4bbb-996f-017852d2032d.jpg?v=1670310597&width=250",
246 |         title: "Kumkumadi Face Scrub Mask",
247 |         name: "Scrub Mask",
248 |         rating: 4.5,
249 |         price: 249.00,
250 |         strikedPrice: 449.00,
251 |     },
252 |     {
253 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Dategiftset-01.jpg?v=1705563221&width=250",
254 |         title: "DATE Woman Premium Gift Set",
255 |         name: "BATH AND BODY GIFT SET FOR WOMEN",
256 |         rating: 5.0,
257 |         price: 1329.00,
258 |         strikedPrice: 1699.00,
259 |     },
260 |     {
261 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/FeetLoveFootCream-50gm.jpg?v=1693921603&width=250",
262 |         title: "SOOTHING & MOISTURISING FOOT CREAM",
263 |         name: "Feet Love Foot Cream - 50gm",
264 |         rating: 4.4,
265 |         price: 149.00,
266 |         strikedPrice: 299.00,
267 |     },
268 | ];
269 | 
270 | 
271 | let container = document.querySelector("#content");
272 | let productNumber = document.querySelector("#productNumber");
273 | productNumber.innerText = `${arrData.length} products`;
274 | 
275 | 
276 | function appendData(arrData){
277 |     container.innerHTML = "";
278 | arrData.forEach(function(el){
279 |     // console.log(el);
280 |     let productDiv = document.createElement("div");
281 |     let img = document.createElement("img")
282 |     img.src=el.imageUrl;
283 |     img.style.cursor = "pointer";
284 |     img.addEventListener("click",function(){
285 |         showProduct(el);
286 |         // console.log(el);
287 |     })
288 |     let p1 = document.createElement("p")
289 |     p1.innerText = el.title
290 |     let h4 = document.createElement("h4");
291 |     h4.innerText = el.name;
292 |     h4.setAttribute("class","hide-text")
293 |     let ratingDiv = document.createElement("div");
294 |     ratingDiv.setAttribute("class","rating")
295 |     let ratingP = document.createElement("p");
296 |     ratingP.setAttribute("class","material-icons")
297 |     ratingP.innerText = "star"
298 |     let p2 = document.createElement("p");
299 |     p2.innerText = el.rating;
300 |     let span1 = document.createElement("span");
301 |     span1.innerText = `₹${el.price}`
302 |     let span2 = document.createElement("span");
303 |     span2.innerText = `₹${el.strikedPrice}`;
304 |     span2.style.textDecoration = "line-through";
305 |     let btn = document.createElement("button")
306 |     btn.innerText = "ADD TO CART";
307 |     btn.addEventListener("click",function(){
308 |         alert("Added to cart");
309 |         addToCart(el);
310 |     })  
311 | 
312 |     ratingDiv.append(ratingP,p2)
313 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
314 |     container.append(productDiv);
315 | })
316 | 
317 | }
318 | appendData(arrData)
319 | 
320 | let select = document.querySelector("#sort");
321 | select.addEventListener("change",function(){
322 |     arrData.sort(function(a,b){
323 |         if(select.value == "lowToHigh"){
324 |             return(a.price - b.price)
325 |         }
326 |         else if(select.value == "highToLow"){
327 |             return(b.price - a.price);
328 |         }
329 |     })
330 |     appendData(arrData);
331 | })
332 | 
333 | 
334 | function showProduct(el){
335 |     localStorage.setItem("showProduct",JSON.stringify(el));
336 |     window.location.href = "./showProduct.html";
337 | }
338 | function addToCart(el){
339 |     // console.log(el);
340 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
341 |     cartArr.push(el);
342 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
343 | }
344 | // console.log(newArr)


--------------------------------------------------------------------------------
/perfume.js:
--------------------------------------------------------------------------------
  1 | let loginBtn = document.querySelector("#login");
  2 | console.log(loginBtn);
  3 | let isAuth = localStorage.getItem("isAuth") || "Not Authenticated";
  4 | 
  5 | if(isAuth !== "Authenticated"){
  6 |     window.location.href ="./login.html";
  7 | }else{
  8 |     loginBtn.innerText = "Logout";
  9 |     loginBtn.addEventListener("click",function(){
 10 |         localStorage.setItem("isAuth", "Not Authenticated");
 11 |         window.location.reload();
 12 |     })
 13 | }
 14 | 
 15 | let arrData = [
 16 |     {
 17 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/ManPerfumeGiftSet-01_2_eb660165-6da9-4e14-bdf0-fabd68113a00.jpg?v=1695204946&width=250",
 18 |         title: "EAU DE PARFUM",
 19 |         name: "Luxury Perfume Gift Set For Men",
 20 |         rating: 4.4,
 21 |         price: 549.00,
 22 |         strikedPrice: 849.00
 23 | 
 24 |     },
 25 |     {
 26 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_6326984c-e89a-43ba-b560-e35d40faba70.jpg?v=1703835295&width=250",
 27 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 28 |         name: "Luxury OUD Experience Set",
 29 |         rating: 4.8,
 30 |         price: 849.00,
 31 |         strikedPrice: 1099.00,
 32 | 
 33 |     },
 34 |     {
 35 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/WhiteOUD_b00b288c-016d-4071-b71c-f7e9a2cef50f.jpg?v=1698837551&width=300",
 36 |         title: "EAU DE PARFUM",
 37 |         name: "White Oud Unisex - 100ml",
 38 |         rating: 4.7,
 39 |         price: 565.00,
 40 |         strikedPrice: 999.00,
 41 | 
 42 |     },
 43 |     {
 44 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/UnisexPerfumeGiftSet_1.jpg?v=1695204331&width=250",
 45 |         title: "EAU DE PARFUM",
 46 |         name: "Luxury Unisex Perfume Gift Set - 4 x 20mls",
 47 |         rating: 4.6,
 48 |         price: 549.00,
 49 |         strikedPrice: 849.00,
 50 | 
 51 |     },
 52 |     {
 53 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOMAN_3b131d25-7893-4ad5-a17a-4b3de9a3ebd3.jpg?v=1693290059&width=250",
 54 |         title: "EAU DE PARFUM",
 55 |         name: "CEO Man Luxury Perfume - 100ml",
 56 |         rating: 4.9,
 57 |         price: 489.00,
 58 |         strikedPrice: 899.00,
 59 | 
 60 |     },
 61 |     {
 62 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LuxuryCollectionGiftSet-01.jpg?v=1705048050&width=250",
 63 |         title: "PERFUME MINIS FOR ALL (SET OF 4)",
 64 |         name: "White Oud Unisex - 100ml",
 65 |         rating: 4.6,
 66 |         price: 949.00,
 67 |         strikedPrice: 1199.00,
 68 | 
 69 |     },
 70 |     {
 71 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DATEWOMAN.jpg?v=1693290911&width=250",
 72 |         title: "EAU DE PARFUM FOR WOMEN",
 73 |         name: "Date Woman Perfume - 100ml",
 74 |         rating: 4.8,
 75 |         price: 575.00,
 76 |         strikedPrice: 999.00,
 77 | 
 78 |     },
 79 |     {
 80 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/D.I.V.A.jpg?v=1693288946&width=250",
 81 |         title: "EAU DE PARFUM FOR WOMEN",
 82 |         name: "D.I.V.A. Woman - 100ml",
 83 |         rating: 4.9,
 84 |         price: 840.00,
 85 |         strikedPrice: 1099.00,
 86 | 
 87 |     },
 88 |     {
 89 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/SENORITA_239a3020-2072-4cdb-93da-8d2519b69f39.jpg?v=1693289176&width=250",
 90 |         title: "EAU DE PARFUM",
 91 |         name: "Senorita Woman Perfume - 100ml",
 92 |         rating: 4.8,
 93 |         price: 515.00,
 94 |         strikedPrice: 899.00,
 95 | 
 96 |     },
 97 |     {
 98 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/WomanPerfumeGiftSet_1.jpg?v=1695204304&width=250",
 99 |         title: "EAU DE PARFUM",
100 |         name: "BLU Man - 100ml",
101 |         rating: 4.9,
102 |         price: 549.00,
103 |         strikedPrice: 849.00,
104 | 
105 |     },
106 |     {
107 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/CEOWOMAN_c3390a16-a049-4822-b4b0-781401d274dd.jpg?v=1693288926&width=250",
108 |         title: "EAU DE PARFUM",
109 |         name: "CEO Woman Perfume - 100ml",
110 |         rating: 4.7,
111 |         price: 499.00,
112 |         strikedPrice: 899.00,
113 | 
114 |     },
115 |     {
116 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/BestOfMenPerfumeCombo-100mlX3.jpg?v=1693932739&width=250",
117 |         title: "EAU DE PARFUM FOR MEN",
118 |         name: "Best Of Men Perfume Combo - 100ml x 3",
119 |         rating: 4.7,
120 |         price: 1483.00,
121 |         strikedPrice: 2697.00,
122 |     },
123 |     {
124 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DeoParfumPackof3-01_e183c74a-e406-47e6-87af-38151cded229.jpg?v=1695649691&width=250",
125 |         title: "BODY DEODORANT FOR MEN",
126 |         name: "Men's No Gas Deodorant Gift Set",
127 |         rating: 4.8,
128 |         price: 599.00,
129 |         strikedPrice: 747.00,
130 |     },
131 |     {
132 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDGold-01.jpg?v=1698055234&width=250",
133 |         title: "EAU DE PARFUM FOR ALL",
134 |         name: "OUD GOLD - 100ml",
135 |         rating: 4.9,
136 |         price: 840.00,
137 |         strikedPrice: 1099.00,
138 |     },
139 |     {
140 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/KLUBMan.jpg?v=1693289090&width=250",
141 |         title: "EAU DE PARFUM FOR MEN",
142 |         name: "Klub Man - 100ml",
143 |         rating: 4.6,
144 |         price: 575.00,
145 |         strikedPrice: 799.00,
146 |     },
147 |     {
148 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/OUDParfum.jpg?v=1693289126&width=250",
149 |         title: "PARFUM",
150 |         name: "Oud Unisex Luxury Perfume - 100ml",
151 |         rating: 4.7,
152 |         price: 575.00,
153 |         strikedPrice: 999.00,
154 |     },
155 |     {
156 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/GlamWoman.jpg?v=1693289036&width=250",
157 |         title: "EAU DE PARFUM",
158 |         name: "Glam Woman Perfume - 100ml",
159 |         rating: 4.8,
160 |         price: 575.00,
161 |         strikedPrice: 999.00,
162 |     },
163 | 
164 |     {
165 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/HoneyOUD_68b92490-5598-445c-a661-4a2d978e9893.jpg?v=1693289057&width=250",
166 |         title: "PARFUM",
167 |         name: "Honey Oud Unisex Perfume - 100ml",
168 |         rating: 4.6,
169 |         price: 575.00,
170 |         strikedPrice: 999.00,
171 |     },
172 |     {
173 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Skai_2e0d54be-3ab0-458b-a2af-47d666c93e0e.jpg?v=1693289226&width=250",
174 |         title: "EAU DE COLOGNE",
175 |         name: "Skai Aquatic Unisex Perfume - 100ml",
176 |         rating: 4.9,
177 |         price: 489.00,
178 |         strikedPrice: 699.00,
179 |     },
180 |     {
181 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/0_3.jpg?v=1698055971&width=300",
182 |         title: "EAU DE PARFUM FOR MEN",
183 |         name: "SWAG STAR - 100ml",
184 |         rating: 4.9,
185 |         price: 390.00,
186 |         strikedPrice: 499.00,
187 |     },
188 |     {
189 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/GOAT.jpg?v=1693288981&width=250",
190 |         title: "EAU DE PARFUM FOR MEN",
191 |         name: "G.O.A.T. Man - 100ml",
192 |         rating: 4.8,
193 |         price: 575.00,
194 |         strikedPrice: 799.00,
195 |     },
196 |     {
197 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/IMPACT.jpg?v=1693289075&width=250",
198 |         title: "EAU DE COLOGNE",
199 |         name: "Impact Man Perfume - 100ml",
200 |         rating: 4.7,
201 |         price: 515.00,
202 |         strikedPrice: 899.00,
203 |     },
204 |     {
205 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Sin_DonDeoCombo.jpg?v=1693930645&width=250",
206 |         title: "UNISEX AND MAN BODY DEODORANTS",
207 |         name: "Sin And Don Deo Combo - 2 x 150ml",
208 |         rating: 4.4,
209 |         price: 299.00,
210 |         strikedPrice: 598.00,
211 |     },
212 |     {
213 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DEOGiftSetPackof4.jpg?v=1693931505&width=300",
214 |         title: "SET OF 4 BODY DEOS FOR MEN",
215 |         name: "Deo Gift Set - Stud, Fyre, Fresh And Game Pack Of 4 x 150ml",
216 |         rating: 4.2,
217 |         price: 499.00,
218 |         strikedPrice: 1196.00,
219 |     },
220 |     {
221 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/Perfume-Trial-Pack-_10-5ml.jpg?v=1693930900&width=250",
222 |         title: "PACK OF 10 X 5ML PERFUMES.",
223 |         name: "Luxury Perfume Trial Pack",
224 |         rating: 4.8,
225 |         price: 349.00,
226 |         strikedPrice: 399.00,
227 |     },
228 |     {
229 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/EverreadyWomenCombo.jpg?v=1693931485&width=250",
230 |         title: "5 PREMIUM FEMININE SCENTS",
231 |         name: "Everready Women Combo",
232 |         rating: 4.5,
233 |         price: 2249.00,
234 |         strikedPrice: 4695.00,
235 |     },
236 |     {
237 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RefreshingYouCombo.jpg?v=1693930765&width=250",
238 |         title: "FAMILY COMBO",
239 |         name: "Refreshing You Combo",
240 |         rating: 4.5,
241 |         price: 2249.00,
242 |         strikedPrice: 4595.00,
243 |     },
244 |     {
245 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/LoveIsInTheRoll-OnCombo.jpg?v=1693922129&width=250",
246 |         title: "ROLL ON DEO - MEN & WOMEN",
247 |         name: "Love Is In The Roll-On Combo",
248 |         rating: 4.3,
249 |         price: 349.00,
250 |         strikedPrice: 398.00,
251 |     },
252 |     {
253 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/DarkOUD-01_1.jpg?v=1698064203&width=250",
254 |         title: "EAU DE PARFUM FOR ALL",
255 |         name: "Dark OUD - 100ml",
256 |         rating: 4.9,
257 |         price: 840.00,
258 |         strikedPrice: 1099.00,
259 |     },
260 |     {
261 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_c00cb947-dade-475f-97a0-bb01a4c9b651.jpg?v=1700138007&width=250",
262 |         title: "WHITE OUD SHOWER GEL 250 ML + WHITE OUD PERFUME 20 ML",
263 |         name: "Win with White Combo",
264 |         rating: 4.9,
265 |         price: 399.00,
266 |         strikedPrice: 748.00,
267 |     },
268 |     {
269 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_25f79680-b265-4423-b0c2-bdf6af78b69a.jpg?v=1700137801&width=250",
270 |         title: "SKAI AQUATIC SHOWER GEL 250 ML + SKAI AQUATIC PERFUME 20ML",
271 |         name: "Touch the SKAI Combo",
272 |         rating: 4.9,
273 |         price: 399.00,
274 |         strikedPrice: 698.00,
275 |     },
276 |     {
277 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_937f4a4a-64b8-4031-811f-4e3de68048e5.jpg?v=1699960465&width=250",
278 |         title: "CEO MAN SHOWER GEL 250 ML + CEO MAN PERFUME 20 ML",
279 |         name: "Men in Black combo for Him",
280 |         rating: 4.9,
281 |         price: 399.00,
282 |         strikedPrice: 698.00,
283 |     },
284 |     {
285 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/1_065f669b-8439-4b38-b779-050823e888ce.jpg?v=1700137831&width=250",
286 |         title: "DATE WOMAN SHOWER GEL 250 ML + DATE WOMAN PERFUME 20 ML",
287 |         name: "All Day Romance Combo for Her",
288 |         rating: 4.9,
289 |         price: 399.00,
290 |         strikedPrice: 698.00,
291 |     },
292 |     {
293 |         imageUrl: "https://bellavitaorganic.com/cdn/shop/files/RcbLimitedEditionPerfumeGiftBox_1.jpg?v=1693996065&width=250",
294 |         title: "PERFUME GIFT SET",
295 |         name: "Rcb Limited Edition Perfume Gift Box - 4 x 20ml",
296 |         rating: 4.8,
297 |         price: 549.00,
298 |         strikedPrice: 849.00,
299 |     },
300 | ];
301 | 
302 | 
303 | let container = document.querySelector("#content");
304 | let productNumber = document.querySelector("#productNumber");
305 | productNumber.innerText = `${arrData.length} products`;
306 | 
307 | 
308 | function appendData(arrData){
309 |     container.innerHTML = "";
310 | arrData.forEach(function(el){
311 |     // console.log(el);
312 |     let productDiv = document.createElement("div");
313 |     let img = document.createElement("img")
314 |     img.src=el.imageUrl;
315 |     img.style.cursor = "pointer";
316 |     img.addEventListener("click",function(){
317 |         showProduct(el);
318 |         // console.log(el);
319 |     })
320 |     let p1 = document.createElement("p")
321 |     p1.innerText = el.title
322 |     let h4 = document.createElement("h4");
323 |     h4.innerText = el.name;
324 |     h4.setAttribute("class","hide-text")
325 |     let ratingDiv = document.createElement("div");
326 |     ratingDiv.setAttribute("class","rating")
327 |     let ratingP = document.createElement("p");
328 |     ratingP.setAttribute("class","material-icons")
329 |     ratingP.innerText = "star"
330 |     let p2 = document.createElement("p");
331 |     p2.innerText = el.rating;
332 |     let span1 = document.createElement("span");
333 |     span1.innerText = `₹${el.price}`
334 |     let span2 = document.createElement("span");
335 |     span2.innerText = `₹${el.strikedPrice}`;
336 |     span2.style.textDecoration = "line-through";
337 |     let btn = document.createElement("button")
338 |     btn.innerText = "ADD TO CART";
339 |     btn.addEventListener("click",function(){
340 |         alert("Added to cart");
341 |         addToCart(el);
342 |     })  
343 | 
344 |     ratingDiv.append(ratingP,p2)
345 |     productDiv.append(img,p1,h4,ratingDiv,span1,span2,btn);
346 |     container.append(productDiv);
347 | })
348 | 
349 | }
350 | appendData(arrData)
351 | 
352 | let select = document.querySelector("#sort");
353 | select.addEventListener("change",function(){
354 |     arrData.sort(function(a,b){
355 |         if(select.value == "lowToHigh"){
356 |             return(a.price - b.price)
357 |         }
358 |         else if(select.value == "highToLow"){
359 |             return(b.price - a.price);
360 |         }
361 |     })
362 |     appendData(arrData);
363 | })
364 | 
365 | 
366 | function showProduct(el){
367 |     localStorage.setItem("showProduct",JSON.stringify(el));
368 |     window.location.href = "./showProduct.html";
369 | }
370 | function addToCart(el){
371 |     // console.log(el);
372 |     let cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
373 |     cartArr.push(el);
374 |     localStorage.setItem("cartItems",JSON.stringify(cartArr));
375 | }
376 | // console.log(newArr)


--------------------------------------------------------------------------------