This post is saved as a draft.
#e8e8e8
1.card { 2 position: relative; 3 display: flex; 4 width: 350px; 5 background-color: #242824; 6 padding: 10px; 7 border-radius: 6px; 8 gap: 0.5rem; 9 height: max-content; 10} 11.bar { 12 width: 10px; 13 border-radius: 5px; 14 background-color: #9147ff; 15 transition: all 0.5s ease-in-out; 16} 17.card:hover .bar { 18 margin-right: 5px; 19} 20.card_form { 21 position: relative; 22 min-width: 5em; 23 min-height: 5em; 24 border-radius: 4px; 25 background-color: #9147ff; 26 transition: 0.2s ease-in-out; 27 overflow: hidden; 28} 29.card_data { 30 display: flex; 31 align-items: center; 32 justify-content: space-between; 33} 34.card_data span { 35 color: #9147ff; 36 margin-top: auto; 37 font-size: 0.9em; 38 transition: 0.2s ease-in-out; 39 cursor: pointer; 40} 41.card_data span:hover { 42 color: #28aea5; 43 text-decoration: underline; 44} 45.text { 46 display: flex; 47 justify-content: center; 48 flex-direction: column; 49 margin-left: 0.5em; 50 color: white; 51} 52.text_m { 53 font-size: 0.9em; 54} 55.text_s { 56 color: #9147ff; 57 font-size: 0.6em; 58} 59.text_d { 60 font-size: 0.7em; 61 display: -webkit-box; 62 -webkit-box-orient: vertical; 63 -webkit-line-clamp: 3; 64 overflow: hidden; 65} 66.cube { 67 width: max-content; 68 height: 10px; 69 transition: all 0.2s; 70 transform-style: preserve-3d; 71} 72.card:hover .cube { 73 transform: rotateX(90deg); 74} 75.side { 76 width: max-content; 77 height: 1em; 78 display: flex; 79 justify-content: center; 80 align-items: center; 81 text-transform: uppercase; 82 letter-spacing: 0.5px; 83 font-weight: bold; 84} 85.top { 86 transform: rotateX(-90deg) translate3d(0, 0, 0em); 87} 88.front { 89 transform: translate3d(0, 0, 1em); 90} 91
Variation of acard
Variation of acard