Card by htwarriors108
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 border-radius: 1em; 5 flex-direction: column; 6 justify-content: space-evenly; 7 background-color: #080808; 8 box-shadow: 0 0 2rem rgba(0, 0, 0, 0.8); 9 cursor: pointer; 10 transition: 0.2s ease-in-out; 11 padding: 5px; 12 color: #fff; 13} 14 15.card:hover { 16 rotate: 1deg; 17 scale: 1.05; 18} 19 20.card, .imgBox, .caller { 21 display: flex; 22 align-items: center; 23} 24 25.imgBox { 26 width: 6em; 27 height: 6em; 28 box-shadow: 0px 0.25em 1rem rgba(255, 255, 255, 0.5); 29 border-radius: 50%; 30 justify-content: center; 31} 32 33.imgBox svg { 34 width: 100%; 35 height: 100%; 36} 37 38.name { 39 width: 100%; 40 text-align: center; 41 font-weight: 900; 42 transition: 1s ease-in-out; 43} 44 45.name .p1 { 46 font-size: 1.2em; 47} 48 49.name .p2 { 50 font-size: 0.8em; 51 color: rgb(50, 146, 255); 52} 53 54.caller { 55 width: 100%; 56 flex-direction: row; 57 justify-content: space-evenly; 58} 59 60.callerBtn { 61 width: 2em; 62 height: 2em; 63 border-radius: 50%; 64 display: flex; 65 align-items: center; 66 justify-content: center; 67 color: #fff; 68 font-size: 1.5rem; 69 cursor: pointer; 70 transition: 0.1s ease-in-out; 71 animation: animate linear infinite 2s; 72} 73 74.callerBtn:hover { 75 scale: 1.1; 76} 77 78#pick { 79 background-color: #28ff28; 80 box-shadow: 0px 3px 10px #28ff28; 81} 82 83#end { 84 background-color: #ff2828; 85 box-shadow: 0px 3px 10px #ff2828; 86} 87 88#end svg { 89 rotate: 135deg; 90} 91 92@keyframes animate { 93 0% { 94 transform: translateY(0px); 95 } 96 97 50% { 98 transform: translateY(3px) rotate(-10deg); 99 } 100 101 100% { 102 transform: translateY(0px); 103 } 104}
1.4K views
1.4K views
MIT License