{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"b6ad2f","snapshot":null,"tags":null,"title":"card by IWhat1","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":909,"cssLen":2212,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Welcome Back

We are you to have you Again

\n\n

Username

\n \n

Password

\n \n

\n\n

\n \n Remember Me\n

\n Forget Password\n

\n\n \n\n

Don't Have an Account ? Sign Up

\n","css":".card-container {\n width: 350px;\n height: 440px;\n background: transparent;\n position: relative;\n}\n\n.container {\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.circle1 {\n height: 80px;\n width: 80px;\n border-radius: 50%;\n background-color: #2879f3;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.circle2 {\n height: 80px;\n width: 80px;\n border-radius: 50%;\n background-color: #f37e10;\n position: absolute;\n right: 0;\n bottom: 0;\n}\n\n.log-card {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n position: absolute;\n width: 300px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(5px);\n padding: 20px;\n}\n\n.heading {\n font-size: 28px;\n font-weight: 800;\n}\n\n.para {\n font-size: 14px;\n font-weight: 500;\n}\n\n.text {\n margin-top: 15px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 600;\n color: lightslategray;\n}\n\n.input-group {\n margin-top: 10px;\n margin-bottom: 4px;\n}\n\n.input {\n box-sizing: border-box;\n margin-bottom: 5px;\n width: 100%;\n border: none;\n padding: 8px 16px;\n background-color: transparent;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);\n border-radius: 8px;\n font-weight: 600;\n color: #2879f3;\n}\n\n.input:hover {\n color: #2879f3;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);\n}\n\n.password-group {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n}\n\n.checkbox-group {\n color: black;\n font-size: 14px;\n font-weight: 500;\n}\n\n.forget-password {\n font-size: 14px;\n font-weight: 500;\n color: #2879f3;\n text-decoration: none;\n}\n\n.forget-password:hover {\n text-decoration: underline;\n color: #f37e10;\n}\n\n.btn {\n margin-top: 20px;\n margin-bottom: 10px;\n padding: 8px 16px;\n border: none;\n background-color: #2879f3;\n color: white;\n font-size: 16px;\n font-weight: 700;\n border-radius: 8px;\n}\n\n.btn:hover {\n background-color: #0653c7;\n}\n\n.no-account {\n font-size: 16px;\n font-weight: 400;\n}\n\n.link {\n font-weight: 800;\n color: #2879f3;\n}\n\n.link:hover {\n color: #f37e10;\n text-decoration: underline;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"dda146","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1529,"cssLen":2532,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n\tHow to create a pop-up without JavaScript\n\t

Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:

\n\n\t

Toggle the How it works button for more info.

\n\n

\n\t

How it works

\n\t

\n\t\t\t

The scaling effect you see when you open this <details> element is created by using a keyframe animation.

\n\t\t

@keyframes scale { \n 0% {\n  transform: scale(0);\n }\n 100% {\n  transform: scale(1);\n }\n}

This animation is added to the <div>, but only when the [open] attribute is toggled.

details[open] div { \n animation: scale .15s ease;\n}

\n\t

Sadly there's no way (that I know of) to animate the <div> when the <details> is closing.

\n\t

","css":".wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n\narticle {\n margin-top: 50px;\n width: 90%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n font-size: 1.125rem;\n padding: 1.5rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);\n}\n\narticle > * + * {\n margin-top: 0.5em;\n}\n\narticle:is(h1, h2, h3) + * {\n margin-top: 0.5em;\n}\n\narticle .h1 {\n font-weight: 900;\n font-size: 2rem;\n line-height: 1.125;\n}\n\narticle code {\n background-color: #eee;\n font-weight: 600;\n font-family: monospace;\n}\n\ndetails {\n position: relative;\n right: 16px;\n margin-top: 35px;\n bottom: 16px;\n color: #6b7280;\n display: flex;\n flex-direction: column;\n}\n\ndetails div {\n background-color: #1e1e27;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);\n padding: 1rem;\n border-radius: 8px;\n position: absolute;\n height: 350px;\n width: 400px;\n bottom: calc(100% + 1rem);\n right: -50%;\n overflow: auto;\n transform-origin: 100% 100%;\n color: #95a3b9;\n}\n\ndetails div::-webkit-scrollbar {\n width: 15px;\n background-color: #1e1e27;\n}\n\ndetails div::-webkit-scrollbar-thumb {\n width: 5px;\n border-radius: 99em;\n background-color: #95a3b9;\n border: 5px solid #1e1e27;\n}\n\ndetails div > * + * {\n margin-top: 0.75em;\n}\n\ndetails div p > code {\n font-size: 1rem;\n font-family: monospace;\n}\n\ndetails div pre {\n white-space: pre-line;\n border: 1px solid #95a3b9;\n border-radius: 6px;\n font-family: monospace;\n padding: 0.75em;\n font-size: 0.875rem;\n color: #fff;\n}\n\ndetails[open] div {\n -webkit-animation: scale 0.25s ease;\n animation: scale 0.25s ease;\n}\n\nsummary {\n display: inline-flex;\n margin-left: auto;\n margin-right: auto;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n padding: 0.75em 3em 0.75em 1.25em;\n border-radius: 99em;\n color: #fff;\n background-color: #185adb;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n list-style: none;\n text-align: center;\n cursor: pointer;\n transition: 0.15s ease;\n position: relative;\n}\n\nsummary::-webkit-details-marker {\n display: none;\n}\n\nsummary:hover, summary:focus {\n background-color: #1348af;\n}\n\nsummary svg {\n position: absolute;\n right: 1.25em;\n top: 50%;\n transform: translateY(-50%);\n width: 1.5em;\n height: 1.5em;\n}\n\n@-webkit-keyframes scale {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes scale {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"93209b","snapshot":null,"tags":null,"title":"card by JohnnyCSilva","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5060,"cssLen":757,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Save with cofidence

Eliminate the stress of saving money with our innovative solution. We understand that saving is something hard.

","css":".card {\n width: 275px;\n height: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: white;\n border-radius: 20px;\n padding: 30px;\n gap: 10px;\n border: 2px solid transparent;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.card:hover {\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n}\n\n.card > .image {\n width: 70px;\n height: 70px;\n transition: all 0.1s ease-in-out;\n}\n\n.card > .number-h1 {\n font-size: 15px;\n font-weight: bold;\n padding: 5px 7px;\n border-radius: 10px;\n color: white;\n background-color: #e57e25;\n}\n\n.card > .h1 {\n font-size: 17px;\n font-weight: bold;\n text-align: center;\n}\n\n.card > .p {\n color: #9e9da1;\n font-size: 14px;\n text-align: center;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"3653b9","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2187,"cssLen":1501,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n BBC\n Stunning photos as Perseid meteors light up skies\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

","css":".card {\n width: 300px;\n height: 325px;\n background: #e8e8e8;\n border-radius: 15px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n color: #212121;\n border: 2px solid #ab4b38;\n transition: all .5s ease;\n}\n\n.icons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n position: absolute;\n right: 15px;\n top: 15px;\n transition: opacity 0.5s ease;\n opacity: 0;\n}\n\n.image {\n width: 300px;\n height: 148px;\n background: rgb(223,235,56);\n background: rgb(56,235,226);\n background: linear-gradient(163deg, rgba(56,235,226,1) 0%, rgba(134,221,245,1) 50%);\n}\n\n.save {\n background: #eb4b38;\n color: white;\n border: none;\n border-radius: 5px;\n}\n\n.see-more {\n background: #ab4b38;\n border: none;\n border-radius: 5px;\n color: white;\n}\n\n.save, .see-more {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 5px;\n padding: 5px;\n}\n\n.save__icon, .see-more__icon {\n width: 15px;\n fill: white;\n}\n\n.card__info {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n padding: 15px;\n gap: 3px;\n}\n\n.page {\n font-size: 13px;\n font-weight: 100;\n}\n\n.title {\n text-decoration: none;\n font-weight: 600;\n font-size: 17px;\n color: black;\n}\n\n.content {\n font-size: 14px;\n}\n\n.card:hover {\n box-shadow: 5px 5px 10px 0px #ab4b3866;\n}\n\n.card:hover .icons {\n z-index: 1;\n opacity: 1;\n}\n\n.card:hover .image {\n filter: brightness(.8);\n}\n\n.card:hover .title {\n color: #ab4b38;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"c4f5a7","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7082,"cssLen":5159,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n New Product\n

\n New Product\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n Toner\n

\n \n \n \n \n

Hydration

\n \n \n \n \n \n \n

\n Protect Skin Barrier\n

\n \n \n \n \n \n \n

Reduce Winkles

\n \n \n \n \n \n \n

Anti Inflammatory

\n \n

\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\\[100\\]{z-index:100}.-mb-5{margin-bottom:-1.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1 / 1}.w-\\[180px\\]{width:180px}.w-\\[300px\\]{width:300px}.shrink-0{flex-shrink:0}.-translate-x-\\[150\\%\\]{--tw-translate-x:-150%;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))}.cursor-pointer{cursor:pointer}.snap-start{scroll-snap-align:start}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-10{gap:2.5rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.stroke-\\[\\#495c48\\]{stroke:#495c48}.p-2{padding:0.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.tracking-wider{letter-spacing:0.05em}.text-\\[\\#495c48\\]{--tw-text-opacity:1;color:rgb(73 92 72 / var(--tw-text-opacity))}.text-\\[\\#7b956a\\]{--tw-text-opacity:1;color:rgb(123 149 106 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:top-8::after{content:var(--tw-content);top:2rem}.after\\:-z-20::after{content:var(--tw-content);z-index:-20}.after\\:h-1::after{content:var(--tw-content);height:0.25rem}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:translate-x-1\\/2::after{content:var(--tw-content);--tw-translate-x:50%;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))}.after\\:translate-y-1\\/2::after{content:var(--tw-content);--tw-translate-y:50%;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))}.after\\:bg-\\[\\#7b956a\\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(123 149 106 / var(--tw-bg-opacity))}.after\\:opacity-0::after{content:var(--tw-content);opacity:0}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.group:hover .group-hover\\:-translate-x-full{--tw-translate-x:-100%;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))}.group:hover .group-hover\\:translate-x-1\\/2{--tw-translate-x:50%;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))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\\:delay-1000{transition-delay:1000ms}.group:hover .group-hover\\:delay-200{transition-delay:200ms}.group:hover .group-hover\\:delay-300{transition-delay:300ms}.group:hover .group-hover\\:delay-500{transition-delay:500ms}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .after\\:group-hover\\:w-full::after{content:var(--tw-content);width:100%}.group:hover .after\\:group-hover\\:origin-right::after{content:var(--tw-content);transform-origin:right}.group:hover .after\\:group-hover\\:-translate-x-1\\/2::after{content:var(--tw-content);--tw-translate-x:-50%;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))}.group:hover .after\\:group-hover\\:opacity-100::after{content:var(--tw-content);opacity:1}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"ee1eab","snapshot":null,"tags":null,"title":"card by alexreyes091","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":790,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

01 . 05 . 2022\n

NOTE

","css":".card {\n width: 254px;\n height: 190px;\n transform: rotate(90deg);\n background: #00BCD4;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;\n transition-duration: 1.5s;\n transition-property: width, height,transform;\n}\n\n.card:hover {\n width: 190px;\n height: 254px;\n transform: rotate(0deg);\n /* -ms-transform:rotate(90deg);\n -webkit-transform:rotate(90deg); */\n}\n\n.card__content {\n padding: 1rem;\n font-size: smaller;\n}\n\n.card__date {\n color: white;\n margin-bottom: .5rem;\n font-weight: 700;\n}\n\n.card__info {\n width: 100%;\n height: 200px;\n padding: .7rem;\n font-size: smaller;\n border-radius: 1rem;\n text-align: center;\n background-color: #fae4c3;\n color: #fae4c3;\n transition-duration: 1s;\n transition-property: color;\n}\n\n.card__info:hover {\n color: #212121;\n}\n\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"d4ec2f","snapshot":null,"tags":null,"title":"card by igoramos77","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3418,"cssLen":1557,"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

Igor Brown

Developer

","css":".container {\n position: relative;\n height: 300px;\n background: #6c23c0;\n padding: 2rem;\n border-radius: 8px;\n transition: all .25s ease-in-out;\n}\n\n.container:hover {\n box-shadow: 0 4px 50px #00000020;\n}\n\n.container:hover .card {\n transform: translateY(-5%);\n}\n\n.info {\n margin-top: 1rem;\n}\n\n.info h2, p {\n color: #fff;\n text-align: center;\n}\n\n.card {\n transition: all .25s ease-in-out;\n}\n\n.card input {\n display: none;\n}\n\n.card main {\n position: relative;\n}\n\n.card main a svg {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n border: 4px solid rgb(108, 35, 192);\n}\n\n.card main a {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n background-image: linear-gradient(to right, rgb(23, 122, 250) 20%, rgb(3, 240, 209));\n border-radius: 50%;\n overflow: hidden;\n}\n\n.card main a:hover::after {\n opacity: 1;\n}\n\n.card main a::after {\n content: \"Change\";\n position: absolute;\n width: 100%;\n height: 35%;\n left: 0px;\n bottom: 0px;\n background-image: linear-gradient(transparent 0%, rgba(108, 35, 192, 0.584) 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: rgb(255, 255, 255);\n opacity: 0;\n transition: all 0.2s ease-in-out 0s;\n padding-bottom: 1rem;\n}\n\n.card span {\n position: absolute;\n bottom: 5px;\n right: 5px;\n background: rgb(119, 255, 170);\n width: 35px;\n height: 35px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 4px solid rgb(108, 35, 192);\n color: rgb(108, 35, 192);\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"e54b58","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":249,"cssLen":927,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Title

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

","css":".card {\n height: 254px;\n width: 190px;\n position: relative;\n transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);\n border-radius: 16px;\n box-shadow: 0 0 20px 8px #d0d0d0;\n overflow: hidden;\n}\n\n /*Image*/\n.card-image {\n height: 100%;\n width: 100%;\n position: absolute;\n transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);\n background: #0a3394;\n background: linear-gradient(to top, #0a3394, #4286f4);\n}\n\n/*Description */\n.card-description {\n display: flex;\n position: absolute;\n gap: .5em;\n flex-direction: column;\n background-color: #f5f5f5;\n color: #212121;\n height: 70%;\n bottom: 0;\n border-radius: 16px;\n transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);\n padding: 1rem;\n}\n\n/*Text*/\n.text-title {\n font-size: 1.3rem;\n font-weight: 700;\n}\n\n.text-body {\n font-size: 1rem;\n line-height: 130%;\n}\n\n\n/* Hover states */\n.card:hover .card-description {\n transform: translateY(100%);\n}\n\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"cb30e6","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1495,"cssLen":5617,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 03\n 40\n

\n Touch to unlock\n

\n\n","css":".relative {\n position: relative\n}\n\n.z-10 {\n z-index: 10\n}\n\n.flex {\n display: flex\n}\n\n.h-4 {\n height: 1rem\n}\n\n.h-80 {\n height: 20rem\n}\n\n.w-4 {\n width: 1rem\n}\n\n.w-40 {\n width: 10rem\n}\n\n.origin-bottom-right {\n transform-origin: bottom right\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.flex-row {\n flex-direction: row\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.justify-around {\n justify-content: space-around\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity))\n}\n\n.bg-sky-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.stroke-current {\n stroke: currentColor\n}\n\n.text-6xl {\n font-size: 3.75rem;\n line-height: 1\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-extrabold {\n font-weight: 800\n}\n\n.font-thin {\n font-weight: 100\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.shadow-inner {\n --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: inset 0 2px 4px 0 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-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 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-gray-50 {\n --tw-shadow-color: #f9fafb;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.shadow-sky-500 {\n --tw-shadow-color: #0ea5e9;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:right-16::before {\n content: var(--tw-content);\n right: 4rem\n}\n\n.before\\:top-20::before {\n content: var(--tw-content);\n top: 5rem\n}\n\n.before\\:-z-10::before {\n content: var(--tw-content);\n z-index: -10\n}\n\n.before\\:h-12::before {\n content: var(--tw-content);\n height: 3rem\n}\n\n.before\\:h-20::before {\n content: var(--tw-content);\n height: 5rem\n}\n\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem\n}\n\n.before\\:w-20::before {\n content: var(--tw-content);\n width: 5rem\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-sky-400::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(56 189 248 / var(--tw-bg-opacity))\n}\n\n.before\\:blur-xl::before {\n content: var(--tw-content);\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}\n\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:bottom-32::after {\n content: var(--tw-content);\n bottom: 8rem\n}\n\n.after\\:right-16::after {\n content: var(--tw-content);\n right: 4rem\n}\n\n.after\\:-z-10::after {\n content: var(--tw-content);\n z-index: -10\n}\n\n.after\\:h-12::after {\n content: var(--tw-content);\n height: 3rem\n}\n\n.after\\:w-12::after {\n content: var(--tw-content);\n width: 3rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-orange-400::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity))\n}\n\n.after\\:blur-xl::after {\n content: var(--tw-content);\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}\n\n.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.hover\\:rotate-12:hover {\n --tw-rotate: 12deg;\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\\:duration-500 {\n transition-duration: 500ms\n}\n\n.group:hover .group-hover\\:before\\:-translate-y-11::before {\n content: var(--tw-content);\n --tw-translate-y: -2.75rem;\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\\:before\\:translate-x-11::before {\n content: var(--tw-content);\n --tw-translate-x: 2.75rem;\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\\:after\\:translate-x-11::after {\n content: var(--tw-content);\n --tw-translate-x: 2.75rem;\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\\:after\\:translate-y-16::after {\n content: var(--tw-content);\n --tw-translate-y: 4rem;\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}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"288122","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":657,"cssLen":1230,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".mt-4{margin-top:1rem}.flex{display:flex}.h-3{height:0.75rem}.w-3{width:0.75rem}.w-full{width:100%}.max-w-md{max-width:28rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"95fc35","snapshot":null,"tags":null,"title":"card by htwarriors108","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1165,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Hold Me : )

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n color: #fff;\n transition: 0.5s;\n cursor: pointer;\n transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg);\n}\n\n.card:hover {\n transform: rotate(0);\n}\n\n.card:active {\n transform: translateY(-20px) rotate(-3deg);\n scale: 0.95;\n}\n\n.card::before {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background: linear-gradient(315deg, #03a9f4, #ff0058);\n}\n\n.card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(315deg, #03a9f4, #ff0058);\n filter: blur(30px);\n}\n\n.card span {\n position: absolute;\n top: 6px;\n left: 6px;\n right: 6px;\n bottom: 6px;\n background-color: rgba(0, 0, 0, 0.6);\n z-index: 2;\n}\n\n.card span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.card .content {\n position: relative;\n padding: 10px;\n z-index: 10;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.5em;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"db0399","snapshot":null,"tags":null,"title":"card by Shoh2008","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1248,"cssLen":1524,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t\n\t\t\n\t\t\t\n\t\t\t

\n\t\t\t\t\n\t\t\t

\n\n\t\t\t\n\t\t\t

\n\t\t\t\t\n\t\t\t

\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t

","css":"@keyframes fadeInScale {\n 0% {\n opacity: 0;\n transform: scale(0) translateY(50%);\n }\n\n 90% {\n transform: scale(1.05);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card {\n position: relative;\n width: 20em;\n background-color: #292929;\n transition: all .3s ease-in-out;\n}\n\n.card:hover {\n box-shadow: 0 10px 20px 10px rgba(black, .2);\n}\n\n.card__link {\n display: block;\n padding: 1em;\n text-decoration: none;\n}\n\n.card__icon {\n position: absolute;\n width: 4em;\n height: 4em;\n transition: all .3s ease-in-out;\n}\n\n.card:hover .card__icon {\n opacity: 0;\n transform: scale(0);\n}\n\n.card__media {\n padding: 2em 0;\n}\n\n.card__media\tsvg path {\n opacity: 0;\n transition: all .3s ease-in-out;\n transform-origin: center center;\n}\n\n.card:hover svg path {\n animation: fadeInScale .3s ease-in-out forwards;\n}\n\n.card:hover \tsvg path:nth-child(2) {\n animation-delay: .1s;\n}\n\n.card:hover \tsvg path:nth-child(3) {\n animation-delay: .2s;\n}\n\n.card__header {\n position: relative;\n}\n\n.card__header-title {\n margin: 0 0 .25em;\n color: white;\n}\n\n.card__header-meta {\n margin: 0;\n color: #999;\n}\n\n.card__header-icon {\n opacity: 0;\n position: absolute;\n right: 0;\n top: 50%;\n margin-top: -1em;\n transform: translateX(-20%);\n width: 2em;\n height: 2em;\n transition: all .3s ease-in-out;\n}\n\n.card:hover .card__header-icon {\n opacity: 1;\n transform: translateX(0);\n}"}]}},"actionData":null,"errors":null}