{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"890e2f","snapshot":null,"tags":null,"title":"form by Piyush831","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":422,"cssLen":1004,"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: linear-gradient(to right ,rgb(248, 234, 32),rgb(39, 40, 46));\n padding: 40px;\n border-radius: 10px;\n}\n\n.login {\n font-size: 25px;\n font-weight: bold;\n text-align: center;\n margin-bottom: 20px;\n}\n\n.flex {\n display: flex;\n flex-direction: column;\n}\n\n.form button {\n margin-top: 25px;\n margin-bottom: 6px;\n border-radius: 10px;\n border: none;\n padding-top: 4px;\n padding-bottom: 4px;\n font-size: 19px;\n font-weight: bold;\n color: grey;\n}\n\n.form label {\n margin-top: 20px;\n margin-bottom: 5px;\n}\n\n.form button:hover {\n box-shadow: 2px 2px 12px white;\n}\n\n.input {\n height: 30px;\n outline: none;\n padding: 15px;\n border-radius: 10px;\n border: none;\n font-weight: bold;\n font-size: 15px;\n box-shadow: 2px 2px 12px inset black;\n background: linear-gradient(to right ,rgb(248, 234, 32),rgb(39, 40, 46));\n}\n\n.span:hover {\n font-weight: bold;\n}\n\n.color {\n color: white;\n}\n\n.align {\n text-align: center;\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"c5c347","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1872,"cssLen":1643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Registration Form

\n \n

","css":".container {\n position: relative;\n max-width: 500px;\n width: 100%;\n background: #FCEDDA;\n padding: 25px;\n border-radius: 8px;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);\n}\n\n.container header {\n font-size: 1.2rem;\n color: #000;\n font-weight: 600;\n text-align: center;\n}\n\n.container .form {\n margin-top: 15px;\n}\n\n.form .input-box {\n width: 100%;\n margin-top: 10px;\n}\n\n.input-box label {\n color: #000;\n}\n\n.form :where(.input-box input, .select-box) {\n position: relative;\n height: 35px;\n width: 100%;\n outline: none;\n font-size: 1rem;\n color: #808080;\n margin-top: 5px;\n border: 1px solid #EE4E34;\n border-radius: 6px;\n padding: 0 15px;\n background: #FCEDDA;\n}\n\n.input-box input:focus {\n box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\n}\n\n.form .column {\n display: flex;\n column-gap: 15px;\n}\n\n.form .gender-box {\n margin-top: 10px;\n}\n\n.form :where(.gender-option, .gender) {\n display: flex;\n align-items: center;\n column-gap: 50px;\n flex-wrap: wrap;\n}\n\n.form .gender {\n column-gap: 5px;\n}\n\n.gender input {\n accent-color: #EE4E34;\n}\n\n.form :where(.gender input, .gender label) {\n cursor: pointer;\n}\n\n.gender label {\n color: #000;\n}\n\n.address :where(input, .select-box) {\n margin-top: 10px;\n}\n\n.select-box select {\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n color: #808080;\n font-size: 1rem;\n background: #FCEDDA;\n}\n\n.form button {\n height: 40px;\n width: 100%;\n color: #000;\n font-size: 1rem;\n font-weight: 400;\n margin-top: 15px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #EE4E34;\n}\n\n.form button:hover {\n background: #EE3E34;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"1f69fe","snapshot":null,"tags":null,"title":"form by PriyanshuGupta28","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":320,"cssLen":968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":"/* Unique styles for the newsletter form */\n.newsletter-form {\n max-width: 400px;\n margin: 0 auto;\n padding: 20px;\n border: 2px solid #333;\n border-radius: 8px;\n background-color: #f7f7f7;\n font-family: Arial, sans-serif;\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n}\n\n.heading {\n font-weight: bold;\n font-size: 20px;\n}\n\n.newsletter-form h2 {\n margin-top: 0;\n color: #333;\n font-size: 24px;\n}\n\n.newsletter-form label {\n display: block;\n font-weight: bold;\n color: #666;\n margin-bottom: 10px;\n}\n\n.newsletter-form input[type=\"email\"] {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n.newsletter-form input[type=\"submit\"] {\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: 4px;\n background-color: #ff6600;\n color: #fff;\n font-weight: bold;\n cursor: pointer;\n}\n\n.newsletter-form input[type=\"submit\"]:hover {\n background-color: #ff8533;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"cf421d","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1846,"cssLen":3403,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Job Application Form

\n\n \n

\n","css":".mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-screen {\n height: 100vh\n}\n\n.w-full {\n width: 100%\n}\n\n.max-w-md {\n max-width: 28rem\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-0 {\n border-width: 0px\n}\n\n.bg-gray-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(55 65 81 / var(--tw-bg-opacity))\n}\n\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-indigo-500 {\n --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-blue-500 {\n --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\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), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n 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;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-150 {\n transition-duration: 150ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-indigo-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity))\n}\n\n.hover\\:to-blue-600:hover {\n --tw-gradient-to: #2563eb var(--tw-gradient-to-position)\n}\n\n.focus\\:bg-gray-600:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(75 85 99 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\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}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"81b4e5","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":532,"cssLen":1641,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".modal {\n background-color: rgb(255, 255, 255);\n border-radius: 1em;\n box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1);\n color: rgb(15, 14, 14);\n max-width: 330px;\n overflow: hidden;\n position: relative;\n transition: background-color 0.3s, color 0.3s;\n}\n\n.content > *, .modal > * {\n padding: 0.875em;\n}\n\n.title {\n font-size: 1.25em;\n font-weight: 600;\n line-height: 1.2;\n display: flex;\n justify-content: center;\n}\n\n.message {\n line-height: 1.2;\n text-align: center;\n}\n\n.actions {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.upload-btn {\n background-color: transparent;\n border: 0.125rem dashed hsla(223,10%,50%,0.4);\n flex: 1;\n padding: 0.375rem 2rem;\n}\n\n.upload-btn:hover {\n background-color: hsla(223,10%,60%,0.2);\n}\n\n.close {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(226, 94, 54);\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n right: 10px;\n top: 10px;\n color: #fff;\n font-weight: bold;\n cursor: pointer;\n}\n\n.result {\n margin-top: 4px;\n background-color: rgba(0, 140, 255, 0.062);\n display: flex;\n align-items: center;\n position: relative;\n border-radius: 1em;\n}\n\n.file-uploaded {\n font-weight: 300;\n}\n\n.file-uploaded::before {\n position: absolute;\n content: \"X\";\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(26, 7, 1, 0.212);\n height: 30px;\n width: 30px;\n border-radius: 50%;\n right: 10px;\n top: 10px;\n color: rgb(255, 255, 255);\n font-weight: bold;\n cursor: pointer;\n}\n\n.file-uploaded:hover::before {\n background-color: rgba(233, 40, 6, 0.664);\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"c17a03","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":10033,"cssLen":5524,"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-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / 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-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / 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":"153509","snapshot":null,"tags":null,"title":"form by TasneemHatem97","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":705,"cssLen":1450,"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 max-width: 300px;\n background-color: #F1F7FE;\n border-radius: 15px;\n overflow: hidden;\n}\n\nform {\n display: flex;\n align-items: center;\n flex-direction: column;\n padding: 32px 24px 24px;\n gap: 16px;\n text-align: center;\n}\n\nform .head {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\nform .head span {\n font-size: 1.6rem;\n font-weight: bolder;\n color: black;\n}\n\nform .head p {\n font-size: 1.1rem;\n color: #7C6666;\n}\n\nform .inputs {\n overflow: hidden;\n background-color: #fff;\n width: 100%;\n margin: 1rem 0.5rem;\n border-radius: 8px;\n border-bottom: none;\n outline: 0;\n}\n\nform .inputs input {\n border: none;\n outline: none;\n padding: 8px 15px;\n /* علشان اقدر اخلي البلاس هولدر من اول الفورم بديله نفس الويدس */\n width: 100%;\n height: 40px;\n border-bottom: 1px solid rgba(128, 128, 128, 0.299);\n font-weight: 200;\n}\n\nform button {\n background-color: #4287ef;\n color: white;\n width: 100%;\n height: 40px;\n padding-top: 8px;\n padding-bottom: 8px;\n border: 0;\n overflow: hidden;\n border-radius: 25px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 1s ease-in-out;\n}\n\nform button:hover {\n background-color: #005ce6;\n}\n\n.form-footer {\n background-color: #e0ecfb;\n padding: 16px;\n font-size: 1rem;\n text-align: center;\n}\n\n.form-footer a {\n font-weight: bolder;\n color: #0066ff;\n transition: all 3s ease-in-out;\n}\n\n.form-footer a:hover {\n color: #005ce6;\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"e3b931","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1839,"cssLen":4305,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n Accept terms of use\n

\n \n \n

\n \n \n Submit to newsletter\n

\n \n \n

","css":".pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.left-1{left:0.25rem}.top-1{top:0.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-4{height:1rem}.h-6{height:1.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-80{width:20rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175 / 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))}.p-1{padding:0.25rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-3\\.5{padding-top:0.875rem;padding-bottom:0.875rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.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}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.checked\\:border-gray-900:checked{--tw-border-opacity:1;border-color:rgb(17 24 39 / var(--tw-border-opacity))}.hover\\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-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-gray-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81 / var(--tw-ring-opacity))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\\:ring-offset-gray-100:focus{--tw-ring-offset-color:#f3f4f6}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--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-visible\\:ring-gray-700:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81 / var(--tw-ring-opacity))}.focus-visible\\:ring-gray-900:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(17 24 39 / var(--tw-ring-opacity))}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked ~ .peer-checked\\:left-7{left:1.75rem}.peer:checked ~ .peer-checked\\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"9e0142","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":625,"cssLen":2456,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.75rem;\n background-color: #fff;\n color: rgb(97 97 97);\n box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);\n width: 22rem;\n background-clip: border-box;\n}\n\n.header {\n position: relative;\n background-clip: border-box;\n background-color: #1e88e5;\n background-image: linear-gradient(to top right,#1e88e5,#42a5f5);\n margin: 10px;\n border-radius: 0.75rem;\n overflow: hidden;\n color: #fff;\n box-shadow: 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,rgba(33,150,243,.4);\n height: 7rem;\n letter-spacing: 0;\n line-height: 1.375;\n font-weight: 600;\n font-size: 1.9rem;\n font-family: Roboto, sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.inputs {\n padding: 1.5rem;\n gap: 1rem;\n display: flex;\n flex-direction: column;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n min-width: 200px;\n width: 100%;\n height: 2.75rem;\n position: relative;\n}\n\n.input {\n border: 1px solid rgba(128, 128, 128, 0.61);\n outline: 0;\n color: rgb(69 90 100);\n font-weight: 400;\n font-size: .9rem;\n line-height: 1.25rem;\n padding: 0.75rem;\n background-color: transparent;\n border-radius: .375rem;\n width: 100%;\n height: 100%;\n}\n\n.input:focus {\n border: 1px solid #1e88e5;\n}\n\n.checkbox-container {\n margin-left: -0.625rem;\n display: inline-flex;\n align-items: center;\n}\n\n.checkbox {\n position: relative;\n overflow: hidden;\n padding: .55rem;\n border-radius: 999px;\n display: flex;\n align-items: center;\n cursor: pointer;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.027);\n height: 35px;\n width: 35px;\n}\n\n.checkbox input {\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n\n.checkbox-text {\n cursor: pointer;\n}\n\n.sigin-btn {\n text-transform: uppercase;\n font-weight: 700;\n font-size: .75rem;\n line-height: 1rem;\n text-align: center;\n padding: .75rem 1.5rem;\n background-color: #1e88e5;\n background-image: linear-gradient(to top right,#1e88e5,#42a5f5);\n border-radius: .5rem;\n width: 100%;\n outline: 0;\n border: 0;\n color: #fff;\n}\n\n.signup-link {\n line-height: 1.5;\n font-weight: 300;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.signup-link a, .forget {\n line-height: 1.5;\n font-weight: 700;\n font-size: .875rem;\n margin-left: .25rem;\n color: #1e88e5;\n}\n\n.forget {\n text-align: right;\n font-weight: 600;\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"622440","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:10.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} "},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"326078","snapshot":null,"tags":null,"title":"form by ammarsaa","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":982,"cssLen":1988,"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 max-width: 350px;\n padding: 20px;\n border-radius: 20px;\n position: relative;\n background-color: #1a1a1a;\n color: #fff;\n border: 1px solid #333;\n}\n\n.title {\n font-size: 28px;\n font-weight: 600;\n letter-spacing: -1px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 30px;\n color: #00bfff;\n}\n\n.title::before {\n width: 18px;\n height: 18px;\n}\n\n.title::after {\n width: 18px;\n height: 18px;\n animation: pulse 1s linear infinite;\n}\n\n.title::before,\n.title::after {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n border-radius: 50%;\n left: 0px;\n background-color: #00bfff;\n}\n\n.message, \n.signin {\n font-size: 14.5px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.signin {\n text-align: center;\n}\n\n.signin a:hover {\n text-decoration: underline royalblue;\n}\n\n.signin a {\n color: #00bfff;\n}\n\n.flex {\n display: flex;\n width: 100%;\n gap: 6px;\n}\n\n.form label {\n position: relative;\n}\n\n.form label .input {\n background-color: #333;\n color: #fff;\n width: 100%;\n padding: 20px 05px 05px 10px;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n}\n\n.form label .input + span {\n color: rgba(255, 255, 255, 0.5);\n position: absolute;\n left: 10px;\n top: 0px;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n}\n\n.form label .input:placeholder-shown + span {\n top: 12.5px;\n font-size: 0.9em;\n}\n\n.form label .input:focus + span,\n.form label .input:valid + span {\n color: #00bfff;\n top: 0px;\n font-size: 0.7em;\n font-weight: 600;\n}\n\n.input {\n font-size: medium;\n}\n\n.submit {\n border: none;\n outline: none;\n padding: 10px;\n border-radius: 10px;\n color: #fff;\n font-size: 16px;\n transform: .3s ease;\n background-color: #00bfff;\n}\n\n.submit:hover {\n background-color: #00bfff96;\n}\n\n@keyframes pulse {\n from {\n transform: scale(0.9);\n opacity: 1;\n }\n\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"145d1a","snapshot":null,"tags":null,"title":"form by gharsh11032000","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":527,"cssLen":1909,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".form-container {\n width: 400px;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;\n border: 2px solid transparent;\n padding: 32px 24px;\n font-size: 14px;\n font-family: inherit;\n color: white;\n display: flex;\n flex-direction: column;\n gap: 20px;\n box-sizing: border-box;\n border-radius: 16px;\n}\n\n.form-container button:active {\n scale: 0.95;\n}\n\n.form-container .form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form-container .form-group {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.form-container .form-group label {\n display: block;\n margin-bottom: 5px;\n color: #717171;\n font-weight: 600;\n font-size: 12px;\n}\n\n.form-container .form-group input {\n width: 100%;\n padding: 12px 16px;\n border-radius: 8px;\n color: #fff;\n font-family: inherit;\n background-color: transparent;\n border: 1px solid #414141;\n}\n\n.form-container .form-group textarea {\n width: 100%;\n padding: 12px 16px;\n border-radius: 8px;\n resize: none;\n color: #fff;\n height: 96px;\n border: 1px solid #414141;\n background-color: transparent;\n font-family: inherit;\n}\n\n.form-container .form-group input::placeholder {\n opacity: 0.5;\n}\n\n.form-container .form-group input:focus {\n outline: none;\n border-color: #e81cff;\n}\n\n.form-container .form-group textarea:focus {\n outline: none;\n border-color: #e81cff;\n}\n\n.form-container .form-submit-btn {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n align-self: flex-start;\n font-family: inherit;\n color: #717171;\n font-weight: 600;\n width: 40%;\n background: #313131;\n border: 1px solid #414141;\n padding: 12px 16px;\n font-size: inherit;\n gap: 8px;\n margin-top: 8px;\n cursor: pointer;\n border-radius: 6px;\n}\n\n.form-container .form-submit-btn:hover {\n background-color: #fff;\n border-color: #fff;\n}\n\n\n\n"}]}},"actionData":null,"errors":null}