{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:13.000Z","isPrivate":0,"projectId":"e9cde1","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":411,"cssLen":1921,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"/* you can choose any color you want. don't be afraid to experiment */\n\n.input, button {\n width: 100%;\n height: 40px;\n position: relative;\n padding: 10px;\n border: 0.1px solid #575cb5;\n}\n\nbutton {\n background: #6d74e3;\n border: none;\n}\n\n.wrapper {\n position: relative;\n transform: skewY(-14deg);\n}\n\n.wrapper li, button {\n position: relative;\n list-style: none;\n width: 200px;\n z-index: var(--i);\n transition: 0.3s;\n color: white;\n}\n\n.wrapper li::before, button::before {\n position: absolute;\n content: '';\n background: #6d74e3;\n top: 0;\n left: -40px;\n width: 40px;\n height: 40px;\n transform-origin: right;\n transform: skewY(45deg);\n transition: 0.3s;\n}\n\n.wrapper li::after, button::after {\n position: absolute;\n content: '';\n background: #6d74e3;\n width: 200px;\n height: 40px;\n top: -40px;\n left: 0;\n transform-origin: bottom;\n transform: skewX(45deg);\n transition: 0.3s;\n}\n\n.wrapper li:nth-child(1)::after, .wrapper li:nth-child(1)::before {\n background-color: #d8daf7;\n}\n\n.wrapper li:nth-child(2)::after, .wrapper li:nth-child(2)::before {\n background-color: #c2c5f3;\n}\n\n.wrapper li:nth-child(3)::after, .wrapper li:nth-child(3)::before {\n background-color: #989deb;\n}\n\nli .input {\n outline: none;\n border: none;\n color: black;\n}\n\nli .input::placeholder {\n color: black;\n}\n\nli:nth-child(1) .input {\n background: #d8daf7;\n}\n\nli:nth-child(2) .input {\n background: #c2c5f3;\n}\n\nli:nth-child(3) .input {\n background: #989deb;\n}\n\n\nli:nth-child(1) .input:focus {\n outline: none;\n border: 3.5px solid #d8daf7;\n}\n\nli:nth-child(2) .input:focus {\n outline: none;\n border: 3.5px solid #c2c5f3;\n}\n\nli:nth-child(3) .input:focus {\n outline: none;\n border: 3.5px solid #989deb;\n}\n\n.wrapper li:hover, button:hover {\n transform: translateX(-20px);\n}\n\nbutton:hover, button:hover::before, button:hover::after {\n background: #575cb5;\n}\n\nbutton:active {\n transform: translateX(0px);\n}\n\n"},{"created":"2024-01-22T17:20:13.000Z","isPrivate":0,"projectId":"9f6382","snapshot":null,"tags":null,"title":"form by krlozCJ","updated":"2024-01-22T17:20:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1315,"cssLen":2293,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n\n \n

","css":".container {\n width: 300px;\n position: relative;\n border-radius: 5px;\n overflow: hidden;\n color: white;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n}\n\n.container .slider {\n width: 200%;\n position: relative;\n transition: transform ease-out 0.3s;\n display: flex;\n}\n\n#register_toggle {\n display: none;\n}\n\n.container #register_toggle:checked + .slider {\n transform: translateX(-50%);\n}\n\n.form {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n padding: 1.5em 3em;\n width: 50%;\n}\n\n.title {\n text-align: center;\n font-weight: 700;\n font-size: 2em;\n}\n\nform .form_control {\n width: 100%;\n position: relative;\n overflow: hidden;\n}\n\nform .form_control .label {\n position: absolute;\n top: 50%;\n left: 10px;\n transition: transform ease 0.2s;\n transform: translate(0%, -50%);\n font-size: 0.75em;\n user-select: none;\n pointer-events: none;\n color: #b0b0b0;\n}\n\nform .form_control .input {\n width: 100%;\n background-color: transparent;\n border: none;\n outline: none;\n color: #fff;\n padding: 0.5rem;\n font-size: 0.75rem;\n border-radius: 5px;\n transition: box-shadow ease 0.2s;\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;\n}\n\nform .form_control .input:focus,\nform .form_control .input:valid {\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e;\n}\n\nform .form_control .input:focus + .label,\nform .form_control .input:valid + .label {\n transform: translate(-150%, -50%);\n}\n\nform button {\n width: 100%;\n background-color: transparent;\n border: none;\n outline: none;\n color: #fff;\n padding: 0.5rem;\n font-size: 0.75rem;\n border-radius: 5px;\n transition: box-shadow ease 0.1s;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n}\n\nform button:active {\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 3px 3px 4px #0e0e0e, inset -3px -3px 4px #5f5e5e;\n}\n\n.bottom_text {\n font-size: 0.65em;\n}\n\n.bottom_text .swtich {\n font-weight: 700;\n cursor: pointer;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"462ec0","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":581,"cssLen":1916,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n overflow: hidden;\n padding: 20px;\n background: #606c88;\n background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);\n background: linear-gradient(to right, #3f4c6b, #606c88);\n border-radius: 10px;\n box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);\n max-width: 320px;\n}\n\n.info {\n margin-bottom: 10px;\n}\n\n.title {\n color: #fff;\n font-size: 1.5rem;\n line-height: 1.8rem;\n font-weight: 800;\n letter-spacing: -0.025em;\n}\n\n.description {\n color: #fff;\n margin-top: 10px;\n font-size: 15px;\n}\n\n.form .inputs {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n}\n\n.form .inputs input {\n height: 2.5em;\n width: 2.5em;\n outline: none;\n text-align: center;\n font-size: 1.5em;\n color: #fff;\n border-radius: 0.3em;\n border: 1px solid rgba(253, 253, 253, 0.363);\n background-color: rgb(255 255 255 / 0.05);\n}\n\n.form .inputs input:focus {\n border: 1px solid rgb(99 102 241);\n}\n\n.resend {\n color: #fff;\n margin-top: 10px;\n font-size: 15px;\n text-align: center;\n}\n\n.resend-action {\n text-decoration: none;\n cursor: pointer;\n margin-left: 6px;\n color: rgb(255, 255, 255);\n font-weight: 600;\n}\n\n.resend-action:hover {\n text-decoration: underline #2b8af7;\n}\n\n.validate {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n text-decoration: none;\n background-color: #606c88;\n padding: 10px 20px;\n margin: 8px 0 0 0;\n font-size: 13px;\n font-weight: 600;\n border-radius: 10px;\n transition: .3s ease;\n}\n\n.validate:hover {\n background-color: #3f4c6b;\n}\n\n.close {\n position: absolute;\n right: 10px;\n top: 10px;\n background-color: #3f4c6b;\n height: 30px;\n width: 30px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n cursor: pointer;\n font-weight: 600;\n transition: .3s ease;\n}\n\n.close:hover {\n background-color: rgba(255, 0, 0, 0.603);\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"4edc99","snapshot":null,"tags":null,"title":"form by reshades","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":441,"cssLen":1231,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: #333333;\n border-radius: 5px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(8.2px);\n -webkit-backdrop-filter: blur(8.2px);\n border: 1px solid #fff;\n width: 17em;\n height: 12em;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.form p {\n color: #fff;\n font-weight: bolder;\n}\n\n.inp {\n margin-left: auto;\n margin-right: auto;\n white-space: 4px;\n}\n\n.input + .input {\n margin-left: 0.5em\n}\n\n.input {\n color: #fff;\n height: 2em;\n width: 2em;\n float: left;\n text-align: center;\n background: #00000000;\n outline: none;\n border: 1px #fff solid;\n border-radius: 5px;\n transition: all 0.6s ease;\n font-size: larger;\n}\n\n.input:focus {\n outline: none;\n border: 1px #fff solid;\n}\n\n.input:not(:placeholder-shown) {\n background-color: #fff;\n width: 1em;\n height: 1em\n}\n\n.form button {\n margin-left: auto;\n margin-right: auto;\n background-color: #00000000;\n color: #fff;\n width: 8.5em;\n height: 2.3em;\n border: #fff 0.1em solid;\n border-radius: 5px;\n transition: all 0.5s ease;\n}\n\n.form button:hover {\n background-color: #fff;\n color: #000\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"3f28d3","snapshot":null,"tags":null,"title":"form by Admin12121","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1096,"cssLen":1919,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n\t\n

","css":".button {\n appaerance: none;\n font: inherit;\n border: none;\n background: none;\n cursor: pointer;\n}\n\n.container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n}\n\n.modal {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 500px;\n background-color: #fff;\n box-shadow: 0 15px 30px 0 rgba(0, 125, 171, 0.15);\n border-radius: 10px;\n}\n\n.modal__header {\n padding: 1rem 1.5rem;\n border-bottom: 1px solid #ddd;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.modal__body {\n padding: 1rem 1rem;\n}\n\n.modal__footer {\n padding: 0 1.5rem 1.5rem;\n}\n\n.modal__title {\n font-weight: 700;\n font-size: 1.25rem;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: 0.15s ease;\n}\n\n.button--icon {\n width: 2.5rem;\n height: 2.5rem;\n background-color: transparent;\n border-radius: 0.25rem;\n}\n\n.button--icon:focus, .button--icon:hover {\n background-color: #ededed;\n}\n\n.button--primary {\n background-color: #007dab;\n color: #FFF;\n padding: 0.75rem 1.25rem;\n border-radius: 0.25rem;\n font-weight: 500;\n font-size: 0.875rem;\n}\n\n.button--primary:hover {\n background-color: #006489;\n}\n\n.input {\n display: flex;\n flex-direction: column;\n}\n\n.input + .input {\n margin-top: 1.75rem;\n}\n\n.input__label {\n font-weight: 700;\n font-size: 0.875rem;\n}\n\n.input__field {\n display: block;\n margin-top: 0.5rem;\n border: 1px solid #DDD;\n border-radius: 0.25rem;\n padding: 0.75rem 0.75rem;\n transition: 0.15s ease;\n}\n\n.input__field:focus {\n outline: none;\n border-color: #007dab;\n box-shadow: 0 0 0 1px #007dab, 0 0 0 4px rgba(0, 125, 171, 0.25);\n}\n\n.input__field--textarea {\n min-height: 100px;\n max-width: 100%;\n}\n\n.input__description {\n font-size: 0.875rem;\n margin-top: 0.5rem;\n color: #8d8d8d;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"6fea24","snapshot":null,"tags":null,"title":"form by Harsha2lucky","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2040,"cssLen":1898,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Login\n

\n \n

","css":".content {\n width: 330px;\n padding: 40px 30px;\n background: #dde1e7;\n border-radius: 10px;\n box-shadow: -3px -3px 7px #ffffff73,\n 2px 2px 5px rgba(94,104,121,0.288);\n}\n\n.content .text {\n font-size: 33px;\n font-weight: 600;\n margin-bottom: 35px;\n color: #595959;\n}\n\n.field {\n height: 50px;\n width: 100%;\n display: flex;\n position: relative;\n}\n\n.field:nth-child(2) {\n margin-top: 20px;\n}\n\n.field .input {\n height: 100%;\n width: 100%;\n padding-left: 45px;\n outline: none;\n border: none;\n font-size: 18px;\n background: #dde1e7;\n color: #595959;\n border-radius: 25px;\n box-shadow: inset 2px 2px 5px #BABECC,\n inset -5px -5px 10px #ffffff73;\n}\n\n.field .input:focus {\n box-shadow: inset 1px 1px 2px #BABECC,\n inset -1px -1px 2px #ffffff73;\n}\n\n.field .span {\n position: absolute;\n color: #595959;\n width: 50px;\n line-height: 55px;\n}\n\n.field .label {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 45px;\n pointer-events: none;\n color: #666666;\n}\n\n.field .input:valid ~ label {\n opacity: 0;\n}\n\n.forgot-pass {\n text-align: left;\n margin: 10px 0 10px 5px;\n}\n\n.forgot-pass a {\n font-size: 16px;\n color: #666666;\n text-decoration: none;\n}\n\n.forgot-pass:hover a {\n text-decoration: underline;\n}\n\n.button {\n margin: 15px 0;\n width: 100%;\n height: 50px;\n font-size: 18px;\n line-height: 50px;\n font-weight: 600;\n background: #dde1e7;\n border-radius: 25px;\n border: none;\n outline: none;\n cursor: pointer;\n color: #595959;\n box-shadow: 2px 2px 5px #BABECC,\n -5px -5px 10px #ffffff73;\n}\n\n.button:focus {\n color: #3498db;\n box-shadow: inset 2px 2px 5px #BABECC,\n inset -5px -5px 10px #ffffff73;\n}\n\n.sign-up {\n margin: 10px 0;\n color: #595959;\n font-size: 16px;\n}\n\n.sign-up a {\n color: #3498db;\n text-decoration: none;\n}\n\n.sign-up a:hover {\n text-decoration: underline;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"ef8e4b","snapshot":null,"tags":null,"title":"form by boryanakrasteva","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":216,"cssLen":953,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n width: 250px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n border-radius: 10px;\n padding: 20px 40px;\n background-color: rgba(245, 245, 245, 0.034);\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.192);\n transition: .2s linear;\n}\n\n.form button {\n align-self: flex-end;\n}\n\n.form:hover {\n transform: scale(1.1);\n}\n\n.label {\n font-size: 14px;\n margin-bottom: -10.6px;\n}\n\n.input {\n height: 25px;\n width: 100%;\n border: 0.5px solid white;\n background-color: transparent;\n color: white;\n padding: 5px;\n border-radius: 5px;\n transition: .2s linear;\n position: relative;\n}\n\n.input:focus {\n outline: none;\n background-color: rgba(173, 173, 173, 0.233);\n box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.137);\n}\n\nbutton {\n border: none;\n padding: 4px 10px;\n border-radius: 5px;\n transition: .2s linear;\n}\n\nbutton:hover {\n background-color: rgba(255, 255, 255, 0.74);\n box-shadow: 2px 2px 10px rgba(124, 124, 124, 0.192);\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"cc91ac","snapshot":null,"tags":null,"title":"form by guilhermeyohan","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":355,"cssLen":4215,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"form {\n background-color: #fcd0a1;\n border-radius: 10px;\n padding: 20px;\n width: 300px;\n margin: 50px auto;\n}\n\nlabel {\n display: block;\n margin-bottom: 10px;\n font-size: 18px;\n font-weight: bold;\n color: #de5959;\n}\n\n.infos[type=\"text\"], input[type=\"email\"] {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n border-radius: 5px;\n border: none;\n margin-bottom: 20px;\n}\n\nbutton {\n background-color: #de5959;\n color: white;\n font-size: 18px;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n margin-right: 10px;\n}\n\nbutton:hover {\n background-color: #b54141;\n}\n\n#limpar {\n background-color: #fcb13e;\n color: white;\n font-size: 18px;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n#limpar:hover {\n background-color: #c78d35;\n}\n\n.mario {\n width: 5px;\n height: 5px;\n position: relative;\n left: 100px;\n box-shadow: 0px 0px 0px transparent, 130px 5px #ffa500, 135px 5px #ffa500,\n140px 5px #ffa500, 95px 10px #de4513, 100px 10px #de4513, 105px 10px #de4513,\n110px 10px #de4513, 115px 10px #de4513, 130px 10px #ffa500,\n135px 10px #ffa500, 140px 10px #ffa500, 90px 15px #de4513, 95px 15px #de4513,\n100px 15px #de4513, 105px 15px #de4513, 110px 15px #de4513,\n115px 15px #de4513, 120px 15px #de4513, 125px 15px #de4513,\n130px 15px hsl(15, 84%, 47%), 135px 15px #ffa500, 140px 15px #ffa500,\n90px 20px #a52a2a, 95px 20px #a52a2a, 100px 20px #a52a2a, 105px 20px #ffa500,\n110px 20px #ffa500, 115px 20px #000, 120px 20px #ffa500, 130px 20px #4545bb,\n135px 20px #4545bb, 140px 20px #4545bb, 85px 25px #a52a2a, 90px 25px #ffa500,\n95px 25px #a52a2a, 100px 25px #ffa500, 105px 25px #ffa500,\n110px 25px #ffa500, 115px 25px #000, 120px 25px #ffa500, 125px 25px #ffa500,\n130px 25px #4545bb, 135px 25px #4545bb, 140px 25px #4545bb,\n85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #a52a2a, 100px 30px #a52a2a,\n105px 30px #ffa500, 110px 30px #ffa500, 115px 30px #ffa500,\n120px 30px #a52a2a, 125px 30px #ffa500, 130px 30px #ffa500,\n135px 30px #ffa500, 140px 30px #4545bb, 85px 35px #a52a2a, 90px 35px #a52a2a,\n95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,\n110px 35px #ffa500, 115px 35px #a52a2a, 120px 35px #a52a2a,\n125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,\n95px 40px #ffa500, 100px 40px #ffa500, 105px 40px #ffa500,\n110px 40px #ffa500, 115px 40px #ffa500, 120px 40px #ffa500,\n125px 40px #ffa500, 130px 40px #4545bb, 75px 45px #4545bb, 80px 45px #4545bb,\n85px 45px #4545bb, 90px 45px #4545bb, 95px 45px #4545bb, 100px 45px #de4513,\n105px 45px #4545bb, 110px 45px #4545bb, 115px 45px #4545bb,\n120px 45px #de4513, 125px 45px #4545bb, 70px 50px #4545bb, 75px 50px #4545bb,\n80px 50px #4545bb, 85px 50px #4545bb, 90px 50px #4545bb, 95px 50px #4545bb,\n100px 50px #4545bb, 105px 50px #de4513, 110px 50px #4545bb,\n115px 50px #4545bb, 120px 50px #4545bb, 125px 50px #de4513, 140px 50px #000,\n65px 55px #ffa500, 70px 55px #ffa500, 75px 55px #4545bb, 80px 55px #4545bb,\n85px 55px #4545bb, 90px 55px #4545bb, 95px 55px #4545bb, 100px 55px #4545bb,\n105px 55px #de4513, 110px 55px #de4513, 115px 55px #de4513,\n120px 55px #de4513, 125px 55px #de4513, 140px 55px #000, 65px 60px #ffa500,\n70px 60px #ffa500, 75px 60px #ffa500, 85px 60px #de4513, 90px 60px #de4513,\n95px 60px #4545bb, 100px 60px #de4513, 105px 60px #de4513, 110px 60px #ff0,\n115px 60px #de4513, 120px 60px #de4513, 125px 60px #ff0, 130px 60px #de4513,\n135px 60px #000, 140px 60px #000, 70px 65px #ffa500, 80px 65px #000,\n85px 65px #de4513, 90px 65px #de4513, 95px 65px #de4513, 100px 65px #de4513,\n105px 65px #de4513, 110px 65px #de4513, 115px 65px #de4513,\n120px 65px #de4513, 125px 65px #de4513, 130px 65px #de4513, 135px 65px #000,\n140px 65px #000, 75px 70px #000, 80px 70px #000, 85px 70px #000,\n90px 70px #de4513, 95px 70px #de4513, 100px 70px #de4513, 105px 70px #de4513,\n110px 70px #de4513, 115px 70px #de4513, 120px 70px #de4513,\n125px 70px #de4513, 130px 70px #de4513, 135px 70px #000, 140px 70px #000,\n70px 75px #000, 75px 75px #000, 80px 75px #000, 85px 75px #de4513,\n90px 75px #de4513, 95px 75px #de4513, 100px 75px #de4513, 105px 75px #de4513,\n110px 75px #de4513, 115px 75px #de4513, 70px 80px #000, 85px 80px #de4513,\n90px 80px #de4513, 95px 80px #de4513;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"3e706e","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9884,"cssLen":5333,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Full Name\n \n

\n Email\n \n

\n Username\n \n

\n Password\n \n

\n Date of Birth\n \n

\n Gender\n \n \n \n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Sign up with Google\n \n \n \n \n \n Sign up with Apple\n \n

\n \n Sign up\n \n

\n \n have an account? Log in\n \n

\n\n","css":".relative {\n position: relative;\n}\n.mx-8 {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-5 {\n margin-top: 1.25rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.w-1\\/5 {\n width: 20%;\n}\n.w-full {\n width: 100%;\n}\n.max-w-md {\n max-width: 28rem;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.rounded-3xl {\n border-radius: 1.5rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.border {\n border-width: 1px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.px-20 {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.text-center {\n text-align: center;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),\n 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.focus\\:border-blue-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity));\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));\n}\n.focus\\:ring-offset-2:focus {\n --tw-ring-offset-width: 2px;\n}\n.focus\\:ring-offset-blue-200:focus {\n --tw-ring-offset-color: #bfdbfe;\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:border-gray-600 {\n --tw-border-opacity: 1;\n border-color: rgb(75 85 99 / var(--tw-border-opacity));\n }\n .dark\\:text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n }\n}\n@media (min-width: 640px) {\n .sm\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n .sm\\:max-w-xl {\n max-width: 36rem;\n }\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .sm\\:p-10 {\n padding: 2.5rem;\n }\n}\n@media (min-width: 768px) {\n .md\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n }\n .md\\:w-1\\/4 {\n width: 25%;\n }\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"6bb80b","snapshot":null,"tags":null,"title":"form by Mr-Roy-alt","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":561,"cssLen":1175,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n background-color: white;\n padding: 3.125em;\n border-radius: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);\n}\n\n.signup {\n color: rgb(77, 75, 75);\n text-transform: uppercase;\n letter-spacing: 2px;\n display: block;\n font-weight: bold;\n font-size: x-large;\n margin-bottom: 0.5em;\n}\n\n.form--input {\n width: 100%;\n margin-bottom: 1.25em;\n height: 40px;\n border-radius: 5px;\n border: 1px solid gray;\n padding: 0.8em;\n font-family: 'Inter', sans-serif;\n outline: none;\n}\n\n.form--input:focus {\n border: 1px solid #639;\n outline: none;\n}\n\n.form--marketing {\n display: flex;\n margin-bottom: 1.25em;\n align-items: center;\n}\n\n.form--marketing > input {\n margin-right: 0.625em;\n}\n\n.form--marketing > label {\n color: grey;\n}\n\n.checkbox, input[type=\"checkbox\"] {\n accent-color: #639;\n}\n\n.form--submit {\n width: 50%;\n padding: 0.625em;\n border-radius: 5px;\n color: white;\n background-color: #639;\n border: 1px dashed #639;\n cursor: pointer;\n}\n\n.form--submit:hover {\n color: #639;\n background-color: white;\n border: 1px dashed #639;\n cursor: pointer;\n transition: 0.5s;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"9ae48f","snapshot":null,"tags":null,"title":"form by AmIt-DasIT","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1215,"cssLen":2586,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.form {\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n transition: all 1s ease;\n}\n\n.form .form_front {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n position: absolute;\n backface-visibility: hidden;\n padding: 65px 45px;\n border-radius: 15px;\n box-shadow: inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form .form_back {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n position: absolute;\n backface-visibility: hidden;\n transform: rotateY(-180deg);\n padding: 65px 45px;\n border-radius: 15px;\n box-shadow: inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form_details {\n font-size: 25px;\n font-weight: 600;\n padding-bottom: 10px;\n color: white;\n}\n\n.input {\n width: 245px;\n min-height: 45px;\n color: #fff;\n outline: none;\n transition: 0.35s;\n padding: 0px 7px;\n background-color: #212121;\n border-radius: 6px;\n border: 2px solid #212121;\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6);\n}\n\n.input::placeholder {\n color: #999;\n}\n\n.input:focus.input::placeholder {\n transition: 0.3s;\n opacity: 0;\n}\n\n.input:focus {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.btn {\n padding: 10px 35px;\n cursor: pointer;\n background-color: #212121;\n border-radius: 6px;\n border: 2px solid #212121;\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6);\n color: #fff;\n font-size: 15px;\n font-weight: bold;\n transition: 0.35s;\n}\n\n.btn:hover {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.btn:focus {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form .switch {\n font-size: 13px;\n color: white;\n}\n\n.form .switch .signup_tog {\n font-weight: 700;\n cursor: pointer;\n text-decoration: underline;\n}\n\n.container #signup_toggle {\n display: none;\n}\n\n.container #signup_toggle:checked + .form {\n transform: rotateY(-180deg);\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"d129ba","snapshot":null,"tags":null,"title":"form by StarMarketPros","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1453,"cssLen":3697,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

\n \n

","css":".wrapper {\n --input-focus: #2d8cf0;\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --bg-color-alt: #666;\n --main-color: #323232;\n /* display: flex; */\n /* flex-direction: column; */\n /* align-items: center; */\n}\n/* switch card */\n.switch {\n transform: translateY(-200px);\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n width: 50px;\n height: 20px;\n}\n\n.card-side::before {\n position: absolute;\n content: 'Log in';\n left: -70px;\n top: 0;\n width: 100px;\n text-decoration: underline;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.card-side::after {\n position: absolute;\n content: 'Sign up';\n left: 70px;\n top: 0;\n width: 100px;\n text-decoration: none;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.toggle {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n box-sizing: border-box;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--bg-colorcolor);\n transition: 0.3s;\n}\n\n.slider:before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n border: 2px solid var(--main-color);\n border-radius: 5px;\n left: -2px;\n bottom: 2px;\n background-color: var(--bg-color);\n box-shadow: 0 3px 0 var(--main-color);\n transition: 0.3s;\n}\n\n.toggle:checked + .slider {\n background-color: var(--input-focus);\n}\n\n.toggle:checked + .slider:before {\n transform: translateX(30px);\n}\n\n.toggle:checked ~ .card-side:before {\n text-decoration: none;\n}\n\n.toggle:checked ~ .card-side:after {\n text-decoration: underline;\n}\n\n/* card */ \n\n.flip-card__inner {\n width: 300px;\n height: 350px;\n position: relative;\n background-color: transparent;\n perspective: 1000px;\n /* width: 100%;\n height: 100%; */\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.toggle:checked ~ .flip-card__inner {\n transform: rotateY(180deg);\n}\n\n.toggle:checked ~ .flip-card__front {\n box-shadow: none;\n}\n\n.flip-card__front, .flip-card__back {\n padding: 20px;\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n background: lightgrey;\n gap: 20px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.flip-card__back {\n width: 100%;\n transform: rotateY(180deg);\n}\n\n.flip-card__form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.title {\n margin: 20px 0 20px 0;\n font-size: 25px;\n font-weight: 900;\n text-align: center;\n color: var(--main-color);\n}\n\n.flip-card__input {\n width: 250px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 15px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.flip-card__input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.flip-card__input:focus {\n border: 2px solid var(--input-focus);\n}\n\n.flip-card__btn:active, .button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.flip-card__btn {\n margin: 20px 0 20px 0;\n width: 120px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n} "}]}},"actionData":null,"errors":null}