Card by IWhat1
#e8e8e8
1.container { 2 height: 294px; 3 width: 240px; 4 color: white; 5 perspective: 800px; 6 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 7} 8 9.card { 10 width: 100%; 11 height: 100%; 12 background: black; 13 border-radius: 2rem; 14 position: relative; 15 transition: transform 1500ms; 16 transform-style: preserve-3d; 17} 18 19.card-top { 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 height: 10%; 24 position: absolute; 25 width: 50%; 26 background-color: transparent; 27 border: 2px solid black; 28 top: 0; 29 border-top: none; 30 border-radius: 0 0 1rem 1rem; 31 box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.7); 32} 33 34.card-top-para { 35 font-size: 16px; 36 font-weight: bold; 37} 38 39.container:hover > .card { 40 cursor: pointer; 41 transform: rotateX(180deg) rotateZ(-180deg); 42} 43 44.front, 45.back { 46 height: 100%; 47 width: 100%; 48 border-radius: 2rem; 49 box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.7); 50 position: absolute; 51 backface-visibility: hidden; 52 display: flex; 53 flex-direction: column; 54 align-items: center; 55 justify-content: center; 56 gap: 20px; 57} 58 59.back { 60 background-color: black; 61 transform: rotateX(180deg) rotateZ(-180deg); 62} 63 64.heading { 65 font-size: 22px; 66 font-weight: bold; 67} 68 69.follow { 70 font-size: 16px; 71 font-weight: 500; 72} 73 74.icons { 75 display: flex; 76 flex-direction: row; 77 gap: 20px; 78 margin-top: 20px; 79} 80
828 views
Variation of acard
MIT License