├── README.md ├── css ├── all.css ├── bootstrap.min.css └── style.css ├── img-cart ├── cake-1.jpeg ├── cake-2.jpeg ├── cake-3.jpeg ├── cupcake-1.jpeg ├── cupcake-2.jpeg ├── cupcake-3.jpeg ├── doughnut-1.jpeg ├── doughnut-2.jpeg ├── doughnut-3.jpeg ├── headerBcg.jpeg ├── sweets-1.jpeg ├── sweets-2.jpeg ├── sweets-3.jpeg ├── z-cake-2.jpeg └── z-sweets-3.jpeg ├── img ├── cake-1.jpeg ├── cake-2.jpeg ├── cake-3.jpeg ├── cupcake-1.jpeg ├── cupcake-2.jpeg ├── cupcake-3.jpeg ├── doughnut-1.jpeg ├── doughnut-2.jpeg ├── doughnut-3.jpeg ├── headerBcg.jpeg ├── logo.svg ├── sweets-1.jpeg ├── sweets-2.jpeg ├── sweets-3.jpeg ├── z-cake-2.jpeg └── z-sweets-3.jpeg ├── index.html ├── js ├── app.js ├── bootstrap.bundle.min.js └── jquery-3.3.1.min.js └── webfonts ├── fa-brands-400.eot ├── fa-brands-400.svg ├── fa-brands-400.ttf ├── fa-brands-400.woff ├── fa-brands-400.woff2 ├── fa-regular-400.eot ├── fa-regular-400.svg ├── fa-regular-400.ttf ├── fa-regular-400.woff ├── fa-regular-400.woff2 ├── fa-solid-900.eot ├── fa-solid-900.svg ├── fa-solid-900.ttf ├── fa-solid-900.woff └── fa-solid-900.woff2 /README.md: -------------------------------------------------------------------------------- 1 | # js-cart-setup 2 | ADD ITEMS TO CART JAVASCRIPT PROJECT 3 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); 2 | 3 | :root { 4 | --mainPink: #ef7998; 5 | --mainYellow: rgb(249, 228, 148); 6 | --mainWhite: #fff; 7 | --mainBlack: #000; 8 | --yellowTrans: rgba(249, 228, 148, 0.5); 9 | --mainGrey: rgb(238, 238, 238); 10 | } 11 | 12 | body { 13 | font-family: "Kaushan Script", cursive; 14 | background: var(--mainWhite); 15 | color: var(--mainBlack); 16 | } 17 | /* nav links */ 18 | .navbar-toggler { 19 | outline: none !important; 20 | } 21 | .toggler-icon { 22 | font-size: 2.5rem; 23 | color: var(--mainPink); 24 | } 25 | .nav-link { 26 | color: var(--mainPink); 27 | font-size: 1.5rem; 28 | transition: all 0.5s ease-in-out; 29 | } 30 | .nav-link:hover { 31 | color: var(--mainBlack); 32 | } 33 | /* end of nav links */ 34 | /* info icons */ 35 | .cart-info__icon { 36 | color: var(--mainBlack); 37 | cursor: pointer; 38 | } 39 | 40 | .cart-info { 41 | border: 0.1rem solid var(--mainBlack); 42 | color: var(--mainBlack); 43 | border-radius: 0.25rem; 44 | padding: 0.4rem 0.6rem; 45 | cursor: pointer; 46 | } 47 | .cart-info:hover { 48 | background: var(--mainPink); 49 | border-color: var(--mainPink); 50 | color: var(--mainWhite); 51 | } 52 | .cart-info:hover .cart-info__icon { 53 | color: var(--mainWhite); 54 | } 55 | /* end of info icons */ 56 | /* banner */ 57 | 58 | .max-height { 59 | min-height: calc(100vh - 76px); 60 | background: linear-gradient(var(--yellowTrans), var(--yellowTrans)), 61 | url("../img/headerBcg.jpeg") center/cover fixed no-repeat; 62 | position: relative; 63 | } 64 | .banner { 65 | color: var(--mainWhite); 66 | margin-top: -4rem; 67 | } 68 | .banner-title { 69 | color: var(--mainPink); 70 | font-size: 4rem; 71 | } 72 | .banner-link { 73 | font-size: 1.5rem; 74 | color: var(--mainBlack); 75 | border: 0.2rem solid var(--mainBlack); 76 | } 77 | .banner-link:hover { 78 | background: var(--mainBlack); 79 | color: var(--mainPink); 80 | } 81 | /* endo of banner */ 82 | /* cart */ 83 | .cart { 84 | position: absolute; 85 | min-height: 10rem; 86 | background: var(--mainWhite); 87 | top: 0; 88 | right: 0; 89 | transition: all 0.3s ease-in-out; 90 | background: rgba(255, 255, 255, 0.5); 91 | width: 0; 92 | overflow: hidden; 93 | } 94 | .show-cart { 95 | width: 18rem; 96 | padding: 2rem 1.5rem; 97 | transform: rotateY(-360deg); 98 | } 99 | .cart-item { 100 | transition: all 2s ease-in-out; 101 | } 102 | 103 | /* end of cart */ 104 | /* cart item */ 105 | .cart-item-remove { 106 | color: var(--mainPink); 107 | transition: all 1s ease-in-out; 108 | } 109 | .cart-item-remove:hover { 110 | transform: scale(1.1); 111 | color: var(--mainBlack); 112 | } 113 | #cart-item-price { 114 | font-size: 0.8rem; 115 | } 116 | /* cart item */ 117 | /* cart buttons */ 118 | .btn-pink { 119 | color: var(--mainPink) !important; 120 | border-color: var(--mainPink) !important; 121 | } 122 | .btn-black { 123 | color: var(--mainBlack) !important; 124 | border-color: var(--mainBlack) !important; 125 | } 126 | .btn-black:hover { 127 | color: var(--mainPink) !important; 128 | background: var(--mainBlack) !important; 129 | } 130 | .btn-pink:hover { 131 | background: var(--mainPink) !important; 132 | color: var(--mainBlack) !important; 133 | } 134 | /* end of cart buttons */ 135 | 136 | /* about */ 137 | .about-img__container { 138 | position: relative; 139 | } 140 | 141 | .about-img__container::before { 142 | content: ""; 143 | position: absolute; 144 | top: -1.5rem; 145 | left: -1.7rem; 146 | width: 100%; 147 | height: 100%; 148 | outline: 0.5rem solid var(--mainYellow); 149 | z-index: -1; 150 | transition: all 1s ease-in-out; 151 | } 152 | .about-img__container:hover:before { 153 | top: 0; 154 | left: 0; 155 | } 156 | 157 | /*end of about */ 158 | 159 | /* store items */ 160 | .store { 161 | background: var(--mainGrey); 162 | } 163 | .img-container { 164 | position: relative; 165 | overflow: hidden; 166 | cursor: pointer; 167 | } 168 | .store-img { 169 | transition: all 1s ease-in-out; 170 | } 171 | .img-container:hover .store-img { 172 | transform: scale(1.2); 173 | } 174 | .store-item-icon { 175 | position: absolute; 176 | bottom: 0; 177 | right: 0; 178 | padding: 0.75rem; 179 | background: var(--mainYellow); 180 | border-top-left-radius: 1rem; 181 | transition: all 1s ease-in-out; 182 | transform: translate(100%, 100%); 183 | } 184 | .img-container:hover .store-item-icon { 185 | transform: translate(0, 0); 186 | } 187 | .store-item-icon:hover { 188 | color: var(--mainWhite); 189 | } 190 | .store-item-value { 191 | color: --mainYellow; 192 | } 193 | /*end of store items */ 194 | .search-box { 195 | background: var(--mainPink); 196 | color: var(--mainBlack); 197 | } 198 | 199 | /* ligthbox */ 200 | 201 | .lightbox-container { 202 | position: fixed; 203 | top: 0; 204 | left: 0; 205 | right: 0; 206 | bottom: 0; 207 | z-index: 999; 208 | background: rgba(0, 0, 0, 0.6) !important; 209 | display: none; 210 | } 211 | .show { 212 | display: block; 213 | } 214 | 215 | .lightbox-holder { 216 | position: relative; 217 | } 218 | .lightbox-item { 219 | min-height: 80vh; 220 | background: url("../img/cake-1.jpeg") center/cover fixed no-repeat; 221 | border-radius: 0.3rem; 222 | } 223 | .lightbox-close { 224 | color: var(--mainPink); 225 | font-size: 3rem; 226 | transition: all 1s ease-in-out; 227 | cursor: pointer; 228 | } 229 | .lightbox-close:hover { 230 | color: var(--mainYellow); 231 | } 232 | 233 | .lightbox-control { 234 | position: absolute; 235 | font-size: 4rem; 236 | color: var(--mainPink); 237 | transition: all 1s linear; 238 | cursor: pointer; 239 | } 240 | .lightbox-control:hover { 241 | color: var(--mainYellow); 242 | } 243 | .btnLeft { 244 | top: 50%; 245 | left: 0; 246 | transform: translateX(-60%); 247 | } 248 | .btnRight { 249 | top: 50%; 250 | right: 0; 251 | transform: translateX(60%); 252 | } 253 | -------------------------------------------------------------------------------- /img-cart/cake-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/cake-1.jpeg -------------------------------------------------------------------------------- /img-cart/cake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/cake-2.jpeg -------------------------------------------------------------------------------- /img-cart/cake-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/cake-3.jpeg -------------------------------------------------------------------------------- /img-cart/cupcake-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/cupcake-1.jpeg -------------------------------------------------------------------------------- /img-cart/cupcake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/cupcake-2.jpeg -------------------------------------------------------------------------------- /img-cart/cupcake-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/cupcake-3.jpeg -------------------------------------------------------------------------------- /img-cart/doughnut-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/doughnut-1.jpeg -------------------------------------------------------------------------------- /img-cart/doughnut-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/doughnut-2.jpeg -------------------------------------------------------------------------------- /img-cart/doughnut-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/doughnut-3.jpeg -------------------------------------------------------------------------------- /img-cart/headerBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/headerBcg.jpeg -------------------------------------------------------------------------------- /img-cart/sweets-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/sweets-1.jpeg -------------------------------------------------------------------------------- /img-cart/sweets-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/sweets-2.jpeg -------------------------------------------------------------------------------- /img-cart/sweets-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/sweets-3.jpeg -------------------------------------------------------------------------------- /img-cart/z-cake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/z-cake-2.jpeg -------------------------------------------------------------------------------- /img-cart/z-sweets-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img-cart/z-sweets-3.jpeg -------------------------------------------------------------------------------- /img/cake-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/cake-1.jpeg -------------------------------------------------------------------------------- /img/cake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/cake-2.jpeg -------------------------------------------------------------------------------- /img/cake-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/cake-3.jpeg -------------------------------------------------------------------------------- /img/cupcake-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/cupcake-1.jpeg -------------------------------------------------------------------------------- /img/cupcake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/cupcake-2.jpeg -------------------------------------------------------------------------------- /img/cupcake-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/cupcake-3.jpeg -------------------------------------------------------------------------------- /img/doughnut-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/doughnut-1.jpeg -------------------------------------------------------------------------------- /img/doughnut-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/doughnut-2.jpeg -------------------------------------------------------------------------------- /img/doughnut-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/doughnut-3.jpeg -------------------------------------------------------------------------------- /img/headerBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/headerBcg.jpeg -------------------------------------------------------------------------------- /img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/sweets-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/sweets-1.jpeg -------------------------------------------------------------------------------- /img/sweets-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/sweets-2.jpeg -------------------------------------------------------------------------------- /img/sweets-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/sweets-3.jpeg -------------------------------------------------------------------------------- /img/z-cake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/z-cake-2.jpeg -------------------------------------------------------------------------------- /img/z-sweets-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/js-cart-setup/4e534209c0bd76d464dee533d2f0f718e0878bb8/img/z-sweets-3.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, aliquam voluptas 131 | beatae vitae expedita consectetur nesciunt quia deserunt asperiores facere fuga dicta fugiat corrupti et omnis 132 | porro at dolorum! Ad!
133 | explore 134 | 135 |