├── Common Files
    ├── image
    │   ├── favicon.png
    │   └── myntra-removebg-preview.png
    ├── corousel.js
    ├── hyperlinks.js
    ├── headerMenu.js
    ├── women.js
    ├── men.js
    ├── homeLiving.js
    └── homeLiving.css
├── payment
    ├── end.css
    ├── end.html
    ├── otp.html
    ├── otp.css
    ├── address.html
    ├── payment.css
    ├── address.css
    ├── payment.html
    └── confetti.js
├── Profile
    ├── profile.css
    ├── signup.js
    ├── profile.js
    ├── profile.html
    └── signup.html
├── wishlist
    ├── wishlist.css
    ├── cart.html
    ├── wishlist.js
    ├── cart.js
    ├── cart.css
    └── wishlist.html
├── Landingpage
    ├── navbar.css
    ├── footer.css
    ├── header.css
    └── index.html
├── menspage
    ├── mens.css
    └── mens.html
├── Home Living Products
    ├── home_furnishing.css
    └── home_furnishing.html
├── Homepages
    ├── homeLiving.html
    ├── menHomePage.html
    └── womenHomePage.html
├── index.html
└── womensdata
    ├── style&js
        └── womestyle.css
    └── women.html


/Common Files/image/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveenkumar-42/e-commerce/HEAD/Common Files/image/favicon.png


--------------------------------------------------------------------------------
/Common Files/image/myntra-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveenkumar-42/e-commerce/HEAD/Common Files/image/myntra-removebg-preview.png


--------------------------------------------------------------------------------
/Common Files/corousel.js:
--------------------------------------------------------------------------------
1 |  // <!-- COROUSEL SCRIPT -->
2 |  var counter = 1;
3 |  setInterval(function(){
4 |  document.getElementById('radio' + counter).checked = true;
5 |  counter++;
6 |  if(counter > 4){
7 |      counter = 1;
8 |  }
9 |  }, 3000);


--------------------------------------------------------------------------------
/Common Files/hyperlinks.js:
--------------------------------------------------------------------------------
 1 | 
 2 | document.querySelector('.fa_user').addEventListener('click', function(){
 3 |     window.location.href = "../Profile/profile.html"
 4 | })
 5 | // HYPERLINKS
 6 | document.querySelector('.fa-heart').addEventListener('click', function(){
 7 |     window.location.href = "../wishlist/wishlist.html"
 8 | })
 9 | document.querySelector(".fa_wishlist").addEventListener('click', function(){
10 |     window.location.href = "../wishlist/wishlist.html"
11 | })
12 | document.querySelector('.fa-bag-shopping').addEventListener('click', function(){
13 |     window.location.href = "../wishlist/cart.html"
14 | })
15 | document.querySelector('.fa_cart').addEventListener('click', function(){
16 |     window.location.href = "../wishlist/cart.html"
17 | })
18 | 


--------------------------------------------------------------------------------
/Common Files/headerMenu.js:
--------------------------------------------------------------------------------
 1 | 
 2 | //<------- TOGGLE MENU JS ----------->//
 3 | function myFunction() {
 4 |   var dropDownMenu = document.getElementById("myDropdown")
 5 |   dropDownMenu.classList.toggle("show")
 6 | }
 7 | 
 8 | window.onclick = function(event) {
 9 |   if (!event.target.matches('.dropbtn')) {
10 |     var dropdowns = document.getElementsByClassName("dropdown-content");
11 |     var i;
12 |     for (i = 0; i < dropdowns.length; i++) {
13 |       var openDropdown = dropdowns[i];
14 |       if (openDropdown.classList.contains('show')) {
15 |         openDropdown.classList.remove('show');
16 |       }
17 |     }
18 |   }
19 | }
20 | 
21 | 
22 | //<---------- HYPERLINK FOR PROFILE ---------->//
23 | document.getElementById('profile').addEventListener('click', function(){
24 |     window.location.href = "/Profile/signup.html"
25 | })
26 | 


--------------------------------------------------------------------------------
/payment/end.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 2 | 
 3 | :root {
 4 |     font-size: 80%;
 5 |     --primaryFont: 'DM Sans', sans-serif;
 6 |     --charSpace: 6px;
 7 |     --primaryColor: #3e4152;
 8 |     --secondaryColor: #fafbfc;
 9 | }
10 | 
11 | a:link {
12 |     text-decoration: none;
13 | }
14 | 
15 | body {
16 |     font-family: var(--primaryFont);
17 |     scroll-behavior: smooth;
18 | }
19 | 
20 | 
21 | #confirm {
22 |     font-size: 1.5rem;
23 |     margin: auto;
24 |     margin-top: 40px;
25 |     display: flex;
26 |     align-items: center;
27 |     justify-content: center;
28 |     width: 80%;
29 |     height: 100px;
30 |     color: limegreen;
31 |     text-align: center;
32 |     border-radius: 10%;
33 | }
34 | 
35 | #move{
36 |     margin: auto;
37 |     margin-top: 20px;
38 |     display: flex;
39 |     align-items: center;
40 |     justify-content: center;
41 |     width: 20%;
42 |     height: 60px;
43 |     color: white;
44 |     background-color: #ff3e6c;
45 |     font-weight: bolder;
46 |     border-radius: 20px;
47 | }
48 | 
49 | #thanks{
50 |     width: 500px;
51 |     margin: 2rem auto;
52 | }
53 | #thanks img{
54 |     width: 100%;
55 |     display: block;
56 | }


--------------------------------------------------------------------------------
/Profile/profile.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body{
 3 |    background-image: linear-gradient(to left, #fdeeec, #fdeeed, #fdedef, #fdedf1, #fcedf3);
 4 | }
 5 | #search > input{
 6 |   margin-top: unset;
 7 | }
 8 | #search #search_icon{
 9 |   top: 5.6rem;
10 | }
11 | #boxbody{
12 |   background-color: white;
13 |   width :400px;
14 |   margin: auto;
15 |   margin-top: 12.5rem;
16 | }
17 | img{
18 |   width: 100%;
19 | }
20 | h2{
21 |   font-size: 2.3rem;
22 | }
23 | h2 span,p{
24 |   color: gray;
25 | }
26 | p{
27 |   margin-top: 1rem;
28 |   font-size: 1.5rem;
29 | }
30 | p span{
31 |   color:#ff3f6c;
32 | }
33 | .signin{
34 |   padding: 30px;
35 | }
36 | button{
37 |   width: 100%;
38 |   color: white;
39 |   background-color:#ff3f6c ;
40 |   border: none;
41 |   text-transform: uppercase;
42 |   padding: 12px;
43 |   margin-top: 2.5rem;
44 |   cursor: pointer;
45 | }
46 | input{
47 |    padding: 10px 145px 10px 20px;
48 |    margin-top:20px ;
49 | }
50 | .imgbo{
51 |   margin-bottom: -10px;
52 | }
53 | h3{
54 |   margin-bottom: -2px;
55 | }
56 | 
57 | #signUp, #logIn{
58 |   cursor: pointer;
59 |   font-weight: 900;
60 |   letter-spacing: 1px;
61 |   border-bottom: 1px solid #ff3f6c;
62 | }
63 | /* RIGHT SIDE ICONS */
64 | #right_icon{
65 |   gap: 0.5rem;
66 | }
67 | #right_icon > div{
68 |   cursor: pointer;   
69 | }
70 | 


--------------------------------------------------------------------------------
/payment/end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <script src="https://kit.fontawesome.com/72215895a8.js" crossorigin="anonymous"></script>
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |     <title>Confirm Payment</title>
10 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
11 |     <link rel="stylesheet" href="../payment/end.css">
12 |     
13 | </head>
14 | 
15 | <body>
16 |     <div id="thanks">
17 |         <img src="https://bit.ly/3J2FZ5A" alt="">
18 |     </div>
19 |     <div id="confirm">
20 |         <h3>Order Confirmed<br>
21 |             You will soon receive a mail/SMS regarding confirmation of your recent order</h2>
22 |     </div>
23 | 
24 |     <a href="../Landingpage/index.html">
25 |         <div id="move">GO TO HOME</div>
26 |     </a>
27 | 
28 | </body>
29 | 
30 | </html>
31 | <script src="../payment/confetti.js"></script>
32 |     <script>
33 |          const start = () => {
34 |             setTimeout(function() {
35 |                 confetti.start()
36 |             }, 1000); 
37 |         };
38 | 
39 |         const stop = () => {
40 |             setTimeout(function() {
41 |                 confetti.stop()
42 |             }, 10000); 
43 |         };
44 | 
45 |         start();
46 |         stop();
47 |     </script>


--------------------------------------------------------------------------------
/payment/otp.html:
--------------------------------------------------------------------------------
 1 |     
 2 |     <!DOCTYPE html>
 3 |     <html lang="en">
 4 |     
 5 |     <head>
 6 |         <meta charset="UTF-8">
 7 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |         <script src="https://kit.fontawesome.com/72215895a8.js" crossorigin="anonymous"></script>
10 |         <link rel="stylesheet" href="otp.css">
11 |         <title>Document</title>
12 |     </head>
13 |     
14 |     <body>
15 |         <div id="otpDiv">
16 |             <img src="https://constant.myntassets.com/pwa/assets/img/3a438cb4-c9bf-4316-b60c-c63e40a1a96d1548071106233-mobile-verification.jpg"
17 |                 alt="">
18 |             <div id="otpline">
19 |                 <h2>Verify with OTP</h2>
20 |                 <p>Sent to registered Mobile No.<p id="otpNum"></p></p>
21 |             </div>
22 |             <div id="inputDiv">
23 |                 <input id="otp1" type="tel" maxlength="1">
24 |                 <input id="otp2" type="tel" maxlength="1">
25 |                 <input id="otp3" type="tel" maxlength="1">
26 |                 <input id="otp4" type="tel" maxlength="1">
27 |                
28 |             </div>
29 |            <button id="checkotp"> <a href="end.html">CONFIRM</a></button></a>
30 |             <div id="checkDiv">
31 |                 <h4>RESEND OTP</h4>
32 |             </div>
33 |         </div>
34 |     </body>
35 |     
36 |     </html>
37 |    
38 |     
39 |    
40 |     


--------------------------------------------------------------------------------
/payment/otp.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 2 | 
 3 | :root{
 4 |     font-size: 80%;
 5 |     --primaryFont : 'DM Sans', sans-serif;
 6 |     --charSpace : 6px; 
 7 |     --primaryColor : #3e4152;
 8 |     --secondaryColor : #fafbfc;
 9 | }
10 | a:link{
11 |     text-decoration: none;
12 | }
13 | body{
14 |     font-family: var(--primaryFont);
15 |     scroll-behavior: smooth;
16 | }
17 | 
18 | #otpDiv{
19 |     width:30%;
20 |     margin: auto;
21 |     margin-top:2%;
22 |     padding-bottom: 100px;
23 |     line-height: 2;
24 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;;
25 |     background-color: white;
26 | }
27 | #otpDiv>img
28 | {
29 |     width: 25%;
30 |     margin: auto;
31 |     margin-top: 60px;
32 |     padding:0px 60px;
33 | }
34 | #otpline{
35 |     width: 70%;
36 |     margin: auto;
37 | }
38 | p{
39 |     font-size: 13px;
40 | }
41 | h2+p{
42 |     color: gray;
43 |     margin-top: -0px;
44 | }
45 | #inputDiv{
46 |     display: flex;
47 |     width: 50%;
48 |     padding-left: 60px;
49 |     justify-content: space-between;
50 | }
51 | #inputDiv>input{
52 |     border:#e9e9ed solid 2px;
53 |     width: 25px;
54 |     color: black;
55 |     font-size: 20px;
56 | }
57 | button{
58 |     width: 50%;
59 |     height: 30px;
60 |     margin-left:60px;
61 |     margin-top: 40px;
62 |     border: none;
63 |     background-color:#ff3e6c ;
64 |     color: white;
65 |     font-weight: bold;
66 | }
67 | #checkDiv{
68 |     width: 80%;
69 |    padding-left: 60px;
70 |    
71 | }
72 | #checkDiv>h4{
73 |     color: #ff3e6c;
74 |     margin: 0px 63px;
75 | }
76 | 


--------------------------------------------------------------------------------
/Profile/signup.js:
--------------------------------------------------------------------------------
 1 | var userdata =JSON.parse(localStorage.getItem("userarr")) ||[];
 2 | 
 3 | document.querySelector("#signup_button").addEventListener("click",sigupfun);
 4 | 
 5 | 
 6 | 
 7 | function sigupfun(){
 8 |     console.log("inside fun")
 9 |     var name=document.querySelector("#name").value;
10 |    
11 |     var mob=document.querySelector("#mob").value;
12 | 
13 |     var mail=document.querySelector("#mail").value;
14 | 
15 |     var password=document.querySelector("#pass").value;
16 | 
17 |     if(name== "" || mob=="" || mail =="" || password ==""){
18 |         alert("fill in the empty fields")
19 |     }
20 | 
21 | else {
22 |        var userobj ={
23 |                   name:name,
24 |                   mob:mob,
25 |                   mail:mail,
26 |                   password:password
27 |                  };
28 | 
29 |         userdata.push(userobj);
30 |         
31 |         localStorage.setItem("userarr",JSON.stringify(userdata));
32 |    
33 | 
34 |         alert("signed up successfully");
35 | 
36 |         document.querySelector("#mob").value="";
37 |         document.querySelector("#mail").value="";
38 |         document.querySelector("#pass").value="";
39 |         document.querySelector("#name").value="";
40 | 
41 |      window.location.href="profile.html"
42 |      }
43 | }
44 | 
45 | 
46 | // HYPERLINK FOR PROFILE
47 | document.getElementById('profile').addEventListener('click', function(){
48 |     window.location.href = "profile.html"
49 |   })
50 | document.getElementById('landingPage').addEventListener('click', function(){
51 |     window.location.href = "../Landingpage/index.html"
52 | })
53 | 
54 | document.getElementById('logIn').addEventListener('click', function(){
55 |     window.location.href = "../Profile/profile.html"
56 | })


--------------------------------------------------------------------------------
/Profile/profile.js:
--------------------------------------------------------------------------------
 1 | document.querySelector("button").addEventListener("click",loginfun)
 2 | 
 3 |  var userdata =JSON.parse(localStorage.getItem("userarr")) ||[];
 4 | 
 5 | function loginfun(){
 6 |     var in_mob =document.querySelector("#mob").value;
 7 |   
 8 |     for(var a=userdata.length-1; a>=0 ;a--)
 9 |   {
10 |     if (in_mob ==""){
11 |         alert("enter mobile to login")
12 |         break;
13 |        }
14 |     
15 |      if(in_mob == userdata[a].mob){
16 |            if( checkpass(a)){
17 |              console.log(checkpass(a))
18 |              alert("login successful")
19 |              document.querySelector("#mob").value = ""; 
20 |              document.querySelector("#pass").value = "";
21 | 
22 |               window.location.href ="../payment/address.html";
23 |               break;
24 |            }else{
25 |              alert("wrong password")
26 |              document.querySelector("#pass").value="";
27 |            }
28 |       }
29 |       else if(a==userdata.length-1){
30 |         
31 |         alert("you dont have account sign up first")
32 |     
33 |         window.location.href="signup.html"
34 |       }
35 | 
36 |   }
37 | }
38 | 
39 | function checkpass(a){
40 | 
41 |   var in_pass =document.querySelector("#pass").value;
42 | 
43 |    return ( userdata[a].password == in_pass)
44 |      
45 | }
46 | 
47 | 
48 | 
49 | // HYPERLINKS
50 | document.getElementById('profile').addEventListener('click', function(){
51 |   window.location.href = "signup.html"
52 | })
53 | document.getElementById('landingPage').addEventListener('click', function(){
54 |   window.location.href = "../Landingpage/index.html"
55 | })
56 | document.getElementById('signUp').addEventListener('click', function(){
57 |   window.location.href = "../Profile/signup.html"
58 | })


--------------------------------------------------------------------------------
/wishlist/wishlist.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 2 | *{
 3 |     box-sizing: border-box;
 4 | }
 5 | 
 6 | body{
 7 |     font-size: 1.6rem;
 8 | }
 9 | 
10 | .wishhead{
11 |     font-size: 2rem;
12 |     margin: 15rem 0 4rem 5rem;
13 | }
14 | .wishcount{
15 |     color: Gray;
16 | }
17 | .container{
18 |     width:85%;
19 |     margin: auto;
20 |     display: grid;
21 |     grid-template-columns: repeat(4,1fr);
22 |     gap: 4rem;
23 | }
24 | .container>div{
25 |     display: flex;
26 |     flex-direction: column;
27 |     justify-content: space-between;
28 |     width: 100%;
29 |     height: auto;
30 |     color: #ff3f6c;
31 |     box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
32 | }
33 | 
34 | .container > .imgbox > div:nth-child(1){
35 |     height: 65%;
36 | }
37 | .container img{
38 |     height: 100%;
39 |     width: 100%;
40 | }
41 | 
42 | .container p {
43 | text-align: center;
44 | line-height: 2rem;
45 | }
46 | 
47 | .buttonholder{
48 |     margin-top: 1.5rem;
49 |     display: flex;
50 |     justify-content: space-around;
51 |     padding: 2px 10px;
52 |     /* align-items: center; */
53 |     padding: 1.2rem;
54 |     
55 |     
56 | }
57 | .buttonholder > button{
58 |    border:0;
59 |     color: white;
60 |     background-color: #ff3f6c;
61 |     padding : 1.2rem 2rem;
62 |     border-radius: 5px;
63 | }
64 | .pricepara > span{
65 |     margin-left: 10px;
66 |     
67 | }
68 | 
69 | @media all and (min-width: 551px) and (max-width: 850px){
70 |     .container{
71 |         grid-template-columns: repeat(3,1fr);
72 |     }
73 | }
74 | @media all and (max-width: 550px){
75 |     .container{
76 |         grid-template-columns: repeat(2,1fr);
77 |     }
78 | }
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 


--------------------------------------------------------------------------------
/Landingpage/navbar.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 2 | 
 3 | :root{
 4 |     font-size: 62.5%;
 5 |     --primaryFont : 'DM Sans', sans-serif;
 6 |     --charSpace : 6px; 
 7 |     --primaryColor : #3e4152;
 8 |     --secondaryColor : #fafbfc;
 9 | }
10 | body{
11 |     font-family: var(--primaryFont);
12 |     scroll-behavior: smooth;
13 | }
14 | #navbar{
15 |     background-color: white;
16 |     font-family:Whitney;
17 |     width: 100%;
18 |     height: 80px;
19 |     display: flex;
20 |     align-items: center;
21 |     justify-content:space-around;
22 |     box-sizing: border-box;
23 |     padding: 35px;
24 |     box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;;
25 |     font-size: 14px;
26 |     line-height: 20px;
27 |     color:#545766;
28 |     font-weight: bolder;
29 | }
30 | 
31 | #myntraIcon{
32 |     height: 60px;
33 |     width:  60px;
34 |     
35 | }
36 | #searchbar{
37 |     display: flex;
38 |     width: 30%;
39 |     background-color: #f5f5f6;
40 |     color: gray;
41 |     text-align: center;
42 |     box-sizing: border-box;
43 |     border-radius:5px;
44 |     justify-content: space-evenly;
45 | }
46 | #searchbar:hover{
47 |    background: white;
48 | }
49 | #magGlass{
50 |     padding: 10px;
51 | }
52 | #profile,#wishlist,#bag{
53 | text-align: center;
54 | color: #6c2632;
55 | 
56 | }
57 | #profile>p,#wishlist>p,#bag>p{
58 |     margin-top: -0px;
59 |     font-size: 12px;
60 |     color: black;
61 | }
62 | #profile>a>i,#wishlist>a>i,#bag>a>i{
63 |     color:gray;
64 | }
65 | img~a>div{
66 |     color:black;
67 | }
68 | a:link{
69 |     text-decoration: none;
70 | }
71 | a>div{
72 |     color: black;
73 | }
74 | 
75 | input {
76 |     background-color: transparent;
77 |     border: 0px solid;
78 |     height: 40px;
79 |     width: 90%;
80 |     color: #CCC;
81 | }
82 | textarea:focus,input:focus
83 | {
84 |     outline: none;
85 | }
86 | i{
87 |     font-size:20px;  
88 | }
89 | img{
90 |     width: 100%;
91 | }
92 | 
93 | /* TOGGLE BAR */
94 | .bx{
95 |     font-size: 3.5rem;
96 | }
97 | 


--------------------------------------------------------------------------------
/wishlist/cart.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Cart</title>
 8 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
 9 |     <link rel="stylesheet" href="cart.css">
10 |     <script
11 |     src="https://kit.fontawesome.com/24c494a6b6.js"
12 |     crossorigin="anonymous"
13 |   ></script>
14 | 
15 | </head>
16 | <body>
17 |     <div id="upperbar">
18 |         <div>
19 |          <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
20 |         </div>
21 |         <div>
22 |            <p> <span id="first">BAG </span>--------- <span id="second">ADDRESS</span>   --------- <span>PAYMENT</span></p>
23 |         </div>
24 |         <div>
25 |          <img src="https://constant.myntassets.com/checkout/assets/img/sprite-secure.png" alt="">
26 |         <span>100% SECURE</span>
27 |         </div>
28 |     </div>
29 | 
30 |     <div id="timerbox">
31 |         <p>Sale Starts in <span> 3 </span> Days</p>
32 |     </div>
33 | <div class="con_ord">
34 |     <div class="container">
35 | 
36 |     </div>
37 | 
38 |     <div class="orderbox">
39 |       <div class="pricedets">PRICE DETAILS</div>
40 |       <div class="total">
41 |          <span>Total MRP</span><span class="totalprice">--</span> 
42 |       </div>
43 |       <div class="discount">
44 |         <span>Discount on MRP</span><span class="filldiscount">--</span> 
45 |      </div>
46 |     <div class="delivery">
47 |         <span>Delivery Charges</span><span class="filldelivery">--</span>
48 |     </div>
49 |      <div class="amount">
50 |         <span>Total Amount</span><span class="amount_pay">--</span> 
51 |      </div>
52 |      <p>Enter Promo Code </p>
53 |      <div class="promocode">
54 |          
55 |        <input type="text" id="promo" placeholder="XXXXXXXX">
56 |        <div class="apply">Apply</div> 
57 |     </div>  
58 | 
59 |       
60 |       
61 |     
62 |        <div class="makeorder">PLACE ORDER</div>   
63 |     </div>
64 | </div>
65 |     
66 | 
67 |     <div class="wishlistlink">
68 |         <i class="fa-duotone fa-cart-flatbed"></i>
69 |     <p>Add More From Wishlist</p>
70 |    
71 |    
72 | </div>
73 | 
74 | 
75 | </body>
76 | </html>
77 | <script src="cart.js"></script>
78 | 


--------------------------------------------------------------------------------
/Landingpage/footer.css:
--------------------------------------------------------------------------------
  1 | #footer {
  2 |     margin-top: 50px;
  3 |     padding: 70px 70px;
  4 |     background-color:#f7f7f7;
  5 |     
  6 | }
  7 | #div1 {
  8 |     width:90%;
  9 |     display:grid;
 10 |     margin:auto;
 11 |     grid-template-columns: repeat(4, auto);
 12 |     grid-template-rows: repeat(1,auto);
 13 |     line-height: 20px;
 14 |     grid-template-areas:
 15 |         "a b c d" ;
 16 |         
 17 | }
 18 | #a :nth-child(1){
 19 |     font-weight: bolder;
 20 | 
 21 | }
 22 | #footer p{
 23 |     font-size: 15px;
 24 |     
 25 | }
 26 | #footer h5{
 27 |     font-size: 15px;
 28 |     color: black;
 29 | }
 30 | li>b{
 31 |     color: black;
 32 | }
 33 | #mainDiv>div>p:first-child{
 34 |     font-weight: bold;
 35 | }
 36 | #playstore{
 37 |     margin-bottom: 40px;
 38 | }
 39 | #playstore>img{
 40 |     width: 130px;
 41 |     padding-right: 10px;
 42 | }
 43 | #playstore+p{
 44 |     font-weight: bold;
 45 | }
 46 | #socialMedia{
 47 |     display: flex;
 48 |     width: 30%;
 49 |     justify-content: space-between;
 50 |     color: #6b6d7a;
 51 | }
 52 | #subDiv {
 53 |     width: 60%;
 54 | }
 55 | .subdiv{
 56 |     display: flex;
 57 |     justify-content: space-evenly;
 58 | 
 59 | }
 60 | .subdiv>img {
 61 |     padding: 15px;
 62 |     width: 50px;
 63 |     height: 50px;
 64 | }
 65 | #pline {
 66 |     display: flex;
 67 |     align-items: center;
 68 |     width: 80%;
 69 |     margin: auto;
 70 | }
 71 | 
 72 | #pline>div {
 73 |     width: 85%;
 74 |     margin-left: 1%;
 75 |     height: 0.05px;
 76 |     border-top: #e9e9ed solid 2px;
 77 | }
 78 | #p {
 79 |     width: 80%;
 80 |     margin: auto;
 81 |     border-bottom:#e9e9ed solid 2px;
 82 | }
 83 | 
 84 | #pDiv>p {
 85 |     color: #696b79;
 86 |     font-size: 15px;
 87 |     line-height: 25px;
 88 | }
 89 | 
 90 | img+p>b {
 91 |     color: black;
 92 |     font-size: 15px;
 93 | }
 94 | 
 95 | p>b {
 96 |     color: #6b8fe0;
 97 | }
 98 | 
 99 | #pterm {
100 |     display: flex;
101 |     justify-content: space-between;
102 | }
103 | 
104 | #address {
105 |     width: 80%;
106 |     margin: auto;
107 |     display: flex;
108 |     justify-content: space-between;
109 |     border-bottom: #e9e9ed solid 2px;
110 | }
111 | 
112 | #address>div {
113 |     width: 30%;
114 |     color: #696b79;
115 |     font-size: 15px;
116 | }
117 | #address>div+div {
118 |     margin-top: 90px;
119 | }
120 | #discrp1 {
121 |     color: #696b79;
122 |     font-size: 15px;
123 |     width: 80%;
124 |     margin: auto;
125 | }


--------------------------------------------------------------------------------
/wishlist/wishlist.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | var wisharr =JSON.parse(localStorage.getItem("wishListObj"))||[];
 4 | 
 5 | var itemcount = wisharr.length;
 6 | document.querySelector(".wishcount").innerText =` ${itemcount} Items`
 7 | 
 8 | wisharr.map(function(ele,ind){
 9 | 
10 |     var box =document.createElement("div")
11 |     
12 |    
13 |     var image =document.createElement("img")
14 |     image.src =ele.image_url;
15 | 
16 |     var imgbox =document.createElement("div")
17 |     box.className ="imgbox"
18 |     imgbox.append(image)
19 | 
20 |     box.append(imgbox)
21 | 
22 |     var para =document.createElement("p");
23 |     para.innerText=ele.brand ;
24 |     para.style.color="gray";
25 |     box.append(para)
26 | 
27 |     var price = document.createElement("span");
28 |     price.innerText = ele.price
29 |     price.style.color ="black"
30 | 
31 |   var strikedprice = document.createElement("span");
32 |   strikedprice.innerText = ele.strikedoffprice;
33 |   strikedprice.style.textDecoration = "line-through";
34 |   strikedprice.style.color ="gray";
35 | 
36 | 
37 |   var offer = document.createElement("span");
38 |   offer.innerText =ele.offer;
39 |   offer.style.color="red";
40 | 
41 |   var pricepara =document.createElement("p");
42 |   pricepara.className="pricepara"
43 |   pricepara.append(price,strikedprice,offer)
44 |   box.append(pricepara)
45 | 
46 |   var buttonrm =document.createElement("button")
47 |   buttonrm.innerText ="Remove"
48 |   
49 |   buttonrm.addEventListener("click", function(){
50 |       removefromwish(ind)
51 |   })
52 | 
53 | 
54 |   var buttonbag =document.createElement("button")
55 |   buttonbag.innerText ="MOVE TO BAG";
56 |   
57 |   buttonbag.addEventListener("click", function(){
58 |    sendtocart(ele,ind)
59 | })
60 | 
61 | 
62 | 
63 |   var buttonholder = document.createElement("div");
64 |   buttonholder.className ="buttonholder"
65 |   buttonholder.append(buttonrm,buttonbag)
66 |   box.append(buttonholder)
67 | 
68 |    
69 |     document.querySelector(".container").append(box)
70 | })
71 | 
72 | 
73 | 
74 | function removefromwish(ind){
75 | 
76 | wisharr.splice(ind,1)
77 | localStorage.setItem("wishListObj",JSON.stringify(wisharr))
78 | window.location.href="wishlist.html"
79 | 
80 | }
81 | 
82 | // localStorage.setItem("BagListObj" , JSON.stringify(bagList))
83 | var baglist = JSON.parse(localStorage.getItem("BagListObj"))||[];
84 | 
85 | function sendtocart(ele,ind){
86 | 
87 |   baglist.unshift(ele);
88 |   localStorage.setItem("BagListObj",JSON.stringify(baglist))
89 | 
90 |   wisharr.splice(ind,1)
91 |   localStorage.setItem("wishListObj",JSON.stringify(wisharr))
92 |     window.location.href="wishlist.html"
93 | 
94 |      }
95 | 
96 | document.getElementById('landingPage').addEventListener('click', function(){
97 | window.location.href = "../Landingpage/index.html"
98 | })


--------------------------------------------------------------------------------
/Common Files/women.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // <!-- CATEGORIES DISPALY 1 -->
 3 | var categoryBag = [
 4 |   {image_url :'https://bit.ly/3wMvK2N'},
 5 |   {image_url :'https://bit.ly/3wY0TA6'},
 6 |   {image_url :'https://bit.ly/3IWRXxk'},
 7 |   {image_url :'https://bit.ly/36I2HCP'},
 8 |   {image_url :'https://bit.ly/3LtKeIK'},
 9 |   {image_url :'https://bit.ly/3uEEhC2'},
10 | ]
11 | categoryBag.map(function(element){
12 |   var box = document.createElement('div');
13 |   var img =  document.createElement('img');
14 |   img.setAttribute('src', element.image_url)
15 |   box.append(img); 
16 |   document.getElementById('categoryBag_women').append(box)
17 | })
18 | 
19 | // <!-- BRAND DISPLAY 2 -->
20 | var brandsBag = [
21 |   {image_url :'https://bit.ly/3qOmNSH'},
22 |   {image_url :'https://bit.ly/3Dx4Lth'},
23 |   {image_url :'https://bit.ly/3uGBVTh'},
24 |   {image_url :'https://bit.ly/3DxPVCY'},
25 |   {image_url :'https://bit.ly/3iQbIfq'},
26 | ]
27 | brandsBag.map(function(element){
28 |   var box = document.createElement('div');
29 |   var img =  document.createElement('img');
30 |   img.setAttribute('src', element.image_url)
31 |   box.append(img); 
32 |   document.getElementById('explore_more_women').append(box)
33 | })
34 | 
35 | 
36 | // <------- SLIDER IMAGES -------> //
37 | var slideImages = [
38 |   //FOR TABLET & DEKSTOP VIEW
39 |   [{img_url : "https://bit.ly/3Dj1D46"},
40 |   {img_url : "https://bit.ly/3wJ6k64"},
41 |   {img_url : "https://bit.ly/36E3HYr"},
42 |   {img_url : "https://bit.ly/3uBmOdF"},
43 |   ],
44 | 
45 |   //FOR MOBILE VIEW
46 |   [{img_url : "https://bit.ly/36X3qjg"},
47 |   {img_url: "https://bit.ly/3DnFd1L"},
48 |   {img_url: "https://bit.ly/3tVztt3"},
49 |   {img_url: "https://bit.ly/3iR1aN6"},
50 |   ]
51 | ]
52 | 
53 | var z = null; 
54 | 
55 |   //script for media queries
56 |   var value = window.matchMedia("(max-width: 550px)") //FOR TABLET VIEW
57 |     mFunction(value) 
58 |     value.addListener(mFunction) 
59 |     function mFunction(value) {
60 |       if (value.matches) { 
61 |         z = slideImages[1];
62 |       } 
63 |       else {
64 |         z = slideImages[0]
65 |       }
66 |   }
67 | 
68 | z.map(function(ele, index){
69 |   var slideDiv = document.createElement('div');
70 |   switch(index){
71 |     case 0 :
72 |       slideDiv.setAttribute('class', 'slide first');
73 |       break;
74 |     default :
75 |     slideDiv.setAttribute('class', 'slide')
76 |   }
77 |  
78 |   var images = document.createElement('img');
79 |   images.src = ele.img_url;
80 |   
81 |   slideDiv.append(images); 
82 |   document.getElementById('slides').append(slideDiv)
83 | })
84 | 
85 | var images = document.querySelectorAll('img')
86 | for(let i=0; i<images.length; i++){
87 |   images[i].addEventListener('click', function(){
88 |     window.location.href = "../womensdata/women.html"
89 |   })
90 | }
91 | // LANDING PAGE
92 | document.getElementById('landingPage').addEventListener('click', function(){
93 |   window.location.href = "../Landingpage/index.html"
94 | })


--------------------------------------------------------------------------------
/payment/address.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <script src="https://kit.fontawesome.com/72215895a8.js" crossorigin="anonymous"></script>
 9 |     <link rel="stylesheet" href="address.css">
10 |     <title>Address | Checkout</title>
11 | </head>
12 | 
13 | <body>
14 |     <div id="navbar">
15 |         <img id="logo" src="../Common Files/image/myntra-removebg-preview.png"
16 |             alt="logo">
17 | 
18 |         <div id="div2">
19 |             <h5 id="first">BAG</h5>
20 |             <div class="line"></div>
21 |             <h5>ADDRESS</h5>
22 |             <div class="line"></div>
23 |             <h5 id="third">PAYMENT</h5>
24 |         </div>
25 |         <div id="div3">
26 |             <img src="https://constant.myntassets.com/checkout/assets/img/sprite-secure.png" alt="">
27 |             <p>100 % <b>SECURE</b></p>
28 |         </div>
29 |     </div>
30 |     <div id="cart">
31 |         <div id="div">
32 |             <div>
33 |                 <h3>Select Delivery Address </h3>
34 |                 <div>
35 |                     <h5>ADD NEW ADDRESS</h5>
36 |                 </div>
37 |             </div>
38 |             <h5>DEFAULT ADDRESS</h5>
39 |             <div>
40 |                 <div id="name">
41 |                     <div>
42 |                         <h4>Sumit Kumar</h4>
43 |                     </div>
44 |                     <div id="home">Home</div>
45 |                 </div>
46 |                 <p>House No-C12,Old Extension Road,Gandhi Road,Karmik Nagar <br>Dhanbad,Jharkhand,PIN-123456</p>
47 |                 <p>Mobile No: <b>2314567898</b></p>
48 |                 <p>Pay on Delivery</p>
49 |                 <div id="option">
50 |                    <div>
51 |                        Remove
52 |                    </div> 
53 |                    <div>
54 |                        EDIT
55 |                    </div>
56 |                 </div>
57 |             </div>
58 |             <div id="add">
59 |                  +Add New Address  
60 |             </div>
61 |         </div>
62 |         <div id="checkDiv">
63 |            
64 |             <div id="itemDiv">
65 |                 <h5>DELIVERY ESTIMATES</h5>
66 |                 Delivery Between 7Apr to 10Apr
67 |                 <br>
68 |                 
69 |             </div>
70 |             <a href="payment.html"> <div id="place">
71 |             CONTINUE
72 |          </div></a>
73 |         </div>
74 |     </div>
75 | </body>
76 | 
77 | </html>
78 | <script>
79 |     document.querySelector('img').addEventListener('click', function(){
80 |         window.location.href = "../Landingpage/index.html"
81 |     })
82 | 
83 | document.getElementById('first').addEventListener('click', function(){
84 | window.location.href = "../wishlist/cart.html"
85 | })
86 |   document.getElementById('third').addEventListener('click', function(){
87 |   window.location.href = "../payment/payment.html"
88 | })
89 | </script>
90 | 
91 | 


--------------------------------------------------------------------------------
/Common Files/men.js:
--------------------------------------------------------------------------------
  1 | 
  2 |   // <------- SLIDER IMAGES -------> //
  3 |   var slideImages = [
  4 |     //FOR TABLET & DEKSTOP VIEW
  5 |     [{img_url : "https://bit.ly/3qJmvfK"},
  6 |     {img_url : "https://bit.ly/3uFdtl6"},
  7 |     {img_url : "https://bit.ly/3NqqqYR"},
  8 |     {img_url : "https://bit.ly/3NxptOo"},
  9 |     ],
 10 | 
 11 |     //FOR MOBILE VIEW
 12 |     [{img_url : "https://bit.ly/35p0UBR"},
 13 |     {img_url: "https://bit.ly/38hbVX5"},
 14 |     {img_url: "https://bit.ly/3iOZ3t9"},
 15 |     {img_url: "https://bit.ly/3tTroEZ"},
 16 |     ]
 17 |   ]
 18 | 
 19 |   var z = null; 
 20 | 
 21 |     //script for media queries
 22 |     var value = window.matchMedia("(max-width: 550px)") //FOR TABLET VIEW
 23 |       mFunction(value) 
 24 |       value.addListener(mFunction) 
 25 |       function mFunction(value) {
 26 |         if (value.matches) { 
 27 |           z = slideImages[1];
 28 |         } 
 29 |         else {
 30 |           z = slideImages[0]
 31 |         }
 32 |     }
 33 | 
 34 |   z.map(function(ele, index){
 35 |     var slideDiv = document.createElement('div');
 36 |     switch(index){
 37 |       case 0 :
 38 |         slideDiv.setAttribute('class', 'slide first');
 39 |         break;
 40 |       default :
 41 |       slideDiv.setAttribute('class', 'slide')
 42 |     }
 43 |    
 44 |     var images = document.createElement('img');
 45 |     images.src = ele.img_url;
 46 |     
 47 |     slideDiv.append(images); 
 48 |     document.getElementById('slides').append(slideDiv)
 49 |   })
 50 | 
 51 | 
 52 | 
 53 | 
 54 |     // <!-- CATEGORIES DISPALY 1 -->
 55 |     var categoryBag = [
 56 |       {image_url :'https://bit.ly/3DnfTst'},
 57 |       {image_url :'https://bit.ly/3uB2WHQ'},
 58 |       {image_url :'https://bit.ly/3NvrZEB'},
 59 |       {image_url :'https://bit.ly/3JP1BmV'},
 60 |       {image_url :'https://bit.ly/3Nt0VG5'},
 61 |       {image_url :'https://bit.ly/3uEEhC2'},
 62 |   ]
 63 |   categoryBag.map(function(element){
 64 |       var box = document.createElement('div');
 65 |       var img =  document.createElement('img');
 66 |       img.setAttribute('src', element.image_url)
 67 |       box.append(img); 
 68 |       document.getElementById('categoryBag').append(box)
 69 |   })
 70 | 
 71 | 
 72 |   // <!-- BRAND DISPLAY 2 -->
 73 |   var brandsBag = [
 74 |       {image_url :'https://bit.ly/3wTrgam'},
 75 |       {image_url :'https://bit.ly/3Ln7fx1'},
 76 |       {image_url :'https://bit.ly/3wKizze'},
 77 |       {image_url :'https://bit.ly/3iLkgUQ'},
 78 |       {image_url :'https://bit.ly/3uzcDX3'},
 79 |   ]
 80 |   brandsBag.map(function(element){
 81 |       var box = document.createElement('div');
 82 |       var img =  document.createElement('img');
 83 |       img.setAttribute('src', element.image_url)
 84 |       box.append(img); 
 85 |       document.getElementById('explore_more').append(box)
 86 |   })
 87 | 
 88 | 
 89 | document.getElementById('landingPage').addEventListener('click', function(){
 90 |     window.location.href = "index.html"
 91 | })
 92 | var images = document.querySelectorAll('img')
 93 | for(let i=0; i<images.length; i++){
 94 |   images[i].addEventListener('click', function(){
 95 |     window.location.href = "../menspage/mens.html"
 96 |   })
 97 | }
 98 | 
 99 | // LANDING PAGE
100 | document.getElementById('landingPage').addEventListener('click', function(){
101 |   window.location.href = '../Landingpage/index.html'
102 | })


--------------------------------------------------------------------------------
/Common Files/homeLiving.js:
--------------------------------------------------------------------------------
  1 | 
  2 | //<---------- HOME & LIVING SCRIPT CODES --------->//
  3 | 
  4 | var anchors_para = [
  5 |     [
  6 |         {h4 : 'Furnishings & Bed Linen'},
  7 |         {p : 'Bed Sheets'},
  8 |         {p : 'Bedding Sets & Bed Covers'},
  9 |         {p : 'Blankets, Quilts & Dohars'},
 10 |         {p : 'Pillows & Pillow Covers'},
 11 |         {p : 'Cushions & Cushion Covers'},
 12 |         {p : 'Curtains'},
 13 |         {p : 'Mats & Dhurries'},
 14 |         {p : 'Carpets'},
 15 |     ],
 16 |     [
 17 |         {h4 : 'Bath & Bed Linen'},
 18 |         {p : 'Towels & Towel Sets'},
 19 |         {p : 'Bath Robes'},
 20 |         {p : 'Bathroom Accessories'},
 21 |         {p : 'Bath Robes'},
 22 |         {p : 'Shower Curtains'},
 23 |         {p : 'Bath Rugs'},
 24 |     ],
 25 |     [
 26 |         {h4 : 'Home Décor'},
 27 |         {p : 'Plants & Planters'},
 28 |         {p : 'Aromas, Candles & Candle Holders'},
 29 |         {p : 'Clocks'},
 30 |         {p : 'Mirrors'},
 31 |         {p : 'Wall Décor'},
 32 |         {p : 'Wall Shelves'},
 33 |         {p : 'Fountains'},
 34 |         {p : 'Showpieces & Vases'},
 35 |     ],
 36 |     [
 37 |         {h4 : 'Lamps & Lighting'},
 38 |         {p : 'Floor & Wall Lamps'},
 39 |         {p : 'Table Lamps'},
 40 |     ],
 41 |     [
 42 |         {h4 : 'Kitchen & Table'},
 43 |         {p : 'Tableware & Serveware'},
 44 |         {p : 'Bar & Drinkware'},
 45 |         {p : 'Cookware & Kitchen Tools'},
 46 |         {p : 'Kitchen Storage'},
 47 |         {p : 'Table Covers & Furnishings'},
 48 |     ],
 49 |     [
 50 |         {h4 : 'Storage & Organisers'},
 51 |         {p : 'Organisers'},
 52 |         {p : 'Hooks & Holders'},
 53 |     ],
 54 |   
 55 |     ]
 56 |     var n = null; 
 57 |   
 58 |     //script for media queries
 59 |     var value = window.matchMedia("(max-width: 850px)") //FOR TABLET VIEW
 60 |       mFunction(value) 
 61 |       value.addListener(mFunction) 
 62 |       function mFunction(value) {
 63 |         if (value.matches) { 
 64 |           n = anchors_para.length-3;
 65 |         } 
 66 |         else {
 67 |           n = anchors_para.length; 
 68 |         }
 69 |     }
 70 |   
 71 |     for(let i=0; i<n; i++){
 72 |         var asideDiv = document.createElement('div'); //container div for each part 
 73 |         asideDiv.setAttribute('class', 'aside_content'); 
 74 |     
 75 |         anchors_para[i].map(function(element){
 76 |             if(element.h4 != undefined){
 77 |                 var heading = document.createElement('h4')
 78 |                 heading.setAttribute = ('class', 'heading')
 79 |                 heading.innerText = element.h4
 80 |                 asideDiv.append(heading)
 81 |     
 82 |             }
 83 |             if(element.p != undefined){    
 84 |                 var para = document.createElement('p');
 85 |                 para.setAttribute = ('class', 'text')
 86 |                 para.innerText = element.p
 87 |                 asideDiv.append(para)
 88 |             }
 89 |         })
 90 |   
 91 |         document.querySelector('aside').append(asideDiv);
 92 |     }
 93 |   
 94 |   //<--------- PRODUCT PAGE HYPERLINK ---------->//
 95 |   var z = document.querySelectorAll('img');
 96 |   for(let i=0; i<z.length; i++){
 97 |       z[i].addEventListener('click', function(){
 98 |           window.location.href = "/Home Living Products/home_furnishing.html"
 99 |       })
100 |   }
101 |   
102 |   // LANDING PAGE
103 |   document.getElementById('landingPage').addEventListener('click', function(){
104 |       window.location.href = "/LandingPage/index.html"
105 |   })


--------------------------------------------------------------------------------
/payment/payment.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
  2 | 
  3 | :root{
  4 |     --primaryFont : 'DM Sans', sans-serif;
  5 |     --charSpace : 6px; 
  6 |     --primaryColor : #3e4152;
  7 |     --secondaryColor : #fafbfc;
  8 | }
  9 | a:link{
 10 |     text-decoration: none;
 11 | }
 12 | body{
 13 |     font-family: var(--primaryFont);
 14 |     scroll-behavior: smooth;
 15 | }
 16 | 
 17 | 
 18 | #navbar{
 19 |     background-color: white;
 20 |     width: 100%;
 21 |     height: 70px;
 22 |     top: 0px;
 23 |     display: flex;
 24 |     align-items: center;
 25 |     justify-content: space-between;
 26 |     box-sizing: border-box;
 27 |     padding: 0px 50px;
 28 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 29 |     font-weight: bold;  
 30 | }
 31 | #logo{
 32 |     width: 60px;
 33 |     height:60px;
 34 |     background-color: white;
 35 | }
 36 | #nav2{
 37 |     letter-spacing:3px;
 38 |     width: 25%;
 39 |     display: flex;
 40 |     align-items: center;
 41 |     justify-content: space-between;
 42 |     color: gray;
 43 | 
 44 | }
 45 | #nav2>h5:last-child{
 46 |     color:#3cc3a0;
 47 |    border-bottom:#3cc3a0 2px solid;
 48 | }
 49 | #nav3{
 50 |     display: flex;
 51 |     align-items: center;
 52 |     justify-content: space-around;
 53 |     
 54 | }
 55 | #nav3>img{
 56 |    width: 30px;
 57 | }
 58 | p>b{
 59 |     letter-spacing:3px;
 60 | }
 61 | .line{
 62 |     border-top: 1px dashed;
 63 |     width: 50px;
 64 | }
 65 | 
 66 | #first, #second{
 67 |     cursor: pointer;
 68 | }
 69 | 
 70 | /* end of navbar */
 71 | 
 72 | 
 73 | #cart{
 74 |     display: flex;
 75 |     width: 80%;
 76 |     margin: auto;
 77 |     justify-content: space-between;
 78 |     padding:20px;
 79 | }
 80 | #main1{
 81 |    width:65%;
 82 |    padding:10px; 
 83 |    border-right:2px solid #e9e9ed;
 84 | }
 85 | 
 86 | #main1>div:first-child{
 87 |     
 88 |     margin-top: 10px;
 89 |     border:1px solid #e9e9ed;
 90 |     padding: 0px 20px;
 91 | }
 92 | h4+p+p{
 93 |     color: #ff3e6c;
 94 |     text-align: center;
 95 | }
 96 | #payment{
 97 |     border: 1px solid #e9e9ed;
 98 |     display: flex;
 99 | 
100 | }
101 | #mode{
102 |     width: 40%;
103 |     margin-right: 30px;
104 | }
105 | #mode>div{
106 |     padding: 0px 10px;
107 |     display: flex;
108 |     border: 1px solid #e9e9ed;
109 |     align-items: center;
110 |     background-color: whitesmoke;
111 | }
112 | #mode>div:hover{
113 |     background-color: white;
114 | }
115 | i{
116 |     margin-right: 10px;
117 | }
118 | #infopay{
119 |     background-color: whitesmoke;
120 |     width: 80%;
121 |     box-sizing: border-box;
122 |     padding: 10px;
123 |     margin-bottom: 40px;
124 | }
125 | #pay{
126 |     width: 80%;
127 |     height: 50px;
128 |     background-color:#ff3e6c;
129 |     display: flex;
130 |     align-items: center;
131 |     padding-left:30px;
132 |     color: white;
133 |     font-weight: bolder;
134 | }
135 | 
136 | /* added same style from the cart page related to orderbox */
137 | 
138 | .orderbox{
139 |     height: 200px;
140 |     width: 30%;
141 |     border :2px solid #F5F5F6;
142 |     margin-top: 80px;
143 |     margin-left: 50px;
144 |     padding: 20px;
145 |     border-radius: 4px;
146 |     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
147 | }
148 | 
149 | .orderbox>div{
150 |     display: flex;
151 |     justify-content: space-between;
152 |     margin: 10px 0px;
153 |     color: #535766;
154 |     
155 | }
156 | .filldiscount{
157 |     color:limegreen;
158 | }
159 | .pricedets,.amount{
160 |     border-bottom: 1px solid gray;
161 |     padding-bottom: 20px;
162 | }


--------------------------------------------------------------------------------
/Common Files/homeLiving.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /* BANNER SECTION */
  3 | #banner{
  4 |     margin-top: 15rem;
  5 |     width: 100%;
  6 | }
  7 | #banner > div{
  8 |     width: 93%;
  9 |     height: 400px;
 10 |     margin: auto;
 11 | }
 12 | #banner img{
 13 |     width: 100%;
 14 |     height: 100%;
 15 |     cursor: pointer;
 16 | }
 17 | #banner .forDesk{
 18 |     display: none;
 19 | }
 20 | 
 21 | /* MAIN SECTION */
 22 | main{
 23 |     width: 93%;
 24 |     margin: auto;
 25 |     display: flex;
 26 |     justify-content: space-between;
 27 | }
 28 | main > #content{
 29 |     width: 70%;
 30 | }
 31 | main > aside{
 32 |     width: 30%;
 33 | }
 34 | #content_head{
 35 |     margin-top: 2rem;
 36 | }
 37 | #content > #category{
 38 |     width: 100%;
 39 |     display: grid;
 40 |     grid-template-columns: repeat(2, 1fr);
 41 |     grid-template-areas: 
 42 |     "one two"
 43 |     "three four"
 44 |     "five six";
 45 |     row-gap: 5rem;
 46 |     column-gap: 1rem;
 47 | }
 48 | #category div:nth-child(1){
 49 |     grid-area: one;
 50 | }
 51 | #category div:nth-child(2){
 52 |     grid-area: two;
 53 | }
 54 | #category div:nth-child(3){
 55 |     grid-area: three;
 56 | }
 57 | #category div:nth-child(4){
 58 |     grid-area: four;
 59 | }
 60 | #category div:nth-child(5){
 61 |     grid-area: five;
 62 | }
 63 | #category div:nth-child(6){
 64 |     grid-area: six;
 65 | }
 66 | #category img{
 67 |     width: 100%;
 68 |     transition: 300ms all ease-in-out;
 69 | }
 70 | 
 71 | #category > div{
 72 |     overflow: hidden;
 73 |     cursor: pointer;
 74 | }
 75 | #category > div:hover img{
 76 |     transform:  scale(1.08);
 77 | }
 78 | 
 79 | /* HOME & LIVING MEGAMENU */
 80 | #megamenu_container{
 81 |     position: relative;
 82 | }
 83 | #megamenu{
 84 |     /* visibility: hidden; */
 85 |     position: absolute; 
 86 |     background-color: #fff;
 87 |     left: 100%;
 88 |     right: 100%;
 89 |     top: 100%;
 90 |     bottom: 100%;
 91 | }
 92 | /* #megamenu_container:hover #megamenu{
 93 |     display: none;
 94 | } */
 95 | 
 96 | 
 97 | 
 98 | /* MAIN ASIDE SECTION */
 99 | aside{
100 |     color: #626573;
101 | }
102 | aside div:nth-child(1){
103 |     margin-top: 4rem;
104 | }
105 | aside >*{
106 |     width: 70%;
107 |     margin: auto;
108 | }
109 | aside p{
110 |     font-size: 1.5rem;
111 |     line-height: 2.5rem;
112 |     cursor: pointer;
113 | }
114 | aside p:hover{
115 |     text-decoration: underline;
116 | }
117 | aside div h4{
118 |     margin: 2rem 0;
119 |     font-size: 1.7rem;
120 | }
121 | 
122 | 
123 | 
124 | /* BRAND SECTIONS */
125 | .wrapper{
126 |     width: 100%;
127 |     margin: 7rem auto;
128 |     background-color: #f0eeef;
129 |     display: grid;
130 |     grid-template-columns: repeat(1, 1fr);
131 |     grid-template-areas: 
132 |         "top"
133 |         "bottom"
134 |     ;
135 | }
136 | .wrapper div:nth-child(1){
137 |     grid-area: top;
138 | }
139 | .wrapper div:nth-child(2){
140 |     grid-area: bottom;
141 | }
142 | section:nth-of-type(3) {
143 |     background-color:unset;
144 | }
145 | .wrapper > .container{
146 |     width: 93%;
147 |     margin: 0 auto;
148 |     display: flex;
149 | }
150 | .wrapper img{
151 |     width: 100%;
152 |     transition: 400ms all ease-in-out;
153 | }
154 | .container > div{
155 |     overflow: hidden;
156 |     cursor: pointer;
157 | }
158 | .container>div:hover img{
159 |     transform: scale(1.08);
160 |    
161 | }
162 | #featured{
163 |     display: block;
164 |     width: 93%;
165 |     margin: auto;
166 | }
167 | 
168 | 
169 | /* MEDIA QUERRIES FOR MOBILE */
170 | @media all and (max-width : 550px){
171 |     #banner .forDesk{
172 |         display: block;
173 |     }
174 |     main{
175 |         width: 90%;
176 |     }
177 |     main #content{
178 |         width: 100%;
179 |     }
180 |     main aside{
181 |         display: none;
182 |     }
183 |     .container :nth-child(3){
184 |         display: none;
185 |     }
186 | }


--------------------------------------------------------------------------------
/payment/address.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
  2 | 
  3 | 
  4 | :root{
  5 |     --primaryFont : 'DM Sans', sans-serif;
  6 |     --charSpace : 6px; 
  7 |     --primaryColor : #3e4152;
  8 |     --secondaryColor : #fafbfc;
  9 | }
 10 | body{
 11 |     padding: 0;    
 12 | }
 13 | *{
 14 |     padding: 0.5rem 1rem;
 15 | }
 16 | a:link{
 17 |     text-decoration: none;
 18 | }
 19 | body{
 20 |     font-family: var(--primaryFont);
 21 |     scroll-behavior: smooth;
 22 | }
 23 | 
 24 | a:link{
 25 |     text-decoration: none;
 26 | }
 27 | 
 28 | #navbar{
 29 |     width: 100%;
 30 |     height: 70px;
 31 |     display: flex;
 32 |     align-items: center;
 33 |     justify-content: space-between;
 34 |     box-sizing: border-box;
 35 |     padding: 0px 50px;
 36 |     margin-top: -10px;
 37 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 38 |     font-weight: bold;  
 39 | }
 40 | #logo{
 41 |     width: 60px;
 42 |     height:60px;
 43 |     background-color: white;
 44 | }
 45 | #div2{
 46 |     letter-spacing:3px;
 47 |     width: 25%;
 48 |     display: flex;
 49 |     align-items: center;
 50 |     justify-content: space-between;
 51 |     color: gray;
 52 | 
 53 | }
 54 | #div2>h5:nth-child(3){
 55 |     color:#3cc3a0;
 56 |    border-bottom:#3cc3a0 2px solid;
 57 | }
 58 | #div3{
 59 |    
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: space-evenly;
 63 |     color: gray;
 64 | }
 65 | #div3>img{
 66 |    width: 30px;
 67 | }
 68 | p>b{
 69 |     letter-spacing:3px;
 70 | }
 71 | .line{
 72 |     border-top: 1px dashed;
 73 |     width: 50px;
 74 | }
 75 | #first, #third{
 76 |     cursor: pointer;
 77 | }
 78 | 
 79 | /* end of nav bar */
 80 | 
 81 | 
 82 | #cart{
 83 |     display: flex;
 84 |     width: 70%;
 85 |     margin: auto;
 86 |     justify-content: space-between;
 87 |     padding:20px;
 88 | }
 89 | #Div{
 90 |    width: 60%;
 91 |    padding: 10px 20px; 
 92 | }
 93 | #Div>div:first-child{
 94 |     display: flex;
 95 |     height: 30px;
 96 |     justify-content: space-between;
 97 |     align-items: center;
 98 | }
 99 | h3+div{
100 |     width: 25%;
101 |     display: flex;
102 |     align-items: center;
103 |     justify-content: center;
104 |     border: 1px solid;
105 |     height: 30px;
106 |     border-radius: 5px;
107 | 
108 | }
109 | #div>div:nth-child(3){
110 |     padding: 20px;
111 |    flex-direction: column;
112 |     border:2px solid #e9e9ed;
113 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;;
114 | }
115 |  #name{
116 |      width:40%;
117 |      display: flex;
118 |      align-items: center;
119 |      justify-content: space-between;
120 |  }
121 |  #home{
122 |      width: 30%;
123 |      text-align: center;
124 |      border: #3cc3a0 1px solid;
125 |      color: #3cc3a0;
126 |      border-radius: 20px;
127 |  }
128 | #option{
129 |     display: flex;
130 |     width:30%;
131 |     align-items: center;
132 |     justify-content: space-between;
133 | }
134 | #option>div{
135 |     font-weight: bold;
136 |     border-radius: 5px;
137 |     padding: 0px 10px;
138 |     border: 1px solid;
139 | }
140 | #add{
141 |     display: flex;
142 |     align-items: center;
143 |     margin-top: 20px;
144 |     color: #ff3e6c;
145 |     font-weight: bold;
146 |     padding-left: 10px;
147 |     border: 2px dashed #e9e9ed;
148 |     height: 80px;
149 | }
150 | #checkDiv{
151 |     padding:0px 20px;
152 |     width: 30%;
153 |     border-left: 1PX solid #e9e9ed;
154 | }
155 | 
156 | #itemDiv{
157 |     border: #e9e9ed 2px solid;
158 |     height:150px;
159 |     padding: 10px;
160 | }
161 | 
162 | #place{
163 |     width: 100%;
164 |     height: 40px;
165 |     margin-top:30px;
166 |     background-color:#ff3e6c;
167 |     display: flex;
168 |     justify-content: center;
169 |     align-items: center;
170 |     color: white;
171 |     font-size: 15px;
172 |     font-weight: bolder;
173 | }
174 | 
175 | 


--------------------------------------------------------------------------------
/Profile/profile.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Login.</title>
  8 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
  9 |     <link rel="stylesheet" href="profile.css">
 10 |     <link rel="stylesheet" href="../Common Files/style.css">
 11 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 12 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 13 | </head>
 14 | <body>
 15 |     <!-- HEADER SECTION -->
 16 |     <header>
 17 |         <div id="logo">
 18 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 19 |         </div>
 20 |         <ul id="nav_bar">
 21 |             <li id="megamenu_container"><a href="../Homepages/menHomePage.html">men</a></li>
 22 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 23 |             <li><a href="#">kids</a></li>
 24 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 25 |             <li><a href="#">beauty</a></li>
 26 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 27 |         </ul> 
 28 |         <div id="search">
 29 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 30 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 31 |         </div>
 32 |         <div id="right_icon">
 33 |             <div id="reggDropdown">
 34 |                 <!-- DROPDOWN MENU TO FOR LOGIN AND SIGNUP -->
 35 |               <div id="drop">
 36 |                   <a href="../Profile/profile.html" class="dropList">login</a>
 37 |                   <a href="../Profile/signup.html" class="dropList">sign up</a>
 38 |               </div>
 39 |               <i class="fa-regular fa-user"></i>
 40 |               <span>profile</span>
 41 |           </div>
 42 |             <div>
 43 |                 <i class="fa-regular fa-heart"></i>
 44 |                 <span>wishlist</span>
 45 |             </div>
 46 |             <div>
 47 |                 <i class="fa-solid fa-bag-shopping"></i>
 48 |                 <span>bag</span>
 49 |             </div>
 50 |         </div>
 51 | 
 52 |                 <!-- TOGGLE MENU -->
 53 |                 <div id="toggle">
 54 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 55 |                     <div id="myDropdown" class="dropdown-content">
 56 |                         <div class="top">
 57 |                             <a href="../Homepages/menHomePage.html">men</a>
 58 |                             <a href="../Homepages/womenHomePage.html">women</a>
 59 |                             <a href="#">kids</a>
 60 |                             <a href="../Homepages/homeLiving.html">home & living</a>
 61 |                             <a href="#">beauty</a>
 62 |                             <a href="#">studio</a>
 63 |                         </div>
 64 |                         <div class="bottom">
 65 |                             <i class="fa-regular fa-user fa_user" id="profile"></i>
 66 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 67 |                             <i class="fa-solid fa-bag-shopping fa_cart"></i>
 68 |                         </div>                
 69 |                     </div>
 70 |                 </div>
 71 |     </header>
 72 | 
 73 | 
 74 | 
 75 | 
 76 | 
 77 |     <div id="boxbody">
 78 |         <div class="imgbo">
 79 |                 <img src="https://bit.ly/3tV4k8R" alt="">
 80 |         </div>
 81 | 
 82 |        <div class="signin">
 83 |                 
 84 |            <h2>Login <span>or</span> Signup</h2>
 85 |            <div>
 86 |            <input type="tel" placeholder="Mobile Number*" id="mob">
 87 |            <input type="password" placeholder="Enter password" id="pass">
 88 |         </div>   
 89 |            <p>By continuing, I agree to the <span> Terms of     Use </span> and <span>privacy policy</span>  </p>
 90 |        
 91 |            <button>continue</button>
 92 |              <p>Have trouble logging in?<span> Get help</span> </p>
 93 |              <p>Don't have an account ? <span id="signUp">Sign up</span> </p>
 94 |              
 95 |     
 96 |         </div>
 97 | 
 98 |     </div>
 99 | </body>
100 | </html>
101 | 
102 | <script src="profile.js"></script>
103 | <script src="/Common Files/headerMenu.js"></script>
104 | <script src="../Common Files/hyperlinks.js"></script>
105 | 


--------------------------------------------------------------------------------
/menspage/mens.css:
--------------------------------------------------------------------------------
  1 | #sorting {
  2 |     width: 100%;
  3 |     margin-left: 1rem;
  4 |     margin-top: 15rem;
  5 | }
  6 | 
  7 | .filter {
  8 |     padding: 10px 20px;
  9 | }
 10 | 
 11 | * {
 12 |     box-sizing: border-box;
 13 | }
 14 | 
 15 | #wrapper {
 16 |     width: 100%;
 17 |     display: flex;
 18 |     gap: 3rem;
 19 | }
 20 | 
 21 | 
 22 | /* filter */
 23 | 
 24 | #filter {
 25 |     height: 100%;
 26 |     width: 23%;
 27 |     margin-left: 1rem;
 28 |     margin-top: 5rem;
 29 |     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 30 |     display: flex;
 31 |     flex-direction: column;
 32 |     gap: 1.2rem;
 33 |     padding: 1.1rem;
 34 |     padding-bottom: unset;
 35 | }
 36 | 
 37 | #filter>div {
 38 |     width: 100%;
 39 |     height: 100%;
 40 |     border-bottom: 2px solid #efefee;
 41 |     display: flex;
 42 |     flex-direction: column;
 43 |     align-items: center;
 44 |     padding-bottom: 2rem;
 45 | }
 46 | 
 47 | #filter>div>* {
 48 |     width: 90%;
 49 | }
 50 | 
 51 | #filter>div>h3~* {
 52 |     display: inline-block;
 53 | }
 54 | 
 55 | input[type="checkbox" i],
 56 | input[type="radio" i] {
 57 |     cursor: pointer;
 58 |     margin-right: 1.2rem;
 59 | }
 60 | 
 61 | #filter h3 {
 62 |     margin-bottom: 1.2rem;
 63 |     font-size: 1.8rem;
 64 |     font-weight: bold;
 65 | }
 66 | 
 67 | #filter h3~* {
 68 |     font-size: 1.6rem;
 69 |     color: #282c3f;
 70 |     font-weight: 100;
 71 |     line-height: 3.2rem;
 72 | }
 73 | 
 74 | 
 75 | /* content */
 76 | 
 77 | #container {
 78 |     width: 75%;
 79 |     height: 50%;
 80 |     margin-top: 5rem;
 81 |     display: grid;
 82 |     grid-template-columns: repeat(4, 1fr);
 83 |     /* grid-auto-rows: minmax(550px, 650px); */
 84 |     column-gap: 3rem;
 85 |     row-gap: 7rem;
 86 |     padding: 0 2.2rem;
 87 |     font-size: 1.6rem;
 88 | }
 89 | 
 90 | #container>div {
 91 |     height: 100%;
 92 |     display: flex;
 93 |     flex-direction: column;
 94 |     justify-content: space-between;
 95 |     box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 96 | }
 97 | 
 98 | #container img {
 99 |     width: 100%;
100 | }
101 | 
102 | #container p:nth-child(2) {
103 |     color: #505055;
104 |     font-size: 1.5rem;
105 |     line-height: 2.5rem;
106 | }
107 | 
108 | #container .contentBox {
109 |     padding: 0.7rem 1.2rem;
110 |     display: flex;
111 |     flex-direction: column;
112 |     gap: 1.3rem;
113 | }
114 | 
115 | #container .mixbox {
116 |     display: flex;
117 |     justify-content: space-between;
118 |     align-items: center;
119 |     font-weight: bold;
120 |     color: black;
121 | }
122 | 
123 | #container .mixbox p:nth-child(1) {
124 |     font-size: 1.8rem;
125 | }
126 | 
127 | #container .strikep {
128 |     text-decoration: line-through;
129 |     color: #aaa;
130 |     font-size: 1.2rem;
131 | }
132 | 
133 | #container .offerp {
134 |     color: #ffae6a;
135 |     font-size: 1.2rem;
136 | }
137 | 
138 | #container .wishListp {
139 |     color: black;
140 |     font-size: 15px;
141 |     text-align: center;
142 |     border: solid 1px #aaa;
143 |     box-sizing: border-box;
144 |     padding-top: 15px;
145 |     padding-bottom: 15px;
146 |     border-radius: 5px;
147 |     margin-top: 5px;
148 |     margin-bottom: -5px;
149 | }
150 | 
151 | #container .addToBagp {
152 |     color: white;
153 |     text-align: center;
154 |     background-color: rgb(255, 62, 108);
155 |     padding: 1.6rem 0;
156 |     padding-left: 2.6rem;
157 |     border-radius: 5px;
158 | }
159 | 
160 | #container .addToBagp::after {
161 |     content: "→";
162 |     display: inline-block;
163 |     font-size: 2.3rem;
164 |     visibility: hidden;
165 |     transition: all 300ms;
166 | }
167 | 
168 | #container .addToBagp:hover::after {
169 |     transform: translateX(1.5rem);
170 |     visibility: visible;
171 | }
172 | 
173 | #container>div:hover {
174 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
175 | }
176 | 
177 | 
178 | /* MEDEIA QUERIES FOR TABLET VIEW */
179 | 
180 | @media all and (min-width: 551px) and (max-width: 850px) {
181 |     #wrapper {
182 |         flex-direction: column;
183 |     }
184 |     #filter {
185 |         display: none;
186 |     }
187 |     #container {
188 |         width: 95%;
189 |         margin: auto;
190 |         margin-top: 3rem;
191 |         grid-template-columns: repeat(3, 1fr);
192 |     }
193 |     #container .addToBagp:hover::after {
194 |         transform: translateX(1.2rem);
195 |     }
196 | }
197 | 
198 | 
199 | /* MEDEIA QUERIES FOR MOBILE VIEW */
200 | 
201 | @media all and (max-width: 551px) {
202 |     #wrapper {
203 |         flex-direction: column;
204 |     }
205 |     #filter {
206 |        display: none;
207 |     }
208 |     #container {
209 |         width: 95%;
210 |         margin: auto;
211 |         margin-top: 3rem;
212 |         grid-template-columns: repeat(2, 1fr);
213 |     }
214 |     #container .addToBagp:hover::after {
215 |         transform: translateX(1.2rem);
216 |     }
217 | }


--------------------------------------------------------------------------------
/payment/payment.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <script src="https://kit.fontawesome.com/72215895a8.js" crossorigin="anonymous"></script>
  9 |     <link rel="stylesheet" href="payment.css">
 10 |     <title>Document</title>
 11 | </head>
 12 | 
 13 | <body>
 14 |     <div id="navbar">
 15 |         <img id="logo" src="../Common Files/image/myntra-removebg-preview.png" alt="">
 16 | 
 17 |         <div id="nav2">
 18 |             <h5 id="first">BAG</h5>
 19 |             <div class="line"></div>
 20 |             <h5 id="second">ADDRESS</h5>
 21 |             <div class="line"></div>
 22 |             <h5>PAYMENT</h5>
 23 |         </div>
 24 |         <div id="nav3">
 25 |             <img src="https://constant.myntassets.com/checkout/assets/img/sprite-secure.png" alt="">
 26 |             <p>100 % <b>SECURE</b></p>
 27 |         </div>
 28 |     </div>
 29 |     <div id="cart">
 30 |         <div id="main1">
 31 |             <div>
 32 |                 <h4>Bank Offer</h4>
 33 |                 <p>10% Instant Discount with Standard Chartered Credit & Debit cards on a min spend of Rs 3,000. TCA</p>
 34 |                 <P>Show More <i class="fa-solid fa-angle-down"></i></P>
 35 | 
 36 |             </div>
 37 |             <h4>Choose Payment Mode</h4>
 38 |             <div id="payment">
 39 |                 <div id="mode">
 40 |                     <div>
 41 |                         <i class="fa-brands fa-amazon-pay"></i>
 42 |                         <h5>Cash On Delivery (Cash/Card/UPI)</h5>
 43 |                     </div>
 44 |                     <div id="card">
 45 |                         <i class="fa-solid fa-credit-card"></i>
 46 |                         <h5>Credit/Debit Card</h5>
 47 |                     </div>
 48 |                     <div>
 49 |                         <i class="fa-brands fa-cc-amazon-pay"></i>
 50 |                         <h5>PhonePe/Google Pay/BHIM UPI</h5>
 51 |                     </div>
 52 |                     <div>
 53 |                         <i class="fa-solid fa-wallet"></i>
 54 |                         <h5>Paytm/Payzapp/Wallets</h5>
 55 |                     </div>
 56 |                     <div>
 57 |                         <i class="fa-solid fa-building-columns"></i>
 58 |                         <h5>Net Banking</h5>
 59 |                     </div>
 60 |                     <div>
 61 |                         <i class="fa-solid fa-money-check-dollar"></i>
 62 |                         <h5>EMI/Pay Later</h5>
 63 |                     </div>
 64 |                 </div>
 65 |                 <div id="paymentDiv">
 66 |                     <h4>Cash On Delivery</h4>
 67 | 
 68 |                     <a href="otp.html">
 69 |                         <div id="pay">
 70 |                             PAY
 71 |                         </div>
 72 |                     </a>
 73 |                 </div>
 74 |             </div>
 75 |         </div>
 76 |         
 77 |         <!--- inserted new box n removed the div id'd "main2"---->
 78 |     
 79 |         <div class="orderbox">
 80 |             <div class="pricedets">PRICE DETAILS</div>
 81 |             <div class="total">
 82 |                <span>Total MRP</span><span class="totalprice">--</span> 
 83 |             </div>
 84 |             <div class="discount">
 85 |               <span>Discount on MRP</span><span class="filldiscount">--</span> 
 86 |            </div>
 87 |            <div class="delivery">
 88 |             <span>Delivery Charges</span><span class="filldelivery">--</span>
 89 |             </div>
 90 |            <div class="amount">
 91 |               <span>Total Amount</span><span class="amount_pay">--</span> 
 92 |            </div>
 93 |           </div>
 94 |     
 95 |     
 96 |     
 97 |     
 98 |     </div>
 99 | </body>
100 | 
101 | </html>
102 | 
103 | <script>
104 | 
105 |     var amount = localStorage.getItem("amount");
106 |     var total = parseInt(amount) + (amount*0.18) + (50) ;
107 |         document.querySelector(".amount_pay").innerText= total.toFixed(2);
108 | 
109 |         
110 |        var MRP= localStorage.getItem("MRP");
111 |        document.querySelector(".totalprice").innerText= MRP;
112 | 
113 |       var discount= localStorage.getItem("discount")
114 |         document.querySelector(".filldiscount").innerText= "- "+discount;
115 | 
116 |         var delivery= localStorage.getItem("delivery")
117 |         document.querySelector(".filldelivery").innerText= delivery;
118 |         
119 |         var itemcount= localStorage.getItem("itemcount")
120 |         document.querySelector(".pricedets").innerText= `PRICE DETAILS ( ${itemcount} Items)`;
121 | 
122 |            
123 | 
124 |         document.querySelector("#first").addEventListener("click",function(){
125 |             window.location.href ="../wishlist/cart.html"
126 |         })
127 | 
128 |         document.querySelector("#second").addEventListener("click",function(){
129 |             window.location.href ="../payment/address.html"
130 |         })
131 | </script>


--------------------------------------------------------------------------------
/Profile/signup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>SignUp</title>
  8 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
  9 |     <link rel="stylesheet" href="profile.css">
 10 |     <link rel="stylesheet" href="/Common Files/style.css">
 11 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 12 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 13 |     <style>
 14 |       #search #search_icon{
 15 |             top: unset;
 16 |         }
 17 |       #boxbody{
 18 |           margin-top: 15rem;
 19 |         }
 20 |       h3{
 21 |           margin-top: 1.5rem;
 22 |           font-size: 1.5rem;
 23 |       }
 24 |     </style>
 25 | 
 26 | </head>
 27 | <body>
 28 |     <!-- HEADER SECTION WITH NAV BAR -->
 29 |     <header>
 30 |         <div id="logo">
 31 |             <img src="/Common Files/image/myntra-removebg-preview.png" alt="brandLoog" id="landingPage">
 32 |         </div>
 33 |         <ul id="nav_bar">
 34 |             <li><a href="../Homepages/menHomePage.html">men</a></li>
 35 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 36 |             <li><a href="#">kids</a></li>
 37 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 38 |             <li><a href="#">beauty</a></li>
 39 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 40 |         </ul> 
 41 |         <div id="search">
 42 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 43 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 44 |         </div>
 45 |         <div id="right_icon">
 46 |             <div id="reggDropdown">
 47 |                   <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 48 |                 <div id="drop">
 49 |                     <a href="../Profile/profile.html" class="dropList">login</a>
 50 |                     <a href="../Profile/signup.html" class="dropList">sign up</a>
 51 |                 </div>
 52 | 
 53 | 
 54 |                 <i class="fa-regular fa-user"></i>
 55 |                 <span>profile</span>
 56 |             </div>
 57 |             <div>
 58 |                 <i class="fa-regular fa-heart"></i>
 59 |                 <span>wishlist</span>
 60 |             </div>
 61 |             <div>
 62 |                 <i class="fa-solid fa-bag-shopping"></i>
 63 |                 <span>bag</span>
 64 |             </div>
 65 |         </div>
 66 | 
 67 |                 <!-- TOGGLE MENU -->
 68 |                 <div id="toggle">
 69 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 70 |                     <div id="myDropdown" class="dropdown-content">
 71 |                         <div class="top">
 72 |                             <a href="../Homepages/menHomePage.html">men</a>
 73 |                             <a href="../Homepages/womenHomePage.html">women</a>
 74 |                             <a href="#">kids</a>
 75 |                             <a href="../Homepages/homeLiving.html">home & living</a>
 76 |                             <a href="#">beauty</a>
 77 |                             <a href="#">studio</a>
 78 |                         </div> 
 79 |                         <div class="bottom">
 80 |                             <i class="fa-regular fa-user fa_user" id="profile"></i>
 81 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 82 |                             <i class="fa-solid fa-bag-shopping fa_cart"></i>
 83 |                         </div>               
 84 |                     </div>
 85 |                 </div>
 86 | 
 87 |     </header>
 88 | 
 89 |     <div id="boxbody">        
 90 |         <div class="imgbo">
 91 |                 <img src="https://bit.ly/3iYuMIl" alt="">
 92 |         </div>
 93 | 
 94 |        <div class="signin">
 95 |                 
 96 |            <h2> SignUp</h2>
 97 |            <h3>Name</h3>
 98 |            <input type="text" id ="name" placeholder="Enter Name">
 99 |            
100 |            <h3>Mobile</h3>
101 |            <input type="tel" placeholder="Mobile Number*" id="mob">
102 |            
103 |            <h3>Email</h3>
104 |            <input type="mail" id ="mail" placeholder="Enter Email">
105 |            
106 |            <h3>Password</h3>
107 |            <input type="password" id ="pass" placeholder="Create a Password">
108 |           
109 |            <p>By continuing, I agree to the <span> Terms of     Use </span> and <span>privacy policy</span>  </p>
110 |        
111 |            <button id="signup_button">continue</button>
112 |              <p>Have trouble logging in?<span> Get help</span> </p>
113 |              <p>Already have an account ? <span id="logIn"> Login </span></p>
114 |     
115 |         </div>
116 | 
117 |     </div>
118 | 
119 | </body>
120 | </html>
121 | 
122 | <script src="../Common Files/headerMenu.js"></script>
123 | <script src="../Profile/signup.js"></script>
124 | <script src="../Common Files/hyperlinks.js"></script>
125 | 


--------------------------------------------------------------------------------
/Home Living Products/home_furnishing.css:
--------------------------------------------------------------------------------
  1 | 
  2 | #sorting {
  3 |     width: 100%;
  4 |     margin-left: 1rem;
  5 |     margin-top: 15rem;
  6 | }
  7 | 
  8 | .filter{
  9 |     padding: 10px 20px;
 10 |   }
 11 | 
 12 | 
 13 | 
 14 | *{
 15 |     box-sizing: border-box;
 16 | }
 17 | #wrapper{
 18 |     width: 100%;
 19 |     display: flex;
 20 |     gap: 3rem;
 21 | }
 22 | 
 23 | /* filter */
 24 | #filter {
 25 |     height: 100%;
 26 |     width: 23%;
 27 |     margin-left: 1rem;
 28 |     margin-top: 5rem;
 29 |     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 30 |     display: flex;
 31 |     flex-direction: column;
 32 |     gap: 1.2rem;
 33 |     padding: 1.1rem;
 34 |     padding-bottom: unset;
 35 | }
 36 | 
 37 | #filter > div{
 38 |     width: 100%;
 39 |     height: 100%;
 40 |     border-bottom: 2px solid #efefee;
 41 |     display: flex;
 42 |     flex-direction: column;
 43 |     align-items: center;
 44 |     padding-bottom: 2rem;
 45 | }
 46 | 
 47 | #filter > div > *{
 48 |     width: 90%;
 49 | }
 50 | #filter > div > h3 ~*{
 51 |     display: inline-block;
 52 | }
 53 | input[type="checkbox" i], input[type="radio" i]{
 54 |     cursor: pointer;
 55 |     margin-right: 1.2rem;
 56 | }
 57 | 
 58 | #filter h3{
 59 |     margin-bottom: 1.2rem;
 60 |     font-size: 1.8rem;
 61 |     font-weight: bold;
 62 | }
 63 | #filter h3 ~*{
 64 |     font-size: 1.6rem;
 65 |     color: #282c3f;
 66 |     font-weight: 100;
 67 |     line-height: 3.2rem;
 68 | }
 69 | 
 70 | 
 71 | /* content */
 72 | #container {
 73 |     width: 75%;
 74 |     height: 50%;
 75 |     margin-top: 5rem;
 76 |     display: grid;
 77 |     grid-template-columns: repeat(4,1fr);
 78 |     /* grid-auto-rows: minmax(550px,650px); */
 79 |     column-gap: 3rem;
 80 |     row-gap: 7rem;
 81 |     padding: 0 2.2rem;
 82 |     font-size: 1.6rem;
 83 | }
 84 | 
 85 | #container > div {
 86 |     display: flex;
 87 |     flex-direction: column;
 88 |     justify-content: space-between;
 89 |     box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 90 | }
 91 | 
 92 | #container  img {
 93 |     width: 100%;
 94 | }
 95 | 
 96 | #container  p:nth-child(2){
 97 |     color: #505055; 
 98 |     font-size: 1.3rem;
 99 |     
100 | }
101 | 
102 | #container .contentBox{
103 |     padding: 0.7rem 1.2rem;
104 |     display: flex;
105 |     flex-direction: column;
106 |     gap:1.3rem;
107 | }
108 | 
109 | #container .mixbox {
110 |     display: flex;
111 |     justify-content: space-between;
112 |     align-items: center;
113 |     font-weight: bold;
114 |     color: black;
115 | }
116 | #container .mixbox p:nth-child(1){
117 |     font-size: 1.8rem;
118 |     
119 | }
120 | 
121 | #container .strikep {
122 |     text-decoration: line-through;
123 |     color: #aaa;
124 |     font-size: 1.2rem;
125 | }
126 | 
127 | #container .offerp {
128 |     color: #ffae6a;
129 |     font-size: 1.2rem;
130 | }
131 | 
132 | #container .wishListp {
133 |     color: black;
134 |     font-size: 15px;
135 |     text-align: center;
136 |     border: solid 1px #aaa;
137 |     box-sizing: border-box;
138 |     padding-top: 15px;
139 |     padding-bottom: 15px;
140 |     border-radius: 5px;
141 |     margin-top: 5px;
142 |     margin-bottom: -5px;
143 | }
144 | 
145 | #container .addToBagp {
146 |     color: white;
147 |     text-align: center;
148 |     background-color: rgb(255,62,108);
149 |     padding: 1.6rem 0;
150 |     padding-left:2.6rem;
151 |     border-radius: 5px;
152 | }
153 | #container .addToBagp::after{
154 |     content: "→";
155 |     display: inline-block;
156 |     font-size: 2.3rem;
157 |     visibility: hidden;
158 |     transition: all 300ms;
159 | }
160 | #container .addToBagp:hover::after{
161 |     transform: translateX(1.5rem);
162 |     visibility: visible;
163 | }
164 | 
165 | #container > div:hover{
166 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
167 | }
168 | 
169 | 
170 | 
171 | /* MEDEIA QUERIES FOR TABLET VIEW */
172 | @media all and (min-width: 551px) and (max-width: 850px){
173 |   
174 |         #wrapper{
175 |             flex-direction:column;
176 |         }
177 |         #filter{
178 |             display: none;
179 |         }
180 | 
181 |         #container{
182 |             width: 95%;
183 |             margin: auto;
184 |             margin-top: 3rem;
185 |             grid-template-columns: repeat(3, 1fr);
186 |         }
187 |         #container > div{
188 |             box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
189 |         }
190 |         #container .addToBagp:hover::after{
191 |             transform: translateX(1.2rem);
192 |         } 
193 | }
194 | 
195 | /* MEDEIA QUERIES FOR MOBILE VIEW */
196 | @media all and (max-width: 551px){
197 |   
198 |     #wrapper{
199 |         flex-direction:column;
200 |     }
201 |     #filter{
202 |        display: none;
203 |     }
204 | 
205 |     #container{
206 |         width: 95%;
207 |         margin: auto;
208 |         margin-top: 3rem;
209 |         grid-template-columns: repeat(2, 1fr);
210 |     }
211 |     #container > div{
212 |         box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
213 |     }
214 |     #container .addToBagp:hover::after{
215 |         transform: translateX(1.2rem);
216 |     } 
217 | }
218 | 
219 | 


--------------------------------------------------------------------------------
/wishlist/cart.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | var cartarr = JSON.parse(localStorage.getItem("BagListObj"))||[];
  4 |        
  5 | 
  6 |         var itemcount =cartarr.length;
  7 |         localStorage.setItem("itemcount",itemcount)
  8 |         
  9 |         var delivery = 50;
 10 |         localStorage.setItem("delivery",delivery)
 11 | 
 12 |         var MRP =  cartarr.reduce(function(sum,a,ind){
 13 |           return sum+ +(cartarr[ind].strikedoffprice.split(" ")[1])
 14 |         },0);
 15 |         localStorage.setItem("MRP",MRP)
 16 |        
 17 |         var amount = cartarr.reduce(function(sum,a,ind){
 18 |           return sum+ +(cartarr[ind].price.split(" ")[1])
 19 |         },0);
 20 |         localStorage.setItem("amount",amount)
 21 |     
 22 |         var discount = MRP - amount;
 23 |         localStorage.setItem("discount",discount)
 24 |         
 25 |         if (itemcount != 0) {
 26 |           total = amount+delivery;
 27 |         } else {
 28 |           total = 0;
 29 |           delivery = 0;
 30 |           localStorage.setItem("delivery",delivery)
 31 |         }
 32 |         
 33 |         document.querySelector(".amount_pay").innerText= total;
 34 |         document.querySelector(".filldiscount").innerText= "- "+discount;
 35 |         document.querySelector(".filldelivery").innerText= delivery;
 36 |         document.querySelector(".totalprice").innerText= MRP;
 37 |         document.querySelector(".pricedets").innerText= `PRICE DETAILS ( ${itemcount} Items)`;
 38 | 
 39 | 
 40 |         cartarr.map(function(ele,ind){
 41 |           // document.querySelector(".container").innerText = "" 
 42 |             var box = document.createElement("div");
 43 |             box.className ="main"
 44 |             
 45 | 
 46 |             var imgbox = document.createElement("div");
 47 |             
 48 |             var image =document.createElement("img");
 49 |             image.src = ele.image_url
 50 |            imgbox.append(image)
 51 | 
 52 |           var detailsbox = document.createElement("div");
 53 | 
 54 |           var name =document.createElement("p");
 55 |           name.innerText=ele.brand
 56 |           name.style.fontSize="20px";
 57 |           name.style.marginBottom ="-8px"
 58 | 
 59 | 
 60 |           var para =document.createElement("p");
 61 |           para.innerText=ele.para ;
 62 |           para.style.color="gray"
 63 | 
 64 |           var price = document.createElement("span");
 65 |           price.innerText = ele.price
 66 | 
 67 |           var strikedprice = document.createElement("span");
 68 |           strikedprice.innerText = ele.strikedoffprice;
 69 |           strikedprice.style.textDecoration = "line-through";
 70 |           strikedprice.style.color ="gray";
 71 | 
 72 | 
 73 |           var offer = document.createElement("span");
 74 |           offer.innerText =ele.offer;
 75 |           offer.style.color="red";
 76 | 
 77 | 
 78 |           var pricepara =document.createElement("p");
 79 |           pricepara.append(price,strikedprice)
 80 |           
 81 |           detailsbox.append(name,para,pricepara,offer)
 82 | 
 83 |           var buttonbox = document.createElement("div");
 84 |           
 85 |           var remove =document.createElement("button");
 86 | 
 87 |           remove.innerText ="REMOVE";
 88 |           remove.addEventListener("click",function(){
 89 |             removeitem(ind)
 90 |           })
 91 | 
 92 |           
 93 |           
 94 |           buttonbox.append (remove)
 95 |           
 96 |           
 97 |           
 98 |           box.append(imgbox,detailsbox,buttonbox)
 99 | 
100 |         document.querySelector(".container").append(box)
101 | 
102 |         })
103 | 
104 |         document.querySelector(".wishlistlink").addEventListener("click",sendtowish)
105 |         function sendtowish (){
106 |           window.location.href ="wishlist.html"
107 |         }
108 | 
109 | 
110 |           function removeitem(ind){
111 |           cartarr.splice(ind,1);
112 |           localStorage.setItem("BagListObj",JSON.stringify(cartarr))
113 |           window.location.href ="cart.html";
114 |          
115 |         }
116 | 
117 |         document.querySelector(".makeorder").addEventListener("click",profile)
118 | 
119 |         function profile(){
120 |           window.location.href="../payment/payment.html";
121 |         }
122 | 
123 |         document.querySelector(".apply").addEventListener("click",discountfun);
124 | 
125 |         function discountfun(){
126 | 
127 |           var payable_amount = +(localStorage.getItem("amount"));
128 |           var int_promo = document.querySelector("#promo").value;
129 | 
130 |           if( payable_amount>300 && int_promo=="MYNTRA300")
131 |            {
132 |           amount = amount-300;
133 |           discount =discount+300;
134 |           localStorage.setItem("amount",amount)  ;
135 |           localStorage.setItem("discount",discount)
136 |           document.querySelector(".amount_pay").innerText= amount;
137 |           document.querySelector(".filldiscount").innerText= "- "+discount;
138 | 
139 |           document.querySelector(".apply").removeEventListener("click",discountfun);
140 |            }
141 |             // console.log( amount, discount)
142 | 
143 |         }
144 | 
145 | document.getElementById('landingPage').addEventListener('click', function(){
146 |   window.location.href = "../index.html";
147 | 
148 | }) 
149 | 
150 | document.querySelector("#second").addEventListener("click",function(){
151 |   window.location.href="../Profile/signup.html";
152 | })
153 | 
154 | 
155 | 
156 |         
157 | 
158 |       
159 | 
160 | 


--------------------------------------------------------------------------------
/Landingpage/header.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
  2 | 
  3 | :root{
  4 |     font-size: 62.5%;
  5 |     --primaryFont : 'DM Sans', sans-serif;
  6 |     --charSpace : 6px; 
  7 |     --primaryColor : #3e4152;
  8 |     --secondaryColor : #fafbfc;
  9 | }
 10 | body{
 11 |     font-family: var(--primaryFont);
 12 |     scroll-behavior: smooth;
 13 | }
 14 | .slider{
 15 |     width: 100%;
 16 |     height: 450px;
 17 |     overflow: hidden;
 18 | }
 19 |   
 20 | .slides{
 21 |     width: 500%;
 22 |     height: 100%;
 23 |     display: flex;
 24 | }
 25 |   
 26 | .slides input{
 27 |     display: none;
 28 | }
 29 |   
 30 | .slide{
 31 |     width: 20%;
 32 |     transition: 800ms;
 33 | }
 34 |   
 35 | .slide img{
 36 |     width: 100%;
 37 |     height: 100%;
 38 | }
 39 | 
 40 | 
 41 | 
 42 | #flatdiscount{
 43 |     position :fixed;
 44 |     right: 0px;
 45 |     bottom: 130px;
 46 |     width: 50px;
 47 |     height: 250px;
 48 |     box-sizing:border-box;
 49 |     padding-left: 10px;
 50 |     background-color: #535766;
 51 |     color: #fff;
 52 |     letter-spacing:1px;
 53 | }
 54 | #sidePanel{
 55 |     font-size:30px;
 56 |     color: #fcfcfc;
 57 | }
 58 | #flatdiscount>h1{
 59 |     writing-mode: vertical-lr;
 60 |     height: 200px;
 61 |     text-align: center;
 62 |     margin:auto;
 63 |     font-size: 20px;
 64 |     font-weight: bolder;
 65 |     color: #fcfcfc;
 66 |    
 67 | }
 68 | body>h1{
 69 |     margin: 50px 25px;
 70 |     margin-top:8rem;
 71 |     font-size: 3rem;
 72 |     text-transform: uppercase;
 73 |     letter-spacing: var(--charSpace);
 74 | }
 75 | #adDiv
 76 | {
 77 |    margin-top:50px;
 78 | }
 79 | 
 80 | #deals, 
 81 | #best, 
 82 | #top, 
 83 | #categories, 
 84 | #dealsTop, 
 85 | #unmissable, 
 86 | #colours, 
 87 | #topInfluencers, 
 88 | #budget, 
 89 | #trending{
 90 |     width: 100%;
 91 |     padding: 1rem;
 92 |     display: grid;
 93 |     gap: 1rem;
 94 | }
 95 | 
 96 | 
 97 | 
 98 | #deals{
 99 |     margin: auto;  
100 | }
101 | #deals, 
102 | #top{
103 |     grid-template-columns: repeat(7,auto);
104 |     grid-template-columns: repeat(7,auto);
105 | }
106 | #best,#categories, 
107 | #dealsTop, 
108 | #unmissable, 
109 | #budget, 
110 | #trending {
111 |     grid-template-columns: repeat(8,auto);
112 | }
113 | 
114 | #colours{
115 |     grid-template-columns: repeat(4,auto);
116 |     
117 | }
118 | #topInfluencers{
119 |     grid-template-columns: repeat(6,auto);
120 |    
121 | }
122 | 
123 | 
124 | @media only screen and (min-width: 551px) and (max-width: 850px) {
125 |     .slider {
126 |       height: 250px;
127 |     }
128 |     .navigation-manual{
129 |         margin-top: 2.5rem;
130 |     }
131 | 
132 |     #deals{
133 |         grid-template-columns: repeat(4, 1fr);
134 |         grid-template-rows: repeat(2, auto);
135 | 
136 |     }
137 |   
138 |     #best{
139 |         grid-template-columns: repeat(4, 1fr);
140 |         grid-template-rows: repeat(4, auto);
141 |     }
142 |     #top{
143 |         grid-template-columns: repeat(4, 1fr);
144 |         grid-template-rows: repeat(2, auto);
145 |     }
146 |     #categories{
147 |         grid-template-columns: repeat(4, 1fr);
148 |         grid-template-rows: repeat(4,auto);
149 |     }
150 |     #dealsTop{
151 |         grid-template-columns: repeat(4, 1fr);
152 |         grid-template-rows: repeat(4,auto);
153 |         
154 |     }
155 |     #unmissable{
156 |         grid-template-columns: repeat(4, 1fr);
157 |         grid-template-rows: repeat(2, auto);
158 |       
159 |     }
160 |     #colours{
161 |         grid-template-columns: repeat(2, 1fr);
162 |         grid-template-rows: repeat(4, auto);
163 |     }
164 |     #topInfluencers{
165 |         grid-template-columns: repeat(3, 1fr);
166 |         grid-template-rows: repeat(2, auto);
167 |     }
168 |     #budget{
169 |         grid-template-columns: repeat(4, 1fr);
170 |         grid-template-rows: repeat(2, auto);
171 |     }
172 |     #trending{
173 |         grid-template-columns: repeat(4, 1fr);
174 |         grid-template-rows: repeat(2, auto);
175 |     }
176 | }
177 | @media all and (max-width: 550px) {
178 |     .slider{
179 |         height: 250px;
180 |     }
181 |     #deals{
182 |         grid-template-columns: repeat(2, 1fr);
183 |         grid-template-rows: auto;
184 |     }
185 |     #deals img{
186 |         width: 85%;
187 |         display: block;
188 |         margin: auto;
189 |     }
190 |     #deals > div:nth-child(7){
191 |         border: 2px solid red;
192 |         display: none;
193 |     }
194 |   
195 |     #best{
196 |         grid-template-columns: repeat(2, 1fr);
197 |         grid-template-rows: auto;
198 |         
199 |     }
200 |     #top{
201 |         margin-top: auto;
202 |         grid-template-columns: repeat(2, 1fr);
203 |         grid-template-rows:auto;
204 |     }
205 |     #categories{
206 |         grid-template-columns: repeat(2, 1fr);
207 |         grid-template-rows: auto;
208 |     }
209 |     #dealsTop{
210 |         grid-template-columns: repeat(2, 1fr);
211 |         grid-template-rows: auto;
212 |         
213 |     }
214 |     #unmissable{
215 |         grid-template-columns: repeat(3, 1fr);
216 |         grid-template-rows: auto;
217 |       
218 |     }
219 |     #colours{
220 |         grid-template-columns: repeat(2, 1fr);
221 |         grid-template-rows: repeat(4, auto);
222 |     }
223 |     #topInfluencers{
224 |         grid-template-columns: repeat(2, 1fr);
225 |         grid-template-rows: auto;
226 |         /* height:100px; */
227 |     }
228 |     #budget{
229 |         grid-template-columns: repeat(3, 1fr);
230 |         grid-template-rows: auto;
231 |     }
232 |     #trending{
233 |         grid-template-columns: repeat(2, 1fr);
234 |         grid-template-rows: auto;
235 |     }
236 | }
237 | 


--------------------------------------------------------------------------------
/wishlist/cart.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
  2 | *{
  3 |     box-sizing: border-box;
  4 | }
  5 | body{
  6 |     font-family: 'DM Sans', sans-serif; 
  7 | }
  8 | #upperbar{
  9 |     display: flex;
 10 |     justify-content: space-between;
 11 |     border-bottom: 1px solid #F5F5F6;
 12 |     margin: 0px -8px;
 13 |     color: gray;
 14 |     align-items: center;
 15 |     height: 79px;
 16 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 17 | }
 18 | #upperbar >div{
 19 |     height: 50px;
 20 |     display: flex;
 21 |    align-items: center;
 22 |    margin: 5px 20px;
 23 |    justify-content: space-between;
 24 | 
 25 | }
 26 | #upperbar >div>img{
 27 |     height: 100%;
 28 |     cursor: pointer;
 29 | }
 30 | #upperbar >div:first-child{
 31 |     margin-left: 50px;
 32 | }
 33 | #upperbar >div:last-child{
 34 |     margin-right: 50px;
 35 | }
 36 | #upperbar p > #first{
 37 |     color: #14cda8;
 38 |     border-bottom: 2px solid  #14cda8;
 39 |     padding-bottom: 5px;
 40 | }
 41 | #upperbar p > *{
 42 |     cursor: pointer;
 43 | }
 44 | #timerbox{
 45 |     text-align: center;
 46 |     border-bottom: 1px solid #F5F5F6;
 47 |    color: gray;
 48 |    font-size: 20px;
 49 | }
 50 | #timerbox span{
 51 |     color:#fe3f9b;
 52 | }
 53 | .container{
 54 |     margin-top: 20px;
 55 |     display: grid;
 56 |     grid-template-columns: repeat(1,1fr);
 57 | }
 58 | .main{
 59 |     width: 80%;
 60 |     padding: 1rem;
 61 |     margin-top: 20px;
 62 |     display: flex;
 63 |     border-radius: 4px;
 64 |     justify-content: space-between;
 65 |     align-items: center;
 66 |     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
 67 | }
 68 | .main >div{
 69 |     padding: 8px ;
 70 |     width: 30%;
 71 | }
 72 | .main img{
 73 |     width: 100%;
 74 | }
 75 | .main >div:last-child{
 76 |     display: flex;
 77 |     flex-direction: column;
 78 |     justify-content: center;
 79 |     align-items: center;
 80 | }
 81 | .main button{
 82 |     width: 80%;
 83 | }
 84 | 
 85 | .wishlistlink{
 86 |  margin-top: 40px;
 87 |  height: 40px;
 88 |  margin-left: 144px;
 89 |  width: 45.7%;
 90 |  border :2px solid #F5F5F6;
 91 |  border-radius: 4px;
 92 |  display: flex;
 93 |  font-size: 20px;
 94 |  align-items: center;
 95 |  cursor: pointer;
 96 | }
 97 | .wishlistlink >p, .wishlistlink >i{
 98 | margin: 5px;
 99 | }
100 | .wishlistlink > p:hover{
101 |     color:#32cd32;
102 |     font-weight: 900;
103 |     border-bottom: 2px solid #ff3f6c;
104 | }
105 | .container span{
106 |     margin: 4px;
107 | }
108 | .orderbox{
109 |     align-self: flex-start;
110 |     margin-top: 80px;
111 |     padding: 20px;
112 |     border-radius: 4px;
113 |     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
114 | }
115 | .con_ord{
116 |     display:grid;
117 |     grid-template-columns: 60% 35%;
118 |     justify-content: center;
119 | }
120 | .orderbox>div{
121 |     display: flex;
122 |     justify-content: space-between;
123 |     margin: 10px 0px;
124 |     color: #535766;
125 |     
126 | }
127 | .promocode{
128 |     display:block
129 | }
130 | button{
131 |     background-color: #ff3f6c;
132 |     color: white;
133 |     border: 10px;
134 |     outline: none;
135 |     cursor: pointer;
136 |     padding: 1rem 2rem;
137 |     border-radius: 5px;
138 | }
139 | .amount{
140 |     font-weight: bold;
141 | }
142 | .filldiscount{
143 |     color:#32cd32;
144 |     text-decoration: none;
145 | }
146 | .pricedets,.amount{
147 |     border-bottom: 1px solid gray;
148 |     padding-bottom: 20px;
149 | }
150 | .orderbox .makeorder,.apply{
151 |     justify-content: center;
152 |     background-color: #ff3f6c;
153 |     padding: 0.7rem 1.2rem;
154 |     color: white;
155 |     font-weight: bold;
156 |     border-radius: 5px;
157 |     cursor: pointer;
158 | }
159 | .orderbox .makeorder{
160 |     margin-top: 30px;
161 | }
162 | #promo{
163 |     border: 1px solid #ff3f6c;
164 |     padding-left: 15px;
165 |     border-radius: 5px;
166 |     
167 | }
168 | .amount + p{
169 |     text-align: center;
170 |     font-size: 20px;
171 | }
172 | 
173 | 
174 | 
175 | 
176 | /* MEDEIA QUERIES FOR TABLET VIEW */
177 | @media all and (min-width: 721px) and (max-width: 850px){
178 |     .container{
179 |      margin-top: 20px;
180 |       margin-left: 10px;
181 |        width: 60%;
182 |        display: -moz-grid-line;
183 |        grid-template-columns: repeat(1,1fr);
184 |        gap: 10px;
185 |     }
186 |     .promocode{
187 |         display: flex;
188 |         flex-direction: column;
189 |     
190 |     }
191 |     .apply{
192 |         width: 30%;
193 |         margin: auto;
194 |         text-align: center;
195 |         margin-top: 10px;
196 |     }
197 |     #promo{
198 |         height: 30px;
199 |     }
200 |        
201 | }
202 | 
203 | @media all and (max-width: 720px){
204 |     .con_ord{
205 |         display:grid;
206 |         grid-template-columns: repeat(1,1fr);
207 |         padding: 5px;
208 |     }
209 |     .container{
210 |         margin: auto;
211 |           width: 90%;
212 |           display: -moz-grid-line;
213 |           grid-template-columns: repeat(1,1fr);
214 |           gap: 10px;
215 |        }
216 |        .orderbox{
217 |         height: 400px;
218 |         width: 50%;
219 |         margin: auto;
220 |         border :2px solid #F5F5F6;
221 |         margin-top: 80px;
222 |         padding: 20px;
223 |         border-radius: 4px;
224 |     }
225 |     #upperbar >div{
226 |        margin: 5px 5px;
227 |     
228 |     }
229 |     #upperbar >div:first-child{
230 |         margin-left: 10px;
231 |     }
232 |     #upperbar >div:last-child{
233 |         margin-right: 10px;
234 |     }
235 |     .footer{
236 |         display: flex;
237 |         flex-direction: column;
238 |     }
239 |        
240 | }
241 | 


--------------------------------------------------------------------------------
/wishlist/wishlist.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Wish-list</title>
  8 |     <link rel="stylesheet" href="wishlist.css">
  9 |     <!-- <link rel="stylesheet" href="/Common Files/style.css"> -->
 10 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
 11 |     <link rel="stylesheet" href="../Common Files/style.css">
 12 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 13 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 14 | </head>
 15 | <body>
 16 |      
 17 |     <header>
 18 |         <div id="logo">
 19 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLoog" id="landingPage">
 20 |         </div>
 21 |         <ul id="nav_bar">
 22 |             <li><a href="../Homepages/menHomePage.html">men</a></li>
 23 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 24 |             <li><a href="#">kids</a></li>
 25 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 26 |             <li><a href="#">beauty</a></li>
 27 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 28 |         </ul> 
 29 |         <div id="search">
 30 |             <input type="text" id="search_bar" placeholder="Search for products, brands">
 31 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 32 |         </div>
 33 |         <div id="right_icon">
 34 |             <div id="reggDropdown">
 35 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 36 |               <div id="drop">
 37 |                   <a href="../Profile/profile.html" class="dropList">login</a>
 38 |                   <a href="../Profile/signup.html" class="dropList">sign up</a>
 39 |               </div>
 40 | 
 41 |               <i class="fa-regular fa-user"></i>
 42 |               <span>profile</span>
 43 |           </div>
 44 |             <div>
 45 |                 <i class="fa-regular fa-heart"></i>
 46 |                 <span>wishlist</span>
 47 |             </div>
 48 |             <div>
 49 |                 <i class="fa-solid fa-bag-shopping"></i>
 50 |                 <span>bag</span>
 51 |             </div>
 52 |         </div>
 53 | 
 54 |         <!-- TOGGLE MENU -->
 55 |         <div id="toggle">
 56 |             <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 57 |             <div id="myDropdown" class="dropdown-content">
 58 |                 <div class="top">
 59 |                     <a href="../Homepages/menHomePage.html">men</a>
 60 |                     <a href="../Homepages/womenHomePage.html">women</a>
 61 |                     <a href="#">kids</a>
 62 |                     <a href="../Homepages/homeLiving.html">home & living</a>
 63 |                     <a href="#">beauty</a>
 64 |                     <a href="#">studio</a>
 65 |                 </div>   
 66 |                 <div class="bottom">
 67 |                     <i class="fa-regular fa-user fa_user" id="profile"></i>
 68 |                     <i class="fa-regular fa-heart fa_wishlist"></i>
 69 |                     <i class="fa-solid fa-bag-shopping fa_cart"></i>
 70 |                 </div>            
 71 |             </div>
 72 |         </div>
 73 |     </header>
 74 |  
 75 | 
 76 |     <h3 class="wishhead">My Wishlist <span class="wishcount"> </span> </h3>
 77 |     
 78 |     <div class="container">
 79 |         
 80 |     </div>
 81 | 
 82 |       <!-- FOOTER SECTION -->
 83 |       <footer>
 84 |         <section id="section_1">
 85 |             <div id="left">
 86 |                 <div>
 87 |                     <h4>online shopping</h4>
 88 |                     <p>men</p>
 89 |                     <p>women</p>
 90 |                     <p>home & living</p>
 91 |                     <p>beauty</p>
 92 |                     <p>gift cards</p>
 93 |                     <p>myntra insider<span id="latest">New</span></p>
 94 |                 </div>
 95 |                 <div>
 96 |                 <h4>useful links</h4>
 97 |                 <p>men</p>
 98 |                 <p>faq</p>
 99 |                 <p>t&c</p>
100 |                 <p>terms of use</p>
101 |                 <p>track order</p>
102 |                 <p>shipping</p>
103 |                 <p>cancellation</p>
104 |                 <p>returns</p>
105 |                 <p>whitehat</p>
106 |                 <p>blog</p>
107 |                 <p>careers</p>
108 |                 <p>privacy policy</p>
109 |                 <p>site map</p>
110 |                 <p>corporate information</p>
111 |                 </div>
112 |                 <div>
113 |                     <h4>experience myntra app on mobile</h4>
114 |                     <img src="https://bit.ly/3LluZ4L" alt="android">
115 |                     <img src="https://bit.ly/3DmWQys" alt="ios">
116 |                     <h4 id="social_connect">keep in touch</h4>
117 |                     <div>
118 |                         <i class="fa-brands fa-facebook-square"></i>
119 |                         <i class="fa-brands fa-twitter-square"></i>
120 |                         <i class="fa-brands fa-youtube"></i>
121 |                         <i class="fa-brands fa-instagram"></i>
122 |                     </div>
123 |                 </div>
124 |             </div>
125 |             <div id="right">
126 |                 <div>
127 |                     <img src="https://bit.ly/3JPiL47" alt="original">
128 |                     <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
129 |                 </div>
130 |                 <div>
131 |                     <img src="https://bit.ly/3uBalH4" alt="return_policy">
132 |                     <p><span>Return within 30days</span> of receiving your order</p>
133 |                 </div>
134 |             </div>
135 |         </section>
136 | 
137 |         <section id="section_2">
138 |             <h4>popular searches</h4>
139 |             <div></div> 
140 |         </section>
141 | 
142 |         <section id="section_3">
143 |         <a href="">pillow</a><a href="">towels</a><a href="">bathroom rugs</a><a href="">Water Bottle</a><a href="">jeans</a><a href="">suit</a><a href="">trouser</a><a href="">shalwar</a><a href="">shampoo</a><a href="">sherwani</a><a href="">cargo</a><a href="">shirt</a><a href="">mirrors</a><a href="">shelwar</a><a href="">Bracelets</a><a href="">sherwani</a><a href="">laundary bags</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">rings</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">curtians</a><a href="">tableware</a><a href="">blazzers</a><a href="">wall lamps</a><a href="">Water Bottle</a><a href="">bed cover</a><a href="">cushion covers</a><a href="">key holders</a>
144 |         </section>
145 | 
146 |         <section id="section_4">
147 |             <p>In case of any concern <a href="#"> contact us</a></p>
148 |             <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
149 |         </section>
150 |         
151 |    </footer>
152 | </body>
153 | </html>
154 | <script src="../wishlist/wishlist.js"></script>
155 | <script src="../Common Files/hyperlinks.js"></script>
156 | <script src="../Common Files/headerMenu.js"></script>


--------------------------------------------------------------------------------
/payment/confetti.js:
--------------------------------------------------------------------------------
  1 | var confetti = {
  2 | 	maxCount: 150,		//set max confetti count
  3 | 	speed: 2,			//set the particle animation speed
  4 | 	frameInterval: 15,	//the confetti animation frame interval in milliseconds
  5 | 	alpha: 1.0,			//the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
  6 | 	gradient: false,	//whether to use gradients for the confetti particles
  7 | 	start: null,		//call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
  8 | 	stop: null,			//call to stop adding confetti
  9 | 	toggle: null,		//call to start or stop the confetti animation depending on whether it's already running
 10 | 	pause: null,		//call to freeze confetti animation
 11 | 	resume: null,		//call to unfreeze confetti animation
 12 | 	togglePause: null,	//call to toggle whether the confetti animation is paused
 13 | 	remove: null,		//call to stop the confetti animation and remove all confetti immediately
 14 | 	isPaused: null,		//call and returns true or false depending on whether the confetti animation is paused
 15 | 	isRunning: null		//call and returns true or false depending on whether the animation is running
 16 | };
 17 | 
 18 | (function() {
 19 | 	confetti.start = startConfetti;
 20 | 	confetti.stop = stopConfetti;
 21 | 	confetti.toggle = toggleConfetti;
 22 | 	confetti.pause = pauseConfetti;
 23 | 	confetti.resume = resumeConfetti;
 24 | 	confetti.togglePause = toggleConfettiPause;
 25 | 	confetti.isPaused = isConfettiPaused;
 26 | 	confetti.remove = removeConfetti;
 27 | 	confetti.isRunning = isConfettiRunning;
 28 | 	var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
 29 | 	var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
 30 | 	var streamingConfetti = false;
 31 | 	var animationTimer = null;
 32 | 	var pause = false;
 33 | 	var lastFrameTime = Date.now();
 34 | 	var particles = [];
 35 | 	var waveAngle = 0;
 36 | 	var context = null;
 37 | 
 38 | 	function resetParticle(particle, width, height) {
 39 | 		particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
 40 | 		particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
 41 | 		particle.x = Math.random() * width;
 42 | 		particle.y = Math.random() * height - height;
 43 | 		particle.diameter = Math.random() * 10 + 5;
 44 | 		particle.tilt = Math.random() * 10 - 10;
 45 | 		particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
 46 | 		particle.tiltAngle = Math.random() * Math.PI;
 47 | 		return particle;
 48 | 	}
 49 | 
 50 | 	function toggleConfettiPause() {
 51 | 		if (pause)
 52 | 			resumeConfetti();
 53 | 		else
 54 | 			pauseConfetti();
 55 | 	}
 56 | 
 57 | 	function isConfettiPaused() {
 58 | 		return pause;
 59 | 	}
 60 | 
 61 | 	function pauseConfetti() {
 62 | 		pause = true;
 63 | 	}
 64 | 
 65 | 	function resumeConfetti() {
 66 | 		pause = false;
 67 | 		runAnimation();
 68 | 	}
 69 | 
 70 | 	function runAnimation() {
 71 | 		if (pause)
 72 | 			return;
 73 | 		else if (particles.length === 0) {
 74 | 			context.clearRect(0, 0, window.innerWidth, window.innerHeight);
 75 | 			animationTimer = null;
 76 | 		} else {
 77 | 			var now = Date.now();
 78 | 			var delta = now - lastFrameTime;
 79 | 			if (!supportsAnimationFrame || delta > confetti.frameInterval) {
 80 | 				context.clearRect(0, 0, window.innerWidth, window.innerHeight);
 81 | 				updateParticles();
 82 | 				drawParticles(context);
 83 | 				lastFrameTime = now - (delta % confetti.frameInterval);
 84 | 			}
 85 | 			animationTimer = requestAnimationFrame(runAnimation);
 86 | 		}
 87 | 	}
 88 | 
 89 | 	function startConfetti(timeout, min, max) {
 90 | 		var width = window.innerWidth;
 91 | 		var height = window.innerHeight;
 92 | 		window.requestAnimationFrame = (function() {
 93 | 			return window.requestAnimationFrame ||
 94 | 				window.webkitRequestAnimationFrame ||
 95 | 				window.mozRequestAnimationFrame ||
 96 | 				window.oRequestAnimationFrame ||
 97 | 				window.msRequestAnimationFrame ||
 98 | 				function (callback) {
 99 | 					return window.setTimeout(callback, confetti.frameInterval);
100 | 				};
101 | 		})();
102 | 		var canvas = document.getElementById("confetti-canvas");
103 | 		if (canvas === null) {
104 | 			canvas = document.createElement("canvas");
105 | 			canvas.setAttribute("id", "confetti-canvas");
106 | 			canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
107 | 			document.body.prepend(canvas);
108 | 			canvas.width = width;
109 | 			canvas.height = height;
110 | 			window.addEventListener("resize", function() {
111 | 				canvas.width = window.innerWidth;
112 | 				canvas.height = window.innerHeight;
113 | 			}, true);
114 | 			context = canvas.getContext("2d");
115 | 		} else if (context === null)
116 | 			context = canvas.getContext("2d");
117 | 		var count = confetti.maxCount;
118 | 		if (min) {
119 | 			if (max) {
120 | 				if (min == max)
121 | 					count = particles.length + max;
122 | 				else {
123 | 					if (min > max) {
124 | 						var temp = min;
125 | 						min = max;
126 | 						max = temp;
127 | 					}
128 | 					count = particles.length + ((Math.random() * (max - min) + min) | 0);
129 | 				}
130 | 			} else
131 | 				count = particles.length + min;
132 | 		} else if (max)
133 | 			count = particles.length + max;
134 | 		while (particles.length < count)
135 | 			particles.push(resetParticle({}, width, height));
136 | 		streamingConfetti = true;
137 | 		pause = false;
138 | 		runAnimation();
139 | 		if (timeout) {
140 | 			window.setTimeout(stopConfetti, timeout);
141 | 		}
142 | 	}
143 | 
144 | 	function stopConfetti() {
145 | 		streamingConfetti = false;
146 | 	}
147 | 
148 | 	function removeConfetti() {
149 | 		stop();
150 | 		pause = false;
151 | 		particles = [];
152 | 	}
153 | 
154 | 	function toggleConfetti() {
155 | 		if (streamingConfetti)
156 | 			stopConfetti();
157 | 		else
158 | 			startConfetti();
159 | 	}
160 | 	
161 | 	function isConfettiRunning() {
162 | 		return streamingConfetti;
163 | 	}
164 | 
165 | 	function drawParticles(context) {
166 | 		var particle;
167 | 		var x, y, x2, y2;
168 | 		for (var i = 0; i < particles.length; i++) {
169 | 			particle = particles[i];
170 | 			context.beginPath();
171 | 			context.lineWidth = particle.diameter;
172 | 			x2 = particle.x + particle.tilt;
173 | 			x = x2 + particle.diameter / 2;
174 | 			y2 = particle.y + particle.tilt + particle.diameter / 2;
175 | 			if (confetti.gradient) {
176 | 				var gradient = context.createLinearGradient(x, particle.y, x2, y2);
177 | 				gradient.addColorStop("0", particle.color);
178 | 				gradient.addColorStop("1.0", particle.color2);
179 | 				context.strokeStyle = gradient;
180 | 			} else
181 | 				context.strokeStyle = particle.color;
182 | 			context.moveTo(x, particle.y);
183 | 			context.lineTo(x2, y2);
184 | 			context.stroke();
185 | 		}
186 | 	}
187 | 
188 | 	function updateParticles() {
189 | 		var width = window.innerWidth;
190 | 		var height = window.innerHeight;
191 | 		var particle;
192 | 		waveAngle += 0.01;
193 | 		for (var i = 0; i < particles.length; i++) {
194 | 			particle = particles[i];
195 | 			if (!streamingConfetti && particle.y < -15)
196 | 				particle.y = height + 100;
197 | 			else {
198 | 				particle.tiltAngle += particle.tiltAngleIncrement;
199 | 				particle.x += Math.sin(waveAngle) - 0.5;
200 | 				particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
201 | 				particle.tilt = Math.sin(particle.tiltAngle) * 15;
202 | 			}
203 | 			if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
204 | 				if (streamingConfetti && particles.length <= confetti.maxCount)
205 | 					resetParticle(particle, width, height);
206 | 				else {
207 | 					particles.splice(i, 1);
208 | 					i--;
209 | 				}
210 | 			}
211 | 		}
212 | 	}
213 | })();


--------------------------------------------------------------------------------
/Homepages/homeLiving.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Home and Living - Buy Interior Decoration Products and Accessories Online in India</title>
  8 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
  9 |     <link rel="stylesheet" href="../Common Files/style.css">
 10 |     <link rel="stylesheet" href="../Common Files/homeLiving.css">
 11 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 12 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 13 | </head>
 14 | <body>
 15 |      <!-- MENU BAR -->
 16 |      <header>
 17 |         <div id="logo">
 18 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 19 |         </div>
 20 |         <ul id="nav_bar">
 21 |             <li id="megamenu_container"><a href="../Homepages/menHomePage.html">men</a></li>
 22 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 23 |             <li><a href="#">kids</a></li>
 24 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 25 |             <li><a href="#">beauty</a></li>
 26 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 27 |         </ul> 
 28 |         <div id="search">
 29 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 30 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 31 |         </div>
 32 |         <div id="right_icon">
 33 |             <div id="reggDropdown">
 34 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 35 |               <div id="drop">
 36 |                   <a href="../Profile/profile.html" class="dropList">login</a>
 37 |                   <a href="../Profile/signup.html" class="dropList">sign up</a>
 38 |               </div>
 39 | 
 40 |               <i class="fa-regular fa-user"></i>
 41 |               <span>profile</span>
 42 |           </div>
 43 |             <div>
 44 |                 <i class="fa-regular fa-heart"></i>
 45 |                 <span>wishlist</span>
 46 |             </div>
 47 |             <div>
 48 |                 <i class="fa-solid fa-bag-shopping"></i>
 49 |                 <span>bag</span>
 50 |             </div>
 51 |         </div>
 52 | 
 53 |                 <!-- TOGGLE MENU -->
 54 |                 <div id="toggle">
 55 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 56 |                     <div id="myDropdown" class="dropdown-content">
 57 |                         <div class="top">
 58 |                             <a href="../Homepages/menHomePage.html">men</a>
 59 |                             <a href="../Homepages/womenHomePage.html">women</a>
 60 |                             <a href="#">kids</a>
 61 |                             <a href="../Homepages/homeLiving.html">home & living</a>
 62 |                             <a href="#">beauty</a>
 63 |                             <a href="#">studio</a>
 64 |                         </div>
 65 |                         <div class="bottom">
 66 |                             <i class="fa-regular fa-user fa_user" id="profile"></i>
 67 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 68 |                             <i class="fa-solid fa-bag-shopping fa_cart"></i>
 69 |                         </div>             
 70 |                     </div>
 71 |                 </div>
 72 |     </header>
 73 | 
 74 |    <section id="banner">
 75 |        <div>
 76 |            <img src="https://bit.ly/3qOkAXl" alt="" class="forMob">
 77 |            <img src="https://bit.ly/36AvNUN" alt="" class="forWeb forDesk">
 78 |        </div>
 79 |    </section>
 80 |    
 81 |    <!-- MAIN CONTAINER -->
 82 |    <main>
 83 |        <div id="content">
 84 |            <h1 class="brand_heading" id="content_head">nice to see you, come on in!</h1>
 85 |            <div id="category">
 86 |                <div><img src="https://bit.ly/3JP9yIJ" alt="category1"></div>
 87 |                <div><img src="https://bit.ly/3NHZxQj" alt="category2"></div>
 88 |                <div><img src="https://bit.ly/3tNDj7i" alt="category3"></div>
 89 |                <div><img src="https://bit.ly/38c0sIk" alt="category4"></div>
 90 |                <div><img src="https://bit.ly/3DAhsUp" alt="category5"></div>
 91 |                <div><img src="https://bit.ly/3NwvMS5" alt="category6"></div>
 92 |            </div>
 93 |        </div>
 94 |        <aside>
 95 |            <!-- ANCHORS BUILT USING JS -->
 96 |        </aside>
 97 |    </main>
 98 | 
 99 |    <!-- BRANDS & OTHER CONTENT SECTIONS- -->
100 |        <section class="wrapper">
101 |            <div><img src="https://bit.ly/35oLzBq" alt="trends"></div>
102 |            <div class="container">
103 |                <div><img src="https://bit.ly/3JQGjWh" alt="trend1"></div>
104 |                <div><img src="https://bit.ly/3iMuwfy" alt="trend2"></div>
105 |                <div><img src="https://bit.ly/3LsCffk" alt="trend3"></div>
106 |            </div>
107 |        </section>
108 |       
109 |       
110 |        <section class="wrapper">
111 |             <div><img src="https://bit.ly/3IQtgCA" alt="trends" id="featured"></div>
112 |             <div class="container">
113 |                 <div><img src="https://bit.ly/36EypRl" alt="brand1"></div>
114 |                 <div><img src="https://bit.ly/3uFSwGD" alt="brand2"></div>
115 |                 <div><img src="https://bit.ly/3tLl1DM" alt="brand3"></div>
116 |                 <div><img src="https://bit.ly/3LnF0y9" alt="brand4"></div>
117 |                 <div><img src="https://bit.ly/3iMLRoK" alt="brand5"></div>
118 |             </div>
119 |        </section>
120 | 
121 | 
122 |        <!-- FOOTER SECTION -->
123 |        <footer>
124 |             <section id="section_1">
125 |                 <div id="left">
126 |                     <div>
127 |                         <h4>online shopping</h4>
128 |                         <p>men</p>
129 |                         <p>women</p>
130 |                         <p>home & living</p>
131 |                         <p>beauty</p>
132 |                         <p>gift cards</p>
133 |                         <p>myntra insider<span id="latest">New</span></p>
134 |                     </div>
135 |                     <div>
136 |                     <h4>useful links</h4>
137 |                     <p>men</p>
138 |                     <p>faq</p>
139 |                     <p>t&c</p>
140 |                     <p>terms of use</p>
141 |                     <p>track order</p>
142 |                     <p>shipping</p>
143 |                     <p>cancellation</p>
144 |                     <p>returns</p>
145 |                     <p>whitehat</p>
146 |                     <p>blog</p>
147 |                     <p>careers</p>
148 |                     <p>privacy policy</p>
149 |                     <p>site map</p>
150 |                     <p>corporate information</p>
151 |                     </div>
152 |                     <div>
153 |                         <h4>experience myntra app on mobile</h4>
154 |                         <img src="https://bit.ly/3LluZ4L" alt="android">
155 |                         <img src="https://bit.ly/3DmWQys" alt="ios">
156 |                         <h4 id="social_connect">keep in touch</h4>
157 |                         <div>
158 |                             <i class="fa-brands fa-facebook-square"></i>
159 |                             <i class="fa-brands fa-twitter-square"></i>
160 |                             <i class="fa-brands fa-youtube"></i>
161 |                             <i class="fa-brands fa-instagram"></i>
162 |                         </div>
163 |                     </div>
164 |                 </div>
165 |                 <div id="right">
166 |                     <div>
167 |                         <img src="https://bit.ly/3JPiL47" alt="original">
168 |                         <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
169 |                     </div>
170 |                     <div>
171 |                         <img src="https://bit.ly/3uBalH4" alt="return_policy">
172 |                         <p><span>Return within 30days</span> of receiving your order</p>
173 |                     </div>
174 |                 </div>
175 |             </section>
176 | 
177 |             <section id="section_2">
178 |                 <h4>popular searches</h4>
179 |                 <div></div> 
180 |             </section>
181 | 
182 |             <section id="section_3">
183 |             <a href="">pillow</a><a href="">towels</a><a href="">bathroom rugs</a><a href="">Water Bottle</a><a href="">jeans</a><a href="">suit</a><a href="">trouser</a><a href="">shalwar</a><a href="">shampoo</a><a href="">sherwani</a><a href="">cargo</a><a href="">shirt</a><a href="">mirrors</a><a href="">shelwar</a><a href="">Bracelets</a><a href="">sherwani</a><a href="">laundary bags</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">rings</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">curtians</a><a href="">tableware</a><a href="">blazzers</a><a href="">wall lamps</a><a href="">Water Bottle</a><a href="">bed cover</a><a href="">cushion covers</a><a href="">key holders</a>
184 |             </section>
185 | 
186 |             <section id="section_4">
187 |                 <p>In case of any concern <a href="#"> contact us</a></p>
188 |                 <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
189 |             </section>
190 |             
191 |        </footer>
192 | 
193 | 
194 |        <!-- JS FILE ENABLED -->
195 |        <script src="../Common Files/homeLiving.js"></script>
196 |        <script src="../Common Files/headerMenu.js"></script>
197 |        <script src="../Common Files/hyperlinks.js"></script>
198 |        
199 | 
200 | </body>
201 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>E-commerce</title>
  9 |      <!-- FAVICON -->
 10 |      <link rel="shortcut icon" type="image/png" href="./Common Files/image/favicon.png">
 11 |     <!-- ALL CSS LINK -->
 12 |     <link rel="stylesheet" href="./Common Files/style.css">
 13 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 14 |     <link rel="stylesheet" href="./Landingpage/navbar.css">
 15 |     <link rel="stylesheet" href="./Landingpage/header.css">
 16 |     <!-- FONT-AWESOME -->
 17 |     <script src="https://kit.fontawesome.com/72215895a8.js" crossorigin="anonymous"></script>
 18 |     <style>
 19 |         #section_1 img{
 20 |             width: unset;
 21 |         }
 22 |         ol > li > span{
 23 |             color: #505050;
 24 |             font-weight: 700;
 25 |         }
 26 |     </style>
 27 | </head>
 28 | 
 29 | <body>
 30 |     <div id="flatdiscount">
 31 |         <i id="sidePanel" class="fa-solid fa-caret-left"></i>
 32 |         <h1>FLAT ₹300 OFF</h1>
 33 |     </div>
 34 | 
 35 |     <!-- HEADER MENU SECTION -->
 36 |     <header>
 37 |         <div id="logo">
 38 |             <img src="./Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 39 |         </div>
 40 |         <ul id="nav_bar">
 41 |             <li id="megamenu_container"><a href="./Homepages/menHomePage.html">Men</a></li>
 42 |             <li><a href="./Homepages/womenHomePage.html">women</a></li>
 43 |             <li><a href="#">kids</a></li>
 44 |             <li><a href="./Homepages/homeLiving.html">home & living</a></li>
 45 |             <li><a href="#">beauty</a></li>
 46 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 47 |         </ul> 
 48 |         <div id="search">
 49 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 50 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 51 |         </div>
 52 |         <div id="right_icon">
 53 |             <div id="reggDropdown">
 54 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 55 |               <div id="drop">
 56 |                   <a href="./Profile/profile.html" class="dropList">login</a>
 57 |                   <a href="./Profile/signup.html" class="dropList">sign up</a>
 58 |               </div>
 59 | 
 60 |               <i class="fa-regular fa-user"></i>
 61 |               <span>profile</span>
 62 |           </div>
 63 |             <div>
 64 |                 <i class="fa-regular fa-heart"></i>
 65 |                 <span>wishlist</span>
 66 |             </div>
 67 |             <div>
 68 |                 <a href="=./wishlist/cart.html"></a>
 69 |                 <i class="fa-solid fa-bag-shopping"></i>
 70 |                 <span>bag</span>
 71 |             </div>
 72 |         </div>
 73 |                    <!-- TOGGLE MENU -->
 74 |                    <div id="toggle">
 75 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 76 |                     <div id="myDropdown" class="dropdown-content">
 77 |                         <div class="top">
 78 |                             <a href="./Homepages/menHomePage.html">men</a>
 79 |                             <a href="./Homepages/womenHomePage.html">women</a>
 80 |                             <a href="#">kids</a>
 81 |                             <a href="./Homepages/homeLiving.html">home & living</a>
 82 |                             <a href="#">beauty</a>
 83 |                             <a href="#">studio</a>
 84 |                         </div>
 85 |                         <div class="bottom">
 86 |                             <i class="fa-regular fa-user fa_user" id="profile"></i>
 87 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 88 |                             <i class="fa-solid fa-bag-shopping fa_cart"></i>
 89 |                         </div>               
 90 |                     </div>
 91 |                 </div>
 92 |     </header>
 93 | 
 94 |     
 95 |     <div class="slider">
 96 |         <div class="slides">
 97 |             <!--radio buttons start-->
 98 |             <input type="radio" name="radio-btn" id="radio1">
 99 |             <input type="radio" name="radio-btn" id="radio2">
100 |             <input type="radio" name="radio-btn" id="radio3">
101 |             <input type="radio" name="radio-btn" id="radio4">
102 | 
103 |             <!--slide images start-->
104 |             <div class="slide first">
105 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/28/4ac3be4b-f02c-4106-8dc9-be1898a81def1648463267842-Desktop-Banner-----1920x504.jpg"  
106 |                 alt="">
107 |             </div>
108 |             <div class="slide">
109 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/17/8f1a79c7-3f11-4608-9f31-30a03a606cb41647537798522-SS22-DesktopBanners-Unisex.jpg"
110 |                 alt="">
111 |             </div>
112 |             <div class="slide">
113 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/17/1439d458-3f9b-4a49-830c-a47a126bb9311647456798699-Roadster_Desk_Banner.jpg"
114 |                 alt="">
115 |             </div>
116 |             <div class="slide">
117 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/17/52df3f93-8d0f-412d-b416-fc665706199d1647456798690-Casual-Shoes_Dk.jpg"
118 |                 alt="">
119 |             </div>
120 |         </div>
121 | 
122 |         <!--manual navigation start-->
123 |         <div class="navigation-manual">
124 |             <label for="radio1" class="manual-btn"></label>
125 |             <label for="radio2" class="manual-btn"></label>
126 |             <label for="radio3" class="manual-btn"></label>
127 |             <label for="radio4" class="manual-btn"></label>
128 |         </div>
129 |     </div>
130 | 
131 | 
132 |     <h1>DEALS OF THE DAY</h1>
133 |     <div id="deals">
134 | 
135 |     </div>
136 |     <h1>BEST OF  EXCLUSIVE BRANDS</h1>
137 |     <div id="best">
138 |     </div>
139 |     <h1>TOP PICKS</h1>
140 |     <div id="top">
141 |     </div>
142 |     <h1>CATEGORIES TO BAG</h1>
143 |     <div id="categories">
144 |     </div>
145 |     <h1>DEALS ON TOP BRANDS</h1>
146 |     <div id="dealsTop">
147 |     </div>
148 |     <h1>UNMISSABLE THIS SEASON</h1>
149 |     <div id="unmissable">
150 |     </div>
151 |     <h1>COLOURS OF THE SEASON</h1>
152 |     <div id="colours">
153 | 
154 |     </div>
155 |     <h1>TOP INFLUENCERS EXCLUSIVE STYLE</h1>
156 |     <div id="topInfluencers"></div>
157 |     <h1>BUDGET PICKS INFLUENCERS LOVE</h1>
158 |     <div id="budget"></div>
159 |     <h1>TRENDING OUTFIT BY INFLUENCERS</h1>
160 |     <div id="trending">
161 |     </div>
162 | 
163 |    
164 |           <!-- FOOTER SECTION -->
165 |           <footer>
166 |             <section id="section_1">
167 |                 <div id="left">
168 |                     <div>
169 |                         <h4>online shopping</h4>
170 |                         <p>men</p>
171 |                         <p>women</p>
172 |                         <p>home & living</p>
173 |                         <p>beauty</p>
174 |                         <p>gift cards</p>
175 |                         <p> insider<span id="latest">New</span></p>
176 |                     </div>
177 |                     <div>
178 |                       <h4>useful links</h4>
179 |                       <p>men</p>
180 |                       <p>faq</p>
181 |                       <p>t&c</p>
182 |                       <p>terms of use</p>
183 |                       <p>track order</p>
184 |                       <p>shipping</p>
185 |                       <p>cancellation</p>
186 |                       <p>returns</p>
187 |                       <p>whitehat</p>
188 |                       <p>blog</p>
189 |                       <p>careers</p>
190 |                       <p>privacy policy</p>
191 |                       <p>site map</p>
192 |                       <p>corporate information</p>
193 |                     </div>
194 |                     <div>
195 |                         <h4>experience app on mobile</h4>
196 |                         <img src="https://bit.ly/3LluZ4L" alt="android">
197 |                         <img src="https://bit.ly/3DmWQys" alt="ios">
198 |                         <h4 id="social_connect">keep in touch</h4>
199 |                         <div>
200 |                           <i class="fa-brands fa-facebook-square"></i>
201 |                           <i class="fa-brands fa-twitter-square"></i>
202 |                           <i class="fa-brands fa-youtube"></i>
203 |                           <i class="fa-brands fa-instagram"></i>
204 |                         </div>
205 |                     </div>
206 |                 </div>
207 |                 <div id="right">
208 |                     <div>
209 |                         <img src="https://bit.ly/3JPiL47" alt="original">
210 |                         <p> <span>100% ORIGINAL</span> guarantee for all products at fastion.com</p>
211 |                     </div>
212 |                     <div>
213 |                         <img src="https://bit.ly/3uBalH4" alt="return_policy">
214 |                         <p><span>Return within 30days</span> of receiving your order</p>
215 |                     </div>
216 |                 </div>
217 |             </section>
218 |            
219 |         </footer>
220 | </body>
221 | 
222 | </html>
223 | <script src="./Landingpage/deals.js"></script>
224 | <script src="./Common Files/headerMenu.js"></script>
225 | <script src="./Common Files/corousel.js"></script>
226 | <script src="./Common Files/hyperlinks.js"></script>
227 | 


--------------------------------------------------------------------------------
/Landingpage/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>TEAM EXCALIBUR</title>
  9 |      <!-- FAVICON -->
 10 |      <link rel="shortcut icon" type="image/png" href="./Common Files/image/favicon.png">
 11 |     <!-- ALL CSS LINK -->
 12 |     <link rel="stylesheet" href="./Common Files/style.css">
 13 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 14 | <<<<<<< HEAD
 15 |     <link rel="stylesheet" href="./navbar.css">
 16 |     <link rel="stylesheet" href="./header.css">
 17 | =======
 18 |     <link rel="stylesheet" href="./Landingpage/navbar.css">
 19 |     <link rel="stylesheet" href="./Landingpage/header.css">
 20 | >>>>>>> 7cd3a95724dfc46648a84b0a101d5e97bee94c97
 21 |     <!-- FONT-AWESOME -->
 22 |     <script src="https://kit.fontawesome.com/72215895a8.js" crossorigin="anonymous"></script>
 23 |     <style>
 24 |         #section_1 img{
 25 |             width: unset;
 26 |         }
 27 |         ol > li > span{
 28 |             color: #505050;
 29 |             font-weight: 700;
 30 |         }
 31 |     </style>
 32 | </head>
 33 | 
 34 | <body>
 35 |     <div id="flatdiscount">
 36 |         <i id="sidePanel" class="fa-solid fa-caret-left"></i>
 37 |         <h1>FLAT ₹300 OFF</h1>
 38 |     </div>
 39 | 
 40 |     <!-- HEADER MENU SECTION -->
 41 |     <header>
 42 |         <div id="logo">
 43 |             <img src="./Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 44 |         </div>
 45 |         <ul id="nav_bar">
 46 |             <li id="megamenu_container"><a href="./Homepages/menHomePage.html">Men</a></li>
 47 |             <li><a href="./Homepages/womenHomePage.html">women</a></li>
 48 |             <li><a href="#">kids</a></li>
 49 |             <li><a href="./Homepages/homeLiving.html">home & living</a></li>
 50 |             <li><a href="#">beauty</a></li>
 51 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 52 |         </ul> 
 53 |         <div id="search">
 54 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 55 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 56 |         </div>
 57 |         <div id="right_icon">
 58 |             <div id="reggDropdown">
 59 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 60 |               <div id="drop">
 61 |                   <a href="./Profile/profile.html" class="dropList">login</a>
 62 |                   <a href="./Profile/signup.html" class="dropList">sign up</a>
 63 |               </div>
 64 | 
 65 |               <i class="fa-regular fa-user"></i>
 66 |               <span>profile</span>
 67 |           </div>
 68 |             <div>
 69 |                 <i class="fa-regular fa-heart"></i>
 70 |                 <span>wishlist</span>
 71 |             </div>
 72 |             <div>
 73 |                 <a href="=./wishlist/cart.html"></a>
 74 |                 <i class="fa-solid fa-bag-shopping"></i>
 75 |                 <span>bag</span>
 76 |             </div>
 77 |         </div>
 78 |                    <!-- TOGGLE MENU -->
 79 |                    <div id="toggle">
 80 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 81 |                     <div id="myDropdown" class="dropdown-content">
 82 |                         <div class="top">
 83 |                             <a href="./Homepages/menHomePage.html">men</a>
 84 |                             <a href="./Homepages/womenHomePage.html">women</a>
 85 |                             <a href="#">kids</a>
 86 |                             <a href="./Homepages/homeLiving.html">home & living</a>
 87 |                             <a href="#">beauty</a>
 88 |                             <a href="#">studio</a>
 89 |                         </div>
 90 |                         <div class="bottom">
 91 |                             <i class="fa-regular fa-user fa_user" id="profile"></i>
 92 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 93 |                             <i class="fa-solid fa-bag-shopping fa_cart"></i>
 94 |                         </div>               
 95 |                     </div>
 96 |                 </div>
 97 |     </header>
 98 | 
 99 |     
100 |     <div class="slider">
101 |         <div class="slides">
102 |             <!--radio buttons start-->
103 |             <input type="radio" name="radio-btn" id="radio1">
104 |             <input type="radio" name="radio-btn" id="radio2">
105 |             <input type="radio" name="radio-btn" id="radio3">
106 |             <input type="radio" name="radio-btn" id="radio4">
107 | 
108 |             <!--slide images start-->
109 |             <div class="slide first">
110 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/28/4ac3be4b-f02c-4106-8dc9-be1898a81def1648463267842-Desktop-Banner-----1920x504.jpg"  
111 |                 alt="">
112 |             </div>
113 |             <div class="slide">
114 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/17/8f1a79c7-3f11-4608-9f31-30a03a606cb41647537798522-SS22-DesktopBanners-Unisex.jpg"
115 |                 alt="">
116 |             </div>
117 |             <div class="slide">
118 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/17/1439d458-3f9b-4a49-830c-a47a126bb9311647456798699-Roadster_Desk_Banner.jpg"
119 |                 alt="">
120 |             </div>
121 |             <div class="slide">
122 |                 <img src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2022/3/17/52df3f93-8d0f-412d-b416-fc665706199d1647456798690-Casual-Shoes_Dk.jpg"
123 |                 alt="">
124 |             </div>
125 |         </div>
126 | 
127 |         <!--manual navigation start-->
128 |         <div class="navigation-manual">
129 |             <label for="radio1" class="manual-btn"></label>
130 |             <label for="radio2" class="manual-btn"></label>
131 |             <label for="radio3" class="manual-btn"></label>
132 |             <label for="radio4" class="manual-btn"></label>
133 |         </div>
134 |     </div>
135 | 
136 | 
137 |     <h1>DEALS OF THE DAY</h1>
138 |     <div id="deals">
139 | 
140 |     </div>
141 |     <h1>BEST OF  EXCLUSIVE BRANDS</h1>
142 |     <div id="best">
143 |     </div>
144 |     <h1>TOP PICKS</h1>
145 |     <div id="top">
146 |     </div>
147 |     <h1>CATEGORIES TO BAG</h1>
148 |     <div id="categories">
149 |     </div>
150 |     <h1>DEALS ON TOP BRANDS</h1>
151 |     <div id="dealsTop">
152 |     </div>
153 |     <h1>UNMISSABLE THIS SEASON</h1>
154 |     <div id="unmissable">
155 |     </div>
156 |     <h1>COLOURS OF THE SEASON</h1>
157 |     <div id="colours">
158 | 
159 |     </div>
160 |     <h1>TOP INFLUENCERS EXCLUSIVE STYLE</h1>
161 |     <div id="topInfluencers"></div>
162 |     <h1>BUDGET PICKS INFLUENCERS LOVE</h1>
163 |     <div id="budget"></div>
164 |     <h1>TRENDING OUTFIT BY INFLUENCERS</h1>
165 |     <div id="trending">
166 |     </div>
167 | 
168 |    
169 |           <!-- FOOTER SECTION -->
170 |           <footer>
171 |             <section id="section_1">
172 |                 <div id="left">
173 |                     <div>
174 |                         <h4>online shopping</h4>
175 |                         <p>men</p>
176 |                         <p>women</p>
177 |                         <p>home & living</p>
178 |                         <p>beauty</p>
179 |                         <p>gift cards</p>
180 |                         <p> insider<span id="latest">New</span></p>
181 |                     </div>
182 |                     <div>
183 |                       <h4>useful links</h4>
184 |                       <p>men</p>
185 |                       <p>faq</p>
186 |                       <p>t&c</p>
187 |                       <p>terms of use</p>
188 |                       <p>track order</p>
189 |                       <p>shipping</p>
190 |                       <p>cancellation</p>
191 |                       <p>returns</p>
192 |                       <p>whitehat</p>
193 |                       <p>blog</p>
194 |                       <p>careers</p>
195 |                       <p>privacy policy</p>
196 |                       <p>site map</p>
197 |                       <p>corporate information</p>
198 |                     </div>
199 |                     <div>
200 |                         <h4>experience app on mobile</h4>
201 |                         <img src="https://bit.ly/3LluZ4L" alt="android">
202 |                         <img src="https://bit.ly/3DmWQys" alt="ios">
203 |                         <h4 id="social_connect">keep in touch</h4>
204 |                         <div>
205 |                           <i class="fa-brands fa-facebook-square"></i>
206 |                           <i class="fa-brands fa-twitter-square"></i>
207 |                           <i class="fa-brands fa-youtube"></i>
208 |                           <i class="fa-brands fa-instagram"></i>
209 |                         </div>
210 |                     </div>
211 |                 </div>
212 |                 <div id="right">
213 |                     <div>
214 |                         <img src="https://bit.ly/3JPiL47" alt="original">
215 |                         <p> <span>100% ORIGINAL</span> guarantee for all products at fastion.com</p>
216 |                     </div>
217 |                     <div>
218 |                         <img src="https://bit.ly/3uBalH4" alt="return_policy">
219 |                         <p><span>Return within 30days</span> of receiving your order</p>
220 |                     </div>
221 |                 </div>
222 |             </section>
223 |            
224 |         </footer>
225 | </body>
226 | 
227 | </html>
228 | <<<<<<< HEAD
229 | <script src="./deals.js"></script>
230 | =======
231 | <script src="./Landingpage/deals.js"></script>
232 | >>>>>>> 7cd3a95724dfc46648a84b0a101d5e97bee94c97
233 | <script src="./Common Files/headerMenu.js"></script>
234 | <script src="./Common Files/corousel.js"></script>
235 | <script src="./Common Files/hyperlinks.js"></script>
236 | 


--------------------------------------------------------------------------------
/womensdata/style&js/womestyle.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
  2 | #sorting {
  3 |     width: 100%;
  4 |     margin-left: 1rem;
  5 |     margin-top: 15rem;
  6 | }
  7 | 
  8 | .filter {
  9 |     padding: 10px 20px;
 10 | }
 11 | 
 12 | body {
 13 |     font-family: 'DM Sans', sans-serif;
 14 | }
 15 | 
 16 | header {
 17 |     width: 100%;
 18 |     height: 100px;
 19 |     box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
 20 |     display: flex;
 21 |     justify-content: space-evenly;
 22 |     align-items: center;
 23 |     position: fixed;
 24 |     top: 0;
 25 |     left: 0;
 26 |     right: 0;
 27 |     background-color: #ffff;
 28 |     opacity: 1;
 29 | }
 30 | 
 31 | header>* {
 32 |     height: 100%;
 33 | }
 34 | 
 35 | #logo {
 36 |     width: 12%;
 37 | }
 38 | 
 39 | #logo>img {
 40 |     width: 80%;
 41 |     margin-top: 2rem;
 42 |     cursor: pointer;
 43 | }
 44 | 
 45 | #nav_bar {
 46 |     width: 50%;
 47 |     list-style: none;
 48 |     padding: 0;
 49 |     text-transform: uppercase;
 50 |     font-size: 15px;
 51 |     letter-spacing: 0.7px;
 52 |     color: #282c3f;
 53 |     font-family: var(--primaryFont);
 54 |     font-weight: bold;
 55 |     text-align: center;
 56 |     display: flex;
 57 |     justify-content: space-around;
 58 |     align-items: center;
 59 |     flex-wrap: wrap;
 60 | }
 61 | 
 62 | #nav_bar a {
 63 |     text-decoration: none;
 64 |     color: unset;
 65 |     display: block;
 66 |     height: 50%;
 67 |     padding-top: 4.5rem;
 68 | }
 69 | 
 70 | #nav_bar li:hover a {
 71 |     border-bottom: 5px solid #f58fa0;
 72 | }
 73 | 
 74 | #nav_bar li:nth-child(1):hover a {
 75 |     border-bottom: 5px solid #ff4500;
 76 | }
 77 | 
 78 | #nav_bar li:nth-child(2):hover a {
 79 |     border-bottom: 5px solid #ff69b4;
 80 | }
 81 | 
 82 | #nav_bar li:nth-child(3):hover a {
 83 |     border-bottom: 5px solid #ffa500;
 84 | }
 85 | 
 86 | #nav_bar li:nth-child(4):hover a {
 87 |     border-bottom: 5px solid #f2c210;
 88 | }
 89 | 
 90 | #nav_bar li:nth-child(5):hover a {
 91 |     border-bottom: 5px solid #0db7af;
 92 | }
 93 | 
 94 | #nav_bar li {
 95 |     height: 100%;
 96 | }
 97 | 
 98 | #nav_bar #studio {
 99 |     position: relative;
100 | }
101 | 
102 | #nav_bar span {
103 |     color: red;
104 |     position: absolute;
105 |     top: 30%;
106 |     left: 105%;
107 |     font-size: 1.2rem;
108 |     font-weight: 700;
109 | }
110 | 
111 | #search {
112 |     width: 40%;
113 |     display: flex;
114 |     align-items: center;
115 |     justify-content: flex-end;
116 |     font-size: 14px;
117 |     color: #696e79;
118 |     position: relative;
119 | }
120 | 
121 | #search>#search_bar {
122 |     display: inline-block;
123 |     width: 82%;
124 |     height: 18px;
125 |     line-height: 24px;
126 |     padding: 1.5rem;
127 |     padding-left: 5rem;
128 |     background-color: #f5f5f6;
129 |     border: none;
130 |     border-radius: 0.3rem;
131 |     color: #696e79;
132 |     letter-spacing: 0.5px;
133 | }
134 | 
135 | #search>#search_bar:focus {
136 |     outline: 0;
137 |     background-color: #fff;
138 |     box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
139 | }
140 | 
141 | #search #search_icon {
142 |     position: absolute;
143 |     left: 3rem;
144 | }
145 | 
146 | #right_icon {
147 |     width: 24%;
148 |     display: flex;
149 |     font-size: 1.5rem;
150 |     font-weight: lighter;
151 |     text-transform: capitalize;
152 |     cursor: pointer;
153 | }
154 | 
155 | #right_icon>div {
156 |     width: 33%;
157 |     display: flex;
158 |     flex-direction: column;
159 |     align-items: center;
160 |     justify-content: center;
161 |     gap: 5px;
162 | }
163 | 
164 | #right_icon i {
165 |     font-size: 2rem;
166 | }
167 | 
168 | #container>p {
169 |     font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
170 |     font-style: italic;
171 | }
172 | 
173 | footer {
174 |     width: 100%;
175 |     padding-bottom: 8rem;
176 |     background-color: var(--secondaryColor);
177 | }
178 | 
179 | section,
180 | hr {
181 |     width: 75%;
182 |     margin: auto;
183 |     margin-top: 4rem;
184 | }
185 | 
186 | section {
187 |     font-size: 1.5rem;
188 | }
189 | 
190 | hr {
191 |     margin-top: 1rem;
192 |     color: #eeeeee;
193 | }
194 | 
195 | footer h4 {
196 |     text-transform: uppercase;
197 |     color: #505050;
198 | }
199 | 
200 | footer>#section_1 {
201 |     padding: 5rem 0 2rem;
202 |     display: flex;
203 |     justify-content: space-between;
204 | }
205 | 
206 | #section_1>#left {
207 |     width: 65%;
208 |     color: #868585;
209 |     font-weight: 100;
210 |     text-transform: capitalize;
211 |     line-height: 2.7rem;
212 |     display: flex;
213 | }
214 | 
215 | #left>* {
216 |     flex: 1;
217 | }
218 | 
219 | #left #latest {
220 |     color: #fff;
221 |     background-color: #ed3833;
222 |     margin-left: 0.5rem;
223 |     padding: 1px 1rem;
224 |     font-size: 1.2rem;
225 |     border-radius: 10px;
226 | }
227 | 
228 | #left>div:nth-child(3) {
229 |     flex: 1.5;
230 | }
231 | 
232 | #section_1 #social_connect {
233 |     margin-top: 2rem;
234 | }
235 | 
236 | #social_connect+div {
237 |     font-size: 2.5rem;
238 |     display: flex;
239 |     gap: 1.5rem;
240 | }
241 | 
242 | #section_1 h4 {
243 |     margin-bottom: 2rem;
244 | }
245 | 
246 | #section_1 img {
247 |     height: 42px;
248 | }
249 | 
250 | #section_1>#right {
251 |     width: 30%;
252 | }
253 | 
254 | #right>div {
255 |     display: flex;
256 |     gap: 2rem;
257 | }
258 | 
259 | #right>div:nth-child(2) {
260 |     margin-top: 3rem;
261 | }
262 | 
263 | #right img {
264 |     display: inline-block;
265 |     width: 48px;
266 |     height: 40px;
267 |     margin-top: 2px;
268 | }
269 | 
270 | #right span {
271 |     font-weight: 700;
272 | }
273 | 
274 | #section_2 {
275 |     display: flex;
276 |     align-items: center;
277 |     justify-content: space-between;
278 | }
279 | 
280 | #section_2>div {
281 |     width: 85%;
282 |     background-color: #aaa;
283 | }
284 | 
285 | #section_3 {
286 |     margin-top: 3rem;
287 |     font-size: 1.5rem;
288 | }
289 | 
290 | #section_3 a {
291 |     display: inline-block;
292 |     text-decoration: none;
293 |     color: #aaa;
294 |     padding-right: 1rem;
295 |     margin: 4px;
296 |     border-right: 1px solid #aaa;
297 |     text-transform: capitalize;
298 | }
299 | 
300 | #section_4 {
301 |     margin-top: 3rem;
302 |     display: flex;
303 |     justify-content: space-between;
304 | }
305 | 
306 | #section_4 a {
307 |     font-size: 2rem;
308 |     text-transform: capitalize;
309 |     text-decoration: none;
310 | }
311 | 
312 | #section1 {
313 |     background-color: rgb(250, 251, 252);
314 | }
315 | 
316 | :root {
317 |     font-size: 62.5%;
318 |     --primaryFont: "DM Sans", sans-serif;
319 |     --charSpace: 6px;
320 |     --primaryColor: #3e4152;
321 |     --secondaryColor: #fafbfc;
322 | }
323 | 
324 | #wrapper {
325 |     width: 100%;
326 |     display: flex;
327 |     gap: 3rem;
328 | }
329 | 
330 | 
331 | /* filter */
332 | 
333 | #filter {
334 |     height: 100%;
335 |     width: 23%;
336 |     margin-left: 1rem;
337 |     margin-top: 5rem;
338 |     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
339 |     display: flex;
340 |     flex-direction: column;
341 |     gap: 1.2rem;
342 |     padding: 1.1rem;
343 |     padding-bottom: unset;
344 | }
345 | 
346 | #filter>div {
347 |     width: 100%;
348 |     height: 100%;
349 |     border-bottom: 2px solid #efefee;
350 |     display: flex;
351 |     flex-direction: column;
352 |     align-items: center;
353 |     padding-bottom: 2rem;
354 | }
355 | 
356 | #filter>div>* {
357 |     width: 90%;
358 | }
359 | 
360 | #filter>div>h3~* {
361 |     display: inline-block;
362 | }
363 | 
364 | input[type="checkbox" i],
365 | input[type="radio" i] {
366 |     cursor: pointer;
367 |     margin-right: 1.2rem;
368 | }
369 | 
370 | #filter h3 {
371 |     margin-bottom: 1.2rem;
372 |     font-size: 1.8rem;
373 |     font-weight: bold;
374 | }
375 | 
376 | #filter h3~* {
377 |     font-size: 1.6rem;
378 |     color: #282c3f;
379 |     font-weight: 100;
380 |     line-height: 3.2rem;
381 | }
382 | 
383 | #container {
384 |     width: 75%;
385 |     height: 50%;
386 |     margin-top: 5rem;
387 |     display: grid;
388 |     grid-template-columns: repeat(4, 1fr);
389 |     column-gap: 3rem;
390 |     row-gap: 7rem;
391 |     padding: 0 2.2rem;
392 |     font-size: 1.6rem;
393 | }
394 | 
395 | #container>div {
396 |     display: flex;
397 |     flex-direction: column;
398 |     justify-content: space-between;
399 |     box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
400 | }
401 | 
402 | #container img {
403 |     width: 100%;
404 | }
405 | 
406 | #container p:nth-child(2) {
407 |     color: #505055;
408 |     font-size: 1.5rem;
409 |     line-height: 2.5rem;
410 | }
411 | 
412 | #container .contentBox {
413 |     padding: 0.7rem 1.2rem;
414 |     display: flex;
415 |     flex-direction: column;
416 |     gap: 1.3rem;
417 | }
418 | 
419 | #container .mixbox {
420 |     display: flex;
421 |     justify-content: space-between;
422 |     align-items: center;
423 |     font-weight: bold;
424 |     color: black;
425 | }
426 | 
427 | #container .mixbox p:nth-child(1) {
428 |     font-size: 1.8rem;
429 | }
430 | 
431 | #container .strikep {
432 |     text-decoration: line-through;
433 |     color: #aaa;
434 |     font-size: 1.2rem;
435 | }
436 | 
437 | #container .offerp {
438 |     color: #ffae6a;
439 |     font-size: 1.2rem;
440 | }
441 | 
442 | #container .wishListp {
443 |     color: black;
444 |     font-size: 15px;
445 |     text-align: center;
446 |     border: solid 1px #aaa;
447 |     box-sizing: border-box;
448 |     padding-top: 15px;
449 |     padding-bottom: 15px;
450 |     border-radius: 5px;
451 |     margin-top: 5px;
452 |     margin-bottom: -5px;
453 | }
454 | 
455 | #container .addToBagp {
456 |     color: white;
457 |     text-align: center;
458 |     background-color: rgb(255, 62, 108);
459 |     padding: 1.6rem 0;
460 |     padding-left: 2.6rem;
461 |     border-radius: 5px;
462 | }
463 | 
464 | #container .addToBagp::after {
465 |     content: "→";
466 |     display: inline-block;
467 |     font-size: 2.3rem;
468 |     visibility: hidden;
469 |     transition: all 300ms;
470 | }
471 | 
472 | #container .addToBagp:hover::after {
473 |     transform: translateX(1.5rem);
474 |     visibility: visible;
475 | }
476 | 
477 | #container>div:hover {
478 |     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
479 | }
480 | 
481 | 
482 | /* MEDEIA QUERIES FOR TABLET VIEW */
483 | 
484 | @media all and (min-width: 551px) and (max-width: 850px) {
485 |     #wrapper {
486 |         flex-direction: column;
487 |     }
488 |     #filter {
489 |         display: none;
490 |     }
491 |     #container {
492 |         width: 95%;
493 |         margin: auto;
494 |         margin-top: 3rem;
495 |         grid-template-columns: repeat(3, 1fr);
496 |     }
497 |     #container>div {
498 |         box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
499 |     }
500 |     #container .addToBagp:hover::after {
501 |         transform: translateX(1.2rem);
502 |     }
503 | }
504 | 
505 | @media all and (max-width: 551px) {
506 |     #wrapper {
507 |         flex-direction: column;
508 |     }
509 |     #filter {
510 |         display: none;
511 |     }
512 |     #container {
513 |         width: 95%;
514 |         margin: auto;
515 |         margin-top: 3rem;
516 |         grid-template-columns: repeat(2, 1fr);
517 |     }
518 |     #container>div {
519 |         box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
520 |     }
521 |     #container .addToBagp:hover::after {
522 |         transform: translateX(1.2rem);
523 |     }
524 | }
525 | 
526 | #reggDropdown {
527 |     position: relative;
528 | }
529 | 
530 | #reggDropdown>#drop {
531 |     width: 20rem;
532 |     height: 0;
533 |     padding-right: 1rem;
534 |     padding-bottom: 1rem;
535 |     position: absolute;
536 |     top: 100%;
537 |     right: 0;
538 |     visibility: hidden;
539 |     display: flex;
540 |     flex-direction: column;
541 |     justify-content: space-around;
542 |     align-items: flex-end;
543 |     border-radius: 1.5rem;
544 |     cursor: default;
545 |     background-color: #fff;
546 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
547 |     transition: all 500ms;
548 | }
549 | 
550 | #reggDropdown a {
551 |     width: 85%;
552 |     text-decoration: none;
553 |     color: unset;
554 |     display: inline-block;
555 |     text-align: right;
556 |     border-radius: 1rem;
557 |     padding: 1.5rem;
558 |     margin-top: 1rem;
559 |     transition: all 500ms;
560 | }
561 | 
562 | #reggDropdown:hover #drop {
563 |     visibility: visible;
564 |     width: 20rem;
565 |     height: 15rem;
566 | }
567 | 
568 | #reggDropdown>#drop .dropList {
569 |     font-size: 0;
570 | }
571 | 
572 | #reggDropdown:hover>#drop .dropList {
573 |     font-size: 2rem;
574 | }
575 | 
576 | #reggDropdown a:hover {
577 |     background-color: #f8d7cf;
578 | }


--------------------------------------------------------------------------------
/menspage/mens.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Men</title>
  9 |     <link rel="stylesheet" href="mens.css" />
 10 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
 11 |     <link rel="stylesheet" href="../Common Files/style.css">
 12 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 13 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 | 
 19 |     <header>
 20 |         <div id="logo">
 21 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 22 |         </div>
 23 |         <ul id="nav_bar">
 24 |             <li id="megamenu_container"><a href="../Homepages/menHomePage.html">men</a></li>
 25 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 26 |             <li><a href="#">kids</a></li>
 27 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 28 |             <li><a href="#">beauty</a></li>
 29 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 30 |         </ul>
 31 |         <div id="search">
 32 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 33 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 34 |         </div>
 35 |         <div id="right_icon">
 36 |             <div id="reggDropdown">
 37 |                 <!-- DROPDOWN MENU TO FOR LOGIN AND SIGNUP -->
 38 |                 <div id="drop">
 39 |                     <a href="/Profile/profile.html" class="dropList">login</a>
 40 |                     <a href="/Profile/signup.html" class="dropList">sign up</a>
 41 |                 </div>
 42 |                 <i class="fa-regular fa-user"></i>
 43 |                 <span>profile</span>
 44 |             </div>
 45 |             <div>
 46 |                 <i class="fa-regular fa-heart"></i>
 47 |                 <span>wishlist</span>
 48 |             </div>
 49 |             <div>
 50 |                 <i class="fa-solid fa-bag-shopping"></i>
 51 |                 <span>bag</span>
 52 |             </div>
 53 |         </div>
 54 | 
 55 |         <!-- TOGGLE MENU -->
 56 |         <div id="toggle">
 57 |             <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 58 |             <div id="myDropdown" class="dropdown-content">
 59 |                 <div class="top">
 60 |                     <a href="../Homepages/menHomePage.html">men</a>
 61 |                     <a href="../Homepages/womenHomePage.html">women</a>
 62 |                     <a href="#">kids</a>
 63 |                     <a href="../Homepages/homeLiving.html">home & living</a>
 64 |                     <a href="#">beauty</a>
 65 |                     <a href="#">studio</a>
 66 |                 </div>
 67 |                 <div class="bottom">
 68 |                     <i class="fa-regular fa-user fa_user" id="profile"></i>
 69 |                     <i class="fa-regular fa-heart fa_wishlist"></i>
 70 |                     <i class="fa-solid fa-bag-shopping fa_cart"></i>
 71 |                 </div>
 72 |             </div>
 73 |         </div>
 74 |     </header>
 75 | 
 76 | 
 77 |     <div id="sorting">
 78 | 
 79 |         <select class="filter" id="brandFilter">
 80 |             <option id="normal" value="all">FILTER BY BRAND</option>
 81 |             <option value="U.S. Polo Assn.">U.S. Polo Assn.</option>
 82 |             <option value="Roadster">Roadster</option>
 83 |             <option value="KLOTTHE">KLOTTHE</option>
 84 |             <option value="Mast & Harbour">Mast & Harbour</option>
 85 |             <option value="PUMA">PUMA</option>
 86 |             <option value="WROGN">WROGN</option>
 87 |             <option value="HRX by Hrithik Roshan">HRX by Hrithik Roshan</option>
 88 |             <option value="Flying Machine">Flying Machine</option>         
 89 |           </select>
 90 | 
 91 |         <select class="filter" id="priceSort">
 92 |             <option value="---">SORT BY PRICE</option>
 93 |             <option value="lth">Low → High</option>
 94 |             <option value="htl">High → Low</option>
 95 |           </select>
 96 | 
 97 |         <select class="filter" id="nameSort">
 98 |             <option value="---">SORT BY NAME</option>
 99 |             <option value="asc">Ascending</option>
100 |             <option value="dsc">Descending</option>
101 |           </select>
102 | 
103 |     </div>
104 | 
105 | 
106 |     <div id="wrapper">
107 |         <div id="filter">
108 |             <div class="a">
109 |                 <h3>FILTERS </h3>
110 |                 <div>
111 |                     <input type="radio" id="sagar" name="group">
112 |                     <label for="sagar">Men</label><br>
113 |                     <input type="radio" id="rb" name="group">
114 |                     <label for="rb">Women</label><br>
115 |                     <input type="radio" id="rb" name="group">
116 |                     <label for="rb">Boys</label><br>
117 |                     <input type="radio" id="rb" name="group">
118 |                     <label for="rb">Girls</label>
119 |                 </div>
120 | 
121 |             </div>
122 |             <div class="b">
123 |                 <h3>CATEGORIES</h3>
124 |                 <div>
125 |                     <input type="checkbox" id="cb" name="group">
126 |                     <label for="cb">Tshirts</label><br>
127 |                     <input type="checkbox" id="cb" name="group">
128 |                     <label for="cb">Shirts</label><br>
129 |                     <input type="checkbox" id="cb" name="group">
130 |                     <label for="cb">Casual Shoes</label><br>
131 |                     <input type="checkbox" id="cb" name="group">
132 |                     <label for="cb">Sweatshirts</label><br>
133 |                     <input type="checkbox" id="cb" name="group">
134 |                     <label for="cb">Jackets</label><br>
135 |                     <input type="checkbox" id="cb" name="group">
136 |                     <label for="cb">Trousers</label><br>
137 |                     <input type="checkbox" id="cb" name="group">
138 |                     <label for="cb">Slippers</label><br>
139 |                     <input type="checkbox" id="cb" name="group">
140 |                     <label for="cb">Flip Flops</label>
141 |                 </div>
142 | 
143 |             </div>
144 |             <div class="b">
145 |                 <h3>BRAND</h3>
146 |                 <div>
147 |                     <input type="checkbox" id="cb" name="group">
148 |                     <label for="cb">U.S. Polo Assn.</label><br>
149 |                     <input type="checkbox" id="cb" name="group">
150 |                     <label for="cb">Roadster</label><br>
151 |                     <input type="checkbox" id="cb" name="group">
152 |                     <label for="cb">KLOTTHE</label><br>
153 |                     <input type="checkbox" id="cb" name="group">
154 |                     <label for="cb">Mast & Harbour</label><br>
155 |                     <input type="checkbox" id="cb" name="group">
156 |                     <label for="cb">Puma</label><br>
157 |                     <input type="checkbox" id="cb" name="group">
158 |                     <label for="cb">WROGN</label><br>
159 |                     <input type="checkbox" id="cb" name="group">
160 |                     <label for="cb">HRX by Hrithik Roshan</label><br>
161 |                     <input type="checkbox" id="cb" name="group">
162 |                     <label for="cb">Flying Machine</label>
163 |                 </div>
164 | 
165 |             </div>
166 |             <div class="b">
167 |                 <h3>PRICE</h3>
168 |                 <div>
169 |                     <input type="checkbox" id="cb" name="group">
170 |                     <label for="cb">Rs 499 to Rs 1349</label><br>
171 |                     <input type="checkbox" id="cb" name="group">
172 |                     <label for="cb">Rs. 1349 to Rs. 2199</label><br>
173 |                     <input type="checkbox" id="cb" name="group">
174 |                     <label for="cb">Rs. 2199 to Rs. 3049</label><br>
175 |                     <input type="checkbox" id="cb" name="group">
176 |                     <label for="cb">Rs. 3049 to Rs. 3899</label><br>
177 |                 </div>
178 | 
179 |             </div>
180 |             <div class="b">
181 |                 <h3>COLOR</h3>
182 |                 <div>
183 |                     <input type="checkbox" id="cb" name="group">
184 |                     <label for="cb">Blue</label><br>
185 |                     <input type="checkbox" id="cb" name="group">
186 |                     <label for="cb">Navy Blue</label><br>
187 |                     <input type="checkbox" id="cb" name="group">
188 |                     <label for="cb">Black</label><br>
189 |                     <input type="checkbox" id="cb" name="group">
190 |                     <label for="cb">White</label><br>
191 |                     <input type="checkbox" id="cb" name="group">
192 |                     <label for="cb">Grey</label><br>
193 |                     <input type="checkbox" id="cb" name="group">
194 |                     <label for="cb">Red</label><br>
195 |                     <input type="checkbox" id="cb" name="group">
196 |                     <label for="cb">Green</label><br>
197 |                 </div>
198 | 
199 |             </div>
200 |             <div class="c">
201 |                 <h3>DISCOUNT RANGE</h3>
202 |                 <div>
203 |                     <input type="radio" id="rb" name="group">
204 |                     <label for="rb">10% and above</label><br>
205 |                     <input type="radio" id="rb" name="group">
206 |                     <label for="rb">20% and above</label><br>
207 |                     <input type="radio" id="rb" name="group">
208 |                     <label for="rb">30% and aboves</label><br>
209 |                     <input type="radio" id="rb" name="group">
210 |                     <label for="rb">40% and above</label><br>
211 |                     <input type="radio" id="rb" name="group">
212 |                     <label for="rb">50% and above</label><br>
213 |                     <input type="radio" id="rb" name="group">
214 |                     <label for="rb">60% and above</label><br>
215 | 
216 | 
217 |                 </div>
218 | 
219 |             </div>
220 |         </div>
221 | 
222 |         <div id="container"></div>
223 |     </div>
224 | 
225 |     <footer>
226 |         <section id="section_1">
227 |             <div id="left">
228 |                 <div>
229 |                     <h4>online shopping</h4>
230 |                     <p>men</p>
231 |                     <p>women</p>
232 |                     <p>home & living</p>
233 |                     <p>beauty</p>
234 |                     <p>gift cards</p>
235 |                     <p>myntra insider<span id="latest">New</span></p>
236 |                 </div>
237 |                 <div>
238 |                     <h4>useful links</h4>
239 |                     <p>men</p>
240 |                     <p>faq</p>
241 |                     <p>t&c</p>
242 |                     <p>terms of use</p>
243 |                     <p>track order</p>
244 |                     <p>shipping</p>
245 |                     <p>cancellation</p>
246 |                     <p>returns</p>
247 |                     <p>whitehat</p>
248 |                     <p>blog</p>
249 |                     <p>careers</p>
250 |                     <p>privacy policy</p>
251 |                     <p>site map</p>
252 |                     <p>corporate information</p>
253 |                 </div>
254 |                 <div>
255 |                     <h4>experience myntra app on mobile</h4>
256 |                     <img src="https://bit.ly/3LluZ4L" alt="android">
257 |                     <img src="https://bit.ly/3DmWQys" alt="ios">
258 |                     <h4 id="social_connect">keep in touch</h4>
259 |                     <div>
260 |                         <i class="fa-brands fa-facebook-square"></i>
261 |                         <i class="fa-brands fa-twitter-square"></i>
262 |                         <i class="fa-brands fa-youtube"></i>
263 |                         <i class="fa-brands fa-instagram"></i>
264 |                     </div>
265 |                 </div>
266 |             </div>
267 |             <div id="right">
268 |                 <div>
269 |                     <img src="https://bit.ly/3JPiL47" alt="original">
270 |                     <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
271 |                 </div>
272 |                 <div>
273 |                     <img src="https://bit.ly/3uBalH4" alt="return_policy">
274 |                     <p><span>Return within 30days</span> of receiving your order</p>
275 |                 </div>
276 |             </div>
277 |         </section>
278 | 
279 |         <section id="section_2">
280 |             <h4>popular searches</h4>
281 |             <div></div>
282 |         </section>
283 | 
284 |         <section id="section_3">
285 |             <a href="">pillow</a><a href="">towels</a><a href="">bathroom rugs</a><a href="">Water Bottle</a><a href="">jeans</a><a href="">suit</a><a href="">trouser</a><a href="">shalwar</a><a href="">shampoo</a><a href="">sherwani</a><a href="">cargo</a>
286 |             <a href="">shirt</a><a href="">mirrors</a><a href="">shelwar</a><a href="">Bracelets</a><a href="">sherwani</a><a href="">laundary bags</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">rings</a><a href="">Water Bottle</a>
287 |             <a href="">Water Bottle</a>
288 |             <a href="">curtians</a><a href="">tableware</a><a href="">blazzers</a><a href="">wall lamps</a><a href="">Water Bottle</a><a href="">bed cover</a><a href="">cushion covers</a><a href="">key holders</a>
289 |         </section>
290 | 
291 |         <section id="section_4">
292 |             <p>In case of any concern <a href="#"> contact us</a></p>
293 |             <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
294 |         </section>
295 | 
296 |     </footer>
297 | 
298 | </body>
299 | 
300 | </html>
301 | 
302 | 
303 | <script src="mens.js"></script>
304 | <script src="../Common Files/headerMenu.js"></script>
305 | <script src="../Common Files/hyperlinks.js"></script>


--------------------------------------------------------------------------------
/womensdata/women.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Women Products</title>
  9 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
 10 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 11 |     <link rel="stylesheet" href="../womensdata/style&js/womestyle.css">
 12 |     <link rel="stylesheet" href="../Common Files/style.css">
 13 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 14 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 15 | 
 16 | </head>
 17 | 
 18 | <body>
 19 |     <header>
 20 |         <div id="logo">
 21 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="" id="land">
 22 |         </div>
 23 |         <ul id="nav_bar">
 24 |             <li><a href="../Homepages/menHomePage.html">men</a></li>
 25 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 26 |             <li><a href="#">kids</a></li>
 27 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 28 |             <li><a href="#">beauty</a></li>
 29 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 30 |         </ul>
 31 |         <div id="search">
 32 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 33 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 34 |         </div>
 35 |         <div id="right_icon">
 36 |             <div id="reggDropdown">
 37 |                 <div id="drop">
 38 |                     <a href="../Profile/profile.html" class="dropList">login</a>
 39 |                     <a href="../Profile/signup.html" class="dropList">sign up</a>
 40 |                 </div>
 41 |                 <i class="fa-regular fa-user"></i>
 42 |                 <span>profile</span>
 43 |             </div>
 44 |             <div>
 45 |                 <i class="fa-regular fa-heart fa_wishlist"></i>
 46 |                 <span>wishlist</span>
 47 |             </div>
 48 |             <div>
 49 |                 <i class="fa-solid fa-bag-shopping"></i>
 50 |                 <span>bag</span>
 51 |             </div>
 52 |         </div>
 53 | 
 54 |         <div id="toggle">
 55 |             <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 56 |             <div id="myDropdown" class="dropdown-content">
 57 |                 <div class="top">
 58 |                     <a href="../Homepages/menHomePage.html">men</a>
 59 |                     <a href="../Homepages/womenHomePage.html">women</a>
 60 |                     <a href="#">kids</a>
 61 |                     <a href="../Homepages/homeLiving.html">home & living</a>
 62 |                     <a href="#">beauty</a>
 63 |                     <a href="#">studio</a>
 64 |                 </div>
 65 |                 <div class="bottom">
 66 |                     <i class="fa-regular fa-user fa_user" id="profile"></i>
 67 |                     <i class="fa-regular fa-heart fa_wishlist"></i>
 68 |                     <i class="fa-solid fa-bag-shopping fa_cart"></i>
 69 |                 </div>
 70 |             </div>
 71 |         </div>
 72 |     </header>
 73 | 
 74 |     <div id="sorting">
 75 | 
 76 |         <select class="filter" id="brandFilter">
 77 |             <option id="normal" value="all">FILTER BY BRAND</option>
 78 |             <option value="Anouk">Anouk</option>
 79 |             <option value="Juniper">Juniper</option>
 80 |             <option value="Chevron">Chevron</option>
 81 |             <option value="MFB">MFB</option>
 82 |             <option value="Nayo">Nayo</option>
 83 |             <option value="Arrabi">Arrabi</option>
 84 |             <option value="Yash gallery">Yash gallery</option>
 85 |             <option value="Sngria">Sngria</option>
 86 |             <option value="Yoke">Yoke</option>
 87 |            
 88 |           </select>
 89 | 
 90 |         <select class="filter" id="priceSort">
 91 |             <option value="---">SORT BY PRICE</option>
 92 |             <option value="lth">Low → High</option>
 93 |             <option value="htl">High → Low</option>
 94 |           </select>
 95 | 
 96 |         <select class="filter" id="nameSort">
 97 |             <option value="---">SORT BY NAME</option>
 98 |             <option value="asc">Ascending</option>
 99 |             <option value="dsc">Descending</option>
100 |           </select>
101 | 
102 |     </div>
103 | 
104 | 
105 |     <div id="wrapper">
106 |         <div id="filter">
107 |             <div class="a">
108 |                 <h3>FILTERS </h3>
109 |                 <div>
110 |                     <input type="checkbox" id="rb" name="group">
111 |                     <label for="rb">Men</label><br>
112 |                     <input type="checkbox" id="rb" name="group">
113 |                     <label for="rb">Women</label><br>
114 |                     <input type="checkbox" id="rb" name="group">
115 |                     <label for="checkbox">Boys</label><br>
116 |                     <input type="checkbox" id="rb" name="group">
117 |                     <label for="checkbox">Girls</label>
118 |                 </div>
119 | 
120 |             </div>
121 |             <div class="b">
122 |                 <h3>CATEGORIES</h3>
123 |                 <div>
124 |                     <input type="checkbox" id="cb" name="group">
125 |                     <label for="cb">Plazzos</label><br>
126 |                     <input type="checkbox" id="cb" name="group">
127 |                     <label for="cb">Lehnga</label><br>
128 |                     <input type="checkbox" id="cb" name="group">
129 |                     <label for="cb">Sarees</label><br>
130 |                     <input type="checkbox" id="cb" name="group">
131 |                     <label for="cb">Bracelet</label><br>
132 |                     <input type="checkbox" id="cb" name="group">
133 |                     <label for="cb">Purse</label><br>
134 |                     <input type="checkbox" id="cb" name="group">
135 |                     <label for="cb">Kurtas</label><br>
136 |                     <input type="checkbox" id="cb" name="group">
137 |                     <label for="cb">Skirts</label><br>
138 |                     <input type="checkbox" id="cb" name="group">
139 |                     <label for="cb">cluthces</label>
140 |                 </div>
141 | 
142 |             </div>
143 |             <div class="b">
144 |                 <h3>BRAND</h3>
145 |                 <div>
146 |                     <input type="checkbox" id="cb" name="group">
147 |                     <label for="cb">Anouk</label><br>
148 |                     <input type="checkbox" id="cb" name="group">
149 |                     <label for="cb">Juniper</label><br>
150 |                     <input type="checkbox" id="cb" name="group">
151 |                     <label for="cb">Chevron</label><br>
152 |                     <input type="checkbox" id="cb" name="group">
153 |                     <label for="cb">MFB</label><br>
154 |                     <input type="checkbox" id="cb" name="group">
155 |                     <label for="cb">Nayo</label><br>
156 |                     <input type="checkbox" id="cb" name="group">
157 |                     <label for="cb">Yash gallery</label><br>
158 |                     <input type="checkbox" id="cb" name="group">
159 |                     <label for="cb">Sngria</label><br>
160 |                     <input type="checkbox" id="cb" name="group">
161 |                     <label for="cb">Yoke</label>
162 |                 </div>
163 | 
164 |             </div>
165 |             <div class="b">
166 |                 <h3>PRICE</h3>
167 |                 <div>
168 |                     <input type="checkbox" id="cb" name="group">
169 |                     <label for="cb">Rs. 50 to Rs. 22838</label><br>
170 |                     <input type="checkbox" id="cb" name="group">
171 |                     <label for="cb">Rs. 22838 to Rs. 45626</label><br>
172 |                     <input type="checkbox" id="cb" name="group">
173 |                     <label for="cb">Rs. 45626 to Rs. 68414</label><br>
174 |                     <input type="checkbox" id="cb" name="group">
175 |                     <label for="cb">Rs. 68414 to Rs. 91202</label><br>
176 |                 </div>
177 | 
178 |             </div>
179 |             <div class="b">
180 |                 <h3>COLOR</h3>
181 |                 <div>
182 |                     <input type="checkbox" id="cb" name="group">
183 |                     <label for="cb">Blue</label><br>
184 |                     <input type="checkbox" id="cb" name="group">
185 |                     <label for="cb">White</label><br>
186 |                     <input type="checkbox" id="cb" name="group">
187 |                     <label for="cb">Brown</label><br>
188 |                     <input type="checkbox" id="cb" name="group">
189 |                     <label for="cb">Multi</label><br>
190 |                     <input type="checkbox" id="cb" name="group">
191 |                     <label for="cb">Black</label><br>
192 |                     <input type="checkbox" id="cb" name="group">
193 |                     <label for="cb">Gray</label><br>
194 |                     <input type="checkbox" id="cb" name="group">
195 |                     <label for="cb">Green</label><br>
196 |                 </div>
197 | 
198 |             </div>
199 |             <div class="c">
200 |                 <h3>DISCOUNT RANGE</h3>
201 |                 <div>
202 |                     <input type="radio" id="rb" name="group">
203 |                     <label for="rb">10% and above</label><br>
204 |                     <input type="radio" id="rb" name="group">
205 |                     <label for="rb">20% and above</label><br>
206 |                     <input type="radio" id="rb" name="group">
207 |                     <label for="rb">30% and aboves</label><br>
208 |                     <input type="radio" id="rb" name="group">
209 |                     <label for="rb">40% and above</label><br>
210 |                     <input type="radio" id="rb" name="group">
211 |                     <label for="rb">50% and above</label><br>
212 |                     <input type="radio" id="rb" name="group">
213 |                     <label for="rb">60% and above</label><br>
214 |                     <input type="radio" id="rb" name="group">
215 |                     <label for="rb">70% and above</label><br>
216 |                     <input type="radio" id="rb" name="group">
217 |                     <label for="rb">80% and above</label><br>
218 |                 </div>
219 | 
220 |             </div>
221 |         </div>
222 | 
223 |         <div id="container"></div>
224 |     </div>
225 | 
226 |     <footer>
227 |         <section id="section_1">
228 |             <div id="left">
229 |                 <div>
230 |                     <h4>online shopping</h4>
231 |                     <p>men</p>
232 |                     <p>women</p>
233 |                     <p>home & living</p>
234 |                     <p>beauty</p>
235 |                     <p>gift cards</p>
236 |                     <p>myntra insider<span id="latest">New</span></p>
237 |                 </div>
238 |                 <div>
239 |                     <h4>useful links</h4>
240 |                     <p>men</p>
241 |                     <p>faq</p>
242 |                     <p>t&c</p>
243 |                     <p>terms of use</p>
244 |                     <p>track order</p>
245 |                     <p>shipping</p>
246 |                     <p>cancellation</p>
247 |                     <p>returns</p>
248 |                     <p>whitehat</p>
249 |                     <p>blog</p>
250 |                     <p>careers</p>
251 |                     <p>privacy policy</p>
252 |                     <p>site map</p>
253 |                     <p>corporate information</p>
254 |                 </div>
255 |                 <div>
256 |                     <h4>experience myntra app on mobile</h4>
257 |                     <img src="https://bit.ly/3LluZ4L" alt="android">
258 |                     <img src="https://bit.ly/3DmWQys" alt="ios">
259 |                     <h4 id="social_connect">keep in touch</h4>
260 |                     <div>
261 |                         <i class="fa-brands fa-facebook-square"></i>
262 |                         <i class="fa-brands fa-twitter-square"></i>
263 |                         <i class="fa-brands fa-youtube"></i>
264 |                         <i class="fa-brands fa-instagram"></i>
265 |                     </div>
266 |                 </div>
267 |             </div>
268 |             <div id="right">
269 |                 <div>
270 |                     <img src="https://bit.ly/3JPiL47" alt="original">
271 |                     <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
272 |                 </div>
273 |                 <div>
274 |                     <img src="https://bit.ly/3uBalH4" alt="return_policy">
275 |                     <p><span>Return within 30days</span> of receiving your order</p>
276 |                 </div>
277 |             </div>
278 |         </section>
279 |         <section id="section_2">
280 |             <h4>popular searches</h4>
281 |             <div></div>
282 |         </section>
283 |         <section id="section_3">
284 |             <a href="">Adidas</a><a href="">Arrow</a><a href="">Fila</a><a href="">Online Shopping</a><a href="">pepe jeans</a><a href="">Puma</a><a href="">United colours of benneton</a><a href="">Fastrack</a><a href="">Shorts</a><a href="">Being Human</a>
285 |             <a href="">Skirts</a>
286 |             <a href="">Woodland</a><a href="">Supra</a><a href="">Dresses</a><a href="">Clothing</a><a href="">Jewellery</a><a href="">T Shirts</a><a href="">Shoes</a><a href="">Bags</a><a href="">Watches</a><a href="">Caps</a><a href="">sherwani</a>
287 |             <a href="">Shirts</a><a href="">sherwani</a><a href="">Flip Flops</a><a href="">Kurtas</a><a href="">Skechers</a><a href="">Saree</a><a href="">shalwar</a><a href="">wranglesr Watches</a>
288 |         </section>
289 |         <section id="section_4">
290 |             <p>In case of any concern <a href="#"> contact us</a></p>
291 |             <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
292 |         </section>
293 |     </footer>
294 | 
295 | </body>
296 | 
297 | </html>
298 | <script src="../womensdata/style&js/womens.js"></script>
299 | <script src="../Common Files/headerMenu.js"></script>
300 | <script src="../Common Files/hyperlinks.js"></script>


--------------------------------------------------------------------------------
/Home Living Products/home_furnishing.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 
  8 |     <title>Home Decor - Buy Home Furnishing &amp; Accessories Online - Myntra</title>
  9 | 
 10 |     <title>Home and Living - Buy Interior Decoration Products and Accessories Online in India</title>
 11 | 
 12 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
 13 |     <link rel="stylesheet" href="home_furnishing.css" />
 14 |     <link rel="stylesheet" href="../Common Files/style.css">
 15 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 16 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 17 | 
 18 | </head>
 19 | 
 20 | <body>
 21 |   
 22 |     <header>
 23 |         <div id="logo">
 24 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 25 |         </div>
 26 |         <ul id="nav_bar">
 27 |             <li><a href="../Homepages/menHomePage.html">men</a></li>
 28 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 29 |             <li><a href="#">kids</a></li>
 30 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 31 |             <li><a href="#">beauty</a></li>
 32 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 33 |         </ul> 
 34 |         <div id="search">
 35 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 36 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 37 |         </div>
 38 |         <div id="right_icon">
 39 |               <div id="reggDropdown">
 40 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 41 |               <div id="drop">
 42 |                   <a href="../Profile/profile.html" class="dropList">login</a>
 43 |                   <a href="../Profile/signup.html" class="dropList">sign up</a>
 44 |               </div>
 45 | 
 46 |               <i class="fa-regular fa-user"></i>
 47 |               <span>profile</span>
 48 |           </div>
 49 |             <div>
 50 |                 <i class="fa-regular fa-heart"></i>
 51 |                 <span>wishlist</span>
 52 |             </div>
 53 |             <div>
 54 |                 <i class="fa-solid fa-bag-shopping"></i>
 55 |                 <span>bag</span>
 56 |             </div>
 57 |         </div>
 58 | 
 59 |                 <!-- TOGGLE MENU -->
 60 |                 <div id="toggle">
 61 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 62 |                     <div id="myDropdown" class="dropdown-content">
 63 |                         <div class="top">
 64 |                             <a href="../Homepages/menHomePage.html">men</a>
 65 |                             <a href="../Homepages/womenHomePage.html">women</a>
 66 |                             <a href="#">kids</a>
 67 |                             <a href="../Homepages/homeLiving.html">home & living</a>
 68 |                             <a href="#">beauty</a>
 69 |                             <a href="#">studio</a>
 70 |                         </div> 
 71 |                         <div class="bottom">
 72 |                             <i class="fa-regular fa-user" id="profile"></i>
 73 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 74 |                             <i class="fa-solid fa-bag-shopping"></i>
 75 |                         </div>              
 76 |                     </div>
 77 |                 </div>
 78 | 
 79 |     </header>
 80 | 
 81 |     <div id="sorting">
 82 |         
 83 |         <select class="filter" id="brandFilter">
 84 |             <option id="normal" value="all">FILTER BY BRAND</option>
 85 |             <option value="DREAM WEAVERZ">DREAM WEAVERZ</option>
 86 |             <option value="KLOTTHE">KLOTTHE</option>
 87 |             <option value="SEJ By Nisha Gupta">SEJ By Nisha Gupta</option>
 88 |             <option value="JAIPUR FABRIC">JAIPUR FABRIC</option>
 89 |             <option value="PUMA">PUMA</option>
 90 |             <option value="Arrabi">Arrabi</option>
 91 |             <option value="Home Ecstasy">Home Ecstasy</option>
 92 |             <option value="ELEVANTO">ELEVANTO</option>
 93 |             <option value="LA VERNE">LA VERN</option>
 94 |             <option value="FLORIDA">FLORIDA</option>
 95 |             <option value="Dreamscape">Dreamscape</option>
 96 |             <option value="Trident">Trident</option>
 97 |           </select>
 98 | 
 99 |           <select class="filter" id="priceSort">
100 |             <option value="---">SORT BY PRICE</option>
101 |             <option value="lth">Low → High</option>
102 |             <option value="htl">High → Low</option>
103 |           </select>
104 | 
105 |           <select class="filter" id="nameSort">
106 |             <option value="---">SORT BY NAME</option>
107 |             <option value="asc">Ascending</option>
108 |             <option value="dsc">Descending</option>
109 |           </select>
110 |        
111 |     </div>
112 | 
113 |     <div id="wrapper">
114 |          <div id="filter">
115 |              <div class="a">
116 |                     <h3>FILTERS </h3>
117 |                     <div>
118 |                         <input type="radio" id="rb" name="group">
119 |                         <label for="sagar">Men</label><br>
120 |                         <input type="radio" id="rb" name="group">
121 |                         <label for="rb">Women</label><br>
122 |                         <input type="radio" id="rb" name="group">
123 |                         <label for="rb">Boys</label><br>
124 |                         <input type="radio" id="rb" name="group">
125 |                         <label for="rb">Girls</label>
126 |                     </div>
127 |                     
128 |                 </div>
129 |                 <div class="b">
130 |                     <h3>CATEGORIES</h3>
131 |                     <div>
132 |                         <input type="checkbox" id="cb" name="group">
133 |                         <label for="cb">Bedsheets</label><br>
134 |                         <input type="checkbox" id="cb" name="group">
135 |                         <label for="cb">Cushion Covers</label><br>
136 |                         <input type="checkbox" id="cb" name="group">
137 |                         <label for="cb">Curtain and Sheers</label><br>
138 |                         <input type="checkbox" id="cb" name="group">
139 |                         <label for="cb">Wall Art</label><br>
140 |                         <input type="checkbox" id="cb" name="group">
141 |                         <label for="cb">Blankets Quits and Dohars</label><br>
142 |                         <input type="checkbox" id="cb" name="group">
143 |                         <label for="cb">Clocks</label><br>
144 |                         <input type="checkbox" id="cb" name="group">
145 |                         <label for="cb">Orgaisers</label><br>
146 |                         <input type="checkbox" id="cb" name="group">
147 |                         <label for="cb">bath Towels</label>
148 |                     </div>
149 |                   
150 |                 </div>
151 |                 <div class="b">
152 |                         <h3>BRAND</h3>
153 |                         <div>         
154 |                             <input type="checkbox" id="sagar" name="group">
155 |                             <label for="cb">KLOTTHE</label><br>
156 |                             <input type="checkbox" id="cb" name="group">
157 |                             <label for="cb">Story@home</label><br>
158 |                             <input type="checkbox" id="cb" name="group">
159 |                             <label for="cb">Arrabi</label><br>
160 |                             <input type="checkbox" id="cb" name="group">
161 |                             <label for="cb">Cortina</label><br>
162 |                             <input type="checkbox" id="cb" name="group">
163 |                             <label for="cb">BIANCA</label><br>
164 |                             <input type="checkbox" id="cb" name="group">
165 |                             <label for="cb">Home Center</label><br>
166 |                             <input type="checkbox" id="cb" name="group">
167 |                             <label for="cb">ROMME</label><br>
168 |                             <input type="checkbox" id="cb" name="group">
169 |                             <label for="cb">Kuber Industries</label>
170 |                         </div>
171 |                        
172 |                     </div>
173 |                     <div class="b">
174 |                         <h3>PRICE</h3>
175 |                         <div>
176 |                             <input type="checkbox" id="cb" name="group">
177 |                             <label for="cb">Rs. 50 to Rs. 22838</label><br>
178 |                             <input type="checkbox" id="cb" name="group">
179 |                             <label for="cb">Rs. 22838 to Rs. 45626</label><br>
180 |                             <input type="checkbox" id="cb" name="group">
181 |                             <label for="cb">Rs. 45626 to Rs. 68414</label><br>
182 |                             <input type="checkbox" id="cb" name="group">
183 |                             <label for="cb">Rs. 68414 to Rs. 91202</label><br>
184 |                         </div>
185 |                        
186 |                     </div>
187 |                     <div class="b">
188 |                         <h3>COLOR</h3>
189 |                         <div>
190 |                             <input type="checkbox" id="cb" name="group">
191 |                             <label for="cb">Blue</label><br>
192 |                             <input type="checkbox" id="cb" name="group">
193 |                             <label for="cb">White</label><br>
194 |                             <input type="checkbox" id="cb" name="group">
195 |                             <label for="cb">Brown</label><br>
196 |                             <input type="checkbox" id="cb" name="group">
197 |                             <label for="cb">Multi</label><br>
198 |                             <input type="checkbox" id="cb" name="group">
199 |                             <label for="cb">Black</label><br>
200 |                             <input type="checkbox" id="cb" name="group">
201 |                             <label for="cb">Gray</label><br>
202 |                             <input type="checkbox" id="cb" name="group">
203 |                             <label for="cb">Green</label><br>
204 |                         </div>
205 |                         
206 |                     </div>
207 |                     <div class="c">
208 |                         <h3>DISCOUNT RANGE</h3>
209 |                         <div>
210 |                             <input type="radio" id="rb" name="group">
211 |                             <label for="rb">10% and above</label><br>
212 |                             <input type="radio" id="rb" name="group">
213 |                             <label for="rb">20% and above</label><br>
214 |                             <input type="radio" id="rb" name="group">
215 |                             <label for="rb">30% and aboves</label><br>
216 |                             <input type="radio" id="rb" name="group">
217 |                             <label for="rb">40% and above</label><br>
218 |                             <input type="radio" id="rb" name="group">
219 |                             <label for="rb">50% and above</label><br>
220 |                             <input type="radio" id="rb" name="group">
221 |                             <label for="rb">60% and above</label><br>
222 |                             <input type="radio" id="rb" name="group">
223 |                             <label for="rb">70% and above</label><br>
224 |                             <input type="radio" id="rb" name="group">
225 |                             <label for="rb">80% and above</label><br>
226 |                         </div>
227 |                         
228 |                     </div>
229 |                 </div>  
230 |                 
231 |             <div id="container"></div>
232 |         </div>       
233 |         
234 |          <footer>
235 |             <section id="section_1">
236 |                 <div id="left">
237 |                     <div>
238 |                         <h4>online shopping</h4>
239 |                         <p>men</p>
240 |                         <p>women</p>
241 |                         <p>home & living</p>
242 |                         <p>beauty</p>
243 |                         <p>gift cards</p>
244 |                         <p>myntra insider<span id="latest">New</span></p>
245 |                     </div>
246 |                     <div>
247 |                     <h4>useful links</h4>
248 |                     <p>men</p>
249 |                     <p>faq</p>
250 |                     <p>t&c</p>
251 |                     <p>terms of use</p>
252 |                     <p>track order</p>
253 |                     <p>shipping</p>
254 |                     <p>cancellation</p>
255 |                     <p>returns</p>
256 |                     <p>whitehat</p>
257 |                     <p>blog</p>
258 |                     <p>careers</p>
259 |                     <p>privacy policy</p>
260 |                     <p>site map</p>
261 |                     <p>corporate information</p>
262 |                     </div>
263 |                     <div>
264 |                         <h4>experience myntra app on mobile</h4>
265 |                         <img src="https://bit.ly/3LluZ4L" alt="android">
266 |                         <img src="https://bit.ly/3DmWQys" alt="ios">
267 |                         <h4 id="social_connect">keep in touch</h4>
268 |                         <div>
269 |                             <i class="fa-brands fa-facebook-square"></i>
270 |                             <i class="fa-brands fa-twitter-square"></i>
271 |                             <i class="fa-brands fa-youtube"></i>
272 |                             <i class="fa-brands fa-instagram"></i>
273 |                         </div>
274 |                     </div>
275 |                 </div>
276 |                 <div id="right">
277 |                     <div>
278 |                         <img src="https://bit.ly/3JPiL47" alt="original">
279 |                         <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
280 |                     </div>
281 |                     <div>
282 |                         <img src="https://bit.ly/3uBalH4" alt="return_policy">
283 |                         <p><span>Return within 30days</span> of receiving your order</p>
284 |                     </div>
285 |                 </div>
286 |             </section>
287 | 
288 |             <section id="section_2">
289 |                 <h4>popular searches</h4>
290 |                 <div></div> 
291 |             </section>
292 | 
293 |             <section id="section_3">
294 |             <a href="">pillow</a><a href="">towels</a><a href="">bathroom rugs</a><a href="">Water Bottle</a><a href="">jeans</a><a href="">suit</a><a href="">trouser</a><a href="">shalwar</a><a href="">shampoo</a><a href="">sherwani</a><a href="">cargo</a><a href="">shirt</a><a href="">mirrors</a><a href="">shelwar</a><a href="">Bracelets</a><a href="">sherwani</a><a href="">laundary bags</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">rings</a><a href="">Water Bottle</a><a href="">Water Bottle</a><a href="">curtians</a><a href="">tableware</a><a href="">blazzers</a><a href="">wall lamps</a><a href="">Water Bottle</a><a href="">bed cover</a><a href="">cushion covers</a><a href="">key holders</a>
295 |             </section>
296 | 
297 |             <section id="section_4">
298 |                 <p>In case of any concern <a href="#"> contact us</a></p>
299 |                 <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
300 |             </section>
301 |             
302 |        </footer>
303 | 
304 | </body>
305 | 
306 | <script src="home_furnishing.js"></script>
307 | <script src="../Common Files/headerMenu.js"></script>
308 | <script src="../Common Files/hyperlinks.js"></script>
309 | 
310 | 
311 | 
312 | </html>
313 | 
314 | <script>
315 | 
316 | </script>


--------------------------------------------------------------------------------
/Homepages/menHomePage.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Men Shopping Online - Shop for Mens Clothing & Accessories in India | Myntra</title>
  8 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
  9 |     <link rel="stylesheet" href="../Common Files/style.css">
 10 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 11 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 12 | </head>
 13 | <body>
 14 |    
 15 |     <!-- MENU BAR -->
 16 |     <header>
 17 |         <div id="logo">
 18 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLoog" id="landingPage">
 19 |         </div>
 20 |         <ul id="nav_bar">
 21 |             <li><a href="./menHomePage.html">men</a></li>
 22 |             <li><a href="./womenHomePage.html">women</a></li>
 23 |             <li><a href="#">kids</a></li>
 24 |             <li><a href="./homeLiving.html">home & living</a></li>
 25 |             <li><a href="#">beauty</a></li>
 26 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 27 |         </ul> 
 28 |         <div id="search">
 29 |             <input type="text" id="search_bar" placeholder="Search for products, brands">
 30 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 31 |         </div>
 32 |         <div id="right_icon">
 33 |             <div id="reggDropdown">
 34 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 35 |               <div id="drop">
 36 |                   <a href="../Profile/profile.html" class="dropList">login</a>
 37 |                   <a href="../Profile/signup.html" class="dropList">sign up</a>
 38 |               </div>
 39 | 
 40 |               <i class="fa-regular fa-user"></i>
 41 |               <span>profile</span>
 42 |           </div>
 43 |             <div>
 44 |                 <i class="fa-regular fa-heart"></i>
 45 |                 <span>wishlist</span>
 46 |             </div>
 47 |             <div>
 48 |                 <i class="fa-solid fa-bag-shopping"></i>
 49 |                 <span>bag</span>
 50 |             </div>
 51 |         </div>
 52 | 
 53 |         <!-- TOGGLE MENU -->
 54 |         <div id="toggle">
 55 |             <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 56 |             <div id="myDropdown" class="dropdown-content">
 57 |                 <div class="top">
 58 |                     <a href="menHomePage.html">men</a>
 59 |                     <a href="womenHomePage.html">women</a>
 60 |                     <a href="#">kids</a>
 61 |                     <a href="homeLiving.html">home & living</a>
 62 |                     <a href="#">beauty</a>
 63 |                     <a href="#">studio</a>
 64 |                 </div>   
 65 |                 <div class="bottom">
 66 |                     <i class="fa-regular fa-user fa_user" id="profile"></i>
 67 |                     <i class="fa-regular fa-heart fa_wishlist"></i>
 68 |                     <i class="fa-solid fa-bag-shopping fa_cart"></i>
 69 |                 </div>           
 70 |             </div>
 71 |         </div>
 72 |     </header>
 73 |  
 74 | 
 75 |     <!-- COROUSEL SECTION -->
 76 |     <div class="slider">
 77 |         <div id="slides">
 78 |           <!--radio buttons start-->
 79 |           <input type="radio" name="radio-btn" id="radio1">
 80 |           <input type="radio" name="radio-btn" id="radio2">
 81 |           <input type="radio" name="radio-btn" id="radio3">
 82 |           <input type="radio" name="radio-btn" id="radio4">
 83 | 
 84 |           <!--slide images start-->
 85 |           <!-- created using js -->
 86 | 
 87 |         </div>
 88 | 
 89 |         <!--manual navigation start-->
 90 |         <div class="navigation-manual">
 91 |           <label for="radio1" class="manual-btn"></label>
 92 |           <label for="radio2" class="manual-btn"></label>
 93 |           <label for="radio3" class="manual-btn"></label>
 94 |           <label for="radio4" class="manual-btn"></label>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <!-- TOP BRANDS DISPLAY 1 HEADING -->
100 |       <h1 class="brand_heading">biggest deals on top brands</h1>
101 |       <div id="topBrand_1" class="container">
102 |           <div><img src="https://bit.ly/3JRzkMK" alt="brand1"></div>
103 |           <div><img src="https://bit.ly/3IMN36c" alt="brand2"></div>
104 |           <div><img src="https://bit.ly/370ZT3C" alt="brand3"></div>
105 |           <div><img src="https://bit.ly/3NsYyDb" alt="brand4"></div>
106 |           <div class="forMob"><img src="https://bit.ly/3wM9hTp" alt="brand5"></div>
107 |           <div class="forMob"><img src="https://bit.ly/3JNVFe3" alt="brand6"></div>
108 |           <div class="forWeb"><img src="https://bit.ly/3Dkomg5" alt="brand7"></div>
109 |           <div class="forWeb"><img src="https://bit.ly/36HmamW" alt="brand8"></div>
110 |       </div>
111 | 
112 | 
113 |        <!-- TOP CATEGORIES SECTION -->
114 |        <h1 class="brand_heading">categories to bag</h1>
115 |        <div id="categoryBag" class="container"></div>
116 | 
117 | 
118 |        <!-- TOP BRAND DISPLAY 2 HEADING -->
119 |        <h1 class="brand_heading">explore top brands</h1>
120 |        <div id="explore_more" class="display container"></div>
121 | 
122 | 
123 |        <!-- TOP BRAND DISPLAY 3 HEADING -->
124 |        <h1 class="brand_heading forWeb">myntra luxe</h1>
125 |        <div class="display container">
126 |            <div><img src="https://bit.ly/3NxSRUs" alt="luxe1"></div>
127 |            <div><img src="https://bit.ly/36DkXwX" alt="luxe2"></div>
128 |            <div><img src="https://bit.ly/3Diiowi" alt="luxe3"></div>
129 |            <div><img src="https://bit.ly/3Nu4j3y" alt="luxe4"></div>
130 |            <div><img src="https://bit.ly/3DkgEm6" alt="luxe5"></div>
131 |            <div><img src="https://bit.ly/3NG3TY6" alt="luxe6"></div>
132 |        </div>
133 | 
134 | 
135 |          <!-- CATEGORIES DISPLAY 2 -->
136 |          <h1 class="brand_heading forWeb">trending in indian wear</h1>
137 |          <div class="container builder forWeb">
138 |             <div><img src="https://bit.ly/3uB3jlE" alt="category1"></div>
139 |             <div><img src="https://bit.ly/3Dmujct" alt="category2"></div>
140 |             <div><img src="https://bit.ly/3uELKRA" alt="category3"></div>
141 |             <div><img src="https://bit.ly/3JS3pvv" alt="category4"></div>
142 |             <div><img src="https://bit.ly/3tMDnEk" alt="category5"></div>
143 |          </div>
144 | 
145 | 
146 |           <!-- CATEGORIES DISPLAY 3 -->
147 |           <h1 class="brand_heading">trending in sports wear</h1>
148 |           <div class="container builder">
149 |              <div><img src="https://bit.ly/3qLHGOe" alt="category1"></div>
150 |              <div><img src="https://bit.ly/3ux7UVU" alt="category2"></div>
151 |              <div><img src="https://bit.ly/3Losbnr" alt="category3"></div>
152 |              <div class="forWeb"><img src="https://bit.ly/35l3SaH" alt="category4"></div>
153 |              <div class="forWeb"><img src="https://bit.ly/3qL0DAB" alt="category5"></div>
154 |           </div>
155 | 
156 | 
157 |           <!-- CATEGORIES DISPLAY 4 -->
158 |           <h1 class="brand_heading">trending in footwear</h1>
159 |           <div class="container builder">
160 |              <div><img src="https://bit.ly/3iHXRI4" alt="category1"></div>
161 |              <div><img src="https://bit.ly/3JRJPj8" alt="category2"></div>
162 |              <div><img src="https://bit.ly/3DkZQvq" alt="category3"></div>
163 |              <div class="forWeb"><img src="https://bit.ly/3DzgXdf" alt="category4"></div>
164 |              <div class="forWeb"><img src="https://bit.ly/36G5TPb" alt="category5"></div>
165 |           </div>
166 | 
167 | 
168 |           <!-- CATEGORIES DISPLAY 5 -->
169 |           <h1 class="brand_heading forWeb">trending in accessories</h1>
170 |           <div class="container builder forWeb">
171 |              <div><img src="https://bit.ly/3Nt9VLn" alt="category1"></div>
172 |              <div><img src="https://bit.ly/36Aqt3q" alt="category2"></div>
173 |              <div><img src="https://bit.ly/3IMY4o4" alt="category3"></div>
174 |              <div><img src="https://bit.ly/3wIag7b" alt="category4"></div>
175 |              <div><img src="https://bit.ly/3uAK8Iv" alt="category5"></div>
176 |           </div>
177 | 
178 | 
179 |           <!-- FOOTER SECTION -->
180 |           <footer>
181 |               <section id="section_1">
182 |                   <div id="left">
183 |                       <div>
184 |                           <h4>online shopping</h4>
185 |                           <p>men</p>
186 |                           <p>women</p>
187 |                           <p>home & living</p>
188 |                           <p>beauty</p>
189 |                           <p>gift cards</p>
190 |                           <p>myntra insider<span id="latest">New</span></p>
191 |                       </div>
192 |                       <div>
193 |                         <h4>useful links</h4>
194 |                         <p>men</p>
195 |                         <p>faq</p>
196 |                         <p>t&c</p>
197 |                         <p>terms of use</p>
198 |                         <p>track order</p>
199 |                         <p>shipping</p>
200 |                         <p>cancellation</p>
201 |                         <p>returns</p>
202 |                         <p>whitehat</p>
203 |                         <p>blog</p>
204 |                         <p>careers</p>
205 |                         <p>privacy policy</p>
206 |                         <p>site map</p>
207 |                         <p>corporate information</p>
208 |                       </div>
209 |                       <div>
210 |                           <h4>experience myntra app on mobile</h4>
211 |                           <img src="https://bit.ly/3LluZ4L" alt="android">
212 |                           <img src="https://bit.ly/3DmWQys" alt="ios">
213 |                           <h4 id="social_connect">keep in touch</h4>
214 |                           <div>
215 |                             <i class="fa-brands fa-facebook-square"></i>
216 |                             <i class="fa-brands fa-twitter-square"></i>
217 |                             <i class="fa-brands fa-youtube"></i>
218 |                             <i class="fa-brands fa-instagram"></i>
219 |                           </div>
220 |                       </div>
221 |                   </div>
222 |                   <div id="right">
223 |                       <div>
224 |                           <img src="https://bit.ly/3JPiL47" alt="original">
225 |                           <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
226 |                       </div>
227 |                       <div>
228 |                           <img src="https://bit.ly/3uBalH4" alt="return_policy">
229 |                           <p><span>Return within 30days</span> of receiving your order</p>
230 |                       </div>
231 |                   </div>
232 |               </section>
233 |               <section id="section_2">
234 |                   <h4>popular searches</h4>
235 |                   <div></div>
236 |               </section>
237 |               <section id="section_3">
238 |                 <a href="">sherwani</a><a href="">track pants</a><a href="">blazzers</a><a href="">sweater</a><a href="">jeans</a><a href="">suit</a><a href="">trouser</a><a href="">shalwar</a><a href="">bracelets</a><a href="">sherwani</a><a href="">cargo</a><a href="">shirt</a><a href="">sherwani</a><a href="">shelwar</a><a href="">Bracelets</a><a href="">sherwani</a><a href="">blazzers</a><a href="">sherwani</a><a href="">bracelets</a><a href="">rings</a><a href="">blazzers</a><a href="">sherwani</a><a href="">sherwani</a><a href="">sherwani</a><a href="">blazzers</a><a href="">blazzers</a><a href="">blazzers</a><a href="">shelwar</a><a href="">shalwar</a><a href="">jeans</a>
239 |               </section>
240 |               <section id="section_4">
241 |                   <p>In case of any concern <a href="#"> contact us</a></p>
242 |                   <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
243 |               </section>
244 |               <hr>
245 |              <section id="section_5">
246 |                  <h4>men's shopping at myntra: a superior experience</h4>
247 |                  <p>Myntra is one of the best sites when it comes to online shopping for men. The finest of material, superior design and unbeatable style go into the making of our men’s shopping collection. Our range of online shopping men’s wear, accessories, footwear and personal care products are second to none. Compared with other men’s shopping sites, Myntra brings you the best price products which won’t hurt your pocket. With seasonal discounts on trendy casual wear, suits, blazers, sneakers and more, online shopping for men at Myntra just gets even more irresistible!
248 |                 </p>
249 |              </section>
250 |              <section id="section_6">
251 |                  <h4>online shopping for men: options unlimited</h4>
252 |                  <p>At Myntra, our online shopping fashion for men collection features plenty of options to create multiple outfits. At our men’s online shop we have brought together an exhaustive range of products from the best men’s brands. Here is a list of must-haves from the wide variety of awesome products at Myntra:</p>
253 |                  <div>
254 |                  <ol>
255 |                      <li>Opt for a charming yet laid-back look with cool T-shirts and casual shirts worn with stylish jeans, casual trousers or shorts. Stay sharp and sophisticated with our smart options in formal shirts and trousers. Look dapper when meeting your clients in our smooth suits. Put on trendy blazers for formal occasions. On your online men’s clothes’ shopping journey, make sure you include kurtas, jackets and sherwanis from our festive wear collection. Stay warm and comfortable in sweaters and sweatshirts. Get fit and ready for adventure, with our sports and active wear collection.</li>
256 |                      <li>Once you are done with your online men’s clothes’ shopping, make sure you pick up the right accessories to complement your look. Whether you are travelling to work or outside the city our wide variety of bags, backpacks and luggage collection will ensure you are well-packed. Our beautiful watches and smart watches work well to enhance your overall style quotient. Reach out for our sunglasses during the summers – let your eyes stay protected while you opt for maximum swag.
257 |                     </li>
258 |                      <li>Bring impeccable style to your shoe closet with our incredible collection of footwear for men. Look classy during formal and semi-formal occasions with derbies, loafers and oxfords. Stay hip and happening in parties with boat shoes, monks and brogues from our casual men’s footwear range. Lead an active lifestyle with sneakers and running shoes from our sports footwear selection. Pick up sandals, floaters and flip-flops for a trip to the beach. We also host socks in our men’s online shopping collection. That’s basically everything under one roof!</li>
259 |                  </ol>
260 |                 </div>
261 |                  <p>Make sure you check out fun printed men’s T-shirts featuring your favourite characters from DC Comics and Marvel studios. Relive the magic of your favourite superhero from Justice League. Fly high with Superman, battle the bad guys with Batman, or get trendy in lightning-speed with a Flash T-shirt. Grab our cool Marvel Avengers T-shirts. Stay powered up with the Iron Man, or walk with the warriors in a Thor T-shirt.</p>
262 |                  <p>Our online shopping fashion for mens collection includes even more amazing merchandise such as innerwear, sleepwear, track pants, personal care, wallets, belts and other fashion accessories.</p>
263 |              </section>
264 |              <section id="section_6">
265 |                  <h4>men's shopping made easy at myntra</h4>
266 |                  <p>Myntra is the most convenient men’s online store, what with our simplified shopping and payment procedures. With just a few clicks of the mouse or taps on your smartphone, you can buy your favorites from the best men’s brands right away.</p>
267 |              </section>
268 |           </footer>
269 | 
270 |     <script src="../Common Files/men.js"></script>
271 |     <script src="../Common Files/headerMenu.js"></script>
272 |     <script src="../Common Files/corousel.js"></script>
273 |     <script src="../Common Files/hyperlinks.js"></script>
274 | </body>
275 | </html>


--------------------------------------------------------------------------------
/Homepages/womenHomePage.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Online Shopping for Women - Shop For Women Clothes, Shoes, Bags & More</title>
  8 |     <link rel="shortcut icon" type="image/png" href="../Common Files/image/favicon.png">
  9 |     <link rel="stylesheet" href="../Common Files/style.css">
 10 |     <script src="https://kit.fontawesome.com/24c494a6b6.js" crossorigin="anonymous"></script>
 11 |     <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 12 | </head>
 13 | <body>
 14 |    
 15 |     <!-- MENU BAR -->
 16 |     <header>
 17 |         <div id="logo">
 18 |             <img src="../Common Files/image/myntra-removebg-preview.png" alt="brandLogo" id="landingPage">
 19 |         </div>
 20 |         <ul id="nav_bar">
 21 |             <li><a href="../Homepages/menHomePage.html">men</a></li>
 22 |             <li><a href="../Homepages/womenHomePage.html">women</a></li>
 23 |             <li><a href="#">kids</a></li>
 24 |             <li><a href="../Homepages/homeLiving.html">home & living</a></li>
 25 |             <li><a href="#">beauty</a></li>
 26 |             <li id="studio"><a href="#">studio</a><span>new</span></li>
 27 |         </ul> 
 28 |         <div id="search">
 29 |             <input type="text" id="search_bar" placeholder="Search for products, brands and more">
 30 |             <i class="fa-solid fa-magnifying-glass" id="search_icon"></i>
 31 |         </div>
 32 |         <div id="right_icon">
 33 |             <div id="reggDropdown">
 34 |                 <!-- DROPDOWN MENU TO BE CREATED FOR LOGIN AND SIGNUP -->
 35 |               <div id="drop">
 36 |                   <a href="../Profile/profile.html" class="dropList">login</a>
 37 |                   <a href="../Profile/signup.html" class="dropList">sign up</a>
 38 |               </div>
 39 | 
 40 |               <i class="fa-regular fa-user"></i>
 41 |               <span>profile</span>
 42 |           </div>
 43 |             <div>
 44 |                 <i class="fa-regular fa-heart"></i>
 45 |                 <span>wishlist</span>
 46 |             </div>
 47 |             <div>
 48 |                 <i class="fa-solid fa-bag-shopping"></i>
 49 |                 <span>bag</span>
 50 |             </div>
 51 |         </div>
 52 | 
 53 |                 <!-- TOGGLE MENU -->
 54 |                 <div id="toggle">
 55 |                     <i class='bx bx-menu dropbtn' onclick="myFunction()"></i>
 56 |                     <div id="myDropdown" class="dropdown-content">
 57 |                         <div class="top">
 58 |                             <a href="menHomePage.html">men</a>
 59 |                             <a href="womenHomePage.html">women</a>
 60 |                             <a href="#">kids</a>
 61 |                             <a href="homeLiving.html">home & living</a>
 62 |                             <a href="#">beauty</a>
 63 |                             <a href="#">studio</a>
 64 |                         </div> 
 65 |                         <div class="bottom">
 66 |                             <i class="fa-regular fa-user fa_user" id="profile"></i>
 67 |                             <i class="fa-regular fa-heart fa_wishlist"></i>
 68 |                             <i class="fa-solid fa-bag-shopping fa_cart"></i>
 69 |                         </div>           
 70 |                     </div>
 71 |                 </div>
 72 | 
 73 |     </header>
 74 | 
 75 | 
 76 |     <!-- COROUSEL SECTION -->
 77 |     <div class="slider">
 78 |         <div id="slides">
 79 |           <!--radio buttons start-->
 80 |           <input type="radio" name="radio-btn" id="radio1">
 81 |           <input type="radio" name="radio-btn" id="radio2">
 82 |           <input type="radio" name="radio-btn" id="radio3">
 83 |           <input type="radio" name="radio-btn" id="radio4">
 84 | 
 85 |           <!--slide images start-->
 86 |          <!-- slider images created using js-->
 87 |         </div>
 88 | 
 89 |         <!--manual navigation start-->
 90 |         <div class="navigation-manual">
 91 |           <label for="radio1" class="manual-btn"></label>
 92 |           <label for="radio2" class="manual-btn"></label>
 93 |           <label for="radio3" class="manual-btn"></label>
 94 |           <label for="radio4" class="manual-btn"></label>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <!-- TOP BRANDS DISPLAY 1 HEADING -->
100 |       <h1 class="brand_heading">biggest deals on top brands</h1>
101 |       <div id="topBrand_women" class="container">
102 |           <div><img src="https://bit.ly/3Dk3plz" alt="brand1"></div>
103 |           <div><img src="https://bit.ly/3NyBqDe" alt="brand2"></div>
104 |           <div><img src="https://bit.ly/3qN2Ewp" alt="brand3"></div>
105 |           <div><img src="https://bit.ly/3NyivIY" alt="brand4"></div>
106 |           <div><img src="https://bit.ly/3NwbdVT" alt="brand5"></div>
107 |           <div><img src="https://bit.ly/3NrgMVT" alt="brand6"></div>
108 |           <div class="forWeb"><img src="https://bit.ly/3IJeKg4" alt="brand7"></div>
109 |           <div class="forWeb"><img src="https://bit.ly/3DlD3zC" alt="brand8"></div>
110 |           <div class="forWeb"><img src="https://bit.ly/36Ymhu7" alt="brand9"></div>
111 |           <div class="forWeb"><img src="https://bit.ly/3IN5iZ5" alt="brand10"></div>
112 |       </div>
113 | 
114 | 
115 |        <!-- TOP CATEGORIES SECTION -->
116 |        <h1 class="brand_heading">categories to bag</h1>
117 |        <div id="categoryBag_women" class="container categoryBag_women"></div>
118 | 
119 | 
120 |        <!-- TOP BRAND DISPLAY 2 HEADING -->
121 |        <h1 class="brand_heading">explore top brands</h1>
122 |        <div id="explore_more_women" class="display container explore_more_women"></div>
123 | 
124 |          <!-- CATEGORIES DISPLAY 2 -->
125 |        <h1 class="brand_heading">trending in western wear</h1>
126 |          <div class="container builder">
127 |             <div><img src="https://bit.ly/3wMju21" alt="category1"></div>
128 |             <div><img src="https://bit.ly/3NvX0ID" alt="category2"></div>
129 |             <div><img src="https://bit.ly/3tMNJ75" alt="category3"></div>
130 |             <div><img src="https://bit.ly/3qJVBV4" alt="category4"></div>
131 |             <div><img src="https://bit.ly/3uBoKCX" alt="category5"></div>
132 |          </div>
133 | 
134 |          <!-- CATEGORIES DISPLAY 3 -->
135 |          <h1 class="brand_heading">trending in indian wear</h1>
136 |          <div class="container builder">
137 |             <div><img src="https://bit.ly/3K69wN7" alt="category1"></div>
138 |             <div><img src="https://bit.ly/3iODr09" alt="category2"></div>
139 |             <div><img src="https://bit.ly/3IOGpw4" alt="category3"></div>
140 |             <div><img src="https://bit.ly/38furzf" alt="category4"></div>
141 |             <div><img src="https://bit.ly/36I8HeC" alt="category5"></div>
142 |          </div>
143 | 
144 | 
145 |           <!-- CATEGORIES DISPLAY 4 -->
146 |           <h1 class="brand_heading">trending in sports wear</h1>
147 |           <div class="container builder">
148 |              <div><img src="https://bit.ly/3K69y7H" alt="category1"></div>
149 |              <div class="forMob"><img src="https://bit.ly/3iN4YPn" alt="category2"></div>
150 |              <div><img src="https://bit.ly/36YoFkz" alt="category3"></div>
151 |              <div class="forWeb"><img src="https://bit.ly/3wINHPL" alt="category4"></div>
152 |              <div class="forWeb"><img src="https://bit.ly/3ISRhsO" alt="category5"></div>
153 |           </div>
154 | 
155 | 
156 |           <!-- CATEGORIES DISPLAY 5 -->
157 |           <h1 class="brand_heading">trending in footwear</h1>
158 |           <div class="container builder">
159 |              <div><img src="https://bit.ly/3Lm8hJN" alt="category1"></div>
160 |              <div><img src="https://bit.ly/3wOjfDM" alt="category2"></div>
161 |              <div class="forMob"><img src="https://bit.ly/3uCXq7p" alt="category3"></div>
162 |              <div class="forWeb"><img src="https://bit.ly/36VIvx8" alt="category4"></div>
163 |              <div class="forWeb"><img src="https://bit.ly/3IR4WR4" alt="category5"></div>
164 |           </div>
165 | 
166 | 
167 |           <!-- CATEGORIES DISPLAY 6 -->
168 |           <h1 class="brand_heading">trending in accessories</h1>
169 |           <div class="container builder">
170 |              <div><img src="https://bit.ly/3DnaNMZ" alt="category1"></div>
171 |              <div><img src="https://bit.ly/3wN8xxt" alt="category2"></div>
172 |              <div class="forMob"><img src="https://bit.ly/3LnQNwv" alt="category3"></div>
173 |              <div class="forWeb"><img src="https://bit.ly/35jAgu6" alt="category4"></div>
174 |              <div class="forWeb"><img src="https://bit.ly/3IN87cD" alt="category5"></div>
175 |           </div>
176 | 
177 | 
178 |           <!-- FOOTER SECTION -->
179 |           <footer>
180 |               <section id="section_1">
181 |                   <div id="left">
182 |                       <div>
183 |                           <h4>online shopping</h4>
184 |                           <p>men</p>
185 |                           <p>women</p>
186 |                           <p>home & living</p>
187 |                           <p>beauty</p>
188 |                           <p>gift cards</p>
189 |                           <p>myntra insider<span id="latest">New</span></p>
190 |                       </div>
191 |                       <div>
192 |                         <h4>useful links</h4>
193 |                         <p>men</p>
194 |                         <p>faq</p>
195 |                         <p>t&c</p>
196 |                         <p>terms of use</p>
197 |                         <p>track order</p>
198 |                         <p>shipping</p>
199 |                         <p>cancellation</p>
200 |                         <p>returns</p>
201 |                         <p>whitehat</p>
202 |                         <p>blog</p>
203 |                         <p>careers</p>
204 |                         <p>privacy policy</p>
205 |                         <p>site map</p>
206 |                         <p>corporate information</p>
207 |                       </div>
208 |                       <div>
209 |                           <h4>experience myntra app on mobile</h4>
210 |                           <img src="https://bit.ly/3LluZ4L" alt="android">
211 |                           <img src="https://bit.ly/3DmWQys" alt="ios">
212 |                           <h4 id="social_connect">keep in touch</h4>
213 |                           <div>
214 |                             <i class="fa-brands fa-facebook-square"></i>
215 |                             <i class="fa-brands fa-twitter-square"></i>
216 |                             <i class="fa-brands fa-youtube"></i>
217 |                             <i class="fa-brands fa-instagram"></i>
218 |                           </div>
219 |                       </div>
220 |                   </div>
221 |                   <div id="right">
222 |                       <div>
223 |                           <img src="https://bit.ly/3JPiL47" alt="original">
224 |                           <p> <span>100% ORIGINAL</span> guarantee for all products at myntra.com</p>
225 |                       </div>
226 |                       <div>
227 |                           <img src="https://bit.ly/3uBalH4" alt="return_policy">
228 |                           <p><span>Return within 30days</span> of receiving your order</p>
229 |                       </div>
230 |                   </div>
231 |               </section>
232 |               <section id="section_2">
233 |                   <h4>popular searches</h4>
234 |                   <div></div>
235 |               </section>
236 |               <section id="section_3">
237 |                 <a href="">sherwani</a><a href="">track pants</a><a href="">blazzers</a><a href="">sweater</a><a href="">jeans</a><a href="">suit</a><a href="">trouser</a><a href="">shalwar</a><a href="">bracelets</a><a href="">sherwani</a><a href="">cargo</a><a href="">shirt</a><a href="">sherwani</a><a href="">shelwar</a><a href="">Bracelets</a><a href="">sherwani</a><a href="">blazzers</a><a href="">sherwani</a><a href="">bracelets</a><a href="">rings</a><a href="">blazzers</a><a href="">sherwani</a><a href="">sherwani</a><a href="">sherwani</a><a href="">blazzers</a><a href="">blazzers</a><a href="">blazzers</a><a href="">shelwar</a><a href="">shalwar</a><a href="">jeans</a>
238 |               </section>
239 |               <section id="section_4">
240 |                   <p>In case of any concern <a href="#"> contact us</a></p>
241 |                   <p>&#169; 2022 www.myntra.com. All rights reserved.</p>
242 |               </section>
243 |               <hr>
244 |              <section id="section_5">
245 |                  <h4>online shopping for women: myntra all the way</h4>
246 |                  <p>Myntra is one of the best sites when it comes to online shopping for men. The finest of material, superior design and unbeatable style go into the making of our men’s shopping collection. Our range of online shopping men’s wear, accessories, footwear and personal care products are second to none. Compared with other men’s shopping sites, Myntra brings you the best price products which won’t hurt your pocket. With seasonal discounts on trendy casual wear, suits, blazers, sneakers and more, online shopping for men at Myntra just gets even more irresistible!
247 |                 </p>
248 |              </section>
249 |              <section id="section_6">
250 |                  <h4>women’s online shopping: clothes, accessories, footwear, and more</h4>
251 |                  <p>At Myntra, our online shopping fashion for men collection features plenty of options to create multiple outfits. At our men’s online shop we have brought together an exhaustive range of products from the best men’s brands. Here is a list of must-haves from the wide variety of awesome products at Myntra:</p>
252 |                  <div>
253 |                  <ol>
254 |                      <li>Opt for a charming yet laid-back look with cool T-shirts and casual shirts worn with stylish jeans, casual trousers or shorts. Stay sharp and sophisticated with our smart options in formal shirts and trousers. Look dapper when meeting your clients in our smooth suits. Put on trendy blazers for formal occasions. On your online men’s clothes’ shopping journey, make sure you include kurtas, jackets and sherwanis from our festive wear collection. Stay warm and comfortable in sweaters and sweatshirts. Get fit and ready for adventure, with our sports and active wear collection.</li>
255 |                      <li>Once you are done with your online men’s clothes’ shopping, make sure you pick up the right accessories to complement your look. Whether you are travelling to work or outside the city our wide variety of bags, backpacks and luggage collection will ensure you are well-packed. Our beautiful watches and smart watches work well to enhance your overall style quotient. Reach out for our sunglasses during the summers – let your eyes stay protected while you opt for maximum swag.
256 |                     </li>
257 |                      <li>Bring impeccable style to your shoe closet with our incredible collection of footwear for men. Look classy during formal and semi-formal occasions with derbies, loafers and oxfords. Stay hip and happening in parties with boat shoes, monks and brogues from our casual men’s footwear range. Lead an active lifestyle with sneakers and running shoes from our sports footwear selection. Pick up sandals, floaters and flip-flops for a trip to the beach. We also host socks in our men’s online shopping collection. That’s basically everything under one roof!</li>
258 |                  </ol>
259 |                 </div>
260 |                  <p>Make sure you check out fun printed men’s T-shirts featuring your favourite characters from DC Comics and Marvel studios. Relive the magic of your favourite superhero from Justice League. Fly high with Superman, battle the bad guys with Batman, or get trendy in lightning-speed with a Flash T-shirt. Grab our cool Marvel Avengers T-shirts. Stay powered up with the Iron Man, or walk with the warriors in a Thor T-shirt.</p>
261 |                  <p>Our online shopping fashion for mens collection includes even more amazing merchandise such as innerwear, sleepwear, track pants, personal care, wallets, belts and other fashion accessories.</p>
262 |              </section>
263 |              <section id="section_6">
264 |                  <h4>online shopping for women made easy</h4>
265 |                  <p>Myntra is the most convenient men’s online store, what with our simplified shopping and payment procedures. With just a few clicks of the mouse or taps on your smartphone, you can buy your favorites from the best men’s brands right away.</p>
266 |              </section>
267 |           </footer>
268 | 
269 | 
270 |     <script src="../Common Files/women.js"></script>
271 |     <script src="../Common Files/headerMenu.js"></script>
272 |     <script src="../Common Files/corousel.js"></script>
273 |     <script src="../Common Files/hyperlinks.js"></script>
274 |     
275 | 
276 | </body>
277 | 
278 | 
279 | </html>
280 | 


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