{"html":"

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

\n","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: 0.3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: 0.3s;\n transform: scale(1.5);\n border-radius: 15px;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: 0.3s;\n transform: scale(1.5);\n border-radius: 15px;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: 0.3s;\n transform: scale(1.5);\n border-radius: 15px;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: #25d366;\n transition-duration: 0.3s;\n transform: scale(1.5);\n border-radius: 15px;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: 0.3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n.card:has(.socialContainer:hover) .socialContainer:not(:hover) {\n opacity: 0.1;\n}\n"}

bitter-mule-50

👁 实时预览

📝 源代码