#212121
1.card { 2 --main-color: #fff; 3 --submain-color: #ccc; 4 --bg-color: #000; 5 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 6 position: relative; 7 width: 300px; 8 height: 384px; 9 display: flex; 10 flex-direction: column; 11 align-items: center; 12 border-radius: 20px; 13 background: var(--bg-color); 14} 15 16.card__img { 17 height: 192px; 18 width: 100%; 19} 20 21.card__img svg { 22 height: 100%; 23 border-radius: 20px 20px 0 0; 24} 25 26.card__avatar { 27 position: absolute; 28 width: 114px; 29 height: 114px; 30 background: var(--bg-color); 31 border-radius: 100%; 32 display: flex; 33 justify-content: center; 34 align-items: center; 35 top: calc(50% - 57px); 36} 37 38.card__avatar svg { 39 width: 100px; 40 height: 100px; 41} 42 43.card__title { 44 margin-top: 60px; 45 font-weight: 500; 46 font-size: 18px; 47 color: var(--main-color); 48} 49 50.card__subtitle { 51 margin-top: 10px; 52 font-weight: 400; 53 font-size: 15px; 54 color: var(--submain-color); 55} 56 57.card__btn { 58 margin-top: 15px; 59 width: 76px; 60 height: 31px; 61 border: 2px solid var(--main-color); 62 border-radius: 4px; 63 font-weight: 700; 64 font-size: 11px; 65 color: var(--main-color); 66 background: var(--bg-color); 67 text-transform: uppercase; 68 transition: all 0.3s; 69} 70 71.card__btn-solid { 72 background: var(--main-color); 73 color: var(--bg-color); 74} 75 76.card__btn:hover { 77 background: var(--main-color); 78 color: var(--bg-color); 79} 80 81.card__btn-solid:hover { 82 background: var(--bg-color); 83 color: var(--main-color); 84}
1K views
Variation of acard
1K views
Variation of acard
Comments
MIT License