Card by bociKond
#e8e8e8
1.wrapper { 2 position: relative; 3 --white: #e3e3e3; 4 --bc: rgb(203,46,79); 5 --bc-al: rgba(203,46,79,0.6); 6} 7 8.card { 9 max-width: 340px; 10 padding: 1rem 0; 11 display: grid; 12 grid-template-areas: "top" "bottom"; 13 grid-template-rows: 20% 1fr; 14 border: 1px solid var(--bc-al); 15 border-radius: .75rem; 16 background: var(--bc-al); 17 color: var(--white); 18 backdrop-filter: blur(14px); 19 box-shadow: 0 15px 30px -15px var(--bc-al); 20 isolation: isolate; 21} 22 23.circle-1 { 24 position: absolute; 25 content: ''; 26 width: 5rem; 27 height: 5rem; 28 left: 1rem; 29 top: 50%; 30 transform: translate(-50%); 31 background-color: var(--bc-al); 32 border-radius: 50%; 33 z-index: -10; 34} 35 36.circle-2 { 37 position: absolute; 38 content: ''; 39 width: 3rem; 40 height: 3rem; 41 right: -1rem; 42 top: 3rem; 43 background-color: var(--bc-al); 44 border-radius: 50%; 45 z-index: -10; 46} 47 48.top { 49 padding: .5rem 4rem; 50 z-index: 1; 51} 52 53.bottom { 54 z-index: 2; 55} 56 57.users { 58 display: flex; 59 flex-direction: column; 60 padding: .5rem 0; 61} 62 63.user { 64 width: 100%; 65 padding: .75rem 4rem; 66 display: flex; 67 gap: .1rem; 68 flex-direction: column; 69 align-items: flex; 70 font-size: 1.1rem; 71 border-bottom: 1px solid var(--bc-al); 72 position: relative; 73} 74 75.user:hover { 76 background-color: var(--bc-al); 77} 78 79.user:nth-last-child(1) { 80 border-bottom: none; 81} 82 83.user::before { 84 content: ''; 85 position: absolute; 86 width: 5px; 87 height: 5px; 88 left: 1.75rem; 89 top: 50%; 90 transform: translateY(-50%); 91 background-color: var(--white); 92 border-radius: 50%; 93} 94 95.user-name { 96 font-weight: 700; 97 font-style: italic; 98} 99 100.user-occupation { 101 opacity: .8; 102} 103 104.u-l { 105 font-size: 1.1rem; 106 font-weight: 700; 107 font-style: italic; 108}
1.2K views
1.2K views
MIT License