├── .vscode └── settings.json ├── img ├── img3.jpg ├── image.jpeg ├── image (1).jpeg ├── image (2).jpeg ├── image (3).jpeg ├── image (4).jpeg ├── 088b92ac-1278-4abf-bd8a-cac0cf718a1f.jpg ├── 1ed62179-9fd3-4c34-a20a-c39192668658.jpg ├── 4300e51d-bfa8-4595-9731-c4b6e28a825a.jpg ├── 56278098-f473-4d4d-965e-96088d1d24dc.jpg ├── 937299cf-ede2-4f96-baa1-fb36ac44a513.jpg ├── 97ce8101-cf1c-4f51-bf0b-65f056f286b3.gif ├── 9b92bb73-edd9-4b40-84be-c0a3f9c32d7c.gif ├── eedadc6e-0088-4918-9145-50c93b7c7bc6.jpg └── Kohl-Of-Honour-Intense-Kajal-PDP-images-Parent-page.jpg ├── Components ├── Logo Sugar-800x400-1.jpg ├── signinpage.js └── navbar.js ├── CSS ├── makeup.css ├── offerpage.css ├── product.css ├── skincare.css ├── commonbrush.css ├── payment.css ├── footer.css ├── navbar.css ├── signin.css ├── cart.css ├── trending.css └── index.css ├── HTML ├── blog.html ├── Demo.html ├── succesfull.html ├── skincare.html ├── lips.html ├── eye.html ├── face.html ├── faceBrush.html ├── eyeBrush.html ├── brash.html ├── offerpage.html ├── makeup.html ├── wishlist.html ├── trending.html ├── product.html └── cart.html ├── README.md ├── Scripts ├── wishlist.js ├── payment.js ├── common.js ├── eyebrush.js ├── facebrush.js ├── face.js ├── lips.js ├── eye.js ├── trending.js ├── makeup.js ├── Brush.js ├── skincare.js └── cart.js └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/img3.jpg -------------------------------------------------------------------------------- /img/image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/image.jpeg -------------------------------------------------------------------------------- /img/image (1).jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/image (1).jpeg -------------------------------------------------------------------------------- /img/image (2).jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/image (2).jpeg -------------------------------------------------------------------------------- /img/image (3).jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/image (3).jpeg -------------------------------------------------------------------------------- /img/image (4).jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/image (4).jpeg -------------------------------------------------------------------------------- /Components/Logo Sugar-800x400-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/Components/Logo Sugar-800x400-1.jpg -------------------------------------------------------------------------------- /img/088b92ac-1278-4abf-bd8a-cac0cf718a1f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/088b92ac-1278-4abf-bd8a-cac0cf718a1f.jpg -------------------------------------------------------------------------------- /img/1ed62179-9fd3-4c34-a20a-c39192668658.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/1ed62179-9fd3-4c34-a20a-c39192668658.jpg -------------------------------------------------------------------------------- /img/4300e51d-bfa8-4595-9731-c4b6e28a825a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/4300e51d-bfa8-4595-9731-c4b6e28a825a.jpg -------------------------------------------------------------------------------- /img/56278098-f473-4d4d-965e-96088d1d24dc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/56278098-f473-4d4d-965e-96088d1d24dc.jpg -------------------------------------------------------------------------------- /img/937299cf-ede2-4f96-baa1-fb36ac44a513.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/937299cf-ede2-4f96-baa1-fb36ac44a513.jpg -------------------------------------------------------------------------------- /img/97ce8101-cf1c-4f51-bf0b-65f056f286b3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/97ce8101-cf1c-4f51-bf0b-65f056f286b3.gif -------------------------------------------------------------------------------- /img/9b92bb73-edd9-4b40-84be-c0a3f9c32d7c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/9b92bb73-edd9-4b40-84be-c0a3f9c32d7c.gif -------------------------------------------------------------------------------- /img/eedadc6e-0088-4918-9145-50c93b7c7bc6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/eedadc6e-0088-4918-9145-50c93b7c7bc6.jpg -------------------------------------------------------------------------------- /img/Kohl-Of-Honour-Intense-Kajal-PDP-images-Parent-page.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uttammane1/Sugar-Cosmetics-JavaScript/HEAD/img/Kohl-Of-Honour-Intense-Kajal-PDP-images-Parent-page.jpg -------------------------------------------------------------------------------- /CSS/makeup.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 3 | *{ 4 | font-family:Quicksand ; 5 | } 6 | #box{ 7 | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 8 | justify-content: center; 9 | text-align: center; 10 | padding: 10px; 11 | height: 330px; 12 | } -------------------------------------------------------------------------------- /HTML/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blog 8 | 9 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /HTML/Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS/offerpage.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | #offerhead{ 6 | justify-content: center; 7 | align-items: center; 8 | 9 | height: 70px; 10 | display: flex; 11 | font-size: 2rem!important; 12 | background-color: #f5f5f5; 13 | } 14 | #offercontent{ 15 | display: grid; 16 | grid-template-columns: repeat(3,1fr); 17 | gap: 2%; 18 | justify-items: center; 19 | padding: 25px; 20 | } 21 | #offercontent img{ 22 | 23 | border-radius: 10px; 24 | } -------------------------------------------------------------------------------- /HTML/succesfull.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 28 | 29 | 30 |
31 | 32 | 33 |
34 |
Continue Shopping
35 | 36 | -------------------------------------------------------------------------------- /HTML/skincare.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | skincare 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /HTML/lips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Lips Products 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 |
23 | 24 | 25 | home_icon 26 | 27 | / 28 | 29 | makeup 30 | 31 | 32 |
33 |
34 | 35 |
36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /HTML/eye.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Eye Products 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 |
24 | 25 | home_icon 30 | 31 | / 32 | 33 | makeup 34 | 35 |
36 |
37 | 38 |
39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /HTML/face.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Face Products 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 |
25 | 26 | 27 | home_icon 28 | 29 | / 30 | 31 | makeup 32 | 33 | 34 |
35 |
36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /HTML/faceBrush.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | FACE BRUSHES 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

24 |
25 | 26 | home_icon 31 | 32 | / 33 | 34 | makeup 35 | 36 |
37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /HTML/eyeBrush.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | EYE BRUSHES 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 |
26 | 27 | home_icon 32 | 33 | / 34 | 35 | makeup 36 | 37 |
38 |

39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /HTML/brash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | BRUSHES 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

29 |
30 | 31 | home_icon 36 | 37 | / 38 | 39 | makeup 40 | 41 |
42 |

43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /CSS/product.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | #hometitle{ 6 | display:flex; 7 | margin:auto; 8 | width:85%; 9 | } 10 | .bigdiv{ 11 | width:85%; 12 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 13 | margin:auto; 14 | padding:15px; 15 | box-sizing: border-box; 16 | } 17 | .promain{ 18 | display:flex; 19 | gap:120px; 20 | width:100%; 21 | margin:auto; 22 | margin-bottom: 20px; 23 | } 24 | .promain img{ 25 | height:400px; 26 | width:300px; 27 | } 28 | #prodetdiv{ 29 | width:500px; 30 | } 31 | #prodetdiv h1{ 32 | line-height:50px; 33 | } 34 | #prodetdiv p{ 35 | font-size: 20px; 36 | color:grey; 37 | } 38 | button{ 39 | width:240px; 40 | height:35px; 41 | font-size: 16px; 42 | color:white; 43 | background-color:#212529; 44 | border-radius: 5px; 45 | cursor: pointer; 46 | } 47 | a{ 48 | color:grey; 49 | } 50 | #pin{ 51 | border-top: none; 52 | border-left: none; 53 | border-right: none; 54 | height:35px; 55 | margin-top:10px; 56 | } 57 | #pinbtn{ 58 | width:100px; 59 | font-size: 12px;; 60 | } 61 | #desbtn{ 62 | margin-top:50px; 63 | margin-bottom: 40px; 64 | } 65 | #desbtn button{ 66 | width:305px; 67 | height:40px; 68 | color:blue; 69 | background-color: #f9f9f9; 70 | border:none; 71 | } 72 | #desbtn button:hover{ 73 | background-color: #f5f0f0; 74 | } 75 | #desbtn+p,h3,p,li{ 76 | margin-left:20px; 77 | } 78 | #desbtn,p,li{ 79 | color:grey; 80 | } -------------------------------------------------------------------------------- /CSS/skincare.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #f5f5f5; 11 | } 12 | 13 | .container { 14 | display: flex; 15 | flex-wrap: wrap; 16 | margin: 0px auto; 17 | max-width: 90%; 18 | padding: 0 25px; 19 | } 20 | 21 | .rating-wrapper, 22 | .price-wrapper { 23 | margin-bottom: 10px; 24 | } 25 | 26 | .box { 27 | width: calc(25% - 50px); 28 | margin: 0px 25px 25px; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | background-color: white; 33 | } 34 | 35 | img { 36 | max-width: 100%; 37 | margin-top: 10px; 38 | } 39 | 40 | .name { 41 | text-align: center; 42 | color: #808080; 43 | font-weight: 600; 44 | margin-top: 5px; 45 | text-transform: uppercase; 46 | } 47 | 48 | .fa-star { 49 | color: #f5be18; 50 | } 51 | 52 | .bottom-block { 53 | border: 1px solid #000; 54 | display: flex; 55 | width: 100%; 56 | margin-top: auto; 57 | opacity: 0; 58 | visibility: hidden; 59 | } 60 | 61 | .box:hover .bottom-block { 62 | opacity: 1; 63 | visibility: visible; 64 | } 65 | 66 | .box:hover { 67 | box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 68 | ; 69 | } 70 | 71 | .bottom-block span { 72 | padding: 0 15px; 73 | display: flex; 74 | align-items: center; 75 | justify-content: center; 76 | } 77 | 78 | .bottom-block button { 79 | background-color: #000; 80 | color: #fff; 81 | outline: none; 82 | width: 100%; 83 | border-color: transparent; 84 | padding: 10px; 85 | min-height: 40px; 86 | } 87 | 88 | .main-img { 89 | height: 260px; 90 | object-fit: contain; 91 | } 92 | 93 | body{ 94 | font-family: 'Poppins', sans-serif; 95 | } 96 | 97 | body img,button,i:hover{ 98 | cursor: pointer; 99 | } -------------------------------------------------------------------------------- /HTML/offerpage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Offerpage 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |

General Offers

24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /CSS/commonbrush.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | 6 | body { 7 | background-color: #f5f5f5; 8 | } 9 | 10 | .container { 11 | display: flex; 12 | flex-wrap: wrap; 13 | margin: 0px auto; 14 | max-width: 90%; 15 | padding: 0 25px; 16 | } 17 | 18 | .rating-wrapper, 19 | .price-wrapper { 20 | margin-bottom: 10px; 21 | } 22 | 23 | .box { 24 | width: calc(25% - 50px); 25 | margin: 0px 25px 25px; 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | background-color: white; 30 | } 31 | 32 | img { 33 | max-width: 100%; 34 | margin-top: 10px; 35 | } 36 | 37 | .name { 38 | text-align: center; 39 | color: #808080; 40 | font-weight: 600; 41 | margin-top: 5px; 42 | text-transform: uppercase; 43 | } 44 | 45 | .fa-star { 46 | color: #f5be18; 47 | } 48 | 49 | .bottom-block { 50 | border: 1px solid #000; 51 | display: flex; 52 | width: 100%; 53 | margin-top: auto; 54 | opacity: 0; 55 | visibility: hidden; 56 | } 57 | 58 | .box:hover .bottom-block { 59 | opacity: 1; 60 | visibility: visible; 61 | } 62 | 63 | .box:hover { 64 | box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 65 | ; 66 | } 67 | 68 | .bottom-block span { 69 | padding: 0 15px; 70 | display: flex; 71 | align-items: center; 72 | justify-content: center; 73 | } 74 | 75 | .bottom-block button { 76 | background-color: #000; 77 | color: #fff; 78 | outline: none; 79 | width: 100%; 80 | border-color: transparent; 81 | padding: 10px; 82 | min-height: 40px; 83 | } 84 | 85 | .main-img { 86 | height: 260px; 87 | object-fit: contain; 88 | } 89 | 90 | body{ 91 | font-family: 'Poppins', sans-serif; 92 | } 93 | 94 | body img,button,i:hover{ 95 | cursor: pointer; 96 | } 97 | #home_btn{ 98 | display: flex; 99 | margin-left: 82px; 100 | font-size: 18px; 101 | 102 | } 103 | 104 | #home{ 105 | margin-right: 10px; 106 | 107 | } -------------------------------------------------------------------------------- /CSS/payment.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | .paydrop{ 6 | 7 | display: none; 8 | } 9 | 10 | #payinput>input{ 11 | 12 | width: 100%; 13 | height: 50px; 14 | border-left: none; 15 | border-right: none; 16 | border-top: none; 17 | 18 | } 19 | #upi{ 20 | border: 1px solid gray; 21 | display: flex; 22 | gap: 10px; 23 | font-size: 14px; 24 | } 25 | /* #payinput input{ 26 | width: 100%; 27 | height: 100%; 28 | } */ 29 | 30 | #dropdebit{ 31 | 32 | display: none; 33 | position: relative; 34 | } 35 | 36 | #dropdebit>input{ 37 | width: 100%; 38 | height: 50px; 39 | border-left: none; 40 | border-right: none; 41 | border-top: none; 42 | position: relative; 43 | } 44 | #exp{ 45 | display: flex; 46 | gap: 235px; 47 | height: 50px; 48 | } 49 | #exp input{ 50 | border-left: none; 51 | border-right: none; 52 | border-top: none; 53 | } 54 | #mobwallet{ 55 | border: 1px solid gray; 56 | display: flex; 57 | gap: 20px; 58 | font-size: 14px; 59 | } 60 | 61 | #debitcard{ 62 | border: 1px solid gray; 63 | display: flex; 64 | gap: 20px; 65 | font-size: 14px; 66 | } 67 | 68 | #netbanking{ 69 | border: 1px solid gray; 70 | display: flex; 71 | gap: 20px; 72 | font-size: 14px; 73 | } 74 | #cash{ 75 | border: 1px solid gray; 76 | display: flex; 77 | gap: 20px; 78 | font-size: 14px; 79 | } 80 | 81 | #cashdrop{ 82 | display: none; 83 | position: relative; 84 | background-color: white; 85 | } 86 | 87 | .PaymentInfo_btn{ 88 | background-color: black; 89 | color: #fff; 90 | padding: 10px; 91 | width: 100%; 92 | border-radius: 5px; 93 | cursor: pointer; 94 | } 95 | 96 | /* .maininfop{ 97 | width: 50%; 98 | } */ 99 | 100 | .payContainer{ 101 | border-radius: 7px; 102 | margin-right: 20px; 103 | margin-left: 20px; 104 | background-color: #faf9f9; 105 | border: 1px solid #faf9f9; 106 | margin-bottom: 20px; 107 | width: 666px; 108 | cursor: pointer; 109 | 110 | } 111 | .iconfles{ 112 | 113 | 114 | display: flex; 115 | width: 100%; 116 | justify-content: space-between; 117 | } -------------------------------------------------------------------------------- /HTML/makeup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Makeup: Buy Makeup Products 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 |
27 | filter 28 | 29 | 38 | 39 | sort 40 | 41 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | 55 | 56 | home_icon 57 | 58 | / 59 | 60 | makeup 61 | 62 | 63 |
64 | 68 | 69 |
70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /CSS/footer.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | 6 | #mainbottom { 7 | width: 100%; 8 | height: 700px; 9 | border: 1px solid darkblue; 10 | background-color: black; 11 | font-family: sans-serif; 12 | 13 | } 14 | #bottomlogo { 15 | display: flex; 16 | justify-content: center; 17 | } 18 | #mailbot { 19 | background-color: white; 20 | height: 15px; 21 | width: 17px; 22 | } 23 | .social_logo { 24 | display: flex; 25 | gap: 25px; 26 | align-items: center; 27 | } 28 | #bottomsocial { 29 | cursor: pointer; 30 | display: flex; 31 | justify-content: center; 32 | } 33 | #underlogo { 34 | color: white; 35 | display: flex; 36 | justify-content: right; 37 | margin-top: 35px; 38 | } 39 | .bottomp { 40 | width: 45%; 41 | } 42 | #googleplay { 43 | display: flex; 44 | justify-content: space-between; 45 | margin-top: 35px; 46 | } 47 | .gogp { 48 | color: white; 49 | display: flex; 50 | width: 45%; 51 | gap: 10px; 52 | } 53 | .gogp1 { 54 | width: 39%; 55 | display: flex; 56 | justify-content: end; 57 | } 58 | .bottinput { 59 | width: 60%; 60 | height: 45px; 61 | background-color: black; 62 | border-bottom: 1px solid white; 63 | } 64 | .bottinput input { 65 | width: 100%; 66 | height: 45px; 67 | background-color: black; 68 | border: none; 69 | outline: none; 70 | } 71 | #bottbtn { 72 | cursor: pointer; 73 | width: 90px; 74 | height: 46px; 75 | background-color: #fc2779; 76 | color: white; 77 | } 78 | .subgogp { 79 | width: 200px; 80 | } 81 | #info { 82 | color: white; 83 | margin-left: 124px; 84 | } 85 | #aboutus { 86 | color: white; 87 | 88 | display: flex; 89 | justify-content: space-around; 90 | width: 80%; 91 | margin-left: 39px; 92 | margin-top: 20px; 93 | } 94 | #touch { 95 | color: white; 96 | margin-left: 120px; 97 | margin-top: 20px; 98 | } 99 | .subcontact { 100 | color: white; 101 | display: flex; 102 | align-items: center; 103 | } 104 | #last { 105 | color: white; 106 | display: flex; 107 | justify-content: space-around; 108 | margin-left: 75px; 109 | } 110 | #bottomhr{ 111 | border: 0.5px solid white; 112 | } 113 | .bottxt{ 114 | text-align: center; 115 | color: white; 116 | margin-top: 50px; 117 | } 118 | 119 | @media (min-width: 414px) and (max-width: 896px) { 120 | #mainbottom { 121 | background-color: yellow; 122 | } 123 | } -------------------------------------------------------------------------------- /HTML/wishlist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | BRUSHES 12 | 13 | 14 | 15 | 16 | 65 | 66 | 67 | 68 |
69 | 70 |

/ 71 | Account 72 | / 73 | Wishlist

74 |
75 |
76 | 77 |

78 | Hi, Uttam Mane!

79 | 80 |

Not kapil jangir? 81 | Click here to login from a different account

82 |
83 |
84 | 85 | 86 | 87 | 88 |
89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Sugar Cosmetics Website 3 | 4 | 5 | 6 | 7 | ## Overview 8 | 9 | The Sugar Cosmetics project is a comprehensive web application designed to provide a seamless and engaging experience for users interested in beauty and makeup products. Developed for Sugar Cosmetics, a renowned beauty brand, this platform aims to showcase their extensive product range, facilitate user interaction through reviews and ratings, and enable online purchases. 10 | 11 | 12 | # Key Features 13 | ## Product Catalog 14 | 15 | Categories: Explore a diverse collection of makeup, skincare, and beauty accessories conveniently organized into categories for easy navigation. 16 | 17 | Product Details: View detailed information about each product, including descriptions, ingredients, usage instructions, and customer reviews. 18 | ## User Reviews and Ratings 19 | 20 | Review System: Allow users to share their experiences and opinions by writing reviews and providing ratings for products they have purchased or used. 21 | 22 | Rating Aggregation: Display average ratings and highlight top-rated products based on user reviews. 23 | ## Online Store 24 | 25 | Shopping Cart: Add desired products to the shopping cart for a seamless shopping experience. 26 | 27 | Checkout Process: Proceed to checkout, enter shipping and payment details, and complete secure transactions online. 28 | 29 | Order Tracking: Provide order tracking functionalities to keep users informed about the status of their purchases. 30 | ## User Management 31 | 32 | User Accounts: Enable users to create and manage their accounts, including profile information, order history, saved addresses, and payment methods. 33 | 34 | Personalization: Offer personalized product recommendations, promotions, and discounts based on user preferences and purchase history. 35 | ## Promotions and Discounts 36 | 37 | Promotional Offers: Showcase ongoing promotions, special deals, and limited-time discounts to attract and retain customers. 38 | 39 | Loyalty Program: Implement a loyalty rewards program to incentivize repeat purchases and customer engagement. 40 | ## Responsive Design 41 | 42 | Mobile-Friendly: Ensure compatibility and optimal user experience across devices, including desktops, tablets, and smartphones. 43 | 44 | Intuitive Interface: Design an intuitive and visually appealing interface that enhances usability and encourages exploration. 45 | # Technologies Used 46 | 47 | ## Frontend 48 | 49 | HTML/CSS: Structure and style the user interface for a visually appealing presentation. 50 | 51 | JavaScript: Implement interactive elements and client-side functionalities. 52 | 53 | React.js: Utilize the React library for building dynamic and responsive components. 54 | # Home Page 55 | 56 | ![Screenshot (124)](https://github.com/uttammane1/Sugar-Cosmetics/assets/151371801/744f9ddb-4a1c-4f20-a657-8eeb90962fd2) 57 | 58 | ![Screenshot (125)](https://github.com/uttammane1/Sugar-Cosmetics/assets/151371801/d0b229b0-614e-4156-90b5-a891f5c2a06c) 59 | 60 | # SKINCARE PAGE 61 | 62 | ![Screenshot (126)](https://github.com/uttammane1/Sugar-Cosmetics/assets/151371801/d5c27a76-0aaa-4015-aa5f-a3db516a6b2a) 63 | 64 | # TRENDING PAGE 65 | 66 | ![Screenshot (127)](https://github.com/uttammane1/Sugar-Cosmetics/assets/151371801/d7906d6f-3c7c-44fd-b394-4a6131f93eaa) 67 | 68 | # LOG IN PAGE 69 | 70 | ![Screenshot (128)](https://github.com/uttammane1/Sugar-Cosmetics/assets/151371801/eef0ebec-2976-4fb6-8435-230290f3454d) 71 | -------------------------------------------------------------------------------- /Scripts/wishlist.js: -------------------------------------------------------------------------------- 1 | let wishlistData = [ 2 | { 3 | image_url: 4 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-14_1.jpg?v=1627659982", 5 | name: "BLEND TREND EYESHADOW BRUSH - 043 ROUND Xl", 6 | price: 399, 7 | rating: "4.8(414)", 8 | strike: '', 9 | }, 10 | 11 | { 12 | image_url: 13 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-12-min.jpg?v=1627573647", 14 | name: "Blend Trend Dual Face Brush - 075 Powder + … ", 15 | price: 599, 16 | rating: "4.5(141)", 17 | strike: '', 18 | }, 19 | 20 | 21 | ]; 22 | 23 | 24 | localStorage.setItem("cartItems", JSON.stringify(wishlistData)); 25 | 26 | wishlistData.map(function (elem,index) { 27 | 28 | var box = document.createElement("div"); 29 | var top = document.createElement("div"); 30 | var bottom = document.createElement("div"); 31 | var rating_wrapper = document.createElement("div"); 32 | var price_wrapper = document.createElement("div"); 33 | 34 | var shade = document.createElement("p"); 35 | shade.textContent = elem.shade; 36 | 37 | var img_shade = document.createElement("img"); 38 | img_shade.src = elem.shade_image; 39 | 40 | var img = document.createElement("img"); 41 | img.src = elem.image_url; 42 | img.classList.add("main-img"); 43 | 44 | var name = document.createElement("p"); 45 | name.textContent = elem.name; 46 | 47 | var price = document.createElement("span"); 48 | price.innerText = "Rs." + elem.price; 49 | 50 | var strike = document.createElement("s"); 51 | strike.innerText = elem.strike; 52 | 53 | var rating = document.createElement("span"); 54 | rating.innerText = elem.rating; 55 | 56 | var star_icon = document.createElement("span"); 57 | star_icon.innerHTML += '' 58 | 59 | var heart_icon = document.createElement("span"); 60 | heart_icon.innerHTML += '' 61 | 62 | heart_icon.addEventListener("click", function () { 63 | wishList(elem,index); 64 | }); 65 | 66 | name.classList.add("name"); 67 | box.classList.add("box"); 68 | top.classList.add("top"); 69 | bottom.classList.add("bottom-block"); 70 | rating_wrapper.classList.add("rating-wrapper"); 71 | price_wrapper.classList.add("price-wrapper"); 72 | 73 | var btn = document.createElement("button"); 74 | btn.innerText = "SHOP NOW"; 75 | btn.addEventListener("click", function () { 76 | addToCart(elem); 77 | }); 78 | 79 | top.append(shade, img_shade); 80 | price_wrapper.append(strike, price) 81 | rating_wrapper.append(star_icon, rating); 82 | bottom.append(heart_icon, btn); 83 | box.append(img, name, price_wrapper, rating_wrapper, bottom); 84 | 85 | document.querySelector(".container").append(box); 86 | }); 87 | 88 | var cartArray= JSON.parse(localStorage.getItem("cartItems")) || []; 89 | function addToCart(elem){ 90 | cartArray.push(elem); 91 | 92 | localStorage.setItem("cartItem",JSON.stringify(cartArray)) 93 | window.location.href="./product.html" 94 | } 95 | 96 | var cartwish= JSON.parse(localStorage.getItem("wishlistItem")) || []; 97 | function wishList(elem,index){ 98 | cartwish.splice(index,1); 99 | alert("item removed from wishlist") 100 | 101 | localStorage.setItem("wishlistItem",JSON.stringify(cartwish)) 102 | window.location.reload(); 103 | } -------------------------------------------------------------------------------- /Scripts/payment.js: -------------------------------------------------------------------------------- 1 | let payment = ()=>{ 2 | return `
3 |
4 | 5 |
Payment Method
6 |

Seclect Payment Method

7 | 8 |
9 |
10 | 11 |
12 |

Instant Pay Using UPI

13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 |

Mobile Wallets

25 | 26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 |

Credit/Debit Cards

34 | 35 |
36 |
37 |
38 | 39 |
40 | 41 |
42 |
43 | 44 | 45 |
46 |
47 |

We will securely save this card for faster paymnet experience (CVV will not saved). If required you can remove this card from My Account > Payment Methods

48 |
49 |
50 |
51 |
52 | 53 |
54 |

Net Banking

55 | 56 |
57 |
58 |
59 |
60 | 61 |
62 |

Cash On Delivery

63 | 64 |
65 |
66 |
67 |

We recommend using a digital payment method for completing the payment

68 |
69 |
70 | 71 |
72 |
<  delivery Info
73 |
Proceed to Payment
74 |
75 |
76 |
77 | ` 78 | } 79 | 80 | export {payment} 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /CSS/navbar.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | /* justify-content: space-between; */ 5 | 6 | 7 | } 8 | #navmain { 9 | display: flex; 10 | justify-content: space-around; 11 | 12 | background-color: rgba(253, 243, 243, 0.61); 13 | } 14 | #navsearch { 15 | width: 45%; 16 | display: flex; 17 | } 18 | #search { 19 | border: none; 20 | 21 | width: 480px; 22 | 23 | 24 | 25 | height: 85%; 26 | border-top-left-radius: 25px; 27 | border-bottom-left-radius: 25px; 28 | background-color:white; 29 | } 30 | #nav_btn{ 31 | cursor: pointer; 32 | width: 200%; 33 | height: 85%; 34 | border-top-right-radius: 5px; 35 | border-bottom-right-radius: 5px; 36 | background-color: black; 37 | color: white; 38 | padding: 8px; 39 | font-weight: bold; 40 | } 41 | #navlogin{ 42 | cursor: pointer; 43 | } 44 | 45 | #navcart { 46 | display: flex; 47 | align-items: center; 48 | gap: 8px; 49 | cursor: pointer; 50 | } 51 | 52 | #navcat { 53 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 54 | } 55 | #maincat { 56 | display: flex; 57 | width: 50%; 58 | justify-content: space-around; 59 | font-weight: 700; 60 | } 61 | #temp { 62 | height: 70px; 63 | background-color: rgba(246, 247, 250, 0.756); 64 | padding-top: 20px; 65 | } 66 | 67 | .navdropdwnbtn{ 68 | cursor: pointer; 69 | } 70 | 71 | .navdropdwn{ 72 | position: relative; 73 | display: inline; 74 | cursor: pointer; 75 | } 76 | 77 | .dropdwn-content{ 78 | display: none; 79 | position: absolute; 80 | background-color: #f1f1f1; 81 | min-width: 180px; 82 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 83 | z-index: 1; 84 | } 85 | 86 | .dropdwn-content a{ 87 | color: black; 88 | padding: 12px 16px; 89 | text-decoration: none; 90 | display: block; 91 | } 92 | 93 | .dropdwn-content a:hover{ 94 | background-color: #ddd; 95 | } 96 | 97 | .navdropdwn:hover .dropdwn-content{ 98 | display: block; 99 | } 100 | 101 | #signappend{ 102 | display: none; 103 | position: absolute; 104 | margin-right: -54%; 105 | margin-top: -25px; 106 | animation: right 2s; 107 | z-index: 1; 108 | } 109 | 110 | @keyframes right{ 111 | from{ 112 | transform: translateX(655px); 113 | } 114 | to{ 115 | transform: translateX(0); 116 | } 117 | } 118 | 119 | body{ 120 | margin: 0px; 121 | padding: 0px; 122 | overflow-x: hidden; 123 | } 124 | 125 | .sdropcontent{ 126 | border-radius: 10px; 127 | padding: 10px; 128 | 129 | position: absolute; 130 | height: 200px; 131 | width: 98%; 132 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 133 | background-color:white; 134 | z-index: 1; 135 | display: none; 136 | } 137 | 138 | #twenty_hr{ 139 | display: flex; 140 | gap: 15px; 141 | margin-top: 8px; 142 | } 143 | 144 | #searchpics{ 145 | display: flex; 146 | justify-content: space-around; 147 | } 148 | 149 | .navdropdwn:hover .sdropcontent{ 150 | display: block; 151 | } 152 | 153 | .picks{ 154 | color: red; 155 | } 156 | 157 | #counter{ 158 | border: 1px solid grey; 159 | height: 18px; 160 | width: 15px; 161 | text-align: center; 162 | border-radius: 50%; 163 | margin-left: -9px; 164 | position: relative; 165 | display: none; 166 | } 167 | 168 | #navlogin{ 169 | display: flex; 170 | align-items: center; 171 | } 172 | 173 | a{ 174 | text-decoration: none; 175 | color: black; 176 | } 177 | 178 | #cart_count{ 179 | display: contents; 180 | } -------------------------------------------------------------------------------- /Components/signinpage.js: -------------------------------------------------------------------------------- 1 | let signinpage = ()=>{ 2 | return `
3 |
4 |

Login/Sign Up

5 |
6 |
7 | 14 |

Login/Sign Up Using Phone

15 |
16 |
17 |

+91

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 |

Enter the 4 digit OTP received on your phone.

33 |
34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 | 44 |

Get Important Updates on Whatsapp. Terms and Conditions

45 |
46 |
47 |
48 |
49 |
50 |
51 |

Registering for this site allows you to access your order status and history. Just fill in the 52 | fields below, and we'll get a new account set up for you in no time. We will only ask you 53 | for information necessary to make the purchase process faster and easier.

54 |
55 |
56 | By Signing up or logging in, you agree to our Terms and Conditions 57 |
58 | 59 |
60 |
` 61 | } 62 | 63 | 64 | 65 | let infopage = ()=>{ 66 | return `
67 | 74 |

WELCOME !

75 |
76 |

Phone Number Verified - +91 8080034532 (Try another number)

77 |
78 |
79 | 80 |
81 |

Or

82 |
83 | 84 |
85 |
86 |
87 |

Or Enter Account Details

88 |
89 |
90 | 91 |
92 |
93 | 94 |
95 |
96 |
97 | 98 |
99 |
Save and Continue
100 | ` 101 | } 102 | 103 | 104 | 105 | export {signinpage,infopage} -------------------------------------------------------------------------------- /CSS/signin.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap"); 2 | * { 3 | font-family: Quicksand; 4 | } 5 | #sublogin { 6 | border: 1px solid royalblue; 7 | background-image: url(https://in.sugarcosmetics.com/Login_bg.svg); 8 | height: 900px; 9 | width: 655px; 10 | background-position: 50%; 11 | background-size: cover; 12 | padding: 25px; 13 | } 14 | 15 | #loginbox { 16 | width: 640px; 17 | height: 440px; 18 | background-color: white; 19 | margin-top: 25px; 20 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 21 | } 22 | .boxtop { 23 | display: flex; 24 | justify-content: flex-start; 25 | gap: 15px; 26 | margin-left: 30px; 27 | } 28 | .logmob { 29 | margin-top: 26px; 30 | } 31 | .loginput { 32 | margin-left: 30px; 33 | /* border: 1px solid lightseagreen; */ 34 | width: 565px; 35 | height: 45px; 36 | display: flex; 37 | justify-content: space-evenly; 38 | margin-top: 20px; 39 | align-items: center; 40 | } 41 | .loginput1 { 42 | width: 28px; 43 | text-align: center; 44 | border-top: none; 45 | border-right: none; 46 | border-bottom: 1px solid rgb(160, 160, 163); 47 | border-left: none; 48 | border-image: initial; 49 | margin: 3px; 50 | font-weight: 600; 51 | font-size: 24px; 52 | outline: none; 53 | } 54 | #requestptp { 55 | padding: 15px; 56 | border: none; 57 | cursor: pointer; 58 | } 59 | .loginsign { 60 | font-size: 24px; 61 | } 62 | .contrycode { 63 | font-size: calc(1.275rem + 0.3vw); 64 | text-align: center; 65 | } 66 | .hrline { 67 | border: 0.3px solid gray; 68 | position: relative; 69 | margin-top: 80px; 70 | width: 95%; 71 | margin-left: 10px; 72 | } 73 | .enterotp { 74 | width: 25px; 75 | } 76 | #verify { 77 | color: #fff; 78 | width: 180px; 79 | margin-left: 3px; 80 | margin-top: 20px; 81 | font-size: 14px; 82 | border: none; 83 | padding: 10px; 84 | background-color: #fdaac9; 85 | cursor: pointer; 86 | } 87 | #otpsection { 88 | margin-left: 30px; 89 | } 90 | .enterotp { 91 | width: 30px; 92 | height: 30px; 93 | } 94 | .whats { 95 | display: flex; 96 | align-items: center; 97 | position: relative; 98 | margin-top: 10px; 99 | } 100 | #logcontent { 101 | margin-top: 25px; 102 | /* border: 1px solid hotpink; */ 103 | width: 100%; 104 | height: 300px; 105 | } 106 | .logp { 107 | margin: auto; 108 | /* border: 1px solid darkblue; */ 109 | width: 600px; 110 | font-size: 15px; 111 | padding: 25px; 112 | font-weight: 600; 113 | } 114 | .logp p { 115 | margin-bottom: 2px !important; 116 | } 117 | #smll { 118 | display: flex; 119 | justify-content: center; 120 | } 121 | #headlog { 122 | font-size: 24px; 123 | color: white; 124 | font-weight: 800; 125 | cursor: pointer; 126 | } 127 | #close { 128 | color: white; 129 | cursor: pointer; 130 | } 131 | 132 | 133 | /* information page */ 134 | 135 | #fbicon{ 136 | display: flex; 137 | gap: 5px; 138 | margin-left: 30px; 139 | } 140 | 141 | .infohrline{ 142 | border: 0.3px solid gray; 143 | position: relative; 144 | margin-top: 8px; 145 | width: 95%; 146 | margin-left: 10px; 147 | } 148 | #infoinput{ 149 | display: flex; 150 | gap: 5px; 151 | } 152 | 153 | .infoname{ 154 | margin-left: 30px; 155 | 156 | height: 35px; 157 | width: 180px 158 | } 159 | .infoname input{ 160 | border: none; 161 | background-color:#f5f5f5; 162 | width: 100%; 163 | height: 100%; 164 | } 165 | #infoemail{ 166 | margin-left: 30px; 167 | height: 35px; 168 | width: 366px; 169 | 170 | margin-top: 10px; 171 | } 172 | 173 | #infoemail input{ 174 | border: none; 175 | width: 100%; 176 | height: 100%; 177 | background-color:#f5f5f5; 178 | 179 | } 180 | #savebtn{ 181 | cursor: pointer; 182 | margin-left: 30px; 183 | height: 35px; 184 | width: 366px; 185 | background-color: #fdaac9; 186 | display: flex; 187 | justify-content: center; 188 | align-items: center; 189 | margin-top: 10px; 190 | } 191 | .detail{ 192 | margin-left: 30px; 193 | } -------------------------------------------------------------------------------- /Scripts/common.js: -------------------------------------------------------------------------------- 1 | import {navbar,fotter} from "../Components/navbar.js"; 2 | 3 | 4 | let ProducData = JSON.parse(localStorage.getItem("cartItems"))||[]; 5 | 6 | 7 | document.getElementById("navbar").innerHTML = navbar(ProducData.length); 8 | 9 | console.log(ProducData.length) 10 | if(ProducData.length>0){ 11 | let cart_count = document.getElementById("counter"); 12 | cart_count.style.display = "block" 13 | } 14 | 15 | 16 | document.getElementById("footer").innerHTML = fotter() 17 | import {signinpage,infopage} from "../Components/signinpage.js" 18 | document.getElementById("signappend").innerHTML = signinpage(); 19 | let info = infopage(); 20 | 21 | let navlogin = document.getElementById("navlogin"); 22 | 23 | navlogin.addEventListener("click",()=>{ 24 | let login = document.getElementById("signappend"); 25 | login.style.display = "block"; 26 | login.style.overflowY 27 | 28 | 29 | }) 30 | 31 | let close = document.getElementById("close"); 32 | close.addEventListener("click",()=>{ 33 | let login = document.getElementById("signappend"); 34 | login.style.transform="translateX(710px)"; 35 | login.style.transition="2s"; 36 | }) 37 | 38 | $(".enterotp").keyup(function () { 39 | if (this.value.length == this.maxLength) { 40 | $(this).next('.enterotp').focus(); 41 | } 42 | }); 43 | $(".loginput1").keyup(function () { 44 | if (this.value.length == this.maxLength) { 45 | $(this).next('.loginput1').focus(); 46 | } 47 | }); 48 | 49 | let reqotp = document.getElementById("requestptp"); 50 | 51 | reqotp.addEventListener("click",()=>{ 52 | setTimeout(()=>{ 53 | alert("5578 is Your OTP to login to Your SUGAR App.") 54 | },2000) 55 | }) 56 | 57 | let varifyotp = document.getElementById("verify"); 58 | 59 | varifyotp.addEventListener("click",()=>{ 60 | let otp1 = document.querySelector(".enterotp1").value; 61 | let otp2 = document.querySelector(".enterotp2").value; 62 | let otp3 = document.querySelector(".enterotp3").value; 63 | let otp4 = document.querySelector(".enterotp4").value; 64 | let otp = otp1+otp2+otp3+otp4; 65 | console.log(otp) 66 | let wrong = document.getElementById("incorrect"); 67 | if(otp!="5578" && wrong.length!==0){ 68 | wrong.innerText = "Incorrect OTP! Please try again." 69 | wrong.style.color = "red" 70 | 71 | } 72 | else{ 73 | 74 | document.getElementById("loginbox").innerHTML=info; 75 | userName(); 76 | } 77 | }) 78 | var obj = JSON.parse(localStorage.getItem("userDetails"))||{}; 79 | function userName(){ 80 | let savebtn = document.getElementById("savebtn"); 81 | savebtn.addEventListener("click",()=>{ 82 | let username = document.getElementById("username").value; 83 | let lastname = document.getElementById("userlastname").value; 84 | obj = {username,lastname}; 85 | localStorage.setItem("userDetails",JSON.stringify(obj)); 86 | window.location.href = "index.html" 87 | 88 | }) 89 | } 90 | localStorage.setItem("userDetails",JSON.stringify(obj)); 91 | 92 | let userInfo = JSON.parse(localStorage.getItem("userDetails")); 93 | //console.log("obj",Object.keys(userInfo).length) 94 | if(Object.keys(userInfo).length>0){ 95 | let changename = document.getElementById("changename"); 96 | changename.innerText = "Hi,"+userInfo.username+" "+userInfo.lastname+" " ; 97 | let changebox = document.getElementById("navlogin"); 98 | 99 | changebox.style.backgroundColor = "lightgrey"; 100 | changebox.style.height = "30px"; 101 | changebox.style.padding = "5px"; 102 | } 103 | // search functionallity 104 | 105 | let search = document.getElementById("nav_btn"); 106 | search.addEventListener("click",()=>{ 107 | let searchData = document.getElementById("search").value; 108 | console.log(searchData) 109 | if(searchData=="skincare"){ 110 | window.location.href = "skincare.html" 111 | } 112 | if(searchData=="brush"){ 113 | window.location.href = "Brush.html" 114 | } 115 | if(searchData=="eyebrush"){ 116 | window.location.href = "eyebrush.html" 117 | } 118 | if(searchData=="facebrush"){ 119 | window.location.href = "facebrush.html" 120 | } 121 | if(searchData=="lipstick"){ 122 | window.location.href = "lips.html" 123 | } 124 | if(searchData=="eye"){ 125 | window.location.href = "eye.html" 126 | } 127 | 128 | }) -------------------------------------------------------------------------------- /Scripts/eyebrush.js: -------------------------------------------------------------------------------- 1 | let eyeBrush = [ 2 | 3 | { 4 | image_link: 5 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-14_1.jpg?v=1627659982", 6 | name: "BLEND TREND EYESHADOW BRUSH - 043 ROUND Xl", 7 | price: 399, 8 | rating: "4.8(414)", 9 | strike: '', 10 | }, 11 | 12 | { 13 | image_link: 14 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-3-min.jpg?v=1627573657", 15 | name: "Blend Trend Eyeshadow Brush - 042…", 16 | price: 499, 17 | rating: "4.8(142)", 18 | strike: '', 19 | }, 20 | 21 | { 22 | image_link: 23 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-2-min.jpg?v=1627573652", 24 | name: "Blend Trend Eyeshadow Brush - 041…", 25 | price: 399, 26 | rating: "4.5(121)", 27 | strike: '', 28 | }, 29 | 30 | { 31 | image_link: 32 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-5-min.jpg?v=1627573639", 33 | name: "Blend Trend Dual Eyeshadow Brush…", 34 | price: 599, 35 | rating: "4.6(124)", 36 | strike: '', 37 | }, 38 | 39 | { 40 | image_link: 41 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-13.jpg?v=1627659977", 42 | name: "Blend Trend Dual Eyeshadow Brush…", 43 | price: 599, 44 | rating: "4.8(201)", 45 | strike: '', 46 | }, 47 | ]; 48 | 49 | localStorage.setItem("cart", JSON.stringify(eyeBrush)); 50 | eyeBrush.map(function (elem) { 51 | 52 | var box = document.createElement("div"); 53 | var top = document.createElement("div"); 54 | var bottom = document.createElement("div"); 55 | var rating_wrapper = document.createElement("div"); 56 | var price_wrapper = document.createElement("div"); 57 | 58 | var shade = document.createElement("p"); 59 | shade.textContent = elem.shade; 60 | 61 | var img_shade = document.createElement("img"); 62 | img_shade.src = elem.shade_image; 63 | 64 | var img = document.createElement("img"); 65 | img.src = elem.image_link; 66 | img.classList.add("main-img"); 67 | 68 | var name = document.createElement("p"); 69 | name.textContent = elem.name; 70 | 71 | var price = document.createElement("span"); 72 | price.innerText = "Rs." + elem.price; 73 | 74 | var strike = document.createElement("s"); 75 | strike.innerText = elem.strike; 76 | 77 | var rating = document.createElement("span"); 78 | rating.innerText = elem.rating; 79 | 80 | var star_icon = document.createElement("span"); 81 | star_icon.innerHTML += ''; 82 | 83 | 84 | var heart_icon = document.createElement("span"); 85 | heart_icon.innerHTML += '' 86 | heart_icon.addEventListener("click", function () { 87 | wishList(elem); 88 | }); 89 | 90 | name.classList.add("name"); 91 | box.classList.add("box"); 92 | top.classList.add("top"); 93 | bottom.classList.add("bottom-block"); 94 | rating_wrapper.classList.add("rating-wrapper"); 95 | price_wrapper.classList.add("price-wrapper"); 96 | 97 | var btn = document.createElement("button"); 98 | btn.innerText = "ADD TO CART"; 99 | btn.addEventListener("click", function () { 100 | addToCart(elem); 101 | }); 102 | 103 | box.addEventListener("click",()=>{ 104 | ProductPage(elem); 105 | window.location.href = "product.html" 106 | }) 107 | 108 | top.append(shade, img_shade); 109 | price_wrapper.append(strike, price) 110 | rating_wrapper.append(star_icon, rating); 111 | bottom.append(heart_icon, btn); 112 | box.append(img, name, price_wrapper, rating_wrapper, bottom); 113 | 114 | document.querySelector(".container").append(box); 115 | }); 116 | 117 | var cartArray= JSON.parse(localStorage.getItem("cartItem")) || []; 118 | function addToCart(elem){ 119 | cartArray.push(elem); 120 | alert("item added to cart") 121 | 122 | localStorage.setItem("cartItem",JSON.stringify(cartArray)) 123 | } 124 | 125 | var cartwish= JSON.parse(localStorage.getItem("wishlistItem")) || []; 126 | function wishList(elem){ 127 | cartwish.push(elem); 128 | alert("item added to wishlist") 129 | 130 | localStorage.setItem("wishlistItem",JSON.stringify(cartwish)) 131 | } 132 | 133 | 134 | function ProductPage(elem){ 135 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 136 | } -------------------------------------------------------------------------------- /HTML/trending.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | SUGAR Cosmetics - Trending 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 | 22 |
23 |
24 |
25 |
  /  27 | Trending
28 | 29 |
30 |
31 |   Filter 33 |
34 |
35 |
Smart Filters
36 |
Reset all
37 |
38 |
39 |
40 |
Product Type
41 |
Category
42 |
43 |
44 |
45 |

Bronzer

46 |

Blush

47 |

Eyebrow

48 |

Foundation

49 |

Eyeliner

50 |

Lipstick

51 |

Eyeshadow

52 |
53 |
54 |

Liquid

55 |

Palette

56 |

Lipstick

57 |
58 |
59 |
Apply Filter(s)
60 |
61 |
62 |
63 | 64 |   65 | Sort 66 |
67 |
68 |
Select Sorting
69 |
Clear all
70 |
71 |
72 |
73 |
Relevent
74 |
Price - High to Low
75 |
Price - Low to High
76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |

Trending

84 |

-

85 |

0 items

86 |
87 |
88 |
89 |
90 |
91 | 92 |
93 | 94 |
95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /Scripts/facebrush.js: -------------------------------------------------------------------------------- 1 | let faceBrush = [ 2 | 3 | { 4 | image_link: 5 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-12-min.jpg?v=1627573647", 6 | name: "Blend Trend Dual Face Brush - 075 Powder + … ", 7 | price: 599, 8 | rating: "4.5(141)", 9 | strike: '', 10 | }, 11 | 12 | { 13 | image_link: 14 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-003Contour.jpg?v=1627659996", 15 | name: "Blend Trend Face Brush - 003 Cont…", 16 | price: 399, 17 | rating: "4.5(121)", 18 | strike: '', 19 | }, 20 | 21 | { 22 | image_link: 23 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFoundationBrush-052Kabuki.jpg?v=1627573664", 24 | name: "Blend Trend Foundation Brush - 052…", 25 | price: 399, 26 | rating: "4.8(41)", 27 | strike: '', 28 | }, 29 | 30 | { 31 | image_link: 32 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-007Powder.jpg?v=1627660008", 33 | name: "Blend Trend Face Brush - 007 Powder", 34 | price: 399, 35 | rating: "4.5(421)", 36 | strike: '', 37 | }, 38 | 39 | { 40 | image_link: 41 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-006Highlighter.jpg?v=1627660002", 42 | name: "Blend Trend Face Brush - 006 Highl…", 43 | price: 399, 44 | rating: "4.8(197)", 45 | strike: '', 46 | }, 47 | 48 | { 49 | image_link: 50 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-001Blush.jpg?v=1627659984", 51 | name: "Blend Trend Face Brush - 001 Blush", 52 | price: 399, 53 | rating: "4.9(137)", 54 | strike: '', 55 | }, 56 | 57 | { 58 | image_link: 59 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFoundationBrush-051Flat.jpg?v=1627573670", 60 | name: "Blend Trend Foundation Brush - 051…", 61 | price: 399, 62 | rating: "4.6(137)", 63 | strike: '', 64 | }, 65 | 66 | ]; 67 | 68 | localStorage.setItem("cart", JSON.stringify(faceBrush)); 69 | faceBrush.map(function (elem) { 70 | 71 | var box = document.createElement("div"); 72 | var top = document.createElement("div"); 73 | var bottom = document.createElement("div"); 74 | var rating_wrapper = document.createElement("div"); 75 | var price_wrapper = document.createElement("div"); 76 | 77 | var shade = document.createElement("p"); 78 | shade.textContent = elem.shade; 79 | 80 | var img_shade = document.createElement("img"); 81 | img_shade.src = elem.shade_image; 82 | 83 | var img = document.createElement("img"); 84 | img.src = elem.image_link; 85 | img.classList.add("main-img"); 86 | 87 | var name = document.createElement("p"); 88 | name.textContent = elem.name; 89 | 90 | var price = document.createElement("span"); 91 | price.innerText = "Rs." + elem.price; 92 | 93 | var strike = document.createElement("s"); 94 | strike.innerText = elem.strike; 95 | 96 | var rating = document.createElement("span"); 97 | rating.innerText = elem.rating; 98 | 99 | var star_icon = document.createElement("span"); 100 | star_icon.innerHTML += '' 101 | 102 | var heart_icon = document.createElement("span"); 103 | heart_icon.innerHTML += '' 104 | heart_icon.addEventListener("click", function () { 105 | wishList(elem); 106 | }); 107 | 108 | name.classList.add("name"); 109 | box.classList.add("box"); 110 | top.classList.add("top"); 111 | bottom.classList.add("bottom-block"); 112 | rating_wrapper.classList.add("rating-wrapper"); 113 | price_wrapper.classList.add("price-wrapper"); 114 | 115 | var btn = document.createElement("button"); 116 | btn.innerText = "ADD TO CART"; 117 | btn.addEventListener("click", function () { 118 | addToCart(elem); 119 | }); 120 | 121 | box.addEventListener("click",()=>{ 122 | ProductPage(elem); 123 | window.location.href = "product.html" 124 | }) 125 | 126 | top.append(shade, img_shade); 127 | price_wrapper.append(strike, price) 128 | rating_wrapper.append(star_icon, rating); 129 | bottom.append(heart_icon, btn); 130 | box.append(img, name, price_wrapper, rating_wrapper, bottom); 131 | 132 | document.querySelector(".container").append(box); 133 | }); 134 | 135 | var cartArray= JSON.parse(localStorage.getItem("cartItem")) || []; 136 | function addToCart(elem){ 137 | cartArray.push(elem); 138 | alert("item added to cart") 139 | 140 | localStorage.setItem("cartItem",JSON.stringify(cartArray)) 141 | } 142 | 143 | var cartwish= JSON.parse(localStorage.getItem("wishlistItem")) || []; 144 | function wishList(elem){ 145 | cartwish.push(elem); 146 | alert("item added to wishlist") 147 | 148 | localStorage.setItem("wishlistItem",JSON.stringify(cartwish)) 149 | } 150 | 151 | function ProductPage(elem){ 152 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 153 | } -------------------------------------------------------------------------------- /HTML/product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |

/ 27 | Blend trend makeup brush 28 | / 29 | Eyes brushes 30 | / 31 | Blend trend eyeshadow brush 043 round xl

32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 | 40 |
41 | 42 |
43 |

44 |

45 |

46 | 47 |

Save to wishlist

48 |
49 | 50 |
51 |
52 | 55 | 56 |
57 |

Available Offers!!

58 |

– Get Rs. 1000 Off on a spend of Rs. 2499 59 | Know More

60 |

– FREE Blend The Rules Eyeshadow Palette on a spend of Rs.1199 61 | Know More

62 |

– Free Complimentary Products Worth Rs.599 63 | 64 | Know More

65 | 66 | 67 |
68 | 69 | 70 | 71 | 72 |
73 | 74 |

Perfect for eyeshadow application and blending, SUGAR Blend Trend Eyeshadow Brush Round XL 043 softens harsh lines and applies the eye shadow transition colour with ease. This dome shaped, fluffy eye shadow brush with 100% cruelty-free bristles picks up powder or cream shadow with ease and rounded brush shape expertly blends and diffuses shadow into the crease. This brush can also be used contouring, shading and highlighting and is perfect for creating a smokey eye look.

75 | 76 |

About the Range:

77 | 78 |

SUGAR’s professional range of Blend Trend Makeup Brushes is designed for precision results and crafted with the best quality, velvety-soft synthetic bristles. From applying foundation to eyeshadow and cream blushes to powder makeup products, these exquisite makeup brushes do it all with finesse and help define your features beautifully, build coverage, accentuate beauty looks with ease whilst taking your makeup artistry to the next level.

79 | 80 |

Features:

81 | 82 | 89 |
90 |
91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /Scripts/face.js: -------------------------------------------------------------------------------- 1 | let url =`http://makeup-api.herokuapp.com/api/v1/products.json?brand=almay&product_category%20%20Cream`; 2 | 3 | fetch(url).then(function(res){ 4 | return res.json(); 5 | }).then(function(res){ 6 | console.log(res); 7 | append(res); 8 | }).catch(function(err){ 9 | console.log(err); 10 | }) 11 | 12 | var container=document.getElementById("container"); 13 | 14 | function append(data){ 15 | container.innerHTML=null; 16 | data.forEach(function(el){ 17 | 18 | let div=document.createElement("div"); 19 | div.setAttribute("id","box") 20 | 21 | 22 | 23 | let div2 =document.createElement("div"); 24 | 25 | 26 | let img =document.createElement("img"); 27 | img.src=el.image_link; 28 | img.setAttribute("id","img1") 29 | 30 | let img2=document.createElement("img"); 31 | img2.setAttribute("id","icon") 32 | img2.src="https://in.sugarcosmetics.com/ic_multiple_shades_opt2.png"; 33 | 34 | 35 | 36 | let icon_div=document.createElement("div"); 37 | let span =document.createElement("span") 38 | span.innerText=Math.floor(Math.random()*50); 39 | span.setAttribute("id","rating"); 40 | 41 | icon_div.append(span,img2); 42 | 43 | let name1=document.createElement("h4"); 44 | name1.innerText=el.name; 45 | 46 | let price=document.createElement("p"); 47 | price.innerText=`Rs. ${el.price}`; 48 | price.style="margin-top:-15px;" 49 | 50 | let bot_div=document.createElement("div"); 51 | bot_div.setAttribute("id","bot_div"); 52 | 53 | 54 | let heart=document.createElement("img"); 55 | heart.src="data:image/jpeg;base64,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"; 56 | 57 | let shade=document.createElement("p"); 58 | shade.innerText="Add to Cart"; 59 | shade.addEventListener("click",function(){ 60 | window.location="cart.html"; 61 | let obj ={ 62 | img:el.image_link, 63 | price:el.price, 64 | qty:1 65 | } 66 | var arr =JSON.parse(localStorage.getItem("cartItems")); 67 | arr.push(obj); 68 | localStorage.setItem("cartItems",JSON.stringify(arr)); 69 | }) 70 | 71 | bot_div.append(heart,shade); 72 | 73 | div2.append(img,icon_div) 74 | div2.setAttribute("id","div2"); 75 | 76 | var rating =document.createElement("p"); 77 | if(el.rating==null){ 78 | rating.innerText=`rating: 8`; 79 | } 80 | else{ 81 | rating.innerText=`rating: ${el.rating}`; 82 | } 83 | 84 | div.addEventListener("click",()=>{ 85 | ProductPage(el); 86 | window.location.href = "product.html" 87 | }) 88 | 89 | 90 | div.append(div2,name1,price,rating); 91 | 92 | let demo =document.createElement("div"); 93 | demo.append(div,bot_div); 94 | 95 | container.append(demo); 96 | }) 97 | } 98 | 99 | 100 | function ProductPage(elem){ 101 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 102 | } -------------------------------------------------------------------------------- /Scripts/lips.js: -------------------------------------------------------------------------------- 1 | let url =`http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline&product_type=lipstick`; 2 | 3 | fetch(url).then(function(res){ 4 | return res.json(); 5 | }).then(function(res){ 6 | console.log(res); 7 | append(res); 8 | }).catch(function(err){ 9 | console.log(err); 10 | }) 11 | 12 | var container=document.getElementById("container"); 13 | 14 | function append(data){ 15 | container.innerHTML=null; 16 | data.forEach(function(el){ 17 | 18 | let div=document.createElement("div"); 19 | div.setAttribute("id","box") 20 | 21 | 22 | 23 | let div2 =document.createElement("div"); 24 | 25 | 26 | let img =document.createElement("img"); 27 | img.src=el.image_link; 28 | img.setAttribute("id","img1") 29 | 30 | let img2=document.createElement("img"); 31 | img2.setAttribute("id","icon") 32 | img2.src="https://in.sugarcosmetics.com/ic_multiple_shades_opt2.png"; 33 | 34 | 35 | 36 | let icon_div=document.createElement("div"); 37 | let span =document.createElement("span") 38 | span.innerText=Math.floor(Math.random()*50); 39 | span.setAttribute("id","rating"); 40 | 41 | icon_div.append(span,img2); 42 | 43 | let name1=document.createElement("h4"); 44 | name1.innerText=el.name; 45 | 46 | let price=document.createElement("p"); 47 | price.innerText=`Rs. ${el.price}`; 48 | price.style="margin-top:-15px;" 49 | 50 | let bot_div=document.createElement("div"); 51 | bot_div.setAttribute("id","bot_div"); 52 | 53 | 54 | let heart=document.createElement("img"); 55 | heart.src="data:image/jpeg;base64,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"; 56 | 57 | let shade=document.createElement("p"); 58 | shade.innerText="Add to Cart"; 59 | shade.addEventListener("click",function(){ 60 | window.location="cart.html"; 61 | let obj ={ 62 | img:el.image_link, 63 | price:el.price, 64 | qty:1 65 | } 66 | var arr =JSON.parse(localStorage.getItem("cartItems")); 67 | arr.push(obj); 68 | localStorage.setItem("cartItems",JSON.stringify(arr)); 69 | }) 70 | 71 | 72 | bot_div.append(heart,shade); 73 | 74 | div2.append(img,icon_div) 75 | div2.setAttribute("id","div2"); 76 | 77 | var rating =document.createElement("p"); 78 | if(el.rating==null){ 79 | rating.innerText=`rating: 8`; 80 | } 81 | else{ 82 | rating.innerText=`rating: ${el.rating}`; 83 | } 84 | 85 | div.addEventListener("click",()=>{ 86 | ProductPage(el); 87 | window.location.href = "product.html" 88 | }) 89 | 90 | div.append(div2,name1,price,rating); 91 | 92 | let demo =document.createElement("div"); 93 | demo.append(div,bot_div); 94 | 95 | container.append(demo); 96 | }) 97 | } 98 | 99 | 100 | function ProductPage(elem){ 101 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 102 | } -------------------------------------------------------------------------------- /Scripts/eye.js: -------------------------------------------------------------------------------- 1 | // import {navbar,fotter} from "../Components/navbar.js"; 2 | 3 | // document.getElementById("navbar").innerHTML=navbar(); 4 | // document.getElementById("footer").innerHTML=fotter(); 5 | 6 | 7 | let url =`http://makeup-api.herokuapp.com/api/v1/products.json?brand=covergirl&product_category%20%20Blush&Eye`; 8 | 9 | fetch(url).then(function(res){ 10 | return res.json(); 11 | }).then(function(res){ 12 | //console.log(res); 13 | append(res); 14 | }).catch(function(err){ 15 | console.log(err); 16 | }) 17 | 18 | var container=document.getElementById("container"); 19 | 20 | function append(data){ 21 | container.innerHTML=null; 22 | data.forEach(function(el){ 23 | 24 | let div=document.createElement("div"); 25 | div.setAttribute("id","box") 26 | 27 | 28 | 29 | let div2 =document.createElement("div"); 30 | 31 | 32 | let img =document.createElement("img"); 33 | img.src=el.image_link; 34 | img.setAttribute("id","img1") 35 | 36 | let img2=document.createElement("img"); 37 | img2.setAttribute("id","icon") 38 | img2.src="https://in.sugarcosmetics.com/ic_multiple_shades_opt2.png"; 39 | 40 | 41 | 42 | let icon_div=document.createElement("div"); 43 | let span =document.createElement("span") 44 | span.innerText=Math.floor(Math.random()*50); 45 | span.setAttribute("id","rating"); 46 | 47 | icon_div.append(span,img2); 48 | 49 | let name1=document.createElement("h4"); 50 | name1.innerText=el.name; 51 | 52 | let price=document.createElement("p"); 53 | price.innerText=`Rs. ${el.price}`; 54 | price.style="margin-top:-15px;" 55 | 56 | let bot_div=document.createElement("div"); 57 | bot_div.setAttribute("id","bot_div"); 58 | 59 | 60 | let heart=document.createElement("img"); 61 | heart.src="data:image/jpeg;base64,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"; 62 | 63 | 64 | let shade=document.createElement("p"); 65 | shade.innerText="Add to Cart"; 66 | shade.addEventListener("click",function(){ 67 | window.location="cart.html"; 68 | let obj ={ 69 | img:el.image_link, 70 | price:el.price, 71 | qty:1 72 | } 73 | var arr =JSON.parse(localStorage.getItem("cartItems")); 74 | arr.push(obj); 75 | localStorage.setItem("cartItems",JSON.stringify(arr)); 76 | }) 77 | 78 | 79 | bot_div.append(heart,shade); 80 | 81 | div2.append(img,icon_div) 82 | div2.setAttribute("id","div2"); 83 | 84 | var rating =document.createElement("p"); 85 | if(el.rating==null){ 86 | rating.innerText=`rating: 8`; 87 | } 88 | else{ 89 | rating.innerText=`rating: ${el.rating}`; 90 | } 91 | 92 | div.addEventListener("click",()=>{ 93 | ProductPage(el); 94 | window.location.href = "product.html" 95 | }) 96 | 97 | 98 | div.append(div2,name1,price,rating); 99 | 100 | let demo =document.createElement("div"); 101 | demo.append(div,bot_div); 102 | 103 | container.append(demo); 104 | }) 105 | } 106 | 107 | function ProductPage(ele){ 108 | localStorage.setItem("ProductPage",JSON.stringify(ele)) 109 | } -------------------------------------------------------------------------------- /CSS/cart.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | @font-face { 3 | font-family: myFirstFont; 4 | src:url('./Neutra.otf') format("opentype"); 5 | } 6 | .blog_main{ 7 | margin: 0; 8 | padding: 0; 9 | min-height: 400px; 10 | padding-top: 20px; 11 | background-color: #f5f5f5; 12 | font-family: 'Quicksand', sans-serif; 13 | } 14 | .path-trending{ 15 | margin-left: 20px; 16 | display: flex; 17 | align-items: center; 18 | color: #868686; 19 | font-size: 16px; 20 | } 21 | .path-trending img{ 22 | width: 17px; 23 | } 24 | .cartMainCard{ 25 | width: 97%; 26 | /* height: 400px; */ 27 | margin: auto; 28 | margin-top: 30px; 29 | margin-bottom: 10px; 30 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 31 | border-radius: 20px; 32 | background-color: #fff; 33 | display: none; 34 | justify-content: space-between; 35 | } 36 | .cartOrder_header{ 37 | display: flex; 38 | justify-content: space-between; 39 | margin-right: 15px; 40 | margin-left: 15px; 41 | 42 | } 43 | .cartOrder_header p:last-child{ 44 | text-decoration: underline; 45 | } 46 | .cartOrder{ 47 | width: 50%; 48 | } 49 | .cartPriceOffer{ 50 | width: 50%; 51 | } 52 | .cartPriceOffer_header{ 53 | margin-left: 15px; 54 | } 55 | .cartOrder_cartData{ 56 | margin: 30px; 57 | /* background-color: #868686; */ 58 | /* border: 1px solid black; */ 59 | } 60 | .cartData_card{ 61 | display: flex; 62 | height: 100px; 63 | margin-bottom: 15px; 64 | } 65 | .imgLeftCard{ 66 | width: 60%; 67 | overflow: hidden; 68 | /* border: 1px solid black; */ 69 | display: flex; 70 | } 71 | .imgLeftCard img{ 72 | object-fit: cover; 73 | width: 70px; 74 | height: 100%; 75 | border-radius: 3px; 76 | } 77 | .titleHead_card{ 78 | margin-left: 10px; 79 | margin-top: 20px; 80 | font-family: myFirstFont; 81 | color: #575555; 82 | font-size: 12px; 83 | margin:0; 84 | margin-left: 10px; 85 | } 86 | .card_head_title{ 87 | margin-top: 20px; 88 | 89 | } 90 | .card_head_content{ 91 | margin-top: 8px; 92 | } 93 | .controlRigthCard{ 94 | width: 40%; 95 | /* border: 1px solid black; */ 96 | display: flex; 97 | justify-content: space-between; 98 | align-items: center; 99 | /* font-size: 13px; */ 100 | } 101 | .controlDeletCart{ 102 | cursor: pointer; 103 | font-size: 14px; 104 | color: #6c5656; 105 | } 106 | .controlPlusMinusCart{ 107 | display: flex; 108 | } 109 | .controlMinus,.controlPlus{ 110 | margin:0 10px; 111 | height: 20px; 112 | width: 20px; 113 | background-color: black; 114 | color: #fff; 115 | border-radius: 50%; 116 | text-align: center; 117 | cursor: pointer; 118 | } 119 | .controlAmountCart,.controlValue{ 120 | font-size: 13px; 121 | display: flex; 122 | align-items: center; 123 | justify-content: center; 124 | /* color: #868686; */ 125 | } 126 | .priceContainer{ 127 | border-radius: 7px; 128 | margin-right: 20px; 129 | margin-left: 20px; 130 | background-color: #faf9f9; 131 | border: 1px solid #faf9f9; 132 | margin-bottom: 20px; 133 | 134 | } 135 | .offerDivCart{ 136 | margin: 5px 8px; 137 | display: flex; 138 | justify-content: space-between; 139 | align-items: center; 140 | background-color: #fff; 141 | } 142 | .offerDivCart > div{ 143 | display: flex; 144 | align-items: center; 145 | margin: 8px; 146 | color: red; 147 | } 148 | .offerDivCart > div > img{ 149 | margin-right: 5px; 150 | } 151 | .priceDetailTag{ 152 | margin: 10px 10px; 153 | display: flex; 154 | align-items: center; 155 | } 156 | .priceDetailTag img{ 157 | margin:0 10px; 158 | } 159 | .finalSoppingDetails{ 160 | margin-left: 8px; 161 | margin-right: 8px; 162 | background-color: #fff; 163 | border-radius: 5px; 164 | /* height: 50px; */ 165 | border: 1px solid #fff; 166 | margin-bottom: 30px; 167 | } 168 | .soppingDetails{ 169 | margin: 10px; 170 | font-size: 13px; 171 | max-width: 300px; 172 | display: flex; 173 | justify-content: space-between; 174 | align-items: center; 175 | } 176 | .cartDetailsKey{ 177 | margin-left: 20px; 178 | display: flex; 179 | align-items: center; 180 | } 181 | .cartDetailsKey > img{ 182 | width: 15px; 183 | margin-right: 8px; 184 | } 185 | .includeAllTax{ 186 | margin-left: 45px; 187 | font-size: 11px; 188 | } 189 | .button_delivery_shopping{ 190 | display: flex; 191 | border:1px solid #dee2e6!important; 192 | margin-left: 8px; 193 | margin-right: 8px; 194 | text-align: center; 195 | margin-bottom: 40px; 196 | } 197 | .deliveryInfo_btn{ 198 | background-color: black; 199 | color: #fff; 200 | padding: 10px; 201 | width: 100%; 202 | border-radius: 5px; 203 | cursor: pointer; 204 | } 205 | .continueShopping_btn{ 206 | padding: 10px; 207 | width: 300px; 208 | cursor: pointer; 209 | } 210 | .continueShopping_btn a{ 211 | text-decoration: underline; 212 | } 213 | #num{ 214 | margin-right: 3px; 215 | } 216 | #itemPrice{ 217 | margin-left: 3px; 218 | margin-right: 3px; 219 | } 220 | #itemTotal{ 221 | margin-left: 3px; 222 | } 223 | .emptyCartDiv{ 224 | /* display: flex; */ 225 | /* justify-content: center; */ 226 | /* align-items: center; */ 227 | text-align: center; 228 | height: 400px; 229 | /* border: 1px solid black; */ 230 | } 231 | .emptyCartDiv img{ 232 | margin-top: 30px; 233 | width: 200px; 234 | } 235 | #emptyCartH6{ 236 | font-size: 1rem; 237 | margin-top: 10px; 238 | margin-bottom: 0.5rem; 239 | font-weight: 400; 240 | line-height: 1.2; 241 | color: #868686; 242 | } 243 | .emptyCartDiv button{ 244 | margin-top: 10px; 245 | padding: 10px 55px; 246 | background-color: #ec3f78; 247 | border: 0; 248 | border-radius: 5px; 249 | } 250 | .emptyCartDiv button a{ 251 | font-size: 15px; 252 | text-decoration: none; 253 | color: #fff; 254 | } -------------------------------------------------------------------------------- /HTML/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | SUGAR Cosmetics - Cart 14 | 15 | 16 | 17 |
18 |
  /  20 | Cart 21 |
22 | 23 |
24 |
25 |
26 |

Order Summary

27 |

Cart Total : Rs. 0.00

28 |
29 |
30 | 50 |
51 |
52 |
53 |
54 |

Offers and Price Details

55 |
56 |
57 |
58 |
B2G1
59 |
x
60 |
61 |
Price Details
62 |
63 |
64 |
Cart Sub Total:
65 |
0.00
66 |
67 |
68 |
Shipping Cost:
69 |
0.00
70 |
71 |
72 |
Discount Applied:
73 |
0.00
74 |
75 |
76 |
77 |
Amount Payable:
78 |
Including ₹0.00 in taxes
79 |
80 |
0.00
81 |
82 | 83 |
84 |
85 |
<  Continue Shopping
86 |
Delivery Information
87 |
88 |
89 |
90 |
91 |
92 | 93 |
Hey! It's lonely here.
Your bag seems to have no company.
Why not add some products?
94 | 95 |
96 |
97 | 98 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /Scripts/trending.js: -------------------------------------------------------------------------------- 1 | let countTrendingItem = 0; 2 | 3 | let itemCountTrending = document.querySelector('.item-count'); 4 | itemCountTrending.innerText = `${countTrendingItem} items` 5 | const url = 'https://makeup-api.herokuapp.com/api/v1/products.json?brand=smashbox'; 6 | 7 | let ratingArray = []; 8 | const appendData = (data) => { 9 | 10 | countTrendingItem = data.length 11 | itemCountTrending.innerText = `${countTrendingItem} items` 12 | let containerContent = document.getElementById("container-content"); 13 | containerContent.innerHTML = null; 14 | data.forEach(({image_link,name,price},index) => { 15 | let rx = (Math.random()*3)+2; 16 | let ry = Math.floor(Math.random()*270)+71; 17 | let rz = Math.floor(Math.random()*70)+15; 18 | ratingArray.push([rx.toFixed(1),ry,rz]); 19 | let div = document.createElement('div'); 20 | div.setAttribute('class', 'trending-card'); 21 | div.addEventListener('click', ()=> { 22 | 23 | ProductPage(image_link,name,price,4); 24 | window.location.href = "product.html" 25 | }) 26 | let div_img_top_num = document.createElement('div'); 27 | div_img_top_num.setAttribute('class', 'img-top-num'); 28 | let div_img_top_img = document.createElement('img'); 29 | div_img_top_img.src = 'https://in.sugarcosmetics.com/ic_multiple_shades_opt2.png'; 30 | div_img_top_num.append(`${rz} `,div_img_top_img); 31 | let imgDiv = document.createElement('div'); 32 | imgDiv.setAttribute('class', 'imgDiv'); 33 | let imgDivimg = document.createElement('img'); 34 | imgDivimg.src = image_link; 35 | imgDiv.append(imgDivimg); 36 | let textDiv = document.createElement('div'); 37 | textDiv.setAttribute('class', 'trending-text'); 38 | let textP = document.createElement('p'); 39 | textP.textContent = name; 40 | textDiv.append(textP); 41 | let priceDiv = document.createElement('div'); 42 | priceDiv.setAttribute('class', 'trending-price'); 43 | let priceP = document.createElement('p'); 44 | priceP.textContent = `Rs.${price}`; 45 | priceDiv.append(priceP); 46 | let ratingDiv = document.createElement('div'); 47 | ratingDiv.setAttribute('class', 'trending-rating'); 48 | let ratingimg = document.createElement('img'); 49 | ratingimg.src = 'https://in.sugarcosmetics.com/star_filled.png'; 50 | ratingDiv.append(ratingimg,`${ratingArray[ratingArray.length-1][0]} (${ratingArray[ratingArray.length-1][1]})`); 51 | let fevOuterDiv = document.createElement('div'); 52 | fevOuterDiv.setAttribute('class','trending-fev-card'); 53 | fevOuterDiv.innerHTML = `
SELECT SHADE
`; 54 | div.append(div_img_top_num,imgDiv,textDiv,priceDiv,ratingDiv,fevOuterDiv) 55 | containerContent.append(div); 56 | }); 57 | 58 | } 59 | let urlDataArray = []; 60 | let defaultArray = [] 61 | const fetchData = async () => { 62 | let middleware = document.querySelector('.middleware'); 63 | middleware.style.display = 'flex'; 64 | let res = await fetch(url); 65 | let data = await res.json(); 66 | 67 | //console.log(data); 68 | 69 | console.log(data); 70 | defaultArray.push(data); 71 | urlDataArray.push(data); 72 | middleware.style.display = 'none'; 73 | appendData(data); 74 | } 75 | fetchData(); 76 | 77 | const setDataToLocal = (data,index) => { 78 | let obj = { 79 | data:data, 80 | rating: ratingArray[index], 81 | index:index 82 | } 83 | localStorage.setItem('productData', JSON.stringify(obj)); 84 | } 85 | 86 | document.querySelector('.applyFilter').addEventListener('click', ()=>{ 87 | let filterArr = {}; 88 | let arrF = []; 89 | let xy = document.querySelector('.inputCheck').children; 90 | for(let m = 0; m 0){ 96 | for(let nn = 0; nn { 115 | let xy = document.querySelector('.inputCheck').children; 116 | for(let m = 0; m{ 122 | bblSortHL(urlDataArray[0]); 123 | console.log('high to low') 124 | }) 125 | document.querySelector('#lowToHigh').addEventListener('click', ()=>{ 126 | bblSortLH(urlDataArray[0]); 127 | console.log('low to high') 128 | }) 129 | 130 | function bblSortLH(urlDataArrayy){ 131 | for(var i = 0; i < urlDataArrayy.length; i++){ 132 | for(var j = 0; j < (urlDataArrayy.length-i-1); j++){ 133 | if(+urlDataArrayy[j].price > +urlDataArrayy[j+1].price){ 134 | var temp = urlDataArrayy[j] 135 | urlDataArrayy[j] = urlDataArrayy[j+1]; 136 | urlDataArrayy[j+1] = temp; 137 | } 138 | } 139 | } 140 | appendData(urlDataArrayy); 141 | } 142 | function bblSortHL(urlDataArrayy){ 143 | for(var i = 0; i < urlDataArrayy.length; i++){ 144 | for(var j = 0; j < (urlDataArrayy.length-i-1); j++){ 145 | if(+urlDataArrayy[j].price < +urlDataArrayy[j+1].price){ 146 | var temp = urlDataArrayy[j] 147 | urlDataArrayy[j] = urlDataArrayy[j+1]; 148 | urlDataArrayy[j+1] = temp; 149 | } 150 | } 151 | } 152 | appendData(urlDataArrayy); 153 | } 154 | document.querySelector('.cursorSort').addEventListener('click',()=>{ 155 | fetchData(); 156 | }) -------------------------------------------------------------------------------- /Scripts/makeup.js: -------------------------------------------------------------------------------- 1 | let fetchdata=async(value)=>{ 2 | try{ 3 | const api = `http://makeup-api.herokuapp.com/api/v1/products.json?brand=${value}`; 4 | 5 | let res= await fetch(api); 6 | var data= await res.json(); 7 | var length =data.length; 8 | 9 | 10 | 11 | // this is for sort data 12 | document.getElementById("select2").addEventListener("change",function(){ 13 | console.log(this.value); 14 | 15 | if(this.value==`htl`){ 16 | var Htl =data.sort((a,b)=>{ 17 | return b.price-a.price; 18 | }) 19 | append(Htl); 20 | } 21 | else if(this.value==`lth`){ 22 | var Lth =data.sort((a,b)=>{ 23 | return a.price-b.price; 24 | }) 25 | append(Lth); 26 | } 27 | else if(this.value==`rating`){ 28 | var rating =data.sort((a,b)=>{ 29 | return a.rating-b.rating; 30 | }) 31 | append(rating); 32 | } 33 | else{ 34 | window.location.reload(); 35 | } 36 | 37 | 38 | }) 39 | 40 | document.getElementById("length").innerText=length; 41 | 42 | 43 | append(data) 44 | 45 | console.log(data) 46 | 47 | }catch(err){ 48 | console.log(err); 49 | } 50 | 51 | } 52 | 53 | fetchdata(`maybelline`);//calling fetch 54 | // append data 55 | function append(data){ 56 | container.innerHTML=null; 57 | data.forEach(function(el){ 58 | 59 | let div=document.createElement("div"); 60 | div.setAttribute("id","box") 61 | 62 | 63 | 64 | let div2 =document.createElement("div"); 65 | 66 | 67 | let img =document.createElement("img"); 68 | img.src=el.image_link; 69 | img.setAttribute("id","img1") 70 | img.addEventListener("click",function(){ 71 | window.location="product.html"; 72 | }) 73 | 74 | let img2=document.createElement("img"); 75 | img2.setAttribute("id","icon") 76 | img2.src="https://in.sugarcosmetics.com/ic_multiple_shades_opt2.png"; 77 | 78 | 79 | 80 | let icon_div=document.createElement("div"); 81 | let span =document.createElement("span") 82 | span.innerText=Math.floor(Math.random()*50); 83 | span.setAttribute("id","rating"); 84 | 85 | icon_div.append(span,img2); 86 | 87 | let name1=document.createElement("h4"); 88 | name1.innerText=el.name; 89 | 90 | let price=document.createElement("p"); 91 | price.innerText=`Rs. ${el.price}`; 92 | price.style="margin-top:-15px;" 93 | 94 | let bot_div=document.createElement("div"); 95 | bot_div.setAttribute("id","bot_div"); 96 | 97 | 98 | let heart=document.createElement("img"); 99 | heart.src="data:image/jpeg;base64,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"; 100 | 101 | 102 | let shade=document.createElement("p"); 103 | shade.innerText="Add to Cart"; 104 | shade.addEventListener("click",function(){ 105 | window.location="cart.html"; 106 | let obj ={ 107 | img:el.image_link, 108 | price:el.price, 109 | qty:1 110 | } 111 | var arr =JSON.parse(localStorage.getItem("cartItems")); 112 | arr.push(obj); 113 | localStorage.setItem("cartItems",JSON.stringify(arr)); 114 | }) 115 | 116 | bot_div.append(heart,shade); 117 | 118 | div2.append(img,icon_div) 119 | div2.setAttribute("id","div2"); 120 | 121 | var rating =document.createElement("p"); 122 | if(el.rating==null){ 123 | rating.innerText=`rating: 8`; 124 | } 125 | else{ 126 | rating.innerText=`rating: ${el.rating}`; 127 | } 128 | 129 | div.addEventListener("click",()=>{ 130 | ProductPage(el); 131 | window.location.href = "product.html" 132 | }) 133 | 134 | 135 | div.append(div2,name1,price,rating); 136 | 137 | let demo =document.createElement("div"); 138 | demo.append(div,bot_div); 139 | 140 | container.append(demo); 141 | }) 142 | } 143 | // this is for filter data by brands 144 | document.getElementById("select1").addEventListener("change",function(){ 145 | console.log(this.value) 146 | if(this.value==`none`){ 147 | window.location.reload(); 148 | } 149 | else 150 | fetchdata(this.value); 151 | }) 152 | 153 | 154 | 155 | function ProductPage(elem){ 156 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 157 | } -------------------------------------------------------------------------------- /CSS/trending.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 2 | @font-face { 3 | font-family: myFirstFont; 4 | src:url('./Neutra.otf') format("opentype"); 5 | } 6 | .maincontainerTrending{ 7 | background-color: #f5f5f5; 8 | } 9 | .container-fluid{ 10 | margin-left: 40px; 11 | margin-right: 40px; 12 | background-color: #f5f5f5; 13 | } 14 | .trending-main{ 15 | background-color: #f5f5f5; 16 | font-family: 'Quicksand', sans-serif; 17 | } 18 | .upper-menu{ 19 | padding-top: 20px; 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | } 24 | .path-trending{ 25 | display: flex; 26 | align-items: center; 27 | color: #868686; 28 | font-size: 13px; 29 | } 30 | .path-trending img{ 31 | width: 17px; 32 | } 33 | .filter-trending{ 34 | display: flex; 35 | } 36 | .spn-filter{ 37 | margin-right: 50px; 38 | } 39 | .spn-filter img,.spn-sort img{ 40 | width: 21px; 41 | } 42 | .spn-filter,.spn-sort{ 43 | display: flex; 44 | align-items: center; 45 | color: #868686; 46 | font-size: 14px; 47 | cursor: pointer; 48 | } 49 | .lower-menu{ 50 | margin-top: 0px; 51 | display: flex; 52 | align-items: center; 53 | font-size: 14px; 54 | } 55 | .trending-tag{ 56 | margin-right: 10px; 57 | } 58 | .item-count{ 59 | margin-left: 10px; 60 | color: #868686; 61 | } 62 | #container-content{ 63 | margin-left: 20px; 64 | margin-right: 20px; 65 | padding-bottom: 50px; 66 | display: grid; 67 | margin-left: auto; 68 | margin-right: auto; 69 | grid-template-columns: repeat(4,1fr); 70 | gap: 50px; 71 | max-width: 1300px; 72 | } 73 | .trending-card{ 74 | background-color: #fff; 75 | width: 270px; 76 | position: relative; 77 | /* height: 400px; */ 78 | } 79 | .trending-card:hover{ 80 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 81 | } 82 | .trending-card:hover > .trending-fev-card{ 83 | display: flex; 84 | } 85 | .imgDiv{ 86 | overflow: hidden; 87 | margin: 5px 40px; 88 | height: 240px; 89 | } 90 | .imgDiv img{ 91 | object-fit: cover; 92 | width: 100%; 93 | height: 100%; 94 | 95 | } 96 | .img-top-num{ 97 | text-align: end; 98 | margin-right: 10px; 99 | margin-top: 5px; 100 | font-size: 13px; 101 | } 102 | .img-top-num > img{ 103 | width: 13px; 104 | height: 13px; 105 | } 106 | .trending-text{ 107 | margin: 10px 10px; 108 | font-family: myFirstFont; 109 | text-transform: uppercase; 110 | word-wrap: break-word; 111 | font-weight: 600; 112 | color: gray; 113 | } 114 | .trending-text p{ 115 | font-family: myFirstFont; 116 | } 117 | .trending-text,.trending-price,.trending-rating{ 118 | font-size: 13px; 119 | text-align: center; 120 | margin-top: 8px; 121 | } 122 | .trending-rating{ 123 | display: flex; 124 | justify-content: center; 125 | align-items: center; 126 | height: 18px; 127 | margin-bottom: 37px; 128 | } 129 | .trending-rating img{ 130 | width: 20px; 131 | } 132 | .trending-fev-card{ 133 | margin-top: 10px; 134 | height: 28px; 135 | width: 270px; 136 | background-color: black; 137 | border: 1px solid black; 138 | display: none; 139 | position: absolute; 140 | bottom: 0; 141 | } 142 | .trending-fev-sign{ 143 | display: flex; 144 | justify-content: center; 145 | align-items: center; 146 | width: 23%; 147 | background-color:#fff; 148 | height: 100%; 149 | } 150 | .select-shade-text{ 151 | color: #fff; 152 | font-size: 13px; 153 | display: flex; 154 | justify-content: center; 155 | align-self: center; 156 | width: 100%; 157 | } 158 | 159 | .filter-div-card{ 160 | /* height: 200px; */ 161 | /* width: 600px; */ 162 | /* border: 1px solid black; */ 163 | position: absolute; 164 | display: none; 165 | } 166 | .filterBtnDiv{ 167 | position: relative; 168 | } 169 | 170 | .filterBtnDiv:hover > .filter-div-card{ 171 | display: block; 172 | position: absolute; 173 | background-color: #f9f9f9; 174 | box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%); 175 | z-index: 1; 176 | left: auto!important; 177 | right: 40px!important; 178 | width: 30rem; 179 | } 180 | .filter-div-card-top{ 181 | font-size:13px; 182 | padding: 8px; 183 | display: flex; 184 | justify-content: space-between; 185 | color: gray; 186 | } 187 | .border-top{ 188 | border-top: 1px solid #dee2e6; 189 | } 190 | .filter-div-category{ 191 | margin: 10px; 192 | display: flex; 193 | /* justify-content: space-between; */ 194 | color: #6c757d!important; 195 | font-size: 13px; 196 | text-align: center; 197 | text-decoration: underline; 198 | } 199 | .catOne{ 200 | margin-right: 100px; 201 | /* border: 1px solid black; */ 202 | } 203 | .catOne p,.catTwo p{ 204 | margin-left: 5px; 205 | text-align: start; 206 | font-size: 13px; 207 | color: gray; 208 | } 209 | .filterCat{ 210 | display: flex; 211 | } 212 | .applyFilter{ 213 | background-color: black; 214 | color: #fff; 215 | text-align: center; 216 | font-size: 13px; 217 | padding: 8px; 218 | cursor: pointer; 219 | } 220 | .cursor{ 221 | cursor: pointer; 222 | } 223 | .sort-div-card{ 224 | display: none; 225 | position: absolute; 226 | } 227 | .sortBtnDiv{ 228 | position: relative; 229 | } 230 | .sortBtnDiv:hover .sort-div-card{ 231 | display: block; 232 | position: absolute; 233 | background-color: #f9f9f9; 234 | box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%); 235 | z-index: 1; 236 | left: auto!important; 237 | right: 0; 238 | width: 15rem; 239 | } 240 | .sort-div-card-top{ 241 | font-size:13px; 242 | padding: 8px; 243 | display: flex; 244 | justify-content: space-between; 245 | color: gray; 246 | } 247 | .border-top{ 248 | border-top: 1px solid #dee2e6; 249 | } 250 | .sort-div-category{ 251 | color: #6c757d!important; 252 | font-size: 13px; 253 | } 254 | .catOneSort p,.catTwoSort p{ 255 | margin-left: 5px; 256 | text-align: start; 257 | font-size: 13px; 258 | color: gray; 259 | } 260 | .sortOne{ 261 | padding: 10px; 262 | font-size: 13px; 263 | cursor: pointer; 264 | } 265 | .sortOne:hover{ 266 | background-color: #efecec; 267 | } 268 | .sortSelected{ 269 | background-color: black; 270 | color: #fff; 271 | } 272 | .sortSelected:hover{ 273 | background-color: black; 274 | color: #fff; 275 | } 276 | .cursorSort{ 277 | cursor: pointer; 278 | } 279 | .middleware{ 280 | z-index: 100; 281 | height: 100vh; 282 | width: 100%; 283 | position:fixed; 284 | background-color: rgba(0, 0, 0, 0.24); 285 | display: none; 286 | justify-content: center; 287 | align-items: center; 288 | 289 | } 290 | .middleware i{ 291 | font-size: 7rem; 292 | color: #fff; 293 | animation: rotation 2s infinite linear; 294 | } 295 | .mainABC{ 296 | position: relative; 297 | } 298 | @keyframes rotation { 299 | from { 300 | transform: rotate(0deg); 301 | } 302 | to { 303 | transform: rotate(359deg); 304 | } 305 | } -------------------------------------------------------------------------------- /Scripts/Brush.js: -------------------------------------------------------------------------------- 1 | let BrushesData = [ 2 | { 3 | image_link: 4 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-14_1.jpg?v=1627659982", 5 | name: "BLEND TREND EYESHADOW BRUSH - 043 ROUND Xl", 6 | price: 399, 7 | rating: "4.8(414)", 8 | strike: '', 9 | }, 10 | 11 | { 12 | image_link: 13 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-12-min.jpg?v=1627573647", 14 | name: "Blend Trend Dual Face Brush - 075 Powder + … ", 15 | price: 599, 16 | rating: "4.5(141)", 17 | strike: '', 18 | }, 19 | 20 | { 21 | image_link: 22 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-003Contour.jpg?v=1627659996", 23 | name: "Blend Trend Face Brush - 003 Cont…", 24 | price: 399, 25 | rating: "4.5(121)", 26 | strike: '', 27 | }, 28 | 29 | { 30 | image_link: 31 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFoundationBrush-052Kabuki.jpg?v=1627573664", 32 | name: "Blend Trend Foundation Brush - 052…", 33 | price: 399, 34 | rating: "4.8(41)", 35 | strike: '', 36 | }, 37 | 38 | { 39 | image_link: 40 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-3-min.jpg?v=1627573657", 41 | name: "Blend Trend Eyeshadow Brush - 042…", 42 | price: 499, 43 | rating: "4.8(142)", 44 | strike: '', 45 | }, 46 | 47 | { 48 | image_link: 49 | "https://cdn.shopify.com/s/files/1/0906/2558/products/1_1.jpg?v=1630683833", 50 | name: "Blend Trend Eyeshadow Brush - 042… ", 51 | price: 649, 52 | rating: "4.7(54)", 53 | strike: 'RS.799', 54 | }, 55 | 56 | { 57 | image_link: 58 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-007Powder.jpg?v=1627660008", 59 | name: "Blend Trend Eyeshadow Brush - 042… ", 60 | price: 399, 61 | rating: "4.5(421)", 62 | strike: '', 63 | }, 64 | 65 | { 66 | image_link: 67 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-006Highlighter.jpg?v=1627660002", 68 | name: "Blend Trend Face Brush - 006 Highl…", 69 | price: 399, 70 | rating: "4.8(197)", 71 | strike: '', 72 | }, 73 | 74 | { 75 | image_link: 76 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-001Blush.jpg?v=1627659984", 77 | name: "Blend Trend Face Brush - 001 Blush", 78 | price: 399, 79 | rating: "4.9(137)", 80 | strike: '', 81 | }, 82 | 83 | { 84 | image_link: 85 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-2-min.jpg?v=1627573652", 86 | name: "Blend Trend Eyeshadow Brush - 041…", 87 | price: 399, 88 | rating: "4.5(121)", 89 | strike: '', 90 | }, 91 | 92 | { 93 | image_link: 94 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-5-min.jpg?v=1627573639", 95 | name: "Blend Trend Dual Eyeshadow Brush…", 96 | price: 599, 97 | rating: "4.6(124)", 98 | strike: '', 99 | }, 100 | 101 | { 102 | image_link: 103 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Blend-Trend-WBG-images-13.jpg?v=1627659977", 104 | name: "Blend Trend Dual Eyeshadow Brush…", 105 | price: 599, 106 | rating: "4.8(201)", 107 | strike: '', 108 | }, 109 | 110 | { 111 | image_link: 112 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFoundationBrush-051Flat.jpg?v=1627573670", 113 | name: "Blend Trend Foundation Brush - 051…", 114 | price: 399, 115 | rating: "4.6(137)", 116 | strike: '', 117 | }, 118 | 119 | { 120 | image_link: 121 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BlendTrendFaceBrush-002Concealer.jpg?v=1627659990", 122 | name: "Blend Trend Face Brush - 002 Conc… ", 123 | price: 399, 124 | rating: "4.8(27)", 125 | strike: '', 126 | }, 127 | 128 | { 129 | image_link: 130 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BeginnersEssentialsCombo1-WBGimages.jpg?v=1630683801", 131 | name: "Beginners Essential Combo 1", 132 | price: 999, 133 | rating: "4.5(421)", 134 | strike: 'RS.1199', 135 | }, 136 | 137 | { 138 | image_link: 139 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BeginnersEssentialsCombo2-WBGimages.jpg?v=1630683812", 140 | name: "Beginners Essential Combo 2", 141 | price: 799, 142 | rating: "4.5(421)", 143 | strike: 'RS.999', 144 | }, 145 | 146 | { 147 | image_link: 148 | "https://cdn.shopify.com/s/files/1/0906/2558/products/BeginnersEssentialsCombo3-WBGimages.jpg?v=1630683820", 149 | name: "Face Essentials Combo", 150 | price: 1499, 151 | rating: "4.5(421)", 152 | strike: 'RS.1799', 153 | }, 154 | 155 | ]; 156 | 157 | 158 | localStorage.setItem("cart", JSON.stringify(BrushesData)); 159 | 160 | BrushesData.map(function (elem) { 161 | 162 | var box = document.createElement("div"); 163 | var top = document.createElement("div"); 164 | var bottom = document.createElement("div"); 165 | var rating_wrapper = document.createElement("div"); 166 | var price_wrapper = document.createElement("div"); 167 | 168 | var shade = document.createElement("p"); 169 | shade.textContent = elem.shade; 170 | 171 | var img_shade = document.createElement("img"); 172 | img_shade.src = elem.shade_image; 173 | 174 | var img = document.createElement("img"); 175 | img.src = elem.image_link; 176 | img.classList.add("main-img"); 177 | 178 | var name = document.createElement("p"); 179 | name.textContent = elem.name; 180 | 181 | var price = document.createElement("span"); 182 | price.innerText = "Rs." + elem.price; 183 | 184 | var strike = document.createElement("s"); 185 | strike.innerText = elem.strike; 186 | 187 | var rating = document.createElement("span"); 188 | rating.innerText = elem.rating; 189 | 190 | var star_icon = document.createElement("span"); 191 | star_icon.innerHTML += '' 192 | 193 | var heart_icon = document.createElement("span"); 194 | heart_icon.innerHTML += '' 195 | 196 | heart_icon.addEventListener("click", function () { 197 | wishList(elem); 198 | }); 199 | 200 | name.classList.add("name"); 201 | box.classList.add("box"); 202 | top.classList.add("top"); 203 | bottom.classList.add("bottom-block"); 204 | rating_wrapper.classList.add("rating-wrapper"); 205 | price_wrapper.classList.add("price-wrapper"); 206 | 207 | var btn = document.createElement("button"); 208 | btn.innerText = "ADD TO CART"; 209 | btn.addEventListener("click", function () { 210 | addToCart(elem); 211 | }); 212 | box.addEventListener("click",()=>{ 213 | ProductPage(elem); 214 | window.location.href = "product.html" 215 | }) 216 | top.append(shade, img_shade); 217 | price_wrapper.append(strike, price) 218 | rating_wrapper.append(star_icon, rating); 219 | bottom.append(heart_icon, btn); 220 | box.append(img, name, price_wrapper, rating_wrapper, bottom); 221 | 222 | document.querySelector(".container").append(box); 223 | }); 224 | 225 | var cartArray= JSON.parse(localStorage.getItem("cartItem")) || []; 226 | function addToCart(elem){ 227 | cartArray.push(elem); 228 | 229 | alert("item added to cart") 230 | 231 | localStorage.setItem("cartItem",JSON.stringify(cartArray)) 232 | } 233 | 234 | var cartwish= JSON.parse(localStorage.getItem("wishlistItem")) || []; 235 | function wishList(elem){ 236 | cartwish.push(elem); 237 | alert("item added to wishlist") 238 | 239 | localStorage.setItem("wishlistItem",JSON.stringify(cartwish)) 240 | } 241 | 242 | function ProductPage(elem){ 243 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 244 | } -------------------------------------------------------------------------------- /Components/navbar.js: -------------------------------------------------------------------------------- 1 | let navbar = (abc)=>{ 2 | return `
3 | 67 |
68 | ` 118 | } 119 | 120 | let fotter = ()=>{ 121 | return `
122 | 129 |
130 | 168 |
169 | 177 |
178 |
179 |
180 |
181 | 182 |
183 |
184 |
Tap into a better shopping experience.
185 |
186 | 191 |
192 |
193 | 198 |
199 |
200 |
201 |

INFORMATION

202 |
203 |
Contact Us
204 |
Terms & Conditions
205 |
Returns
206 |
FAQs
207 |
About Us
208 |
209 |

GET IN TOUCH

210 |
211 |
212 |
213 | 217 |

Call us at

218 |
219 |

1800-209-9933

220 |

Monday to Friday : 9 AM to 7 PM

221 |
222 |
223 |

Support

224 |

hello@sugarcosmetics.com

225 |
226 |
227 |

WORK WITH US

228 |

careers@sugarcosmetics.com

229 |
230 |
231 |

PRESS & MEDIA

232 |

pr@sugarcosmetics.com

233 |
234 |
235 |

INFLUENCER COLLAB

236 |

JOIN US

237 |
238 |
239 |
240 |

Code Written By @ Uttam Mane

241 |
` 242 | } 243 | export {navbar,fotter} -------------------------------------------------------------------------------- /CSS/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100&family=Inter:wght@200;700&family=Nunito+Sans:wght@200&family=Open+Sans:wght@300;400&family=Poppins:wght@200;300;500&family=Quicksand:wght@300&family=Ubuntu:wght@500&display=swap'); 2 | *{ 3 | font-family:Quicksand ; 4 | } 5 | .middle_part{ 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | .top_slide_bar_div,.middle_slide_bar_div{ 11 | 12 | width: 1263px; 13 | height: 302px; 14 | margin: auto; 15 | position: relative; 16 | cursor: pointer; 17 | overflow: hidden; 18 | box-sizing: border-box; 19 | } 20 | .sliding_window{ 21 | 22 | width: 1263px; 23 | height: 100%; 24 | margin: auto; 25 | display: flex; 26 | overflow: visible; 27 | box-sizing: border-box; 28 | } 29 | .top_img{ 30 | width: 1263px; 31 | height: 100%; 32 | overflow: visible; 33 | box-sizing: border-box; 34 | } 35 | .content:hover .abs{ 36 | visibility: visible; 37 | 38 | } 39 | .content{ 40 | position: relative; 41 | } 42 | .abs{ 43 | background-color: rgba(0,0,0,.5); 44 | position: absolute; 45 | top: 50%; 46 | transform: translateY(-50%); 47 | height: 30px; 48 | width: 30px; 49 | cursor: pointer; 50 | border-color: transparent; 51 | visibility: hidden; 52 | 53 | } 54 | .abs span{ 55 | font-size: 14px; 56 | color: white; 57 | line-height: 40px; 58 | 59 | } 60 | .abs:hover{ 61 | background-color: rgba(0, 0, 0, 0.8); 62 | 63 | } 64 | .lArrow{ 65 | margin-left: 40px; 66 | height: 28px; 67 | width: 28px; 68 | border-radius: 35px; 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | } 73 | .rArrow{ 74 | right: 0; 75 | margin-right: 60px; 76 | height: 28px; 77 | width: 28px; 78 | border-radius: 35px; 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | } 83 | 84 | 85 | .middle_part div>h2{ 86 | text-align: center; 87 | font-family: 'Quicksand', sans-serif; 88 | color: #1f1f1f; 89 | font-weight: 400; 90 | font-size: 32px; 91 | } 92 | 93 | /* second box starts */ 94 | 95 | .second_box_img>img{ 96 | width: 95%; 97 | height: 302px; 98 | display: block; 99 | margin: auto; 100 | 101 | } 102 | 103 | /* third box starts */ 104 | 105 | .third_box_video_div>iframe{ 106 | display: block; 107 | margin: auto; 108 | } 109 | 110 | /* fourth box starts */ 111 | 112 | .fourth_box_slide_div{ 113 | display: flex; 114 | width: 95%; 115 | height: 380px; 116 | cursor: pointer; 117 | margin: auto; 118 | justify-content: space-evenly; 119 | } 120 | .fourth_box_slide_div:hover .left,.right{ 121 | visibility: visible; 122 | } 123 | .fourth_box_slide_div:hover .right{ 124 | visibility: visible; 125 | } 126 | .best_seller_products{ 127 | 128 | display: flex; 129 | box-sizing: border-box; 130 | align-items: center; 131 | justify-content: space-evenly; 132 | width: 90%; 133 | flex-wrap: wrap; 134 | overflow: hidden; 135 | } 136 | .idiv{ 137 | display: flex; 138 | width: 10%; 139 | align-items: center; 140 | justify-content: space-around; 141 | } 142 | .left,.right{ 143 | 144 | font-size: 50px; 145 | align-items: center; 146 | visibility: hidden; 147 | 148 | 149 | } 150 | .four_pro_div{ 151 | width: 21%; 152 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 153 | justify-content: space-evenly; 154 | box-sizing: border-box; 155 | height: 100%; 156 | align-items: center; 157 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 158 | } 159 | .four_pro_div:hover{ 160 | visibility: visible; 161 | } 162 | 163 | 164 | 165 | .pro_name{ 166 | font-size: 13px; 167 | height: 40px; 168 | font-weight: bold; 169 | text-align: center; 170 | 171 | margin-top: 5px; 172 | } 173 | .pdiv{ 174 | display: flex; 175 | align-items: center; 176 | margin-top: 3px; 177 | height: 20px; 178 | 179 | justify-content: center; 180 | } 181 | 182 | .text_tag{ 183 | 184 | text-align: center; 185 | box-sizing: border-box; 186 | padding: 10px; 187 | margin: auto; 188 | margin-top: 8px; 189 | background-color: #1f1f1f; 190 | color: aliceblue; 191 | 192 | } 193 | .ssprice_div{ 194 | display: flex; 195 | height: 21px; 196 | font-weight: 500; 197 | align-items: center; 198 | justify-content: space-evenly; 199 | padding: 0px 10px 0px 10px; 200 | } 201 | .stoffdiv{ 202 | display: flex; 203 | 204 | text-decoration: line-through; 205 | } 206 | 207 | 208 | 209 | .sixth_box:hover .abs{ 210 | visibility: visible; 211 | } 212 | .tenth_box:hover .abs{ 213 | visibility: visible; 214 | } 215 | .sixteenth_box:hover .abs{ 216 | visibility: visible; 217 | } 218 | 219 | 220 | /* video part starts */ 221 | 222 | .eighth_box_video_div{ 223 | width: 1263px; 224 | height: 400px; 225 | margin: auto; 226 | position: relative; 227 | overflow: hidden; 228 | } 229 | .vidSlider{ 230 | overflow: visible; 231 | display: flex; 232 | align-items: center; 233 | height: 100%; 234 | width: 1263px; 235 | margin: auto; 236 | } 237 | .videoshorts{ 238 | height: 100%; 239 | width: 240px; 240 | overflow: visible; 241 | border-radius: 20px; 242 | margin-right: 10px; 243 | 244 | } 245 | .controls{ 246 | 247 | 248 | position: absolute; 249 | width: 1200px; 250 | margin: auto; 251 | display: flex; 252 | justify-content: space-between; 253 | top: 50%; 254 | transform: translateY(-50%); 255 | margin-left: 30px; 256 | visibility: hidden; 257 | 258 | } 259 | .Lcont,.Rcont{ 260 | height: 40px; 261 | width: 40px; 262 | 263 | } 264 | 265 | 266 | .eighth_box:hover .controls{ 267 | visibility: visible; 268 | cursor: pointer; 269 | } 270 | 271 | /* video part ends */ 272 | 273 | .sixth_box,.tenth_box,.sixteenth_box{ 274 | position: relative; 275 | } 276 | 277 | .sixth_box_slide_div,.tenth_box_slide_div{ 278 | /* border: 1px solid; */ 279 | display: flex; 280 | height: 266px; 281 | width: 1263px; 282 | margin: auto; 283 | position: relative; 284 | overflow: hidden; 285 | cursor: pointer; 286 | } 287 | 288 | .slider{ 289 | /* border: 1px solid red; */ 290 | display: flex; 291 | width: 1263px; 292 | height: 266px; 293 | box-sizing: border-box; 294 | overflow: visible; 295 | } 296 | .sliding_div{ 297 | /* border: 1px solid; */ 298 | width: 421px; 299 | height: 266px; 300 | box-sizing: border-box; 301 | } 302 | 303 | .seventh_box > img{ 304 | width: 100%; 305 | height: 308px; 306 | cursor: pointer; 307 | } 308 | 309 | .fourteenth_box_div{ 310 | display: flex; 311 | height: 300px; 312 | justify-content: space-evenly; 313 | margin: auto; 314 | cursor: pointer; 315 | } 316 | .bannerimg{ 317 | height: 265px; 318 | width: 390px; 319 | margin-right: 32px; 320 | 321 | } 322 | 323 | 324 | 325 | .ninth_box_slide_div,.eleventh_box_slide_div,.thirteenth_box_slide_div,.fifteenth_box_slide_div{ 326 | display: flex; 327 | width: 95%; 328 | height: 360px; 329 | cursor: pointer; 330 | margin: auto; 331 | justify-content: space-evenly; 332 | 333 | .fourteenth_box_div{ 334 | height: 325px; 335 | } 336 | .fourteenth_box_div img{ 337 | height: 325px; 338 | cursor: pointer; 339 | margin: auto; 340 | } 341 | 342 | 343 | 344 | 345 | 346 | 347 | } 348 | 349 | .exSlider{ 350 | /* border: 1px solid red; */ 351 | display: flex; 352 | width: 1263px; 353 | height: 190px; 354 | box-sizing: border-box; 355 | overflow: visible; 356 | } 357 | .exSlider>.sliding_div{ 358 | /* border: 1px solid; */ 359 | width: 316px; 360 | height: 266px; 361 | box-sizing: border-box; 362 | margin-left: 3px; 363 | } 364 | .sixteenth_box_div img{ 365 | width: 285px; 366 | height: 195px; 367 | cursor: pointer; 368 | margin-right: 29px; 369 | } 370 | 371 | 372 | 373 | .read_more{ 374 | font-family: 'Quicksand', sans-serif; 375 | color: hsl(0, 0%, 12%); 376 | font-weight: 400; 377 | font-size: 16px; 378 | line-height: 1.2; 379 | margin-top: 30px; 380 | margin-left: 80px; 381 | cursor: pointer; 382 | margin-bottom: 25px; 383 | 384 | } -------------------------------------------------------------------------------- /Scripts/skincare.js: -------------------------------------------------------------------------------- 1 | let SkinCareData = [ 2 | { 3 | image_link: 4 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-aquaholic-water-boost-mask-13548848087123.jpg?v=1619115321", 5 | name: "Aquaholic Water Boost Mask", 6 | price: 149, 7 | rating: "4.7(414)", 8 | strike: '', 9 | }, 10 | 11 | { 12 | image_link: 13 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-citrus-got-real-cooling-stick-28037939429459.jpg?v=1644409181", 14 | name: "Citrus Got Real Cooling Stick", 15 | price: 399, 16 | rating: "4.6(141)", 17 | strike: '', 18 | }, 19 | 20 | { 21 | image_link: 22 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-cheat-sheet-clarifying-mask-12775754203219.jpg?v=1619113702", 23 | name: "Cheat Sheet Clarifying Mask", 24 | price: 99, 25 | rating: "4.9(121)", 26 | strike: '', 27 | }, 28 | 29 | { 30 | image_link: 31 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-charcoal-patrol-bubble-mask-12775750500435.jpg?v=1644399394", 32 | name: "Charcoal Patrol Bubble Mask", 33 | price: 149, 34 | rating: "4.9(41)", 35 | strike: '', 36 | }, 37 | 38 | { 39 | image_link: 40 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-cheat-sheet-anti-aging-mask-12775753744467.jpg?v=1619113715", 41 | name: "Cheat Sheet Anti-Aging Mask", 42 | price: 99, 43 | rating: "4.8(142)", 44 | strike: '', 45 | }, 46 | 47 | { 48 | image_link: 49 | "https://cdn.shopify.com/s/files/1/0906/2558/products/CCEyeFirmingCreamWBG-3.jpg?v=1628610287", 50 | name: "Coffee Culture Eye Firming Cream", 51 | price: 399, 52 | rating: "4.9(54)", 53 | strike: 'RS.799', 54 | }, 55 | 56 | { 57 | image_link: 58 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Aquaholic-Extention-Spot-gel-2.jpg?v=1626363976", 59 | name: "Aquaholic Clarifying Spot Gel", 60 | price: 399, 61 | rating: "4.7(421)", 62 | strike: '', 63 | }, 64 | 65 | { 66 | image_link: 67 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-swipe-right-cleansing-water-12771592732755.jpg?v=1619106450", 68 | name: "Swipe Right Cleansing Water", 69 | price: 399, 70 | rating: "4.9(197)", 71 | strike: '', 72 | }, 73 | 74 | { 75 | image_link: 76 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-acne-combo-pack-of-6-14056089157715.jpg?v=1619113757", 77 | name: "Acne Combo (Pack of 6)", 78 | price: 399, 79 | rating: "4.9(137)", 80 | strike: '1299', 81 | }, 82 | 83 | { 84 | image_link: 85 | "https://cdn.shopify.com/s/files/1/0906/2558/products/CCPorePurifyingMaskWBG-3.jpg?v=1628610298", 86 | name: "Coffee Culture Pore Purifying Mask", 87 | price: 499, 88 | rating: "4.7(421)", 89 | strike: '1399', 90 | }, 91 | 92 | { 93 | image_link: 94 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Aquaholic-Pore-Exfoliating-Scrub-3_1.jpg?v=1626363966", 95 | name: "Aquaholic Pore Exfoliating Scrub", 96 | price: 399, 97 | rating: "4.9(14)", 98 | strike: '', 99 | }, 100 | 101 | { 102 | image_link: 103 | "https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-citrus-got-real-refreshing-mist-28037990842451.jpg?v=1619155739", 104 | name: "Citrus Got Real Refreshing Mist", 105 | price: 799, 106 | rating: "4.8(201)", 107 | strike: '2100', 108 | }, 109 | 110 | { 111 | image_link: 112 | "https://cdn.shopify.com/s/files/1/0906/2558/products/CCBrighteningSerumWBG-3.jpg?v=1628610327", 113 | name: "Coffee Culture Brightening Serum", 114 | price: 399, 115 | rating: "4.6(137)", 116 | strike: '', 117 | }, 118 | 119 | { 120 | image_link:"https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-cheat-sheet-clarifying-mask-pack-of-6-12784634527827.jpg?v=1619114589", 121 | name: "Cheat Sheet Clarifying Mask (Pack of 6)", 122 | price: 399, 123 | rating: "4.8(27)", 124 | strike: '', 125 | }, 126 | 127 | { 128 | image_link: 129 | "https://cdn.shopify.com/s/files/1/0906/2558/products/Hydrating-Primer-3.jpg?v=1626423647", 130 | name: "Aquaholic Hydrating Primer", 131 | price: 999, 132 | rating: "4.5(421)", 133 | strike: 'RS.1199', 134 | }, 135 | 136 | { 137 | image_link: 138 | "https://cdn.shopify.com/s/files/1/0906/2558/products/moisturiser.jpg?v=1626968292", 139 | name: "Aquaholic Priming Moisturizer", 140 | price: 799, 141 | rating: "4.8(421)", 142 | strike: 'RS.999', 143 | }, 144 | 145 | { 146 | image_link: 147 | "https://cdn.shopify.com/s/files/1/0906/2558/products/373532210-artboard-1.jpg?v=1646149967", 148 | name: "Citrus Got Real Retinol Brightening Serum", 149 | price: 1499, 150 | rating: "4.5(421)", 151 | strike: 'RS.1799', 152 | }, 153 | 154 | ]; 155 | 156 | 157 | localStorage.setItem("cart", JSON.stringify(SkinCareData)); 158 | 159 | SkinCareData.map(function (elem) { 160 | 161 | var box = document.createElement("div"); 162 | var top = document.createElement("div"); 163 | var bottom = document.createElement("div"); 164 | var rating_wrapper = document.createElement("div"); 165 | var price_wrapper = document.createElement("div"); 166 | 167 | var shade = document.createElement("p"); 168 | shade.textContent = elem.shade; 169 | 170 | var img_shade = document.createElement("img"); 171 | img_shade.src = elem.shade_image; 172 | 173 | var img = document.createElement("img"); 174 | img.src = elem.image_link; 175 | img.classList.add("main-img"); 176 | 177 | var name = document.createElement("p"); 178 | name.textContent = elem.name; 179 | 180 | var price = document.createElement("span"); 181 | price.innerText = "Rs." + elem.price; 182 | 183 | var strike = document.createElement("s"); 184 | strike.innerText = elem.strike; 185 | 186 | var rating = document.createElement("span"); 187 | rating.innerText = elem.rating; 188 | 189 | var star_icon = document.createElement("span"); 190 | star_icon.innerHTML += '' 191 | 192 | var heart_icon = document.createElement("span"); 193 | heart_icon.innerHTML += '' 194 | 195 | heart_icon.addEventListener("click", function () { 196 | wishList(elem); 197 | }); 198 | 199 | name.classList.add("name"); 200 | box.classList.add("box"); 201 | top.classList.add("top"); 202 | bottom.classList.add("bottom-block"); 203 | rating_wrapper.classList.add("rating-wrapper"); 204 | price_wrapper.classList.add("price-wrapper"); 205 | 206 | var btn = document.createElement("button"); 207 | btn.innerText = "ADD TO CART"; 208 | btn.addEventListener("click", function () { 209 | addToCart(elem); 210 | }); 211 | 212 | box.addEventListener("click",()=>{ 213 | ProductPage(elem); 214 | window.location.href = "product.html" 215 | }) 216 | 217 | 218 | top.append(shade, img_shade); 219 | price_wrapper.append(strike, price) 220 | rating_wrapper.append(star_icon, rating); 221 | bottom.append(heart_icon, btn); 222 | box.append(img, name, price_wrapper, rating_wrapper, bottom); 223 | 224 | document.querySelector(".container").append(box); 225 | }); 226 | 227 | var cartArray= JSON.parse(localStorage.getItem("cartItem")) || []; 228 | function addToCart(elem){ 229 | cartArray.push(elem); 230 | alert("item added to cart") 231 | 232 | localStorage.setItem("cartItem",JSON.stringify(cartArray)) 233 | } 234 | 235 | var cartwish= JSON.parse(localStorage.getItem("wishlistItem")) || []; 236 | function wishList(elem){ 237 | cartwish.push(elem); 238 | alert("item added to wishlist") 239 | 240 | localStorage.setItem("wishlistItem",JSON.stringify(cartwish)) 241 | } 242 | 243 | 244 | 245 | function ProductPage(elem){ 246 | localStorage.setItem("ProductPage",JSON.stringify(elem)) 247 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Buy Beauty Products at SUGAR Cosmetics Online Store 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |

REFER YOUR FRIENDS

42 |
43 |
44 |
45 |

METTLE PRIMING BALM

46 |
47 | 56 |
57 |
58 |
59 |

BESTSELLERS

60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |

QUICK BEAUTY TIPS WITH SUGAR

68 | 69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 |
83 |

HOT DEALS

84 |
85 |
86 |
87 | 88 |
89 |
90 | 91 |
92 |
93 | 94 |
95 |
96 |

X-MAS GLOW MAKEUP KIT

97 | 98 |
99 |
100 |

SUGAR STREAMING

101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 | 109 |
110 |
111 |
112 | 113 |
114 |
115 |

SUPER SAVERS

116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |

TOP PICKS OF THE WEEK

124 |
125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 |
133 |
134 |
135 |

GIFT SETS

136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 |

JUST - IN

148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |

SUGAR BEAUTY BLOG

156 |
157 |
158 |
159 |

SKINCARE BASICS

160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 | 168 |
169 |
170 |
171 | 172 |
173 |
174 | 175 |
176 |
177 | 178 |
179 |
READ MORE ABOUT SUGAR COSMETICS
180 |
181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /Scripts/cart.js: -------------------------------------------------------------------------------- 1 | // import {navbar,fotter} from "../Components/navbar.js"; 2 | 3 | // document.getElementById("navbar").innerHTML = navbar(); 4 | // document.getElementById("footer").innerHTML = fotter(); 5 | 6 | // let arr = [ 7 | // { 8 | // img:'https://cdn.shopify.com/s/files/1/0906/2558/products/1_bf362c65-33b1-46ad-97d8-b94a35870aeb.jpg?v=1645631016', 9 | // title:'Matte Attack Transferproof Lipstick', 10 | // item_detail:'01 Boldplay (Cardinal Pink)', 11 | // qty:1, 12 | // price:699, 13 | // }, 14 | // { 15 | // img:'https://cdn.shopify.com/s/files/1/0906/2558/products/sugar-cosmetics-matte-as-hell-crayon-minis-lipstick-01-scarlett-o-hara-28219914354771_39239823-2ed8-4b8d-b0db-48c857ae0e3f.jpg?v=1642070562', 16 | // title:'Matte as Hell Crayon Mini', 17 | // item_detail:'Lipstick - 01 Scarlett O', 18 | // qty:1, 19 | // price:199, 20 | // } 21 | // ] 22 | 23 | // localStorage.setItem('cartItems', JSON.stringify(arr)); 24 | import {payment} from "../Scripts/payment.js"; 25 | let paymentPage = payment(); 26 | 27 | let array = JSON.parse(localStorage.getItem('cartItems')) || []; 28 | console.log(array) 29 | let totalPrice=0; 30 | let subTotal = 0; 31 | const displayCartList = (array) => { 32 | let cartOrder_cartData = document.querySelector('.cartOrder_cartData'); 33 | let subTotalPayment = document.querySelector('#subTotalPayment'); 34 | cartOrder_cartData.innerHTML = null; 35 | let totalPriceHTML = document.querySelector('#totalPrice'); 36 | let finalAmt = document.querySelector('#finalAmt'); 37 | array.forEach((element, index) => { 38 | subTotal = 0; 39 | for(var i=0; i` 70 | controlDeletCart.addEventListener('click', ()=>{ 71 | deleteCartItem(index); 72 | 73 | }) 74 | let controlPlusMinusCart = document.createElement('div'); 75 | controlPlusMinusCart.setAttribute('class','controlPlusMinusCart'); 76 | let controlMinus = document.createElement('div'); 77 | controlMinus.setAttribute('class','controlMinus'); 78 | controlMinus.textContent = '-'; 79 | controlMinus.addEventListener('click', ()=>{ 80 | itemDecrese(index,controlValue,spanQty,itemTotal); 81 | }) 82 | let controlValue = document.createElement('div'); 83 | controlValue.setAttribute('class','controlValue'); 84 | controlValue.innerText = element.qty; 85 | let controlPlus = document.createElement('div'); 86 | controlPlus.setAttribute('class','controlPlus'); 87 | controlPlus.innerText = '+'; 88 | controlPlus.addEventListener('click', ()=>{ 89 | itemIncrese(index,controlValue,spanQty,itemTotal); 90 | }) 91 | controlPlusMinusCart.append(controlMinus,controlValue,controlPlus); 92 | 93 | let controlAmountCart = document.createElement('div'); 94 | controlAmountCart.setAttribute('class','controlAmountCart'); 95 | let spanQty = document.createElement('span'); 96 | spanQty.setAttribute('id','num'); 97 | spanQty.innerText = element.qty; 98 | let itemPrice = document.createElement('span'); 99 | itemPrice.setAttribute('id','itemPrice'); 100 | itemPrice.innerText = element.price; 101 | let itemTotal = document.createElement('span'); 102 | itemTotal.setAttribute('id','itemTotal'); 103 | itemTotal.innerText = totalPrice; 104 | controlAmountCart.append(spanQty,'x',itemPrice,'=',itemTotal) 105 | controlRigthCard.append(controlDeletCart,controlPlusMinusCart,controlAmountCart); 106 | card.append(imgleftcardDiv,controlRigthCard) 107 | cartOrder_cartData.append(card); 108 | }); 109 | } 110 | const displayNone = () => { 111 | if(array.length===0){ 112 | document.querySelector('.cartMainCard').style.display = 'none'; 113 | document.querySelector('.emptyCartDiv').style.display = 'block'; 114 | } 115 | } 116 | if(array.length===0){ 117 | document.querySelector('.cartMainCard').style.display = 'none'; 118 | document.querySelector('.emptyCartDiv').style.display = 'block'; 119 | } 120 | else{ 121 | document.querySelector('.cartMainCard').style.display = 'flex'; 122 | document.querySelector('.emptyCartDiv').style.display = 'none'; 123 | displayCartList(array); 124 | } 125 | 126 | const deleteCartItem = (index) => { 127 | // console.log('delete button perform',index); 128 | let text = "Remove Selected Item."; 129 | if (confirm(text) == true) { 130 | console.log("You pressed OK!"); 131 | array.splice(index,1); 132 | console.log(array); 133 | displayCartList(array); 134 | displayNone(); 135 | localStorage.setItem('cartItems', JSON.stringify(array)) 136 | 137 | } 138 | else { 139 | console.log("You canceled!"); 140 | } 141 | window.location.reload() 142 | } 143 | 144 | const itemDecrese = (index,controlValue,spanQty,itemTotal) => { 145 | 146 | if(array[index].qty > 1){ 147 | console.log('- button',index); 148 | array[index].qty = array[index].qty-1; 149 | // console.log(array); 150 | localStorage.setItem('cartItems', JSON.stringify(array)) 151 | controlValue.innerText = array[index].qty; 152 | spanQty.innerText = array[index].qty; 153 | itemTotal.innerText = array[index].qty * array[index].price; 154 | let totalPriceHTML = document.querySelector('#totalPrice'); 155 | let subTotalPayment = document.querySelector('#subTotalPayment'); 156 | let finalAmt = document.querySelector('#finalAmt'); 157 | subTotal = 0; 158 | for(var i=0; i { 185 | console.log('+ button',index); 186 | array[index].qty = array[index].qty+1; 187 | // console.log(array); 188 | localStorage.setItem('cartItems', JSON.stringify(array)) 189 | controlValue.innerText = array[index].qty; 190 | spanQty.innerText = array[index].qty; 191 | itemTotal.innerText = array[index].qty * array[index].price; 192 | let totalPriceHTML = document.querySelector('#totalPrice'); 193 | let subTotalPayment = document.querySelector('#subTotalPayment'); 194 | let finalAmt = document.querySelector('#finalAmt'); 195 | subTotal = 0; 196 | for(var i=0; i{ 209 | let cartPriceOffer = document.querySelector(".cartPriceOffer "); 210 | 211 | document.querySelector(".priceContainer").innerHTML = paymentPage; 212 | paymentinfo() 213 | 214 | }) 215 | 216 | function paymentinfo(){ 217 | document.getElementById("upi").addEventListener("click",()=>{ 218 | let paydrop = document.querySelector(".paydrop"); 219 | paydrop.style.display = "block" 220 | let upi = document.getElementById("upi"); 221 | upi.style.border = "none" 222 | upi.style.backgroundColor = 'white' 223 | }) 224 | document.getElementById("debitcard").addEventListener("click",()=>{ 225 | let paydrop = document.getElementById("dropdebit"); 226 | 227 | paydrop.style.display = "block" 228 | let debitborder = document.getElementById("debitcard"); 229 | debitborder.style.border = "none"; 230 | debitborder.style.backgroundColor = "white" 231 | }) 232 | document.getElementById("cash").addEventListener("click",()=>{ 233 | let paydrop = document.getElementById("cashdrop"); 234 | 235 | paydrop.style.display = "block" 236 | let debitborder = document.getElementById("cash"); 237 | debitborder.style.border = "none"; 238 | debitborder.style.backgroundColor = "white" 239 | }) 240 | 241 | document.querySelector(".PaymentInfo_btn").addEventListener("click",()=>{ 242 | window.location.href = "succesfull.html" 243 | }) 244 | } --------------------------------------------------------------------------------