Card by ZeroKaarma
#e8e8e8
1.main { 2 display: grid; 3 place-items: center; 4 width: 190px; 5 height: 254px; 6} 7 8.card { 9 width: 190px; 10 height: 254px; 11 background: #FAF1F6; 12 padding: 2rem 1.5rem; 13 transition: box-shadow .3s ease, transform .2s ease; 14 display: flex; 15 flex-direction: column; 16 position: absolute; 17} 18 19.card-info { 20 display: flex; 21 flex-direction: column; 22 justify-content: center; 23 align-items: center; 24} 25 26.card-avatar { 27 background: radial-gradient(#A8A6B6,#B3B1BF,#BDBBC7,#C5C4CE,#E2E2E7); 28 width: 100px; 29 height: 100px; 30 border-radius: 50%; 31 transition: transform .2s ease; 32} 33 34.card-avatar svg { 35 padding-top: 5px; 36 height: 80px; 37 width: 100px; 38 fill: #515F65; 39} 40 41.card-social { 42 display: flex; 43 justify-content: space-around; 44 width: 190px; 45 margin-top: 10%; 46 text-align: center; 47} 48 49.card-social-icon { 50 list-style: none; 51 color: #515F65; 52 font-size: 0.5em; 53 display: flex; 54 flex-direction: column; 55 align-items: center; 56} 57 58.card-social-icon svg { 59 display: block; 60 height: 20px; 61 width: 20px; 62 fill: #515F65; 63 cursor: pointer; 64} 65 66.card-title { 67 color: #1b1b1b; 68 font-size: 1.5em; 69 font-weight: 600; 70 line-height: 2rem; 71 margin-top: 5px; 72} 73 74.card-subtitle { 75 color: #7e93a0; 76 font-size: 1.0em; 77} 78 79.address-icon { 80 fill: #515F65; 81 height: 150px; 82 width: 100px; 83 list-style: none; 84 justify-content: space-around; 85} 86 87.address-title { 88 color: #333; 89 font-size: 1.0em; 90 font-weight: 600; 91 list-style: none; 92} 93 94.address { 95 color: #859ba8; 96 font-size: 0.8em; 97 list-style: none; 98 padding-left: 20px; 99 ; 100} 101 102.contact-title { 103 color: #333; 104 font-size: 1.5em; 105 font-weight: 600; 106 margin-top: 45%; 107 padding-bottom: 5px; 108} 109 110.card-contact { 111 color: #859ba8; 112 font-size: 0.8em; 113} 114 115.icon-contact { 116 list-style: none; 117 display: flex; 118 align-items: center; 119} 120 121.icon-contact svg { 122 display: block; 123 height: 18px; 124 width: 18px; 125 fill: #515F65; 126 padding-right: 5px; 127} 128 129.card:hover { 130 box-shadow: 0 10px 50px #23232333; 131} 132 133.card:hover .card-info { 134 transform: translateY(-5%); 135} 136 137.card-avatar:hover { 138 transform: scale(1.1); 139} 140 141#cs1:hover { 142 transform: scale(2.0); 143} 144 145#cs2:hover { 146 transform: scale(2.0); 147} 148 149#cs3:hover { 150 transform: scale(2.0); 151} 152 153.main:hover #c1 { 154 transform: translateX(0px); 155} 156 157.main:hover #c2 { 158 transform: translateX(200px); 159} 160 161.main:hover #c3 { 162 transform: translateX(-200px); 163}
2.7K views
2.7K views
MIT License