{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"451386","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1975,"cssLen":2956,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Contact Form

\n\n \n

\n","css":".mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.w-full{width:100%}.max-w-\\[300px\\]{max-width:300px}.flex-col{flex-direction:column}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border-0{border-width:0px}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.hover\\:to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.focus\\:bg-gray-200:focus{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"d5e022","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":167,"cssLen":1063,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".subscribe-form {\n --main-focus: #2d8cf0;\n --font-color: #FEFEFE;\n --font-color-sub: #666;\n --bg-color: #111;\n --main-color: #FEFEFE;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n display: flex;\n flex-direction: row;\n width: 250px;\n height: 35px;\n border-radius: 5px;\n box-shadow: 4px 4px var(--main-color);\n}\n\n.subscribe-input {\n width: 100%;\n height: 100%;\n padding: 5px 10px;\n border: 2px solid var(--main-color);\n border-right: 0;\n border-radius: 5px 0 0 5px;\n font-size: 15px;\n font-weight: 500;\n color: var(--font-color);\n background: var(--bg-color);\n}\n\n.subscribe-btn {\n width: 100px;\n height: 100%;\n border: 2px solid var(--main-focus);\n border-radius: 0 5px 5px 0;\n background-color: var(--main-focus);\n font-size: 15px;\n letter-spacing: 1px;\n font-weight: 500;\n color: var(--font-color);\n cursor: pointer;\n}\n\n.subscribe-input:focus {\n outline: none;\n border: 2px solid var(--main-focus);\n border-right: 0;\n}\n "},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"7b8461","snapshot":null,"tags":null,"title":"form by guilhermeyohan","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":474,"cssLen":3005,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"form {\n background-color: #444444;\n border-radius: 10px;\n padding: 20px;\n width: 300px;\n margin: 50px auto;\n}\n\n.lb {\n display: block;\n margin-bottom: 10px;\n font-size: 18px;\n font-weight: bold;\n}\n\n.infos[type=\"text\"], input[type=\"email\"], input[type=\"date\"] {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n border-radius: 5px;\n border: none;\n margin-bottom: 20px;\n background-color: #333333;\n color: white;\n}\n\n#send {\n --glow-color: rgb(176, 255, 189);\n --glow-spread-color: rgba(123, 255, 160, 0.781);\n --enhanced-glow-color: rgb(182, 175, 71);\n --btn-color: rgba(13, 241, 21, 0.508);\n border: .25em solid var(--glow-color);\n padding: 1em 2em;\n color: var(--glow-color);\n font-size: 14px;\n font-weight: bold;\n background-color: var(--btn-color);\n border-radius: 1em;\n outline: none;\n box-shadow: 0 0 1em .25em var(--glow-color),\n 0 0 4em 1em var(--glow-spread-color),\n inset 0 0 .05em .25em var(--glow-color);\n text-shadow: 0 0 .5em var(--glow-color);\n position: relative;\n transition: all 0.3s;\n}\n\n#send::after {\n pointer-events: none;\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: var(--glow-spread-color);\n filter: blur(2em);\n opacity: .7;\n transform: perspective(1.5em) rotateX(35deg) scale(1, .6);\n}\n\n#send:hover {\n color: var(--btn-color);\n background-color: var(--glow-color);\n box-shadow: 0 0 1em .25em var(--glow-color),\n 0 0 4em 2em var(--glow-spread-color),\n inset 0 0 .75em .25em var(--glow-color);\n}\n\n#send:active {\n box-shadow: 0 0 0.6em .25em var(--glow-color),\n 0 0 2.5em 2em var(--glow-spread-color),\n inset 0 0 .5em .25em var(--glow-color);\n}\n\n#limpar {\n --glow-color: rgb(255, 176, 176);\n --glow-spread-color: rgba(255, 123, 123, 0.781);\n --enhanced-glow-color: rgb(182, 175, 71);\n --btn-color: rgba(241, 13, 13, 0.508);\n border: .25em solid var(--glow-color);\n padding: 1em 2em;\n color: var(--glow-color);\n font-size: 14px;\n font-weight: bold;\n background-color: var(--btn-color);\n border-radius: 1em;\n outline: none;\n box-shadow: 0 0 1em .25em var(--glow-color),\n 0 0 4em 1em var(--glow-spread-color),\n inset 0 0 .05em .25em var(--glow-color);\n text-shadow: 0 0 .5em var(--glow-color);\n position: relative;\n transition: all 0.3s;\n}\n\n#limpar::after {\n pointer-events: none;\n content: \"\";\n position: absolute;\n top: 120%;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: var(--glow-spread-color);\n filter: blur(2em);\n opacity: .7;\n transform: perspective(1.5em) rotateX(35deg) scale(1, .6);\n}\n\n#limpar:hover {\n color: var(--btn-color);\n background-color: var(--glow-color);\n box-shadow: 0 0 1em .25em var(--glow-color),\n 0 0 4em 2em var(--glow-spread-color),\n inset 0 0 .75em .25em var(--glow-color);\n}\n\n#limpar:active {\n box-shadow: 0 0 0.6em .25em var(--glow-color),\n 0 0 2.5em 2em var(--glow-spread-color),\n inset 0 0 .5em .25em var(--glow-color);\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"8c2fca","snapshot":null,"tags":null,"title":"form by akshat-patel28","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2721,"cssLen":2458,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Create account

Let's get statred with your 30 days free trial

\n \n \n

","css":".form-container {\n width: 350px;\n height: 550px;\n background-color: #fff;\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n border-radius: 10px;\n box-sizing: border-box;\n padding: 20px 30px;\n}\n\n.title {\n text-align: center;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n margin: 10px 0 30px 0;\n font-size: 28px;\n font-weight: 800;\n}\n\n.sub-title {\n margin: 0;\n margin-bottom: 5px;\n font-size: 9px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n}\n\n.form {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 18px;\n margin-bottom: 15px;\n}\n\n.input {\n border-radius: 20px;\n border: 1px solid #c0c0c0;\n outline: 0 !important;\n box-sizing: border-box;\n padding: 12px 15px;\n}\n\n.form-btn {\n padding: 10px 15px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n border-radius: 20px;\n border: 0 !important;\n outline: 0 !important;\n background: teal;\n color: white;\n cursor: pointer;\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n}\n\n.form-btn:active {\n box-shadow: none;\n}\n\n.sign-up-label {\n margin: 0;\n font-size: 10px;\n color: #747474;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n}\n\n.sign-up-link {\n margin-left: 1px;\n font-size: 11px;\n text-decoration: underline;\n text-decoration-color: teal;\n color: teal;\n cursor: pointer;\n font-weight: 800;\n}\n\n.buttons-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 20px;\n gap: 15px;\n}\n\n.apple-login-button,\n .google-login-button {\n border-radius: 20px;\n box-sizing: border-box;\n padding: 10px 15px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,\n rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-size: 11px;\n gap: 5px;\n}\n\n.apple-login-button {\n background-color: #000;\n color: #fff;\n border: 2px solid #000;\n}\n\n.google-login-button {\n border: 2px solid #747474;\n}\n\n.apple-icon,\n .google-icon {\n font-size: 18px;\n margin-bottom: 1px;\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"67466b","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":16079,"cssLen":5250,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n E-mail\n

\n \n Forgot Password?\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Sign in with Google\n \n \n \n \n \n Sign in with Apple\n \n

\n \n Log in\n \n

\n \n or sign up\n \n

\n\n","css":".relative{position:relative}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-8{margin-left:2rem}.mt-1{margin-top:0.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.w-1\\/5{width:20%}.w-full{width:100%}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-5 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem * var(--tw-space-x-reverse));margin-left:calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-3xl{border-radius:1.5rem}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-20{padding-left:5rem;padding-right:5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-1{padding-bottom:0.25rem}.text-center{text-align:center}.text-right{text-align:right}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\\:text-gray-400:hover{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\\:ring-offset-blue-200:focus{--tw-ring-offset-color:#bfdbfe}@media (min-width: 640px){.sm\\:mx-auto{margin-left:auto;margin-right:auto}.sm\\:max-w-xl{max-width:36rem}.sm\\:p-10{padding:2.5rem}}@media (min-width: 768px){.md\\:mx-0{margin-left:0px;margin-right:0px}.md\\:w-1\\/4{width:25%}}@media (prefers-color-scheme: dark){.dark\\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.dark\\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"3a8cd9","snapshot":null,"tags":null,"title":"form by AnthonyPreite","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":790,"cssLen":2032,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

\n \n","css":"#form {\n display: grid;\n place-items: center;\n width: 300px;\n height: 472px;\n padding: 25px;\n background-color: #161616;\n box-shadow: 0px 15px 60px #00FF7F;\n outline: 1px solid #2b9962;\n border-radius: 10px;\n}\n\n#form-body {\n position: absolute;\n top: 50%;\n right: 25px;\n left: 25px;\n width: 230px;\n margin: -156px auto 0 auto;\n}\n\n#welcome-lines {\n text-align: center;\n line-height: 1;\n}\n\n#welcome-line-1 {\n color: #00FF7F;\n font-weight: 600;\n font-size: 40px;\n}\n\n#welcome-line-2 {\n color: #ffffff;\n font-size: 18px;\n margin-top: 17px;\n}\n\n#input-area {\n margin-top: 40px;\n}\n\n.form-inp {\n padding: 11px 25px;\n background: transparent;\n border: 1px solid #e3e3e3;\n line-height: 1;\n border-radius: 8px;\n}\n\n.form-inp:focus {\n border: 1px solid #00FF7F;\n}\n\n.form-inp:first-child {\n margin-bottom: 15px;\n}\n\n.form-inp input {\n width: 100%;\n background: none;\n font-size: 13.4px;\n color: #00FF7F;\n border: none;\n padding: 0;\n margin: 0;\n}\n\n.form-inp input:focus {\n outline: none;\n}\n\n#submit-button-cvr {\n margin-top: 20px;\n}\n\n#submit-button {\n display: block;\n width: 100%;\n color: #00FF7F;\n background-color: transparent;\n font-weight: 600;\n font-size: 14px;\n margin: 0;\n padding: 14px 13px 12px 13px;\n border: 0;\n outline: 1px solid #00FF7F;\n border-radius: 8px;\n line-height: 1;\n cursor: pointer;\n transition: all ease-in-out .3s;\n}\n\n#submit-button:hover {\n transition: all ease-in-out .3s;\n background-color: #00FF7F;\n color: #161616;\n cursor: pointer;\n}\n\n#forgot-pass {\n text-align: center;\n margin-top: 10px;\n}\n\n#forgot-pass a {\n color: #868686;\n font-size: 12px;\n text-decoration: none;\n}\n\n#bar {\n position: absolute;\n left: 50%;\n bottom: -50px;\n width: 28px;\n height: 8px;\n margin-left: -33px;\n background-color: #00FF7F;\n border-radius: 10px;\n}\n\n#bar:before,\n#bar:after {\n content: \"\";\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: #ececec;\n border-radius: 50%;\n}\n\n#bar:before {\n right: -20px;\n}\n\n#bar:after {\n right: -38px;\n}\n\n "},{"created":"2024-01-22T17:20:09.000Z","isPrivate":0,"projectId":"2db366","snapshot":null,"tags":null,"title":"form by vinodjangid07","updated":"2024-01-22T17:20:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1540,"cssLen":1785,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".form_main {\n width: 220px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n padding: 30px 30px 30px 30px;\n box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);\n position: relative;\n overflow: hidden;\n}\n\n.form_main::before {\n position: absolute;\n content: \"\";\n width: 300px;\n height: 300px;\n background-color: rgb(209, 193, 255);\n transform: rotate(45deg);\n left: -180px;\n bottom: 30px;\n z-index: 1;\n border-radius: 30px;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);\n}\n\n.heading {\n font-size: 2em;\n color: #2e2e2e;\n font-weight: 700;\n margin: 5px 0 10px 0;\n z-index: 2;\n}\n\n.inputContainer {\n width: 100%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n}\n\n.inputIcon {\n position: absolute;\n left: 3px;\n}\n\n.inputField {\n width: 100%;\n height: 30px;\n background-color: transparent;\n border: none;\n border-bottom: 2px solid rgb(173, 173, 173);\n margin: 10px 0;\n color: black;\n font-size: .8em;\n font-weight: 500;\n box-sizing: border-box;\n padding-left: 30px;\n}\n\n.inputField:focus {\n outline: none;\n border-bottom: 2px solid rgb(199, 114, 255);\n}\n\n.inputField::placeholder {\n color: rgb(80, 80, 80);\n font-size: 1em;\n font-weight: 500;\n}\n\n#button {\n z-index: 2;\n position: relative;\n width: 100%;\n border: none;\n background-color: rgb(162, 104, 255);\n height: 30px;\n color: white;\n font-size: .8em;\n font-weight: 500;\n letter-spacing: 1px;\n margin: 10px;\n cursor: pointer;\n}\n\n#button:hover {\n background-color: rgb(126, 84, 255);\n}\n\n.forgotLink {\n z-index: 2;\n font-size: .7em;\n font-weight: 500;\n color: rgb(44, 24, 128);\n text-decoration: none;\n padding: 8px 15px;\n border-radius: 20px;\n}\n\n"},{"created":"2024-01-22T17:20:09.000Z","isPrivate":0,"projectId":"856fa5","snapshot":null,"tags":null,"title":"form by zanina-yassine","updated":"2024-01-22T17:20:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3617,"cssLen":4263,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Your cart\n

\n \n

\n Cheese Burger\n

Extra Spicy

No mayo

\n \n 2\n \n

\n $23.99\n

\n\n

\n Apply coupons\n \n

\n\n

\n Checkout\n

\n Your cart subtotal:\n 47.99$\n Discount through applied coupons:\n 3.99$\n Shipping fees:\n 4.99$\n

\n \n

","css":".master-container {\n display: grid;\n grid-template-columns: auto;\n gap: 5px;\n}\n\n.card {\n width: 400px;\n background: #FFFFFF;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n}\n\n.title {\n width: 100%;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 20px;\n border-bottom: 1px solid #efeff3;\n font-weight: 700;\n font-size: 11px;\n color: #63656b;\n}\n\n/* cart */\n.cart {\n border-radius: 19px 19px 7px 7px;\n}\n\n.cart .products {\n display: flex;\n flex-direction: column;\n padding: 10px;\n}\n\n.cart .products .product {\n display: grid;\n grid-template-columns: 60px 1fr 80px 1fr;\n gap: 10px;\n}\n\n.cart .products .product span {\n font-size: 13px;\n font-weight: 600;\n color: #47484b;\n margin-bottom: 8px;\n display: block;\n}\n\n.cart .products .product p {\n font-size: 11px;\n font-weight: 600;\n color: #7a7c81;\n}\n\n.cart .quantity {\n height: 30px;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n margin: auto;\n background-color: #ffffff;\n border: 1px solid #e5e5e5;\n border-radius: 7px;\n filter: drop-shadow(0px 1px 0px #efefef)\n drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));\n}\n\n.cart .quantity label {\n width: 20px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-bottom: 2px;\n font-size: 15px;\n font-weight: 700;\n color: #47484b;\n}\n\n.cart .quantity button {\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 0;\n outline: none;\n background-color: transparent;\n padding-bottom: 2px;\n}\n\n.card .small {\n font-size: 15px;\n margin: 0 0 auto auto;\n}\n\n.card .small sup {\n font-size: px;\n}\n\n/* coupons */\n.coupons {\n border-radius: 7px;\n}\n\n.coupons form {\n display: grid;\n grid-template-columns: 1fr 80px;\n gap: 10px;\n padding: 10px;\n}\n\n.input_field {\n width: auto;\n height: 36px;\n padding: 0 0 0 12px;\n border-radius: 5px;\n outline: none;\n border: 1px solid #e5e5e5;\n filter: drop-shadow(0px 1px 0px #efefef)\n drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.input_field:focus {\n border: 1px solid transparent;\n box-shadow: 0px 0px 0px 2px #242424;\n background-color: transparent;\n}\n\n.coupons form button {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 10px 18px;\n gap: 10px;\n width: 100%;\n height: 36px;\n background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);\n box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 5px;\n border: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n color: #ffffff;\n}\n\n/* Checkout */\n.checkout {\n border-radius: 9px 9px 19px 19px;\n}\n\n.checkout .details {\n display: grid;\n grid-template-columns: 3fr 1fr;\n padding: 10px;\n gap: 5px;\n}\n\n.checkout .details span {\n font-size: 13px;\n font-weight: 600;\n}\n\n.checkout .details span:nth-child(odd) {\n font-size: 11px;\n font-weight: 700;\n color: #707175;\n margin: auto auto auto 0;\n}\n\n.checkout .details span:nth-child(even) {\n font-size: 13px;\n font-weight: 600;\n color: #47484b;\n margin: auto 0 auto auto;\n}\n\n.checkout .checkout--footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 10px 10px 20px;\n background-color: #efeff3;\n}\n\n.price {\n position: relative;\n font-size: 22px;\n color: #2B2B2F;\n font-weight: 900;\n}\n\n.price sup {\n font-size: 13px;\n}\n\n.price sub {\n width: fit-content;\n position: absolute;\n font-size: 11px;\n color: #5F5D6B;\n bottom: 5px;\n display: inline-block;\n}\n\n.checkout .checkout-btn {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 150px;\n height: 36px;\n background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);\n box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 7px;\n border: 0;\n outline: none;\n color: #ffffff;\n font-size: 13px;\n font-weight: 600;\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n}"},{"created":"2024-01-22T17:18:05.000Z","isPrivate":0,"projectId":"b53bf4","snapshot":null,"tags":null,"title":"radio by JaydipPrajapati1910","updated":"2024-01-22T17:18:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":358,"cssLen":739,"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","css":".radio-input {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.radio-input input {\n appearance: none;\n width: 2em;\n height: 2em;\n background-color: #171717;\n box-shadow: inset 2px 5px 10px rgb(5, 5, 5);\n border-radius: 50%;\n transition: .4s ease-in-out;\n}\n\n.radio-input input:hover {\n scale: 1.2;\n cursor: pointer;\n box-shadow: none;\n}\n\n.radio-input .circle {\n position: relative;\n top: 0.01em;\n left: -1.1em;\n width: 0.6em;\n height: 0.6em;\n background-color: yellow;\n scale: 0;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.radio-input input:checked {\n box-shadow: none;\n border: 1px solid yellow;\n}\n\n.radio-input input:checked + .circle {\n transform: rotate(360deg);\n scale: 1;\n}\n\n"},{"created":"2024-01-22T17:18:05.000Z","isPrivate":0,"projectId":"53c52f","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":279,"cssLen":952,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n Option 1\n\n\n\n \n \n Option 2\n\n","css":".radio-button {\n display: flex;\n gap: 10px;\n justify-content: center;\n margin: 10px;\n position: relative;\n align-items: center;\n color: white;\n}\n\n.radio-button input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n}\n\n.radio {\n position: relative;\n display: inline-block;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n border: 2px solid #ccc;\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);\n transform: translateZ(-25px);\n transition: all 0.3s ease-in-out;\n}\n\n.radio::before {\n position: absolute;\n content: '';\n width: 10px;\n height: 10px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n background-color: #fff;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);\n opacity: 0;\n transition: all 0.3s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio {\n border-color: #5cb85c;\n transform: translateZ(0px);\n background-color: #fff;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio::before {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"d3859a","snapshot":null,"tags":null,"title":"radio by 3bdel3ziz-T","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1200,"cssLen":1753,"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 \n

\n\n","css":".select {\n width: fit-content;\n cursor: pointer;\n position: relative;\n transition: 300ms;\n color: white;\n overflow: hidden;\n}\n\n.selected {\n background-color: #2a2f3b;\n padding: 5px;\n margin-bottom: 3px;\n border-radius: 5px;\n position: relative;\n z-index: 100000;\n font-size: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.arrow {\n position: relative;\n right: 0px;\n height: 10px;\n transform: rotate(-90deg);\n width: 25px;\n fill: white;\n z-index: 100000;\n transition: 300ms;\n}\n\n.options {\n display: flex;\n flex-direction: column;\n border-radius: 5px;\n padding: 5px;\n background-color: #2a2f3b;\n position: relative;\n top: -100px;\n opacity: 0;\n transition: 300ms;\n}\n\n.select:hover > .options {\n opacity: 1;\n top: 0;\n}\n\n.select:hover > .selected .arrow {\n transform: rotate(0deg);\n}\n\n.option {\n border-radius: 5px;\n padding: 5px;\n transition: 300ms;\n background-color: #2a2f3b;\n width: 150px;\n font-size: 15px;\n}\n.option:hover {\n background-color: #323741;\n}\n\n.options input[type=\"radio\"] {\n display: none;\n}\n\n.options label {\n display: inline-block;\n}\n.options label::before {\n content: attr(data-txt);\n}\n\n.options input[type=\"radio\"]:checked + label {\n display: none;\n}\n\n.options input[type=\"radio\"]#all:checked + label {\n display: none;\n}\n\n.select:has(.options input[type=\"radio\"]#all:checked) .selected::before {\n content: attr(data-default);\n}\n.select:has(.options input[type=\"radio\"]#option-1:checked) .selected::before {\n content: attr(data-one);\n}\n.select:has(.options input[type=\"radio\"]#option-2:checked) .selected::before {\n content: attr(data-two);\n}\n.select:has(.options input[type=\"radio\"]#option-3:checked) .selected::before {\n content: attr(data-three);\n}\n"},{"created":"2024-01-22T17:18:04.000Z","isPrivate":0,"projectId":"b7b211","snapshot":null,"tags":null,"title":"radio by shadowfax29","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":472,"cssLen":2666,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n EARTH\n

\n \n

\n MARS\n

\n \n

\n MOON\n

","css":".radio-inputs {\n display: flex;\n flex-wrap: wrap;\n border-radius: 0.5rem;\n background-color: rgba(255, 255, 255, 0.074);\n box-sizing: border-box;\n box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);\n padding: 0.25rem;\n width: 210px;\n height: 40px;\n font-size: 14px;\n box-size: border-box;\n}\n\n.obj1 {\n content: '';\n position: absolute;\n width: 100px;\n height: 100px;\n filter: blur(4px);\n z-index: -5;\n background: linear-gradient(blue,rgb(224, 107, 224));\n border-radius: 50%;\n overflow: hidden;\n} /* adjust position accordingly */\n\n.obj2 {\n content: '';\n position: absolute;\n width: 80px;\n height: 80px;\n filter: blur(4px);\n z-index: -5;\n background: linear-gradient(red,orange);\n border-radius: 50%;\n} /* adjust position accordingly */\n\n.obj3 {\n content: '';\n position: absolute;\n width: 60px;\n height: 60px;\n filter: blur(4px);\n z-index: -5;\n background-color: grey;\n border-radius: 50%;\n} /* adjust position accordingly */\n\n.radio1 , .radio2 , .radio3 {\n flex: 1;\n width: 70px;\n height: 30px;\n}\n\n.radio1 input ,\n.radio2 input ,\n.radio3 input {\n width: 30px;\n height: 30px;\n appearance: none;\n z-index: 2;\n cursor: pointer;\n margin-left: 22px;\n}\n\n.radio1 .name ,\n\n.radio2 .name ,\n\n.radio3 .name {\n display: flex;\n position: relative;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n bottom: 2.6em;\n padding: .5rem 0;\n color: rgba(51, 65, 85, 1);\n transition: all .15s ease-in-out;\n font-weight: 200;\n height: 40px;\n z-index: -2;\n}\n\n.radio1 input:checked ~ .name {\n color: white;\n background: linear-gradient(blue,green);\n font-weight: 600;\n}\n\n.radio2 input:checked ~ .name {\n color: white;\n background: linear-gradient(red,orange);\n font-weight: 600;\n}\n\n.radio3 input:checked ~ .name {\n color: white;\n background-color: grey;\n font-weight: 600;\n}\n\n#one input:checked ~ .obj1,\n#two input:checked ~ .obj2 ,\n#three input:checked ~ .obj3 {\n animation: shake 1s;\n animation-fill-mode: forwards;\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0);\n }\n\n 10% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 20% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 30% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 40% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 50% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 60% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 70% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 80% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 90% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 100% {\n transform: translateX(0) rotate(0);\n }\n}\n"}]}},"actionData":null,"errors":null}