Card by bociKond
#e8e8e8
1.card * { 2 box-sizing: border-box; 3} 4 5.card { 6 --bc: #c97d60; 7 --bc1: #904c31; 8 --bc-al: #c97d6050; 9 --clr: #f2e5d7; 10 background-color: var(--bc); 11 color: var(--clr); 12 padding: 2rem 2.5rem; 13 border-radius: 0.75rem; 14 box-shadow: 0 10px 40px -1px var(--bc-al); 15 outline: 2px solid var(--bc); 16 outline-offset: 4px; 17 max-width: 300px; 18 max-height: 300px; 19 transition: 0.3s ease-in-out; 20 display: flex; 21 flex-direction: column; 22 align-items: center; 23 gap: 2rem; 24 line-height: 1.3; 25} 26 27.card:hover { 28 --bc: #904c31; 29} 30 31.img { 32 max-width: 100%; 33 width: 5rem; 34 aspect-ratio: 1/1; 35 border-radius: 50%; 36 outline: 2px solid var(--clr); 37 outline-offset: 4px; 38 fill: var(--clr); 39} 40 41.text { 42 display: flex; 43 flex-direction: column; 44 align-items: center; 45} 46 47.heading { 48 font-size: 1.5rem; 49 font-weight: 700; 50} 51 52.info { 53 font-size: 0.9rem; 54 font-weight: 500; 55 opacity: 0.7; 56} 57 58.country { 59 display: flex; 60 align-items: center; 61 font-size: 1rem; 62 gap: .2rem; 63} 64 65.svg-country { 66 width: 1rem; 67 height: 1rem; 68} 69 70.soc { 71 display: flex; 72 align-items: center; 73 justify-content: center; 74 gap: 2rem; 75 list-style: none; 76 margin-top: 0.5rem; 77 padding-bottom: 0; 78 margin-inline: auto; 79} 80 81.li-soc { 82 display: flex; 83 align-items: center; 84 justify-content: center; 85 text-decoration: none; 86 color: var(--clr); 87 width: 0.5rem; 88 height: 0.5rem; 89 padding: 0.5rem; 90} 91 92.li-soc:hover { 93 opacity: 0.7; 94}
1.7K views
MIT License