Card by MUMuhammadHasann
#212121
1.card { 2 --white: hsl(0, 0%, 100%); 3 --black: hsl(240, 15%, 9%); 4 --paragraph: hsl(0, 0%, 83%); 5 --line: hsl(240, 9%, 17%); 6 --primary: hsl(266, 92%, 58%); 7 8 position: relative; 9 10 display: flex; 11 flex-direction: column; 12 gap: 1rem; 13 14 padding: 1rem; 15 width: 19rem; 16 background-color: hsla(240, 15%, 9%, 1); 17 background-image: radial-gradient( 18 at 88% 40%, 19 hsla(240, 15%, 9%, 1) 0px, 20 transparent 85% 21 ), 22 radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), 23 radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), 24 radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%), 25 radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%), 26 radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%); 27 28 border-radius: 1rem; 29 box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset; 30} 31 32.card .card__border { 33 overflow: hidden; 34 pointer-events: none; 35 36 position: absolute; 37 z-index: -10; 38 top: 50%; 39 left: 50%; 40 transform: translate(-50%, -50%); 41 42 width: calc(100% + 2px); 43 height: calc(100% + 2px); 44 background-image: linear-gradient( 45 0deg, 46 hsl(0, 0%, 100%) -50%, 47 hsl(0, 0%, 40%) 100% 48 ); 49 50 border-radius: 1rem; 51} 52 53.card .card__border::before { 54 content: ""; 55 pointer-events: none; 56 57 position: fixed; 58 z-index: 200; 59 top: 50%; 60 left: 50%; 61 transform: translate(-50%, -50%), rotate(0deg); 62 transform-origin: left; 63 64 width: 200%; 65 height: 10rem; 66 background-image: linear-gradient( 67 0deg, 68 hsla(0, 0%, 100%, 0) 0%, 69 hsl(277, 95%, 60%) 40%, 70 hsl(277, 95%, 60%) 60%, 71 hsla(0, 0%, 40%, 0) 100% 72 ); 73 74 animation: rotate 8s linear infinite; 75} 76 77@keyframes rotate { 78 to { 79 transform: rotate(360deg); 80 } 81} 82 83.card .card_title__container .card_title { 84 font-size: 1rem; 85 color: var(--white); 86} 87 88.card .card_title__container .card_paragraph { 89 margin-top: 0.25rem; 90 width: 65%; 91 92 font-size: 0.5rem; 93 color: var(--paragraph); 94} 95 96.card .line { 97 width: 100%; 98 height: 0.1rem; 99 background-color: var(--line); 100 101 border: none; 102} 103 104.card .card__list { 105 display: flex; 106 flex-direction: column; 107 gap: 0.5rem; 108} 109 110.card .card__list .card__list_item { 111 display: flex; 112 align-items: center; 113 gap: 0.5rem; 114} 115 116.card .card__list .card__list_item .check { 117 display: flex; 118 justify-content: center; 119 align-items: center; 120 121 width: 1rem; 122 height: 1rem; 123 background-color: var(--primary); 124 125 border-radius: 50%; 126} 127 128.card .card__list .card__list_item .check .check_svg { 129 width: 0.75rem; 130 height: 0.75rem; 131 132 fill: var(--black); 133} 134 135.card .card__list .card__list_item .list_text { 136 font-size: 0.75rem; 137 color: var(--white); 138} 139 140.card .button { 141 cursor: pointer; 142 143 padding: 0.5rem; 144 width: 100%; 145 background-image: linear-gradient( 146 0deg, 147 rgba(94, 58, 238, 1) 0%, 148 rgba(197, 107, 240, 1) 100% 149 ); 150 151 font-size: 0.75rem; 152 color: var(--white); 153 154 border: 0; 155 border-radius: 9999px; 156 box-shadow: inset 0 -2px 25px -4px var(--white); 157} 158
7.7K views
MIT License