6.3K views
1.card-client { 2 background: #2cb5a0; 3 width: 13rem; 4 padding-top: 25px; 5 padding-bottom: 25px; 6 padding-left: 20px; 7 padding-right: 20px; 8 border: 4px solid #7cdacc; 9 box-shadow: 0 6px 10px rgba(207, 212, 222, 1); 10 border-radius: 10px; 11 text-align: center; 12 color: #fff; 13 font-family: "Poppins", sans-serif; 14 transition: all 0.3s ease; 15} 16 17.card-client:hover { 18 transform: translateY(-10px); 19} 20 21.user-picture { 22 overflow: hidden; 23 object-fit: cover; 24 width: 5rem; 25 height: 5rem; 26 border: 4px solid #7cdacc; 27 border-radius: 999px; 28 display: flex; 29 justify-content: center; 30 align-items: center; 31 margin: auto; 32} 33 34.user-picture svg { 35 width: 2.5rem; 36 fill: currentColor; 37} 38 39.name-client { 40 margin: 0; 41 margin-top: 20px; 42 font-weight: 600; 43 font-size: 18px; 44} 45 46.name-client span { 47 display: block; 48 font-weight: 200; 49 font-size: 16px; 50} 51 52.social-media:before { 53 content: " "; 54 display: block; 55 width: 100%; 56 height: 2px; 57 margin: 20px 0; 58 background: #7cdacc; 59} 60 61.social-media a { 62 position: relative; 63 margin-right: 15px; 64 text-decoration: none; 65 color: inherit; 66} 67 68.social-media a:last-child { 69 margin-right: 0; 70} 71 72.social-media a svg { 73 width: 1.1rem; 74 fill: currentColor; 75} 76 77/*-- Tooltip Social Media --*/ 78.tooltip-social { 79 background: #262626; 80 display: block; 81 position: absolute; 82 bottom: 0; 83 left: 50%; 84 padding: 0.5rem 0.4rem; 85 border-radius: 5px; 86 font-size: 0.8rem; 87 font-weight: 600; 88 opacity: 0; 89 pointer-events: none; 90 transform: translate(-50%, -90%); 91 transition: all 0.2s ease; 92 z-index: 1; 93} 94 95.tooltip-social:after { 96 content: " "; 97 position: absolute; 98 bottom: 1px; 99 left: 50%; 100 border: solid; 101 border-width: 10px 10px 0 10px; 102 border-color: transparent; 103 transform: translate(-50%, 100%); 104} 105 106.social-media a .tooltip-social:after { 107 border-top-color: #262626; 108} 109 110.social-media a:hover .tooltip-social { 111 opacity: 1; 112 transform: translate(-50%, -130%); 113}
Variations
abrahamcalsin
Abraham Calsin
Frontend Developer. I love writing in React.js, Next.js, TypeScript. 🚀
MIT License