├── .gitignore ├── README.md ├── _config.yml ├── build └── output.css ├── css └── style.css ├── images ├── Cosmetics.png ├── arrow-right.svg ├── cosmetic-bottle.png ├── cosmetic-cream.png ├── cosmetics-bottles.png ├── cosmetics-jar.png ├── cosmetics-lady.png ├── cosmetics-tools.png ├── cosmetics-two-bottles.png ├── cosmetics-yellow-jar.png ├── facebook.svg ├── instagram.svg ├── logo.svg ├── search.svg ├── shopping-bag.svg ├── twitter.svg └── user.svg ├── index.html ├── js └── app.js ├── maxresdefault.jpg ├── package-lock.json ├── package.json ├── postcss.config.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### E-commerce website using Html, Css and JavaScript. 2 | 3 |  4 | 5 | 6 | #### Demo: https://codersgyan.github.io/E-commerce-website/ 7 | 8 | Warning : This website haven't made fully responsive yet. It's is made for 1920*1080 screens. 9 | You may contribute this project by making this website responsive and make a pull request. 10 | 11 | 🙏 If you find this repo helpful then don't forget to give a start ❇️ to this repository. :) 12 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | 7 | .hero__heading{ 8 | left:41%; 9 | } 10 | .slider-dots{ 11 | right:-6rem; 12 | top:50%; 13 | transform:translateY(-50%); 14 | } 15 | .slider-dots button, .slider2-dots button{ 16 | font-size:0; 17 | width:8px; 18 | height:8px; 19 | background:#D8D8D8; 20 | border-radius: 50%; 21 | outline:none; 22 | } 23 | 24 | .slider-dots li.slick-active button, .slider2-dots li.slick-active button{ 25 | background:#FE7865; 26 | width:12px; 27 | height:12px; 28 | } 29 | 30 | 31 | .slider-dots ul{ 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | } 36 | 37 | .upto{ 38 | position:relative; 39 | } 40 | .upto:after{ 41 | content:''; 42 | position:absolute; 43 | left:0; 44 | bottom:-1rem; 45 | height:4px; 46 | width:80%; 47 | background:#FE7865; 48 | } 49 | .sub-menu{ 50 | max-height:0; 51 | overflow: hidden; 52 | } 53 | 54 | .menu-trigger.is-open{ 55 | color:#FE7865; 56 | } 57 | .menu-trigger.is-open + .sub-menu{ 58 | max-height:100%; 59 | overflow:visible; 60 | } 61 | 62 | 63 | .box-1 { 64 | position:relative; 65 | height:28rem; 66 | } 67 | .box-1 img{ 68 | position:absolute; 69 | top:-5rem; 70 | } 71 | 72 | .box-4{ 73 | position: relative; 74 | height:22rem; 75 | margin-top:18rem; 76 | } 77 | .box-4 img{ 78 | position:absolute; 79 | top:-14rem; 80 | left:15%; 81 | } 82 | .box-5{ 83 | position:relative; 84 | height:16rem; 85 | width:100%; 86 | margin-bottom:12rem; 87 | } 88 | .box-5 img{ 89 | position: absolute; 90 | bottom:-8rem; 91 | } 92 | .agree__checkbox + label{ 93 | display:block; 94 | width:24px; 95 | height:24px; 96 | background:#fff; 97 | position:relative; 98 | cursor: pointer; 99 | border-radius: 50%; 100 | -webkit-border-radius: 50%; 101 | -moz-border-radius: 50%; 102 | -ms-border-radius: 50%; 103 | -o-border-radius: 50%; 104 | } 105 | .agree__checkbox + label:before{ 106 | content:''; 107 | display:block; 108 | width:8px; 109 | height: 8px; 110 | position:absolute; 111 | top:50%; 112 | left:50%; 113 | background:#fff; 114 | transform:translate(-50%, -50%); 115 | -webkit-transform:translate(-50%, -50%); 116 | -moz-transform:translate(-50%, -50%); 117 | -ms-transform:translate(-50%, -50%); 118 | -o-transform:translate(-50%, -50%); 119 | border-radius: 50%; 120 | -webkit-border-radius: 50%; 121 | -moz-border-radius: 50%; 122 | -ms-border-radius: 50%; 123 | -o-border-radius: 50%; 124 | } 125 | .agree__checkbox:checked + label:before{ 126 | background:#FE7865; 127 | } 128 | 129 | .slick-slide.slick-center .inner__box{ 130 | padding:0 20px; 131 | } 132 | .slider2{ 133 | margin-left:-50px; 134 | margin-right:-50px; 135 | } 136 | 137 | .slick-slide.slick-center .inner__box > div{ 138 | padding:50px 0; 139 | } 140 | 141 | .slick-slide:not(.slick-center){ 142 | margin-top:50px; 143 | margin-bottom:50px; 144 | } 145 | 146 | .slick-slider .inner__box .label,.slick-slider .inner__box .number{ 147 | display:none; 148 | } 149 | 150 | .slick-slide.slick-center .inner__box .label,.slick-slide.slick-center .inner__box .number{ 151 | display:block; 152 | } 153 | 154 | .slider2-dots{ 155 | position:absolute; 156 | bottom:-50px; 157 | left:50%; 158 | transform:translateX(-50%); 159 | -webkit-transform:translateX(-50%); 160 | -moz-transform:translateX(-50%); 161 | -ms-transform:translateX(-50%); 162 | -o-transform:translateX(-50%); 163 | } 164 | .slider2-dots ul{ 165 | display: flex; 166 | align-items: center; 167 | } 168 | .slider2-dots ul li{ 169 | margin-right:20px; 170 | } 171 | -------------------------------------------------------------------------------- /images/Cosmetics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/Cosmetics.png -------------------------------------------------------------------------------- /images/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /images/cosmetic-bottle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetic-bottle.png -------------------------------------------------------------------------------- /images/cosmetic-cream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetic-cream.png -------------------------------------------------------------------------------- /images/cosmetics-bottles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetics-bottles.png -------------------------------------------------------------------------------- /images/cosmetics-jar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetics-jar.png -------------------------------------------------------------------------------- /images/cosmetics-lady.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetics-lady.png -------------------------------------------------------------------------------- /images/cosmetics-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetics-tools.png -------------------------------------------------------------------------------- /images/cosmetics-two-bottles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetics-two-bottles.png -------------------------------------------------------------------------------- /images/cosmetics-yellow-jar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/E-commerce-website/06e1623eba4a21f88e58b82d4f540e5474596998/images/cosmetics-yellow-jar.png -------------------------------------------------------------------------------- /images/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /images/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/shopping-bag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |Subscribe to mail list
and get 15% off on first order
Article about indian cosmetic market. Must Read article
263 |Lorem ipsum dolor sit amet, consectetur adipiscing 282 | elit. Nullam non 283 | eros leo. 284 | Duis non massa eu massa 285 | commodo sollicitudin id non velit.
286 |