Card by aadium
#212121
1.flip-card { 2 background-color: transparent; 3 width: 245px; 4 height: 270px; 5 perspective: 1000px; 6 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 7} 8 9.flip-card-inner { 10 position: relative; 11 width: 100%; 12 height: 100%; 13 text-align: center; 14 transition: transform 0.6s; 15 transform-style: preserve-3d; 16} 17 18.flip-card-front, .flip-card-back { 19 position: absolute; 20 width: 100%; 21 height: 100%; 22 padding: 5px; 23 border-radius: 2em; 24 backface-visibility: hidden; 25} 26 27.flip-card-front { 28 background-color: #240d29; 29 border: 4px solid #c143da; 30} 31 32.profile-image { 33 background-color: transparent; 34 border: none; 35 margin-top: 15px; 36 border-radius: 5em; 37 width: 120px; 38 height: 120px; 39 margin-left: 50px; 40} 41 42.pfp { 43 border-radius: 35em; 44 fill: #c143da; 45} 46 47.name { 48 margin-top: 15px; 49 font-size: 27px; 50 color: #c143da; 51 font-weight: bold; 52} 53 54.flip-card-back { 55 background-color: #240d29; 56 border: 4px solid #c143da; 57 transform: rotateY(180deg); 58 padding: 11px; 59} 60 61.description { 62 margin-top: 10px; 63 font-size: 14px; 64 letter-spacing: 1px; 65 color: white 66} 67 68.socialbar { 69 background-color: transparent; 70 border-radius: 3em; 71 width: 90%; 72 padding: 14px; 73 margin-top: 11px; 74 margin-left: 10px; 75 word-spacing: 24px; 76 color: white; 77} 78 79.socialbar svg { 80 transition: 0.4s; 81 width: 20px; 82 height: 20px; 83 color: #c143da 84} 85 86.socialbar svg:hover { 87 color: white; 88} 89 90.flip-card:hover .flip-card-inner { 91 transform: rotateY(180deg); 92} 93
2.5K views
2.5K views
MIT License