{"html":"

\n \n \n

\n Image Here \n

\n\n

\n John Smith
\n Product Designer\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aperiam.

\n \n

\n\n

\n Following\n 56K\n

\n Followers\n 940\n

\n Likes\n 320\n

","css":".card {\n position: relative;\n width: 315px;\n height: 450px;\n margin: 30px auto;\n box-shadow: 0 0 100px rgba(0,0,0, .3);\n border-radius: 10px;\n}\n\n.card-header {\n position: relative;\n height: 220px;\n background-size: cover;\n background-position: top;\n}\n\n.card-header:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom, rgb(5,85,134), rgba(181,181,181, -0.20));\n border-radius: 10px;\n}\n\n.image {\n position: absolute;\n margin-top: 100px;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #222;\n font-size: 20px;\n font-weight: 400;\n}\n\n.card-header-bar {\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n width: 100%;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n clip: rect(0,0,0,0);\n border: none;\n overflow: hidden;\n}\n\n.btn-message {\n display: inline-block;\n width: 19.37px;\n height: 16.99px;\n margin-right: 10px;\n margin-top: 10px;\n float: right;\n}\n\n.btn-menu {\n display: inline-block;\n background: width: 19px;\n height: 12.16px;\n margin-left: 10px;\n margin-top: 10px;\n float: left;\n}\n\n.card-header-slanted-edge {\n position: absolute;\n bottom: -3px;\n z-index: 1;\n width: 100%;\n right: 0;\n left: 0;\n}\n\n.card-body {\n text-align: center;\n padding-left: 10px;\n}\n\n.name {\n font-size: 20px;\n font-weight: 700;\n text-transform: uppercase;\n margin: 0 auto;\n}\n\n.job-title {\n font-size: 14px;\n font-weight: 300;\n margin-top: 15px;\n color: #919191;\n}\n\n.bio {\n font-size: 14px;\n color: #7B7B7B;\n font-weight: 300;\n margin: 10px auto;\n line-height: 20px;\n}\n\n.social-accounts img {\n width: 15px;\n}\n\n.social-accounts a {\n margin-left: 10px;\n}\n\n.social-accounts a:first-child {\n margin-left: 0;\n}\n\n.card-footer {\n position: absolute;\n left: 0;\n width: 100%;\n bottom: 20px;\n}\n\n.stat {\n box-sizing: border-box;\n width: calc(100% / 3);\n float: left;\n text-align: center;\n}\n\n.stat:nth-child(2) {\n border-left: 1px solid grey;\n}\n\n.stat:nth-child(3) {\n border-left: 1px solid grey;\n}\n\n.stat .label {\n display: block;\n text-transform: uppercase;\n font-weight: 300;\n font-size: 11px;\n letter-spacing: 1px;\n color: #95989A;\n}\n\n.stat .value {\n display: block;\n font-weight: 700;\n font-size: 20px;\n margin-top: 5px;\n}"}

kind-lionfish-71

👁 实时预览

📝 源代码