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