1.1K views
CSS
1.card { 2 width: 340px; 3 height: 150px; 4 background: whitesmoke; 5 transition: .2s linear; 6 box-shadow: 1px 1px 10px lightslategray; 7 cursor: default; 8} 9 10.card-top-part { 11 width: 100%; 12 height: 70%; 13 padding: 15px; 14 display: flex; 15} 16 17.left-part { 18 width: 70%; 19 display: flex; 20 flex-direction: column; 21 justify-content: space-around; 22} 23 24.right-part { 25 width: 30%; 26 height: 100%; 27 display: flex; 28 align-items: center; 29 justify-content: flex-end; 30} 31 32.user-name { 33 display: flex; 34 align-items: center; 35 justify-content: flex-start; 36 gap: 10px; 37} 38 39.name { 40 font-size: 24px; 41} 42 43.role { 44 font-size: 10px; 45 color: lightcyan; 46 font-weight: bold; 47 text-transform: lowercase; 48 background-color: lightskyblue; 49 padding: 4px 10px; 50 border-radius: 15px; 51} 52 53.position { 54 color: grey; 55} 56 57.card-bottom-part { 58 width: 100%; 59 height: 30%; 60 display: flex; 61 border: 1px solid rgb(231, 227, 227); 62 border-bottom-left-radius: inherit; 63 border-bottom-right-radius: inherit; 64} 65 66.user-photo { 67 width: 4.5rem; 68 overflow: hidden; 69 border-radius: 50%; 70 border: 1px solid rgb(231, 227, 227); 71 box-shadow: 2px 2px 10px lightslategray; 72 display: flex; 73 align-items: center; 74 justify-content: center; 75} 76 77img { 78 width: 100%; 79} 80 81.bottom-part { 82 width: 50%; 83 height: 100%; 84 display: flex; 85 flex-direction: row; 86 align-items: center; 87 justify-content: center; 88} 89 90.bottom-part:hover > .link { 91 transform: scale(1.1); 92} 93 94.link { 95 display: flex; 96 align-items: center; 97 justify-content: center; 98 font-size: 14px; 99 gap: 5.5px; 100 font-weight: bold; 101 transition: .2s linear; 102} 103 104.icon { 105 width: fit-content; 106 height: fit-content; 107 display: flex; 108 align-items: center; 109 justify-content: center; 110} 111 112.bottom-part:first-child { 113 border-right: 1px solid rgb(231, 227, 227); 114}
HTML
1 2<div class="card"> 3 <div class="card-top-part"> 4 <div class="left-part"> 5 <div class="user-name"> 6 <p class="name">Jane Doe</p> 7 <p class="role"> Admin </p> 8 </div> 9 <div class="user-position"> 10 <p class="position"> 11 Front-End Developer 12 </p> 13 </div> 14 </div> 15 <div class="right-part"> 16 <div class="user-photo"> 17 <img src="https://randomuser.me/api/portraits/women/79.jpg" class="photo"> 18 </div> 19 </div> 20 </div> 21 <div class="card-bottom-part"> 22 <div class="bottom-part"> 23 <a href="mailto: [email protected]" class="link"> 24 <span class="icon"> 25 <svg viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20"> 26 <path transform="translate(1.25 3.75)" d="M16.25,12.5h-15A1.252,1.252,0,0,1,0,11.25v-10A1.252,1.252,0,0,1,1.25,0h15A1.251,1.251,0,0,1,17.5,1.25v10A1.251,1.251,0,0,1,16.25,12.5ZM1.25,1.819V11.25h15V1.819L9.106,6.763a.626.626,0,0,1-.713,0ZM2.625,1.25,8.75,5.487,14.875,1.25Z" id="Fill"></path> 27 </svg> 28 </span> 29 Email 30 </a> 31 </div> 32 <div class="bottom-part"> 33 <a href="tel: 0123456789" class="link"> 34 <span class="icon"> 35 <svg viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20"> 36 <path transform="translate(1.869 1.875)" d="M14.381,16.25h-.106C2,15.544.249,5.179.006,2.019A1.874,1.874,0,0,1,1.731,0H5.175A1.243,1.243,0,0,1,6.337.787l.95,2.337a1.247,1.247,0,0,1-.275,1.35L5.681,5.818a5.875,5.875,0,0,0,4.738,4.75l1.356-1.344a1.25,1.25,0,0,1,1.356-.257l2.356.944a1.245,1.245,0,0,1,.769,1.163v3.3A1.877,1.877,0,0,1,14.381,16.25Zm-12.5-15a.625.625,0,0,0-.625.625v.05C1.545,5.648,3.4,14.375,14.343,15h.038a.625.625,0,0,0,.625-.589V11.075l-2.356-.944-1.794,1.781-.3-.038A6.733,6.733,0,0,1,5.429,8.553,8.171,8.171,0,0,1,4.381,5.7l-.038-.3L6.118,3.606,5.181,1.25Z" id="Fill"></path> 37 </svg> 38 </span> 39 Phone 40 </a> 41 </div> 42 </div> 43</div>