{"html":"

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

\n \n

\n","css":".gender-card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: flex-start;\n padding: 30px;\n border-radius: 20px;\n font-family: Arial, Helvetica, sans-serif;\n gap: 25px;\n}\n.large-svg-container {\n width: auto;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: rotate(45deg);\n}\n.largemalesvg {\n transform: rotate(180deg);\n}\n.heading {\n color: #1d1d1d;\n font-weight: 600;\n font-size: 25px;\n text-align: center;\n}\n.gender-radio-buttons {\n display: none;\n}\n.smallsvg {\n width: 10px;\n}\n.other-gender {\n width: 15px;\n}\n.malesmallsvg {\n transform: rotate(225deg);\n}\n.genderlabel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n background-color: rgb(46, 46, 46);\n border-radius: 5px;\n padding: 8px 16px;\n gap: 8px;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease-out;\n}\n\n.radio-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-top: 25px;\n}\n.femalebutton:hover {\n background-color: rgb(245, 185, 195);\n}\n.malebutton:hover {\n background-color: #569fcf;\n}\n.otherbutton:hover {\n background-color: #4d227a;\n}\n#female:checked + .femalebutton {\n background-color: rgb(245, 185, 195);\n transform: scale(1.1);\n}\n#male:checked + .malebutton {\n background-color: #569fcf;\n transform: scale(1.1);\n}\n#other:checked + .otherbutton {\n background-color: #4d227a;\n transform: scale(1.2);\n}\n"}

ordinary-crab-91

👁 实时预览

📝 源代码