assets

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

Let's create your account!

\n \n

\n First name\n

\n \n

\n Last name\n

\n \n

\n Email\n

\n \n

","css":".form {\n background-color: #15172b;\n border-radius: 20px;\n box-sizing: border-box;\n height: 350px;\n padding: 20px;\n width: 320px;\n}\n\n.title {\n color: #eee;\n font-family: sans-serif;\n font-size: 36px;\n font-weight: 600;\n}\n\n.subtitle {\n color: #eee;\n font-family: sans-serif;\n font-size: 16px;\n font-weight: 600;\n}\n\n.input-container {\n height: 40px;\n position: relative;\n width: 100%;\n}\n\n.ic1 {\n margin-top: 20px;\n}\n\n.ic2 {\n margin-top: 30px;\n}\n\n.input {\n background-color: #303245;\n border-radius: 12px;\n border: 0;\n box-sizing: border-box;\n color: #eee;\n font-size: 18px;\n height: 40px;\n outline: 0;\n padding: 4px 10px 0;\n width: 100%;\n}\n\n.cut {\n background-color: #15172b;\n border-radius: 10px;\n height: 10px;\n left: 20px;\n position: absolute;\n top: -20px;\n transform: translateY(0);\n transition: transform 200ms;\n width: 76px;\n}\n\n.cut-short {\n width: 30px;\n}\n\n.input:focus ~ .cut,\n.input:not(:placeholder-shown) ~ .cut {\n transform: translateY(8px);\n}\n\n.placeholder {\n color: #65657b;\n font-family: sans-serif;\n left: 20px;\n line-height: 14px;\n pointer-events: none;\n position: absolute;\n transform-origin: 0 50%;\n transition: transform 200ms, color 200ms;\n top: 20px;\n}\n\n.input:focus ~ .placeholder,\n.input:not(:placeholder-shown) ~ .placeholder {\n transform: translateY(-30px) translateX(10px) scale(0.75);\n}\n\n.input:not(:placeholder-shown) ~ .placeholder {\n color: #808097;\n}\n\n.input:focus ~ .placeholder {\n color: #dc2f55;\n}\n\n.submit {\n background-color: #08d;\n border-radius: 12px;\n border: 0;\n box-sizing: border-box;\n color: #eee;\n cursor: pointer;\n font-size: 18px;\n height: 50px;\n margin-top: 38px;\n text-align: center;\n width: 100%;\n}\n\n.submit:active {\n background-color: #06b;\n}\n"},{"created":"2024-01-22T17:20:17.000Z","isPrivate":0,"projectId":"ee7173","snapshot":null,"tags":null,"title":"form by LogariusIV","updated":"2024-01-22T17:20:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":432,"cssLen":1500,"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 width: 280px;\n height: 350px;\n background-color: #FFF;\n margin: 0;\n box-shadow: -1px 0px 25px 0px #21719369;\n padding: 2.25em;\n box-sizing: border-box;\n border: solid 1px #DDD;\n border-radius: 0.5em;\n font-family: sans-serif;\n font-size: 16px;\n font-weight: 400;\n}\n\n.form .Group {\n margin-bottom: 2em;\n}\n\n.form label {\n margin: 0 0 10px;\n display: block;\n font-size: 1.25em;\n color: #217093;\n font-weight: 600;\n font-family: inherit;\n}\n\n.form input {\n padding: 0.3em 0.5em 0.4em;\n background-color: #f3fafd;\n border: solid 2px #217093;\n border-radius: 4px;\n box-sizing: border-box;\n width: 100%;\n height: 50px;\n font-size: 1.3em;\n color: #353538;\n font-weight: 600;\n font-family: inherit;\n transition: box-shadow 0.2s linear, border-color 0.25s ease-out;\n}\n\n.form input:focus {\n outline: none;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);\n background-color: #edf8fc;\n border: solid 2px #4eb8dd;\n}\n\n.form input::placeholder {\n color: #21719383;\n}\n\n.form .btn {\n margin: 0;\n padding: 0.5em;\n background-color: #4eb8dd;\n border: none;\n border-radius: 4px;\n box-sizing: border-box;\n box-shadow: none;\n width: 100%;\n height: 50px;\n font-size: 1.4em;\n color: #FFF;\n font-weight: 600;\n font-family: inherit;\n transition: transforme 0.1s ease-in-out, background-color 0.2s ease-out;\n}\n\n.form .btn:hover {\n cursor: pointer;\n background-color: #217093;\n}\n\n.form .btn:active {\n transform: scale(0.98);\n} "},{"created":"2024-01-22T17:20:17.000Z","isPrivate":0,"projectId":"427fa6","snapshot":null,"tags":null,"title":"form by glisovic01","updated":"2024-01-22T17:20:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":479,"cssLen":2878,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".login-box {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 400px;\n padding: 40px;\n margin: 20px auto;\n transform: translate(-50%, -55%);\n background: rgba(0,0,0,.9);\n box-sizing: border-box;\n box-shadow: 0 15px 25px rgba(0,0,0,.6);\n border-radius: 10px;\n}\n\n.login-box p:first-child {\n margin: 0 0 30px;\n padding: 0;\n color: #fff;\n text-align: center;\n font-size: 1.5rem;\n font-weight: bold;\n letter-spacing: 1px;\n}\n\n.login-box .user-box {\n position: relative;\n}\n\n.login-box .user-box input {\n width: 100%;\n padding: 10px 0;\n font-size: 16px;\n color: #fff;\n margin-bottom: 30px;\n border: none;\n border-bottom: 1px solid #fff;\n outline: none;\n background: transparent;\n}\n\n.login-box .user-box label {\n position: absolute;\n top: 0;\n left: 0;\n padding: 10px 0;\n font-size: 16px;\n color: #fff;\n pointer-events: none;\n transition: .5s;\n}\n\n.login-box .user-box input:focus ~ label,\n.login-box .user-box input:valid ~ label {\n top: -20px;\n left: 0;\n color: #fff;\n font-size: 12px;\n}\n\n.login-box form a {\n position: relative;\n display: inline-block;\n padding: 10px 20px;\n font-weight: bold;\n color: #fff;\n font-size: 16px;\n text-decoration: none;\n text-transform: uppercase;\n overflow: hidden;\n transition: .5s;\n margin-top: 40px;\n letter-spacing: 3px\n}\n\n.login-box a:hover {\n background: #fff;\n color: #272727;\n border-radius: 5px;\n}\n\n.login-box a span {\n position: absolute;\n display: block;\n}\n\n.login-box a span:nth-child(1) {\n top: 0;\n left: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, transparent, #fff);\n animation: btn-anim1 1.5s linear infinite;\n}\n\n@keyframes btn-anim1 {\n 0% {\n left: -100%;\n }\n\n 50%,100% {\n left: 100%;\n }\n}\n\n.login-box a span:nth-child(2) {\n top: -100%;\n right: 0;\n width: 2px;\n height: 100%;\n background: linear-gradient(180deg, transparent, #fff);\n animation: btn-anim2 1.5s linear infinite;\n animation-delay: .375s\n}\n\n@keyframes btn-anim2 {\n 0% {\n top: -100%;\n }\n\n 50%,100% {\n top: 100%;\n }\n}\n\n.login-box a span:nth-child(3) {\n bottom: 0;\n right: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(270deg, transparent, #fff);\n animation: btn-anim3 1.5s linear infinite;\n animation-delay: .75s\n}\n\n@keyframes btn-anim3 {\n 0% {\n right: -100%;\n }\n\n 50%,100% {\n right: 100%;\n }\n}\n\n.login-box a span:nth-child(4) {\n bottom: -100%;\n left: 0;\n width: 2px;\n height: 100%;\n background: linear-gradient(360deg, transparent, #fff);\n animation: btn-anim4 1.5s linear infinite;\n animation-delay: 1.125s\n}\n\n@keyframes btn-anim4 {\n 0% {\n bottom: -100%;\n }\n\n 50%,100% {\n bottom: 100%;\n }\n}\n\n.login-box p:last-child {\n color: #aaa;\n font-size: 14px;\n}\n\n.login-box a.a2 {\n color: #fff;\n text-decoration: none;\n}\n\n.login-box a.a2:hover {\n background: transparent;\n color: #aaa;\n border-radius: 5px;\n}"},{"created":"2024-01-22T17:20:17.000Z","isPrivate":0,"projectId":"5eac29","snapshot":null,"tags":null,"title":"form by Smit-Prajapati","updated":"2024-01-22T17:20:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":588,"cssLen":2143,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n Get in touch\n \n \n \n

Send

Reset

","css":".orange {\n color: #ff7a01;\n}\n\n.form-container {\n max-width: 700px;\n margin: 30px;\n background-color: #001925;\n padding: 30px;\n border-left: 5px solid #ff7a01;\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);\n}\n\n.heading {\n display: block;\n color: white;\n font-size: 1.5rem;\n font-weight: 800;\n margin-bottom: 20px;\n}\n\n.form-container .form .input {\n color: #87a4b6;\n width: 100%;\n background-color: #002733;\n border: none;\n outline: none;\n padding: 10px;\n margin-bottom: 20px;\n font-weight: bold;\n transition: all 0.2s ease-in-out;\n border-left: 1px solid transparent;\n}\n\n.form-container .form .input:focus {\n border-left: 5px solid #ff7a01;\n}\n\n.form-container .form .textarea {\n width: 100%;\n padding: 10px;\n border: none;\n outline: none;\n background-color: #013747;\n color: #ff7a01;\n font-weight: bold;\n resize: none;\n max-height: 150px;\n margin-bottom: 20px;\n border-left: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n\n.form-container .form .textarea:focus {\n border-left: 5px solid #ff7a01;\n}\n\n.form-container .form .button-container {\n display: flex;\n gap: 10px;\n}\n\n.form-container .form .button-container .send-button {\n flex-basis: 70%;\n background: #ff7a01;\n padding: 10px;\n color: #001925;\n text-align: center;\n font-weight: bold;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n\n.form-container .form .button-container .send-button:hover {\n background: transparent;\n border: 1px solid #ff7a01;\n color: #ff7a01;\n}\n\n.form-container .form .button-container .reset-button-container {\n filter: drop-shadow(1px 1px 0px #ff7a01);\n flex-basis: 30%;\n}\n\n.form-container .form .button-container .reset-button-container .reset-button {\n position: relative;\n text-align: center;\n padding: 10px;\n color: #ff7a01;\n font-weight: bold;\n background: #001925;\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);\n transition: all 0.2s ease-in-out;\n}\n\n.form-container .form .button-container .reset-button-container .reset-button:hover {\n background: #ff7a01;\n color: #001925;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"f1f830","snapshot":null,"tags":null,"title":"form by jeel-sardhara","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2411,"cssLen":2844,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n max-width: 350px;\n background: #f8f9fd;\n background: linear-gradient(\n 0deg,\n rgb(255, 255, 255) 0%,\n rgb(244, 247, 251) 100%\n );\n border-radius: 40px;\n padding: 25px 35px;\n border: 5px solid rgb(255, 255, 255);\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;\n margin: 20px;\n}\n\n.heading {\n text-align: center;\n font-weight: 900;\n font-size: 30px;\n color: rgb(16, 137, 211);\n}\n\n.form {\n margin-top: 20px;\n}\n\n.form .input {\n width: 100%;\n background: white;\n border: none;\n padding: 15px 20px;\n border-radius: 20px;\n margin-top: 15px;\n box-shadow: #cff0ff 0px 10px 10px -5px;\n border-inline: 2px solid transparent;\n}\n\n.form .input::-moz-placeholder {\n color: rgb(170, 170, 170);\n}\n\n.form .input::placeholder {\n color: rgb(170, 170, 170);\n}\n\n.form .input:focus {\n outline: none;\n border-inline: 2px solid #12b1d1;\n}\n\n.form .forgot-password {\n display: block;\n margin-top: 10px;\n margin-left: 10px;\n}\n\n.form .forgot-password a {\n font-size: 11px;\n color: #0099ff;\n text-decoration: none;\n}\n\n.form .login-button {\n display: block;\n width: 100%;\n font-weight: bold;\n background: linear-gradient(\n 45deg,\n rgb(16, 137, 211) 0%,\n rgb(18, 177, 209) 100%\n );\n color: white;\n padding-block: 15px;\n margin: 20px auto;\n border-radius: 20px;\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;\n border: none;\n transition: all 0.2s ease-in-out;\n}\n\n.form .login-button:hover {\n transform: scale(1.03);\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;\n}\n\n.form .login-button:active {\n transform: scale(0.95);\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;\n}\n\n.social-account-container {\n margin-top: 25px;\n}\n\n.social-account-container .title {\n display: block;\n text-align: center;\n font-size: 10px;\n color: rgb(170, 170, 170);\n}\n\n.social-account-container .social-accounts {\n width: 100%;\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 5px;\n}\n\n.social-account-container .social-accounts .social-button {\n background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);\n border: 5px solid white;\n padding: 5px;\n border-radius: 50%;\n width: 40px;\n aspect-ratio: 1;\n display: grid;\n place-content: center;\n box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;\n transition: all 0.2s ease-in-out;\n}\n\n.social-account-container .social-accounts .social-button .svg {\n fill: white;\n margin: auto;\n}\n\n.social-account-container .social-accounts .social-button:hover {\n transform: scale(1.2);\n}\n\n.social-account-container .social-accounts .social-button:active {\n transform: scale(0.9);\n}\n\n.agreement {\n display: block;\n text-align: center;\n margin-top: 15px;\n}\n\n.agreement a {\n text-decoration: none;\n color: #0099ff;\n font-size: 9px;\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"8bd044","snapshot":null,"tags":null,"title":"form by Galahhad","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6296,"cssLen":3544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".form-container__sign-app-buttons svg {\n width: 22px;\n height: auto;\n}\n\n.google svg {\n width: 18px;\n height: auto;\n}\n\n.form-container {\n min-width: 350px;\n box-sizing: border-box;\n font-family: sans-serif;\n color: #4b4b4b;\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: #f5f5f5;\n}\n\n.form-container:focus-within:not(:focus) {\n box-shadow: 0 0 6px 3px #caedff;\n -webkit-box-shadow: 0 0 6px 3px #caedff;\n outline: 1px solid #97dbff;\n}\n\n.form-container p {\n font-size: 14px;\n font-weight: bold;\n margin-bottom: 14px;\n}\n\n.top-line {\n padding-top: 12px;\n}\n\n.form-container__form {\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n}\n\n.form-container__form input {\n height: 31px;\n border: 1px solid #d9d9d9;\n padding: 4px;\n font-size: 14px;\n line-height: 1.65;\n -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n}\n\n.form-container__form input:focus {\n border-color: #00a6fd;\n outline: 0;\n box-shadow: none;\n}\n\n.form-container__register-buttons {\n display: flex;\n column-gap: 10px;\n}\n\n.form-container__sign {\n padding: 8px 20px;\n font-size: 14px;\n line-height: 1.65;\n border-radius: 20px;\n width: 110px;\n white-space: nowrap;\n background-color: #00a6fd;\n border: none;\n color: white;\n font-weight: bold;\n cursor: pointer;\n}\n\n.form-container__sign:first-child:active,\n.form-container__sign:first-child:hover {\n background-color: #0099e9;\n}\n\n.form-container__sign:focus {\n outline-offset: -2px;\n outline: none;\n -webkit-box-shadow: inset 0 0 3px 1px #97dbff;\n box-shadow: inset 0 0 3px 1px #97dbff;\n}\n\n.forgot {\n width: auto;\n padding: 8px 0;\n background: none;\n font-weight: 400;\n color: #428bca;\n text-decoration: none;\n}\n\n.forgot:hover {\n text-decoration: underline;\n color: #4c9dd0;\n}\n\n.form-container__header {\n padding-bottom: 16px;\n}\n\n.form-container__footer {\n padding-top: 12px;\n border-top: 1px solid #cacaca;\n}\n\n.form-container__sign-app-buttons {\n display: flex;\n column-gap: 24px;\n}\n\n.form-container__sign-app-buttons button:not(:first-child) {\n border: none;\n background: none;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.form-container__sign-app-buttons button:not(:first-child)::before {\n position: absolute;\n content: '';\n width: 120%;\n height: 2px;\n background: rgb(187, 187, 187);\n bottom: 0;\n opacity: 0;\n}\n\n.form-container__sign-app-buttons button:not(:first-child):hover::before {\n opacity: 1;\n transition: 1s;\n}\n\n.form-container__sign-app-buttons button:not(:first-child):focus::before {\n opacity: 1;\n background-color: #4b4b4b;\n}\n\n.form-container__sign-app-buttons button:first-child {\n justify-content: center;\n min-width: 110px;\n height: 40px;\n border: none;\n background: white;\n border-radius: 2px;\n box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;\n display: flex;\n align-items: center;\n color: #4b4b4b;\n font-size: 13px;\n column-gap: 15px;\n cursor: pointer;\n}\n\n.form-container__sign-app-buttons button:first-child:active {\n background: #eeeeee;\n}\n\n.form-container__sign-app-buttons button:first-child:focus:not(:active) {\n outline: none;\n -webkit-box-shadow: inset 0 0 3px 1px #97dbff;\n box-shadow: inset 0 0 3px 1px #97dbff;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"e9919b","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2353,"cssLen":1870,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n --input-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --main-color: #fefefe;\n padding: 20px;\n background: var(--bg-color);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\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.title {\n color: var(--font-color);\n font-weight: 900;\n font-size: 20px;\n margin-bottom: 25px;\n}\n\n.title span {\n color: var(--font-color-sub);\n font-weight: 600;\n font-size: 17px;\n}\n\n.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.input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.input:focus {\n border: 2px solid var(--input-focus);\n}\n\n.login-with {\n display: flex;\n gap: 20px;\n}\n\n.button-log {\n cursor: pointer;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n color: var(--font-color);\n font-size: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.icon {\n width: 24px;\n height: 24px;\n fill: var(--main-color);\n}\n\n.button-log:active, .button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.button-confirm {\n margin: 50px auto 0 auto;\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}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"4f8f0e","snapshot":null,"tags":null,"title":"form by SmookyDev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3014,"cssLen":5877,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Welcome\n

\n\n

Create Your Account

\n \n

\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.right-0 {\n right: 0px;\n}\n.z-\\[100\\] {\n z-index: 100;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-3 {\n height: 0.75rem;\n}\n.w-3 {\n width: 0.75rem;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-full {\n width: 100%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-\\[46\\%\\] {\n --tw-translate-x: 46%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n --tw-rotate: -90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.snap-start {\n scroll-snap-align: start;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-\\[5px\\] {\n border-radius: 5px;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-\\[\\#7F3D27\\] {\n --tw-border-opacity: 1;\n border-color: rgb(127 61 39 / var(--tw-border-opacity));\n}\n.bg-\\[\\#7F3D27\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(127 61 39 / var(--tw-bg-opacity));\n}\n.bg-\\[\\#D9D9D9\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(217 217 217 / var(--tw-bg-opacity));\n}\n.bg-\\[\\#DFA16A\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(223 161 106 / var(--tw-bg-opacity));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-px {\n padding-top: 1px;\n padding-bottom: 1px;\n}\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\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.capitalize {\n text-transform: capitalize;\n}\n.tracking-\\[20px\\] {\n letter-spacing: 20px;\n}\n.text-\\[\\#7F3D27\\] {\n --tw-text-opacity: 1;\n color: rgb(127 61 39 / var(--tw-text-opacity));\n}\n.text-\\[\\#A15A3E\\] {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.text-\\[\\#D9D9D9\\] {\n --tw-text-opacity: 1;\n color: rgb(217 217 217 / var(--tw-text-opacity));\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px 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-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px 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-\\[\\#7F3D27\\] {\n --tw-shadow-color: #7f3d27;\n --tw-shadow: var(--tw-shadow-colored);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.placeholder\\:text-xs::placeholder {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.placeholder\\:text-\\[\\#A15A3E\\]::placeholder {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.checked\\:text-\\[\\#A15A3E\\]:checked {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.checked\\:accent-\\[\\#A15A3E\\]:checked {\n accent-color: #a15a3e;\n}\n.hover\\:translate-x-\\[50\\%\\]:hover {\n --tw-translate-x: 50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.focus\\:scale-110:focus {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.focus\\:border-0:focus {\n border-width: 0px;\n}\n.focus\\:accent-\\[\\#7F3D27\\]:focus {\n accent-color: #7f3d27;\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-0: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(0px + 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"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"857c6a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1418,"cssLen":3900,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Login

\n \n

\n","css":".mb-0 {\n margin-bottom: 0px\n}\n\n.mb-0\\.5 {\n margin-bottom: 0.125rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mr-2 {\n margin-right: 0.5rem\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.cursor-pointer {\n cursor: pointer\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.flex-wrap {\n flex-wrap: wrap\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.justify-between {\n justify-content: space-between\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-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / 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.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / 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.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\n}\n\n.focus\\:bg-gray-200:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / 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:16.000Z","isPrivate":0,"projectId":"175c23","snapshot":null,"tags":null,"title":"form by csozidev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4075,"cssLen":2636,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* Microsoft log in page made by: csozi | Website: english.csozi.hu*/\n\n.form {\n/*Scale only to make it look right on the preview*/\n scale: 0.8;\n background-color: #ffffff;\n height: 250px;\n width: 352px;\n box-sizing: content-box;\n padding: 44px;\n}\n\n.form .title {\n color: #1b1b1b;\n font-size: 1.5rem;\n font-weight: 600;\n padding: 0;\n margin-top: 16px;\n margin-bottom: 12px;\n font-family: \"Segoe UI\",\"Helvetica Neue\",\"Lucida Grande\",\"Roboto\",\"Ebrima\",\"Nirmala UI\",\"Gadugi\",\"Segoe Xbox Symbol\",\"Segoe UI Symbol\",\"Meiryo UI\",\"Khmer UI\",\"Tunga\",\"Lao UI\",\"Raavi\",\"Iskoola Pota\",\"Latha\",\"Leelawadee\",\"Microsoft YaHei UI\",\"Microsoft JhengHei UI\",\"Malgun Gothic\",\"Estrangelo Edessa\",\"Microsoft Himalaya\",\"Microsoft New Tai Lue\",\"Microsoft PhagsPa\",\"Microsoft Tai Le\",\"Microsoft Yi Baiti\",\"Mongolian Baiti\",\"MV Boli\",\"Myanmar Text\",\"Cambria Math\";\n}\n\n.form .email {\n width: 100%;\n padding: 6px 10px 6px 0px;\n border-style: solid;\n border-width: 0px;\n border-bottom-width: 1px;\n border-color: rgba(0, 0, 0, 0.6);\n height: 36px;\n outline: none;\n background-color: transparent;\n padding-left: 0;\n color: #000000;\n margin-bottom: 16px;\n}\n\n.form .email {\n border-color: rgba(0, 0, 0, 0.8);\n}\n\n.form .text {\n color: #1b1b1b;\n font-family: \"Segoe UI Webfont\",-apple-system,\"Helvetica Neue\",\"Lucida Grande\",\"Roboto\",\"Ebrima\",\"Nirmala UI\",\"Gadugi\",\"Segoe Xbox Symbol\",\"Segoe UI Symbol\",\"Meiryo UI\",\"Khmer UI\",\"Tunga\",\"Lao UI\",\"Raavi\",\"Iskoola Pota\",\"Latha\",\"Leelawadee\",\"Microsoft YaHei UI\",\"Microsoft JhengHei UI\",\"Malgun Gothic\",\"Estrangelo Edessa\",\"Microsoft Himalaya\",\"Microsoft New Tai Lue\",\"Microsoft PhagsPa\",\"Microsoft Tai Le\",\"Microsoft Yi Baiti\",\"Mongolian Baiti\",\"MV Boli\",\"Myanmar Text\",\"Cambria Math\";\n font-weight: 400;\n line-height: 1.25rem;\n margin-bottom: 16px;\n font-size: .8125rem;\n}\n\n.form .text a {\n color: #0067B8;\n}\n\n.form .button_row {\n width: 100%;\n display: flex;\n justify-content: end;\n height: fit-content;\n gap: 4px;\n}\n\n.form .button_row .button {\n width: 108px;\n height: 32px;\n box-sizing: content-box;\n padding: 4 12 4 12;\n border: none;\n font-size: 15px;\n}\n\n.form .button_row .secondary_button {\n background-color: rgba(0,0,0,0.2);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n vertical-align: middle;\n text-overflow: ellipsis;\n touch-action: manipulation;\n color: #000;\n cursor: pointer;\n}\n\n.form .button_row .secondary_button:hover {\n background-color: rgba(0,0,0,0.3);\n}\n\n.form .button_row .primary_button {\n background-color: #0067b8;\n color: #ffffff;\n cursor: pointer;\n}\n\n.form .button_row .primary_button:hover {\n background-color: #005da6;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"2849cc","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1065,"cssLen":1263,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Song Title

Artist

\n \n \n

\n","css":".audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 80px;\n background-color: #282828;\n border-radius: 8px;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.album-cover {\n width: 64px;\n height: 64px;\n background-color: #fff;\n border-radius: 50%;\n margin-right: 12px;\n}\n\n.player-controls {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n\n.song-info {\n margin-bottom: 4px;\n}\n\n.song-title {\n font-size: 16px;\n color: #fff;\n margin: 0;\n}\n\n.artist {\n font-size: 12px;\n color: #b3b3b3;\n margin: 0;\n}\n\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #4f4f4f;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress {\n width: 50%;\n height: 100%;\n background-color: #1db954;\n transform-origin: left;\n animation: progress-animation 10s linear infinite;\n}\n\n.buttons {\n display: flex;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n}\n\n.play-btn,\n.pause-btn {\n font-size: 16px;\n color: #fff;\n margin-right: 8px;\n transition: transform 0.2s ease-in-out;\n}\n\n.play-btn:hover,\n.pause-btn:hover {\n transform: scale(1.2);\n}\n\n@keyframes progress-animation {\n 0% {\n transform: scaleX(0);\n }\n\n 100% {\n transform: scaleX(1);\n }\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"895b4e","snapshot":null,"tags":null,"title":"form by John-CFO","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":838,"cssLen":5002,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":".form {\n position: relative;\n display: block;\n padding: 2.2rem;\n max-width: 350px;\n background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, \n rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, \n rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);\n border: 2px solid #fff;\n -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n overflow: hidden;\n z-index: +1;\n}\n\n/*------input and submit section-------*/\n\n.input-container {\n position: relative;\n}\n\n.input-container input, .form button {\n outline: none;\n border: 2px solid #ffffff;\n margin: 8px 0;\n font-family: monospace;\n}\n\n.input-container input {\n background-color: #fff;\n padding: 6px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n width: 250px;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.input-mail:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.input-pwd:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.submit {\n position: relative;\n display: block;\n padding: 8px;\n background-color: #c0c0c0;\n color: #ffffff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n width: 100%;\n text-transform: uppercase;\n overflow: hidden;\n}\n\n.submit:hover {\n -webkit-transition: all 0.2s ease-out;\n -moz-transition: all 0.2s ease-out;\n transition: all 0.2s ease-out;\n border-radius: 3.9px;\n box-shadow: 4px 5px 17px -4px #ffffff;\n cursor: pointer;\n}\n\n.submit:hover::before {\n -webkit-animation: sh02 0.5s 0s linear;\n -moz-animation: sh02 0.5s 0s linear;\n animation: sh02 .5s 0s linear;\n}\n\n.submit::before {\n content: '';\n display: block;\n width: 0px;\n height: 85%;\n position: absolute;\n top: 50%;\n left: 0%;\n opacity: 0;\n background: #fff;\n box-shadow: 0 0 50px 30px #fff;\n -webkit-transform: skewX(-20deg);\n -moz-transform: skewX(-20deg);\n -ms-transform: skewX(-20deg);\n -o-transform: skewX(-20deg);\n transform: skewX(-20deg);\n}\n\n@keyframes sh02 {\n from {\n opacity: 0;\n left: 0%;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n left: 100%;\n }\n}\n\n/*--------signup section---------*/\n\n.signup-link {\n color: #c0c0c0;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-align: center;\n font-family: monospace;\n}\n\n.signup-link a {\n color: #fff;\n text-decoration: none;\n}\n\n.up:hover {\n text-decoration: underline;\n}\n\n\n/*--------header section-----------*/\n\n.form-title {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-family: monospace;\n font-weight: 600;\n text-align: center;\n color: #fff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);\n animation-duration: 1.5s;\n overflow: hidden;\n transition: .12s;\n}\n\n.form-title span {\n animation: flickering 2s linear infinite both;\n}\n\n.title-2 {\n display: block;\n margin-top: -0.5rem;\n font-size: 2.1rem;\n font-weight: 800;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n -webkit-text-stroke: #fff 0.1rem;\n letter-spacing: 0.2rem;\n color: transparent;\n position: relative;\n text-shadow: 0px 0px 16px #CECECE;\n}\n\n.title-2 span::before,\n.title-2 span::after {\n content: '—';\n}\n\n@keyframes flickering {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 41.99% {\n opacity: 1;\n }\n\n 42% {\n opacity: 0;\n }\n\n 43% {\n opacity: 0;\n }\n\n 43.01% {\n opacity: 1;\n }\n\n 47.99% {\n opacity: 1;\n }\n\n 48% {\n opacity: 0;\n }\n\n 49% {\n opacity: 0;\n }\n\n 49.01% {\n opacity: 1;\n }\n}\n\n/*---------shooting stars-----------*/\n\n\n.bg-stars {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -2;\n background-size: cover;\n animation: animateBg 50s linear infinite;\n}\n\n@keyframes animateBg {\n 0%,100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n}\n\n.star {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 4px;\n height: 4px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);\n animation: animate 3s linear infinite;\n}\n\n.star::before {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 300px;\n height: 1px;\n background: linear-gradient(90deg,#fff,transparent);\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(315deg) translateX(0);\n opacity: 1;\n }\n\n 70% {\n opacity: 1;\n }\n\n 100% {\n transform: rotate(315deg) translateX(-1000px);\n opacity: 0;\n }\n}\n\n.star:nth-child(1) {\n top: 0;\n right: 0;\n left: initial;\n animation-delay: 0s;\n animation-duration: 1s;\n}\n\n.star:nth-child(2) {\n top: 0;\n right: 100px;\n left: initial;\n animation-delay: 0.2s;\n animation-duration: 3s;\n}\n\n.star:nth-child(3) {\n top: 0;\n right: 220px;\n left: initial;\n animation-delay: 2.75s;\n animation-duration: 2.75s;\n}\n\n.star:nth-child(4) {\n top: 0;\n right: -220px;\n left: initial;\n animation-delay: 1.6s;\n animation-duration: 1.6s;\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"}]}},"actionData":null,"errors":null}