Card by Cobp
#e8e8e8
1.card { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 background-color: #242824; 6 padding: 10px; 7 border-radius: 6px; 8 gap: 0.5rem; 9 height: max-content; 10} 11.card_form { 12 position: relative; 13 width: 15em; 14 height: 15em; 15 border-radius: 4px; 16 background-color: #9147ff; 17 transition: 0.2s ease-in-out; 18 overflow: hidden; 19} 20.card_form span { 21 font-size: 1.5em; 22 position: absolute; 23 inset: 0; 24 padding: 5px 10px; 25 color: #fff; 26 background-image: linear-gradient( 27 to top, 28 rgba(0, 0, 0, 0) 0%, 29 rgba(0, 0, 0, 0.7) 100% 30 ); 31 opacity: 0; 32 transition: all 0.2s ease-in-out; 33} 34.card:hover .card_form span, 35.card:hover .card_data span { 36 opacity: 1; 37} 38.card_data { 39 display: flex; 40 align-items: center; 41 justify-content: space-between; 42} 43.card_data span { 44 color: #9147ff; 45 display: flex; 46 align-items: center; 47 font-size: 0.9em; 48 transition: 0.2s ease-in-out; 49 opacity: 0; 50 cursor: pointer; 51} 52.card_data span:hover { 53 text-decoration: underline; 54} 55.text { 56 display: flex; 57 justify-content: center; 58 flex-direction: column; 59 color: white; 60} 61.text_m { 62 font-size: 0.9em; 63} 64.text_s { 65 color: #9147ff; 66 font-size: 0.6em; 67} 68.cube { 69 width: max-content; 70 height: 10px; 71 transition: all 0.2s; 72 transform-style: preserve-3d; 73} 74.card:hover .cube { 75 transform: rotateX(90deg); 76} 77.side { 78 width: max-content; 79 height: 1em; 80 display: flex; 81 justify-content: center; 82 align-items: center; 83 text-transform: uppercase; 84 letter-spacing: 0.5px; 85 font-weight: bold; 86} 87.top { 88 transform: rotateX(-90deg) translate3d(0, 0, 0em); 89} 90.front { 91 transform: translate3d(0, 0, 1em); 92} 93
260 views
260 views
MIT License