Form by ZAzanina-yassine
#e8e8e8
1.master-container { 2 display: grid; 3 grid-template-columns: auto; 4 gap: 5px; 5} 6 7.card { 8 width: 400px; 9 background: #FFFFFF; 10 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 11} 12 13.title { 14 width: 100%; 15 height: 40px; 16 position: relative; 17 display: flex; 18 align-items: center; 19 padding-left: 20px; 20 border-bottom: 1px solid #efeff3; 21 font-weight: 700; 22 font-size: 11px; 23 color: #63656b; 24} 25 26/* cart */ 27.cart { 28 border-radius: 19px 19px 7px 7px; 29} 30 31.cart .products { 32 display: flex; 33 flex-direction: column; 34 padding: 10px; 35} 36 37.cart .products .product { 38 display: grid; 39 grid-template-columns: 60px 1fr 80px 1fr; 40 gap: 10px; 41} 42 43.cart .products .product span { 44 font-size: 13px; 45 font-weight: 600; 46 color: #47484b; 47 margin-bottom: 8px; 48 display: block; 49} 50 51.cart .products .product p { 52 font-size: 11px; 53 font-weight: 600; 54 color: #7a7c81; 55} 56 57.cart .quantity { 58 height: 30px; 59 display: grid; 60 grid-template-columns: 1fr 1fr 1fr; 61 margin: auto; 62 background-color: #ffffff; 63 border: 1px solid #e5e5e5; 64 border-radius: 7px; 65 filter: drop-shadow(0px 1px 0px #efefef) 66 drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); 67} 68 69.cart .quantity label { 70 width: 20px; 71 height: 30px; 72 display: flex; 73 align-items: center; 74 justify-content: center; 75 padding-bottom: 2px; 76 font-size: 15px; 77 font-weight: 700; 78 color: #47484b; 79} 80 81.cart .quantity button { 82 width: 30px; 83 height: 30px; 84 display: flex; 85 align-items: center; 86 justify-content: center; 87 border: 0; 88 outline: none; 89 background-color: transparent; 90 padding-bottom: 2px; 91} 92 93.card .small { 94 font-size: 15px; 95 margin: 0 0 auto auto; 96} 97 98.card .small sup { 99 font-size: px; 100} 101 102/* coupons */ 103.coupons { 104 border-radius: 7px; 105} 106 107.coupons form { 108 display: grid; 109 grid-template-columns: 1fr 80px; 110 gap: 10px; 111 padding: 10px; 112} 113 114.input_field { 115 width: auto; 116 height: 36px; 117 padding: 0 0 0 12px; 118 border-radius: 5px; 119 outline: none; 120 border: 1px solid #e5e5e5; 121 filter: drop-shadow(0px 1px 0px #efefef) 122 drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); 123 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 124} 125 126.input_field:focus { 127 border: 1px solid transparent; 128 box-shadow: 0px 0px 0px 2px #242424; 129 background-color: transparent; 130} 131 132.coupons form button { 133 display: flex; 134 flex-direction: row; 135 justify-content: center; 136 align-items: center; 137 padding: 10px 18px; 138 gap: 10px; 139 width: 100%; 140 height: 36px; 141 background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%); 142 box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 143 border-radius: 5px; 144 border: 0; 145 font-style: normal; 146 font-weight: 600; 147 font-size: 12px; 148 line-height: 15px; 149 color: #ffffff; 150} 151 152/* Checkout */ 153.checkout { 154 border-radius: 9px 9px 19px 19px; 155} 156 157.checkout .details { 158 display: grid; 159 grid-template-columns: 3fr 1fr; 160 padding: 10px; 161 gap: 5px; 162} 163 164.checkout .details span { 165 font-size: 13px; 166 font-weight: 600; 167} 168 169.checkout .details span:nth-child(odd) { 170 font-size: 11px; 171 font-weight: 700; 172 color: #707175; 173 margin: auto auto auto 0; 174} 175 176.checkout .details span:nth-child(even) { 177 font-size: 13px; 178 font-weight: 600; 179 color: #47484b; 180 margin: auto 0 auto auto; 181} 182 183.checkout .checkout--footer { 184 display: flex; 185 align-items: center; 186 justify-content: space-between; 187 padding: 10px 10px 10px 20px; 188 background-color: #efeff3; 189} 190 191.price { 192 position: relative; 193 font-size: 22px; 194 color: #2B2B2F; 195 font-weight: 900; 196} 197 198.price sup { 199 font-size: 13px; 200} 201 202.price sub { 203 width: fit-content; 204 position: absolute; 205 font-size: 11px; 206 color: #5F5D6B; 207 bottom: 5px; 208 display: inline-block; 209} 210 211.checkout .checkout-btn { 212 display: flex; 213 flex-direction: row; 214 justify-content: center; 215 align-items: center; 216 width: 150px; 217 height: 36px; 218 background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%); 219 box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 220 border-radius: 7px; 221 border: 0; 222 outline: none; 223 color: #ffffff; 224 font-size: 13px; 225 font-weight: 600; 226 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 227}
19K views
MIT License