{"html":"

Hover Me

Chris Stark

Frontend Developer

\n \n \n \n \n\n \n \n

","css":".cardContainer {\n width: 200px;\n height: 250px;\n background-color: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n transition-duration: .5s;\n cursor: pointer;\n}\n\n.profileDiv {\n z-index: 2;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgb(24, 24, 24);\n transition-duration: .5s;\n color: rgb(155, 155, 155);\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n font-weight: 500;\n font-size: 16px;\n}\n\n.cardContainer:hover .profileDiv {\n transform: translateX(-25%) translateY(-20%);\n transition-duration: .5s;\n}\n\n.infoDiv {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: aliceblue;\n z-index: 1;\n}\n\n.nameDiv {\n width: 75%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n background-color: aliceblue;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n gap: 2px;\n}\n\n.name {\n margin: 0;\n padding: 0;\n font-size: 16px;\n font-weight: 500;\n color: black;\n}\n\n.role {\n margin: 0;\n padding: 0;\n font-size: 13px;\n font-weight: 400;\n color: rgb(48, 48, 48);\n margin-bottom: 5px;\n}\n\n.socialDiv {\n width: 25%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: rgb(14, 14, 14);\n gap: 25px;\n}\n\n.infoDiv a {\n width: 50%;\n}\n\n.socials {\n width: 100%;\n fill: rgb(14, 14, 14);\n}\n"}

empty-rabbit-37

👁 实时预览

📝 源代码