{"html":"

Contact

\n \n Tel:(+00) 000 99999-0000\n

\n \n Email: contact@mail.com\n

\n\n

\n \n

Address:

Champs Elysees, Paris.

\n\n

\n \n

Main Title

Sub-title

\n \n

","css":".main {\n display: grid;\n place-items: center;\n width: 190px;\n height: 254px;\n}\n\n.card {\n width: 190px;\n height: 254px;\n background: #FAF1F6;\n padding: 2rem 1.5rem;\n transition: box-shadow .3s ease, transform .2s ease;\n display: flex;\n flex-direction: column;\n position: absolute;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.card-avatar {\n background: radial-gradient(#A8A6B6,#B3B1BF,#BDBBC7,#C5C4CE,#E2E2E7);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n transition: transform .2s ease;\n}\n\n.card-avatar svg {\n padding-top: 5px;\n height: 80px;\n width: 100px;\n fill: #515F65;\n}\n\n.card-social {\n display: flex;\n justify-content: space-around;\n width: 190px;\n margin-top: 10%;\n text-align: center;\n}\n\n.card-social-icon {\n list-style: none;\n color: #515F65;\n font-size: 0.5em;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.card-social-icon svg {\n display: block;\n height: 20px;\n width: 20px;\n fill: #515F65;\n cursor: pointer;\n}\n\n.card-title {\n color: #1b1b1b;\n font-size: 1.5em;\n font-weight: 600;\n line-height: 2rem;\n margin-top: 5px;\n}\n\n.card-subtitle {\n color: #7e93a0;\n font-size: 1.0em;\n}\n\n.address-icon {\n fill: #515F65;\n height: 150px;\n width: 100px;\n list-style: none;\n justify-content: space-around;\n}\n\n.address-title {\n color: #333;\n font-size: 1.0em;\n font-weight: 600;\n list-style: none;\n}\n\n.address {\n color: #859ba8;\n font-size: 0.8em;\n list-style: none;\n padding-left: 20px;\n ;\n}\n\n.contact-title {\n color: #333;\n font-size: 1.5em;\n font-weight: 600;\n margin-top: 45%;\n padding-bottom: 5px;\n}\n\n.card-contact {\n color: #859ba8;\n font-size: 0.8em;\n}\n\n.icon-contact {\n list-style: none;\n display: flex;\n align-items: center;\n}\n\n.icon-contact svg {\n display: block;\n height: 18px;\n width: 18px;\n fill: #515F65;\n padding-right: 5px;\n}\n\n.card:hover {\n box-shadow: 0 10px 50px #23232333;\n}\n\n.card:hover .card-info {\n transform: translateY(-5%);\n}\n\n.card-avatar:hover {\n transform: scale(1.1);\n}\n\n#cs1:hover {\n transform: scale(2.0);\n}\n\n#cs2:hover {\n transform: scale(2.0);\n}\n\n#cs3:hover {\n transform: scale(2.0);\n}\n\n.main:hover #c1 {\n transform: translateX(0px);\n}\n\n.main:hover #c2 {\n transform: translateX(200px);\n}\n\n.main:hover #c3 {\n transform: translateX(-200px);\n}"}

wet-goat-13

👁 实时预览

📝 源代码