Card by MuhammadHasann
#e8e8e8
1.card { 2 --bg-card: #27272a; 3 --primary: #6d28d9; 4 --primary-800: #4c1d95; 5 --primary-shadow: #2e1065; 6 --light: #d9d9d9; 7 --zinc-800: #18181b; 8 --bg-linear: linear-gradient(0deg, var(--primary) 50%, var(--light) 125%); 9 10 position: relative; 11 12 display: flex; 13 flex-direction: column; 14 gap: 0.75rem; 15 16 padding: 1rem; 17 width: 14rem; 18 background-color: var(--bg-card); 19 20 border-radius: 1rem; 21} 22 23.image_container { 24 overflow: hidden; 25 cursor: pointer; 26 27 position: relative; 28 z-index: 5; 29 30 width: 100%; 31 height: 8rem; 32 background-color: var(--primary-800); 33 34 border-radius: 0.5rem; 35} 36 37.image_container .image { 38 position: absolute; 39 top: 50%; 40 left: 50%; 41 transform: translate(-50%, -50%); 42 43 width: 3rem; 44 fill: var(--light); 45} 46 47.title { 48 overflow: clip; 49 50 width: 100%; 51 52 font-size: 1rem; 53 font-weight: 600; 54 color: var(--light); 55 text-transform: capitalize; 56 text-wrap: nowrap; 57 text-overflow: ellipsis; 58} 59 60.size { 61 font-size: 0.75rem; 62 color: var(--light); 63} 64 65.list-size { 66 display: flex; 67 align-items: center; 68 gap: 0.25rem; 69 70 margin-top: 0.25rem; 71} 72 73.list-size .item-list { 74 list-style: none; 75} 76 77.list-size .item-list-button { 78 cursor: pointer; 79 80 padding: 0.5rem; 81 background-color: var(--zinc-800); 82 83 font-size: 0.75rem; 84 color: var(--light); 85 86 border: 2px solid var(--zinc-800); 87 border-radius: 0.25rem; 88 89 transition: all 0.3s ease-in-out; 90} 91 92.item-list-button:hover { 93 border: 2px solid var(--light); 94} 95.item-list-button:focus { 96 background-color: var(--primary); 97 98 border: 2px solid var(--primary-shadow); 99 100 box-shadow: inset 0px 1px 4px var(--primary-shadow); 101} 102 103.action { 104 display: flex; 105 align-items: center; 106 gap: 1rem; 107} 108 109.price { 110 font-size: 1.5rem; 111 font-weight: 700; 112 color: var(--light); 113} 114 115.cart-button { 116 cursor: pointer; 117 118 display: flex; 119 justify-content: center; 120 align-items: center; 121 gap: 0.25rem; 122 123 padding: 0.5rem; 124 width: 100%; 125 background-image: var(--bg-linear); 126 127 font-size: 0.75rem; 128 font-weight: 500; 129 color: var(--light); 130 text-wrap: nowrap; 131 132 border: 2px solid hsla(262, 83%, 58%, 0.5); 133 border-radius: 0.5rem; 134 box-shadow: inset 0 0 0.25rem 1px var(--light); 135} 136 137.cart-button .cart-icon { 138 width: 1rem; 139} 140
1.4K views
1.4K views
MIT License