Card by vinodjangid07
#e8e8e8
1.rating-card { 2 width: 280px; 3 height: fit-content; 4 display: flex; 5 flex-direction: column; 6 justify-content: space-between; 7 align-items: center; 8 background: #0f0c29; 9 background: linear-gradient(to right bottom, #443e89, #0f0c29); 10 padding: 20px 20px; 11 border-radius: 10px; 12 gap: 10px; 13 font-family: Arial, Helvetica, sans-serif; 14 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.058); 15} 16.text-wrapper { 17 width: 100%; 18 height: fit-content; 19 display: flex; 20 flex-direction: column; 21 align-items: center; 22 justify-content: center; 23 gap: 5px; 24} 25.text-primary { 26 color: white; 27 font-size: 15px; 28 font-weight: 600; 29 letter-spacing: 0.5px; 30} 31.text-secondary { 32 color: #cccccc; 33 font-size: 10px; 34 font-weight: 400; 35 letter-spacing: 0.5px; 36} 37.rating-stars-container { 38 width: 100%; 39 height: 30px; 40 display: flex; 41 flex-direction: row-reverse; 42 align-items: center; 43 justify-content: center; 44} 45.star-label svg { 46 fill: rgb(210, 210, 210); 47 width: 20px; 48 height: auto; 49} 50.rating-stars-container input { 51 appearance: unset; 52} 53.rating-stars-container input:hover ~ .star-label svg { 54 fill: rgb(255, 204, 185); 55} 56.rating-stars-container input:checked ~ .star-label svg { 57 fill: rgb(255, 102, 47); 58 animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 59} 60@keyframes slide-in-fwd-center { 61 0% { 62 transform: scale(1.6); 63 } 64 100% { 65 transform: scale(1); 66 } 67} 68 69.socials-container { 70 width: 50%; 71 display: flex; 72 justify-content: center; 73 align-items: center; 74 gap: 10px; 75 padding-top: 20px; 76 border-top: 1px solid rgb(150, 150, 150); 77} 78.social-button { 79 text-decoration: none; 80} 81.social-button svg { 82 width: 15px; 83 fill: rgb(228, 228, 228); 84} 85.social-button:hover svg { 86 fill: rgb(255, 102, 47); 87} 88
663 views
663 views
MIT License