{"html":"

\n \n

We're on Social Media

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

\n","css":"/* HOLD THE ASTRONAUT */\n\n.card {\n position: relative;\n width: 19em;\n height: 25em;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #171717;\n color: white;\n font-family: Montserrat;\n font-weight: bold;\n padding: 1em 2em 1em 1em;\n border-radius: 20px;\n overflow: hidden;\n z-index: 1;\n row-gap: 1em;\n}\n.card img {\n width: 12em;\n margin-right: 1em;\n animation: move 10s ease-in-out infinite;\n z-index: 5;\n}\n.image:hover {\n cursor: -webkit-grab;\n cursor: grab;\n}\n\n.icons svg {\n width: 20px;\n height: 20px;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n inset: -3px;\n border-radius: 10px;\n background: radial-gradient(#858585, transparent, transparent);\n transform: translate(-5px, 250px);\n transition: 0.4s ease-in-out;\n z-index: -1;\n}\n.card:hover::before {\n width: 150%;\n height: 100%;\n margin-left: -4.25em;\n}\n.card::after {\n content: \"\";\n position: absolute;\n inset: 2px;\n border-radius: 20px;\n background: rgb(23, 23, 23, 0.7);\n transition: all 0.4s ease-in-out;\n z-index: -1;\n}\n\n.heading {\n z-index: 2;\n transition: 0.4s ease-in-out;\n}\n.card:hover .heading {\n letter-spacing: 0.025em;\n}\n\n.heading::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n opacity: 1;\n box-shadow: 220px 118px #fff, 280px 176px #fff, 40px 50px #fff,\n 60px 180px #fff, 120px 130px #fff, 180px 176px #fff, 220px 290px #fff,\n 520px 250px #fff, 400px 220px #fff, 50px 350px #fff, 10px 230px #fff;\n z-index: -1;\n transition: 1s ease;\n animation: 1s glowing-stars linear alternate infinite;\n animation-delay: 0s;\n}\n.icons::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n opacity: 1;\n box-shadow: 140px 20px #fff, 425px 20px #fff, 70px 120px #fff, 20px 130px #fff,\n 110px 80px #fff, 280px 80px #fff, 250px 350px #fff, 280px 230px #fff,\n 220px 190px #fff, 450px 100px #fff, 380px 80px #fff, 520px 50px #fff;\n z-index: -1;\n transition: 1.5s ease;\n animation: 1s glowing-stars linear alternate infinite;\n animation-delay: 0.4s;\n}\n.icons::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n opacity: 1;\n box-shadow: 490px 330px #fff, 420px 300px #fff, 320px 280px #fff,\n 380px 350px #fff, 546px 170px #fff, 420px 180px #fff, 370px 150px #fff,\n 200px 250px #fff, 80px 20px #fff, 190px 50px #fff, 270px 20px #fff,\n 120px 230px #fff, 350px -1px #fff, 150px 369px #fff;\n z-index: -1;\n transition: 2s ease;\n animation: 1s glowing-stars linear alternate infinite;\n animation-delay: 0.8s;\n}\n.card:hover .heading::before,\n.card:hover .icons::before,\n.card:hover .icons::after {\n filter: blur(3px);\n}\n\n.image:active {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n}\n.image:active + .heading::before {\n box-shadow: 240px 20px #9b40fc, 240px 25px #9b40fc, 240px 30px #9b40fc,\n 240px 35px #9b40fc, 240px 40px #9b40fc, 242px 45px #9b40fc,\n 246px 48px #9b40fc, 251px 49px #9b40fc, 256px 48px #9b40fc,\n 260px 45px #9b40fc, 262px 40px #9b40fc;\n animation: none;\n filter: blur(0);\n border-radius: 2px;\n width: 0.45em;\n height: 0.45em;\n scale: 0.65;\n transform: translateX(9em) translateY(1em);\n}\n.image:active ~ .icons::before {\n box-shadow: 262px 35px #9b40fc, 262px 30px #9b40fc, 262px 25px #9b40fc,\n 262px 20px #9b40fc, 275px 20px #9b40fc, 275px 24px #9b40fc,\n 275px 28px #9b40fc, 275px 32px #9b40fc, 275px 36px #9b40fc,\n 275px 40px #9b40fc, 275px 44px #9b40fc, 275px 48px #9b40fc;\n animation: none;\n filter: blur(0);\n border-radius: 2px;\n width: 0.45em;\n height: 0.45em;\n scale: 0.65;\n transform: translateX(9em) translateY(1em);\n}\n.image:active ~ .icons::after {\n box-shadow: 238px 60px #9b40fc, 242px 60px #9b40fc, 246px 60px #9b40fc,\n 250px 60px #9b40fc, 254px 60px #9b40fc, 258px 60px #9b40fc,\n 262px 60px #9b40fc, 266px 60px #9b40fc, 270px 60px #9b40fc,\n 274px 60px #9b40fc, 278px 60px #9b40fc, 282px 60px #9b40fc,\n 234px 60px #9b40fc, 234px 60px #9b40fc;\n animation: none;\n filter: blur(0);\n border-radius: 2px;\n width: 0.45em;\n height: 0.45em;\n scale: 0.65;\n transform: translateX(9em) translateY(1.25em);\n}\n\n.heading::after {\n content: \"\";\n top: -8.5%;\n left: -8.5%;\n position: absolute;\n width: 7.5em;\n height: 7.5em;\n border: none;\n outline: none;\n border-radius: 50%;\n background: #f9f9fb;\n box-shadow: 0px 0px 100px rgba(193, 119, 241, 0.8),\n 0px 0px 100px rgba(135, 42, 211, 0.8), inset #9b40fc 0px 0px 40px -12px;\n transition: 0.4s ease-in-out;\n z-index: -1;\n}\n.card:hover .heading::after {\n box-shadow: 0px 0px 200px rgba(193, 119, 241, 1),\n 0px 0px 200px rgba(135, 42, 211, 1), inset #9b40fc 0px 0px 40px -12px;\n}\n\n.icons {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n column-gap: 1em;\n z-index: 1;\n}\n\n.instagram,\n.x,\n.discord {\n position: relative;\n transition: 0.4s ease-in-out;\n}\n.instagram:after,\n.x:after,\n.discord:after {\n content: \"\";\n position: absolute;\n width: 0.5em;\n height: 0.5em;\n left: 0;\n background-color: white;\n box-shadow: 0px 0px 10px rgba(233, 233, 233, 0.5),\n 0px 0px 10px rgba(192, 192, 192, 0.5);\n border-radius: 50%;\n z-index: -1;\n transition: 0.3s ease-in-out;\n}\n.instagram svg path,\n.x svg path,\n.discord svg path {\n stroke: #808080;\n transition: 0.4s ease-in-out;\n}\n.instagram:hover svg path {\n stroke: #cc39a4;\n}\n.x:hover svg path {\n stroke: black;\n}\n.discord:hover svg path {\n stroke: #8c9eff;\n}\n.instagram svg,\n.x svg,\n.discord svg {\n transition: 0.3s ease-in-out;\n}\n.instagram:hover svg {\n scale: 1.4;\n}\n.x:hover svg,\n.discord:hover svg {\n scale: 1.25;\n}\n.instagram:hover:after,\n.x:hover:after,\n.discord:hover:after {\n scale: 4;\n transform: translateX(0.09em) translateY(0.09em);\n}\n\n.instagram::before {\n content: \"\";\n position: absolute;\n top: -700%;\n left: 1050%;\n rotate: -45deg;\n width: 5em;\n height: 1px;\n background: linear-gradient(90deg, #ffffff, transparent);\n animation: 4s shootingStar ease-in-out infinite;\n transition: 1s ease;\n animation-delay: 1s;\n}\n.x::before {\n content: \"\";\n position: absolute;\n top: -1300%;\n left: 850%;\n rotate: -45deg;\n width: 5em;\n height: 1px;\n background: linear-gradient(90deg, #ffffff, transparent);\n animation: 4s shootingStar ease-in-out infinite;\n animation-delay: 3s;\n}\n.discord::before {\n content: \"\";\n position: absolute;\n top: -2100%;\n left: 850%;\n rotate: -45deg;\n width: 5em;\n height: 1px;\n background: linear-gradient(90deg, #ffffff, transparent);\n animation: 4s shootingStar ease-in-out infinite;\n animation-delay: 5s;\n}\n.card:hover .instagram::before,\n.card:hover .x::before,\n.card:hover .discord::before {\n filter: blur(3px);\n}\n.image:active ~ .icons .instagram::before,\n.image:active ~ .icons .x::before,\n.image:active ~ .icons .discord::before {\n animation: none;\n opacity: 0;\n}\n\n@keyframes shootingStar {\n 0% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n 50% {\n transform: translateX(-55em) translateY(0);\n opacity: 1;\n }\n 70% {\n transform: translateX(-70em) translateY(0);\n opacity: 0;\n }\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 0;\n }\n}\n\n@keyframes move {\n 0% {\n transform: translateX(0em) translateY(0em);\n }\n 25% {\n transform: translateY(-1em) translateX(-1em);\n rotate: -10deg;\n }\n 50% {\n transform: translateY(1em) translateX(-1em);\n }\n 75% {\n transform: translateY(-1.25em) translateX(1em);\n rotate: 10deg;\n }\n 100% {\n transform: translateX(0em) translateY(0em);\n }\n}\n\n@keyframes glowing-stars {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n"}

silent-rabbit-57

👁 实时预览

📝 源代码