{"html":"

\n Frontend Developer\n (HTML, CSS & JS)\n

\n \n

","css":".card {\n padding: 2em 1em;\n width: 260px;\n background: #fff;\n border-radius: 12px;\n animation: shadow 1.8s infinite ease-in-out;\n transition: box-shadow 200ms cubic-bezier(0.895, 0.03, 0.685, 0.22);\n}\n\n.card .heading {\n color: royalblue;\n font-size: 1em;\n font-weight: 600;\n text-align: center;\n margin-bottom: 1.5em;\n}\n\n.card .heading span {\n display: inline-block;\n font-size: 0.8em;\n font-weight: 500;\n}\n\n.card .icons {\n display: inline-flex;\n width: 48px;\n height: 48px;\n box-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25),\n -2px -2px 5px rgba(9, 148, 255, 0.25),\n inset -2px -2px 55px rgba(9, 148, 255, 0.5);\n justify-content: center;\n align-items: center;\n border-radius: 1em;\n}\n\n.card .icons-container {\n width: fit-content;\n margin: 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1em;\n}\n\n.card .icons svg {\n fill: royalblue;\n height: 24px;\n width: 24px;\n}\n\n.card .code {\n width: fit-content;\n margin: 1.5em auto;\n}\n\n.card .code svg {\n fill: royalblue;\n width: 180px;\n aspect-ratio: 16/9;\n}\n\n@keyframes shadow {\n 0% {\n box-shadow: 5px 5px 20px rgba(9, 148, 255, 0.15),\n -5px -5px 10px rgba(9, 148, 255, 0.1),\n inset -5px -5px 5px rgba(9, 148, 255, 0.5);\n }\n\n 50% {\n box-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25),\n -10px -10px 30px rgba(9, 148, 255, 0.1),\n inset -5px -5px 15px rgba(9, 148, 255, 0.5);\n }\n\n 100% {\n box-shadow: 5px 5px 20px rgba(9, 148, 255, 0.15),\n -5px -5px 10px rgba(9, 148, 255, 0.1),\n inset -5px -5px 5px rgba(9, 148, 255, 0.5);\n }\n}"}

hot-octopus-44

👁 实时预览

📝 源代码