Card by MuhammadHasann
#212121
1.card { 2 --lime-500: #bdd910; 3 --violet-700: #8a07b8; 4 5 overflow: hidden; 6 position: relative; 7 display: flex; 8 flex-direction: column; 9 justify-content: center; 10 gap: 0.75rem; 11 12 padding: 1rem; 13 width: 14rem; 14 height: auto; 15 min-height: 16rem; 16 background-color: var(--lime-500); 17 18 border-radius: 0.5rem; 19} 20 21.card::before { 22 content: ""; 23 position: absolute; 24 top: 7rem; 25 right: 2rem; 26 27 width: 1.25rem; 28 aspect-ratio: 1 / 1; 29 background-color: var(--violet-700); 30 31 border-radius: 9999px; 32} 33 34.card::after { 35 content: ""; 36 position: absolute; 37 top: 8.75rem; 38 right: -0.5rem; 39 40 width: 3rem; 41 aspect-ratio: 1 / 1; 42 background-color: var(--violet-700); 43 44 border-radius: 9999px; 45} 46 47.card .carousel { 48 position: absolute; 49 left: 0; 50 51 animation: carousel 10s linear var(--carousel_direction, normal) infinite; 52} 53 54.card .carousel[data-direction="right"] { 55 --carousel_direction: reverse; 56} 57.card .carousel[data-position="top"] { 58 top: 0.75rem; 59} 60.card .carousel[data-position="bottom"] { 61 bottom: 0.75rem; 62} 63 64.card .carousel .carousel__text { 65 font-size: 0.75rem; 66 color: black; 67 text-wrap: nowrap; 68} 69 70@keyframes carousel { 71 to { 72 transform: translate(-50%); 73 } 74} 75 76.card .image { 77 position: relative; 78 z-index: 10; 79 display: flex; 80 justify-content: center; 81 align-items: center; 82 83 padding: 0.25rem; 84 margin-bottom: 0.5rem; 85 width: fit-content; 86 aspect-ratio: 1 / 1; 87 background-color: black; 88 89 border-radius: 0.25rem; 90} 91 92.card .image svg { 93 width: 1.5rem; 94 fill: white; 95} 96 97.card .title { 98 position: relative; 99 z-index: 10; 100 101 font-size: 1rem; 102 color: black; 103 font-weight: bold; 104} 105 106.card .paragraph { 107 position: relative; 108 z-index: 10; 109 110 padding-right: 0.25rem; 111 112 font-size: 0.75rem; 113 color: black; 114} 115
274 views
274 views
MIT License