Card by JaydipPrajapati1910
#e8e8e8
1.card { 2 position: relative; 3 width: 315px; 4 height: 450px; 5 margin: 30px auto; 6 box-shadow: 0 0 100px rgba(0,0,0, .3); 7 border-radius: 10px; 8} 9 10.card-header { 11 position: relative; 12 height: 220px; 13 background-size: cover; 14 background-position: top; 15} 16 17.card-header:after { 18 content: ''; 19 position: absolute; 20 width: 100%; 21 height: 100%; 22 background: linear-gradient(to bottom, rgb(5,85,134), rgba(181,181,181, -0.20)); 23 border-radius: 10px; 24} 25 26.image { 27 position: absolute; 28 margin-top: 100px; 29 left: 50%; 30 transform: translate(-50%, -50%); 31 color: #222; 32 font-size: 20px; 33 font-weight: 400; 34} 35 36.card-header-bar { 37 position: absolute; 38 top: 0; 39 width: 100%; 40 z-index: 1; 41 width: 100%; 42} 43 44.sr-only { 45 position: absolute; 46 width: 1px; 47 height: 1px; 48 clip: rect(0,0,0,0); 49 border: none; 50 overflow: hidden; 51} 52 53.btn-message { 54 display: inline-block; 55 width: 19.37px; 56 height: 16.99px; 57 margin-right: 10px; 58 margin-top: 10px; 59 float: right; 60} 61 62.btn-menu { 63 display: inline-block; 64 background: width: 19px; 65 height: 12.16px; 66 margin-left: 10px; 67 margin-top: 10px; 68 float: left; 69} 70 71.card-header-slanted-edge { 72 position: absolute; 73 bottom: -3px; 74 z-index: 1; 75 width: 100%; 76 right: 0; 77 left: 0; 78} 79 80.card-body { 81 text-align: center; 82 padding-left: 10px; 83} 84 85.name { 86 font-size: 20px; 87 font-weight: 700; 88 text-transform: uppercase; 89 margin: 0 auto; 90} 91 92.job-title { 93 font-size: 14px; 94 font-weight: 300; 95 margin-top: 15px; 96 color: #919191; 97} 98 99.bio { 100 font-size: 14px; 101 color: #7B7B7B; 102 font-weight: 300; 103 margin: 10px auto; 104 line-height: 20px; 105} 106 107.social-accounts img { 108 width: 15px; 109} 110 111.social-accounts a { 112 margin-left: 10px; 113} 114 115.social-accounts a:first-child { 116 margin-left: 0; 117} 118 119.card-footer { 120 position: absolute; 121 left: 0; 122 width: 100%; 123 bottom: 20px; 124} 125 126.stat { 127 box-sizing: border-box; 128 width: calc(100% / 3); 129 float: left; 130 text-align: center; 131} 132 133.stat:nth-child(2) { 134 border-left: 1px solid grey; 135} 136 137.stat:nth-child(3) { 138 border-left: 1px solid grey; 139} 140 141.stat .label { 142 display: block; 143 text-transform: uppercase; 144 font-weight: 300; 145 font-size: 11px; 146 letter-spacing: 1px; 147 color: #95989A; 148} 149 150.stat .value { 151 display: block; 152 font-weight: 700; 153 font-size: 20px; 154 margin-top: 5px; 155}
1.5K views
1.5K views
MIT License