{"loaderData":{"0":null,"0-2":{"total":7182,"projects":[{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"535b95","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1297,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".success {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #EDFBD8;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.success__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.success__icon path {\n fill: #84D65A;\n}\n\n.success__title {\n font-weight: 500;\n font-size: 14px;\n color: #2B641E;\n}\n\n.success__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.success__close path {\n fill: #2B641E;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"1f317c","snapshot":null,"tags":null,"title":"card by chethan025","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":993,"cssLen":1014,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

League of legends\n

\n","css":".card {\n display: flex;\n align-items: center;\n text-align: center;\n justify-content: center;\n background: rgba(65, 21, 115, 1);\n box-shadow: 0px 145px 58px rgba(233, 182, 27, 0.01),\n 0px 82px 49px rgba(233, 182, 27, 0.05), \n 0px 36px 36px rgba(233, 182, 27, 0.09), \n 0px 9px 20px rgba(233, 182, 27, 0.1), \n 0px 0px 0px rgba(233, 182, 27, 0.1);\n width: 254px;\n height: 254px;\n margin: 40px;\n border-radius: 28px;\n position: relative;\n font-family: 'Montserrat';\n font-style: italic;\n font-weight: 500;\n font-size: 42px;\n line-height: 28px;\n color: #41157300;\n letter-spacing: 0.1em;\n transition: 300ms ease-in;\n}\n\n.card:hover {\n background: rgba(233, 182, 27, 1);\n box-shadow: 0px 112px 45px rgba(65, 21, 115, 0.01), \n 0px 63px 38px rgba(65, 21, 115, 0.05), \n 0px 28px 28px rgba(65, 21, 115, 0.09), \n 0px 7px 15px rgba(65, 21, 115, 0.1), \n 0px 0px 0px rgba(65, 21, 115, 0.1);\n color: #FFFFFF;\n}\n\n.svg {\n opacity: 80%;\n}\n\n.text {\n margin: auto;\n position: absolute;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"63b4e0","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4445,"cssLen":1036,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n $29\n

\n \n Get started\n \n

\n \n Connect 80 websites \n
\n \n Connect up to 5 bank accounts \n
\n \n Track up to 50 credit cards \n
\n \n Analytics support \n
\n \n Export up to 12 months data \n
\n \n Cloud service 24/7 \n

","css":".card {\n max-width: 320px;\n display: flex;\n flex-direction: column;\n border-radius: 1.5rem;\n background-color: rgba(0, 0, 0, 1);\n padding: 1.5rem;\n}\n\n.price {\n font-size: 3rem;\n line-height: 1;\n font-weight: 300;\n letter-spacing: -0.025em;\n color: rgba(255, 255, 255, 1);\n}\n\n.lists {\n margin-top: 2.5rem;\n display: flex;\n flex-direction: column;\n grid-row-gap: 0.75rem;\n row-gap: 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(255, 255, 255, 1);\n}\n\n.list {\n display: flex;\n align-items: center;\n}\n\n.list svg {\n height: 1rem;\n width: 1rem;\n}\n\n.list span {\n margin-left: 1rem;\n}\n\n.action {\n margin-top: 2rem;\n width: 100%;\n border: 2px solid rgba(255, 255, 255, 1);\n border-radius: 9999px;\n background-color: rgba(255, 255, 255, 1);\n padding: 0.625rem 1.5rem;\n text-align: center;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(0, 0, 0, 1);\n outline: none;\n transition: all .2s ease;\n}\n\n.action:hover {\n color: rgba(255, 255, 255, 1);\n background-color: transparent;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"8e51a9","snapshot":null,"tags":null,"title":"card by arshshaikh06","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1127,"cssLen":2553,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n #CECE5A\n

\n #FFE17B\n

\n #FD8D14\n

\n #C51605\n

\n\n

","css":".container {\n width: 300px;\n height: 340px;\n border-radius: 1em;\n overflow: hidden;\n box-shadow: 0 10px 20px #dbdbdb;\n font-family: sans-serif;\n background: white;\n pointer-events: none;\n}\n\n.palette {\n position: relative;\n width: 300px;\n height: 300px;\n border-radius: 1rem;\n overflow: hidden;\n pointer-events: auto;\n}\n\n.palette:hover > #color-code {\n opacity: 0;\n}\n\n.color {\n position: absolute;\n width: 300px;\n height: 300px;\n transform-origin: center;\n transition: 0.3s ease-in-out;\n box-sizing: inline-block;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color span {\n color: white;\n font-weight: 600;\n letter-spacing: 1px;\n}\n\n#color1 {\n background: #CECE5A;\n rotate: 45deg;\n translate: 212.13px 0;\n outline: 0 solid #CECE5A;\n z-index: 9;\n}\n\n#color1:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #CECE5A;\n}\n\n#color2 {\n background: #FFE17B;\n rotate: 45deg;\n translate: 0 212.13px;\n outline: 0 solid #FFE17B;\n z-index: 9;\n}\n\n#color2:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #FFE17B;\n}\n\n#color2 span {\n color: #1A1A1A;\n}\n\n#color3 {\n background: #FD8D14;\n rotate: 45deg;\n translate: -212.13px 0;\n outline: 0 solid #FD8D14;\n z-index: 9;\n}\n\n#color3:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #FD8D14;\n}\n\n#color4 {\n background: #C51605;\n rotate: 45deg;\n translate: 0 -212.13px;\n outline: 0 solid #C51605;\n z-index: 9;\n}\n\n#color4:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #C51605;\n}\n\n#color-code {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 40px;\n translate: 130px 130px;\n border-radius: 20px;\n overflow: hidden;\n z-index: 199;\n opacity: 1;\n transition: 0.3s ease-in-out;\n}\n\n#color-code-bg {\n position: absolute;\n width: 40px;\n height: 40px;\n background-color: rgba(255, 255, 255, 0.8);\n filter: blur(10px);\n}\n\n#color-code-text {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#color-code-text::after {\n content: \"v2\";\n font-weight: 600;\n font-family: sans-serif;\n color: #1a1a1a;\n}\n\n#footer {\n height: 12%;\n width: 100%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1em;\n box-sizing: border-box;\n color: #bebebe;\n}\n\n#footer svg {\n scale: 0.75;\n}\n\n#footer #bookmarks {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: smaller;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"05f39a","snapshot":null,"tags":null,"title":"card by carlosepcc","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1141,"cssLen":4605,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n CHAMONILLE\n

\n NATURAL, OIL\n

39.00 MLC

Perfect everywhere

\n \n\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.bottom-0 {\n bottom: 0px\n}\n\n.m-4 {\n margin: 1rem\n}\n\n.m-auto {\n margin: auto\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-8 {\n margin-top: 2rem\n}\n\n.h-0 {\n height: 0px\n}\n\n.h-0\\.5 {\n height: 0.125rem\n}\n\n.h-10 {\n height: 2.5rem\n}\n\n.h-2 {\n height: 0.5rem\n}\n\n.w-10 {\n width: 2.5rem\n}\n\n.w-\\[70\\%\\] {\n width: 70%\n}\n\n.w-\\[clamp\$260px\\2c 80\\%\\2c 300px\$\\] {\n width: clamp(260px,80%,300px)\n}\n\n.w-full {\n width: 100%\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-tl-none {\n border-top-left-radius: 0px\n}\n\n.border-r-2 {\n border-right-width: 2px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-gray-900 {\n --tw-border-opacity: 1;\n border-color: rgb(17 24 39 / var(--tw-border-opacity))\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-l {\n background-image: linear-gradient(to left, var(--tw-gradient-stops))\n}\n\n.bg-gradient-to-tl {\n background-image: linear-gradient(to top left, var(--tw-gradient-stops))\n}\n\n.from-gray-900 {\n --tw-gradient-from: #111827 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.via-yellow-500 {\n --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.via-yellow-950 {\n --tw-gradient-to: rgb(66 32 6 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #422006 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.to-gray-950 {\n --tw-gradient-to: #030712 var(--tw-gradient-to-position)\n}\n\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n}\n\n.py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.uppercase {\n text-transform: uppercase\n}\n\n.tracking-widest {\n letter-spacing: 0.1em\n}\n\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity))\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n}\n\n.blur-2xl {\n --tw-blur: blur(40px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\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\n.hover\\:from-gray-800:hover {\n --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.hover\\:to-gray-950:hover {\n --tw-gradient-to: #030712 var(--tw-gradient-to-position)\n}\n\n.hover\\:brightness-90:hover {\n --tw-brightness: brightness(.9);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.group:hover .group-hover\\:w-full {\n width: 100%\n}\n\n.group:hover .group-hover\\:-translate-y-1 {\n --tw-translate-y: -0.25rem;\n 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))\n}\n\n.group:hover .group-hover\\:via-yellow-500 {\n --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.group:hover .group-hover\\:shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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.group:hover .group-hover\\:shadow-red-900 {\n --tw-shadow-color: #7f1d1d;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.group:hover .group-hover\\:blur-xl {\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"f911f3","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1716,"cssLen":2515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Continue payment\n

Wait! you have NOT finished your purchase, do you want to continue?

\n \n \n

\n \n\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.right-2 {\n right: 0.5rem\n}\n\n.top-3 {\n top: 0.75rem\n}\n\n.flex {\n display: flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-72 {\n height: 18rem\n}\n\n.w-12 {\n width: 3rem\n}\n\n.w-56 {\n width: 14rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-stretch {\n align-items: stretch\n}\n\n.justify-end {\n justify-content: flex-end\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.gap-2 {\n gap: 0.5rem\n}\n\n.gap-8 {\n gap: 2rem\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-blue-400 {\n --tw-border-opacity: 1;\n border-color: rgb(96 165 250 / var(--tw-border-opacity))\n}\n\n.bg-blue-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.bg-sky-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(224 242 254 / var(--tw-bg-opacity))\n}\n\n.fill-current {\n fill: currentColor\n}\n\n.stroke-blue-400 {\n stroke: #60a5fa\n}\n\n.p-1 {\n padding: 0.25rem\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-blue-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity))\n}\n\n.text-red-300 {\n --tw-text-opacity: 1;\n color: rgb(252 165 165 / var(--tw-text-opacity))\n}\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), 0 1px 2px -1px 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.shadow-sky-800 {\n --tw-shadow-color: #075985;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.hover\\:bg-blue-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(147 197 253 / var(--tw-bg-opacity))\n}\n\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-red-500:hover {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"dc74f3","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":18489,"cssLen":6906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

moov

\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 \n \n \n \n

\n\n

\n 10:50\n PM
\n Sat, 04 Nov\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 \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 \n

\n\n

back

\n \n \n \n \n

\n","css":".card {\n perspective: 1000px;\n transform-style: preserve-3d;\n position: relative;\n}\n\n.phone {\n /* transform: rotateX(40deg); */\n position: relative;\n perspective: 1000px;\n width: 150px;\n height: 254px;\n transform-style: preserve-3d;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(30deg);\n transition: all 1s;\n /* animation: rotate 5s linear infinite; */\n}\n\n.phone:hover {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.5);\n}\n.front {\n width: 100%;\n height: 100%;\n background: lightgrey;\n border: solid 5px rgb(0, 0, 0);\n border-radius: 10px;\n border-top: 15px solid;\n border-bottom: 15px solid;\n background: lightblue;\n padding: 0.5rem;\n text-align: center;\n transform: translateY(20px);\n background: radial-gradient(\n circle,\n rgb(170, 162, 162),\n rgb(44, 8, 102) 30%,\n rgba(26, 78, 189, 0.226) 0%\n ),\n radial-gradient(\n circle at 40px 40px,\n rgb(233, 228, 228),\n rgb(41, 35, 49) 30%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 600px 200px,\n rgb(233, 228, 228),\n rgb(27, 26, 26) 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 800px 100px,\n rgb(233, 228, 228),\n #333 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 700px 500px,\n rgb(233, 228, 228),\n #333 2%,\n rgba(88, 84, 84, 0.123) 0%\n ),\n radial-gradient(\n circle at 200px 400px,\n rgb(233, 228, 228),\n #333 1%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 300px 700px,\n rgb(233, 228, 228),\n #333 15%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 650px 400px,\n rgb(233, 228, 228),\n #333 10%,\n rgba(88, 84, 84, 0) 0%\n ),\n radial-gradient(\n circle at 600px 600px,\n rgb(233, 228, 228),\n #333 1%,\n rgba(88, 84, 84, 0.959) 0%\n );\n position: absolute;\n top: 0;\n left: 0;\n /* outline: 2px solid rgb(116, 115, 115); */\n}\n.front .home {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 10px;\n grid-template-rows: repeat(2, 1fr);\n}\n\n.home2 {\n grid-template-rows: repeat(1, 1fr) !important;\n margin-bottom: 0.5rem;\n}\n\n.front .home .app {\n display: inline-block;\n width: 15px;\n height: 15px;\n background-color: rgb(255, 255, 255);\n border-radius: 30%;\n text-align: center;\n position: relative;\n}\n.front .home .app .logo-app {\n width: 70%;\n height: 70%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.full-logo {\n background-color: transparent !important;\n}\n\n.full-logo .logo-app {\n width: 100% !important;\n height: 100% !important;\n}\n\n.search {\n position: relative;\n margin-top: 0.2rem;\n margin-bottom: 1rem;\n}\n\n.logo-google {\n position: absolute;\n width: 10px;\n left: 5px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.search-google {\n width: 100%;\n border-radius: 20px;\n padding: 0.3rem;\n padding-left: 1rem;\n font-size: 9px;\n height: 1.5rem;\n border: none;\n outline: none;\n}\n\n.date {\n color: white;\n position: relative;\n margin-bottom: 1rem;\n text-align: left;\n}\n\n.date .hour {\n font-size: large;\n}\n\n.date * {\n display: inline-block;\n}\n\n.date .period,\n.date .day {\n font-size: 9px;\n line-height: 10px;\n}\n\n.bullet {\n display: inline-block;\n width: 30%;\n height: 0;\n border-bottom: 5px dotted rgba(255, 255, 255, 0.651);\n}\n\n.navigation {\n display: flex;\n justify-content: space-around;\n}\n\n.navigation .btn {\n display: inline-block;\n width: 10px;\n height: 10px;\n}\n\n.navigation .btn-home {\n border-radius: 50%;\n border: solid 1px white;\n}\n\n.navigation .btn-back {\n border-radius: 35%;\n border: solid 1px white;\n border-left: 1px solid transparent;\n}\n\n.navigation .btn-task {\n border-radius: 35%;\n border: solid 1px white;\n}\n\n.face {\n position: absolute;\n border-radius: 10px;\n width: 100%;\n height: 100%;\n background-color: rgb(24, 23, 24);\n top: 50%;\n left: 50%;\n}\n\n.head {\n font-size: 6px;\n position: absolute;\n width: 100%;\n left: 0;\n top: 0;\n height: 10px;\n display: flex;\n justify-content: space-between;\n}\n\n.head .h-left {\n color: white;\n margin: 0 2px;\n}\n.head .h-right span {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 0 1px;\n}\n\n.logo-head {\n width: 100%;\n height: 100%;\n}\n\n.top,\n.bottom {\n width: 150px;\n height: 10px;\n}\n\n.right,\n.left {\n height: 254px;\n width: 10px;\n}\n\n.front {\n transform: translate(-50%, -50%) translateZ(5px);\n}\n.back {\n transform: translate(-50%, -50%) rotateY(180deg) translateZ(5px);\n}\n.left {\n transform: translate(-50%, -50%) rotateY(-90deg) translateZ(75px);\n}\n.right {\n transform: translate(-50%, -50%) rotateY(90deg) translateZ(75px);\n}\n.top {\n transform: translate(-50%, -50%) rotateX(90deg) translateZ(127px);\n}\n.bottom {\n transform: translate(-50%, -50%) rotateX(-90deg) translateZ(127px);\n}\n\n.bottom .elements {\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.bottom .elements .headphone {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #333;\n}\n\n.bottom .elements .microphone {\n display: inline-block;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: #333;\n}\n\n.bottom .elements .charge {\n display: inline-block;\n width: 20px;\n height: 6px;\n position: relative;\n border-radius: 3px 3px 10px 10px;\n background-color: #333;\n}\n\n.charge::before {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 2px;\n position: absolute;\n border-radius: 3px 3px 10px 10px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(26, 25, 25);\n}\n\n.bottom .elements .speaker {\n display: inline-block;\n width: 30px;\n height: 0;\n border-top: #333 dotted 5px;\n}\n\n.front-camera {\n width: 10px;\n height: 10px;\n background-color: rgb(26, 25, 25);\n border-radius: 50%;\n position: absolute;\n top: -11px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.front-camera::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n display: inline-block;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle at 6px 2px,\n rgba(255, 255, 255, 0.726),\n rgb(0, 0, 0)\n );\n}\n\n.front-camera::before {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n display: inline-block;\n top: 50%;\n left: 50%;\n width: 25%;\n height: 25%;\n z-index: 2;\n transform: translate(-50%, -50%);\n background-color: #212121;\n}\n\n.menu {\n background-color: transparent !important;\n}\n\n.logo-menu {\n width: 100%;\n height: 100%;\n}\n\n.logo-phone {\n background-color: #33ff77 !important;\n}\n\n.message {\n /* background-color: blue!important; */\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"f1cd16","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5988,"cssLen":1506,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

PINOT NOIR

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

$16.95

\n \n

","css":".card {\n --main-color: #fff;\n --bg-color: #323232;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n position: relative;\n padding: 20px;\n width: 320px;\n background: var(--bg-color);\n border-radius: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.card__back svg, .card__menu svg {\n width: 20px;\n height: 20px;\n}\n\n.card__img {\n width: 170px;\n height: 170px;\n background: linear-gradient(90deg, #fff8f79a, #f0f7dfa2);\n border-radius: 100%;\n margin-inline: auto;\n}\n\n.card__img svg {\n height: 150px;\n transform: rotate(-45deg) translate(15px, 0px);\n}\n\n.card__title {\n font-weight: 600;\n font-size: 25px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n font-weight: 400;\n font-size: 15px;\n color: var(--main-color);\n letter-spacing: 0.5px;\n}\n\n.card__price {\n font-weight: 600;\n font-size: 22px;\n color: var(--main-color);\n}\n\n.card__counter {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 15px;\n padding: 5px;\n background: #666;\n border-radius: 50px;\n}\n\n.card__counter-score, .card__btn {\n font-weight: 600;\n font-size: 22px;\n color: var(--main-color);\n}\n\n.card__btn {\n width: 30px;\n height: 30px;\n border-radius: 100%;\n border: none;\n background: transparent;\n}\n\n.card__btn-plus {\n background: var(--bg-color);\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"72930f","snapshot":null,"tags":null,"title":"card by SRIMANKS","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":12364,"cssLen":1561,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n\n

","css":".card {\n width: 190px;\n height: 254px;\n background: black;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n transition: 0.2s;\n}\n\n.card:hover {\n transform: scale(1.05);\n transition: 0.2s;\n filter: drop-shadow(0px 0px 10px rgb(0, 247, 255));\n}\n\n.card::after {\n content: \"scanning\";\n height: fit-content;\n width: 100%;\n color: lightskyblue;\n position: absolute;\n z-index: 2;\n bottom: 15%;\n text-align: center;\n animation: 2s dots infinite;\n}\n\n.card::before {\n content: \"\";\n height: 0.1em;\n width: 80%;\n border-radius: 10px;\n background-color: rgb(00, 200, 255);\n position: absolute;\n z-index: 2;\n bottom: 10%;\n animation: 4s grow infinite;\n align-self: flex-start;\n margin-left: 10%;\n filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 10px #3fefef);\n}\n\n.card svg {\n filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 50px #3fefef);\n}\n\npath {\n stroke-dasharray: 90;\n animation: loop 4s infinite;\n}\n\n@keyframes loop {\n 0% {\n stroke-dashoffset: 50;\n stroke-dasharray: 90;\n }\n\n 50% {\n stroke-dashoffset: 100;\n ;\n stroke-dasharray: 50;\n }\n\n 100% {\n stroke-dashoffset: 50;\n stroke-dasharray: 90;\n }\n}\n\n@keyframes dots {\n 0% {\n content: \"scanning.\"\n }\n\n 25% {\n content: \"scanning..\"\n }\n\n 50% {\n content: \"scanning...\"\n }\n\n 75% {\n content: \"scanning\"\n }\n\n 100% {\n content: \"scanning.\"\n }\n}\n\n@keyframes grow {\n 0% {\n width: 0%;\n }\n\n 50% {\n width: 80%\n }\n\n 100% {\n width: 0%;\n }\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"97f620","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4039,"cssLen":1764,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Please Rate Your Experience

to help us serve you better

\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","css":".rating-card {\n width: 280px;\n height: fit-content;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n background: #0f0c29;\n background: linear-gradient(to right bottom, #443e89, #0f0c29);\n padding: 20px 20px;\n border-radius: 10px;\n gap: 10px;\n font-family: Arial, Helvetica, sans-serif;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.058);\n}\n.text-wrapper {\n width: 100%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n.text-primary {\n color: white;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n.text-secondary {\n color: #cccccc;\n font-size: 10px;\n font-weight: 400;\n letter-spacing: 0.5px;\n}\n.rating-stars-container {\n width: 100%;\n height: 30px;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n justify-content: center;\n}\n.star-label svg {\n fill: rgb(210, 210, 210);\n width: 20px;\n height: auto;\n}\n.rating-stars-container input {\n appearance: unset;\n}\n.rating-stars-container input:hover ~ .star-label svg {\n fill: rgb(255, 204, 185);\n}\n.rating-stars-container input:checked ~ .star-label svg {\n fill: rgb(255, 102, 47);\n animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n@keyframes slide-in-fwd-center {\n 0% {\n transform: scale(1.6);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.socials-container {\n width: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding-top: 20px;\n border-top: 1px solid rgb(150, 150, 150);\n}\n.social-button {\n text-decoration: none;\n}\n.social-button svg {\n width: 15px;\n fill: rgb(228, 228, 228);\n}\n.social-button:hover svg {\n fill: rgb(255, 102, 47);\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"4cc5b4","snapshot":null,"tags":null,"title":"card by waleedlh10","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1783,"cssLen":1337,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

\n\n

Your product title

Description

\n\n

Add To Cart

","css":".card {\n width: 280px;\n background: white;\n border-radius: 10px;\n box-shadow: 0px 0px 14px -2px #bebebe;\n transition: 0.2s ease-in-out;\n}\n\n.card:hover {\n cursor: pointer;\n}\n\n.img {\n width: 100%;\n height: 7em;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n background: linear-gradient(#7980c5, #9198e5);\n display: flex;\n align-items: top;\n justify-content: right;\n}\n\n.save {\n transition: 0.2s ease-in-out;\n border-radius: 10px;\n margin: 20px;\n width: 30px;\n height: 30px;\n background-color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.save .svg {\n transition: 0.2s ease-in-out;\n width: 15px;\n height: 15px;\n}\n\n.save:hover .svg {\n fill: #ced8de;\n}\n\n.text {\n padding: 7px 20px;\n display: flex;\n flex-direction: column;\n align-items: space-around;\n}\n\n.text .h3 {\n font-family: system-ui;\n font-size: medium;\n font-weight: 600;\n color: black;\n text-align: center;\n}\n\n.text .p {\n font-family: system-ui;\n color: #999999;\n font-size: 13px;\n margin: 0px;\n text-align: center;\n padding: 5px;\n}\n\n.icon-box {\n margin: 10px;\n padding: 12px;\n background-color: #7980c5;\n border-radius: 10px;\n text-align: center;\n}\n\n.icon-box .span {\n font-family: system-ui;\n font-size: small;\n font-weight: 500;\n color: #fff;\n}/*# sourceMappingURL=index.css.map */"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"e80f55","snapshot":null,"tags":null,"title":"card by PapaUiiss404","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4006,"cssLen":1275,"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","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: .3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: .3s;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: .3s;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: .3s;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: #128C7E;\n transition-duration: .3s;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: .3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n"}]}},"actionData":null,"errors":null}