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

\n","css":".cube-container {\n width: 200px;\n height: 200px;\n perspective: 800px;\n margin: 50px auto;\n}\n\n.cube {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotate 15s infinite linear;\n}\n\n.face {\n position: absolute;\n width: 200px;\n height: 200px;\n color: rgb(21, 153, 214);\n font-size: 18px;\n text-align: center;\n line-height: 200px;\n background: transparent;\n opacity: 0.9;\n border: 2px solid;\n border-image: linear-gradient(\n 90deg,\n rgba(14, 8, 110, 1) 0%,\n rgba(15, 15, 167, 1) 26%,\n rgba(20, 45, 255, 1) 85%\n );\n box-shadow: 0 0 100px rgba(8, 178, 245, 0.61);\n}\n\n.front {\n transform: translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.cube-container:hover .cube {\n animation-play-state: paused;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"16cf4e","snapshot":null,"tags":null,"title":"card by NlghtM4re","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":555,"cssLen":1749,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Console Window

def main():\n  for i in range(100):\n    print(f\"Add to favorites {i}\")\n    if favorite = true:\n      Favorite()\n\ndef Favorite():\n  print(\"thanks\")\n\nmain()

\n\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.window {\n position: absolute;\n height: 200px;\n width: 300px;\n background-color: #fff;\n border: 2px solid #333;\n border-radius: 15px;\n overflow: hidden;\n}\n\n.window-title {\n height: 30px;\n background-color: #333;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n}\n\n.window-title p {\n color: #fff;\n font-weight: bold;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n.window-buttons {\n display: flex;\n align-items: center;\n}\n\n.window-button {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n margin: 5px;\n transition: background-color 0.2s ease;\n}\n\n.window-button.close {\n background-color: #f00;\n}\n\n.window-button.close:hover {\n background-color: rgb(182, 2, 2);\n cursor: pointer;\n}\n\n.window-button.reduce {\n background-color: #ff0;\n}\n\n.window-button.reduce:hover {\n background-color: rgb(172, 172, 4);\n cursor: pointer;\n}\n\n.window-button.fullscreen {\n background-color: #0f0;\n}\n\n.window-button.fullscreen:hover {\n background-color: rgb(7, 159, 7);\n cursor: pointer;\n}\n\n.window-button:focus {\n outline: none;\n}\n\n.console {\n width: 100%;\n height: calc(100% - 30px);\n background-color: #000;\n color: #fff;\n overflow: auto;\n}\n\n.console pre {\n margin: 0;\n padding: 5px;\n font-size: 15px;\n}\n\n.console pre code {\n color: #0f0;\n outline: none;\n}\n\n.console::-webkit-scrollbar {\n width: 8px;\n}\n\n.console::-webkit-scrollbar-track {\n background-color: #333;\n}\n\n.console::-webkit-scrollbar-thumb {\n background-color: #666;\n border-radius: 10px;\n border: 2px solid #333;\n}\n\n.console::-webkit-scrollbar-thumb:hover {\n background-color: #999;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"4d90e2","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3473,"cssLen":2234,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Main Title

\n \n \n \n

\n Title 1\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, facere.\n \n\n

\n Title 2\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et hic praesentium\n nobis cumque, dolores adipisci?\n \n

\n Title 3\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, facilis!\n \n

","css":".card {\n position: relative;\n width: 230px;\n height: 300px;\n background: linear-gradient(-45deg, rgb(0, 153, 255) 0%, cyan 100%);\n overflow: hidden;\n border: 1px solid black;\n box-shadow: rgba(141, 177, 205, 0.618) 0px 40px 30px -25px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card:hover {\n transform: scale(1.08);\n box-shadow: rgba(141, 177, 205, 0.618) 0px 30px 30px -25px;\n}\n\n.icons-container {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 1rem;\n z-index: 999;\n}\n\n.icons-container .svg {\n stroke: white;\n width: 20px;\n transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.icons-container .svg:hover {\n transform: scale(1.5);\n stroke: black;\n}\n\n.icons-container .twitter {\n fill: white;\n}\n\n.icons-container .twitter:hover {\n fill: black;\n stroke: none;\n}\n\n.logo {\n width: 50px;\n padding: 1rem;\n}\n\n.logo .svg {\n fill: white;\n}\n\n.title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n color: White;\n font-weight: bold;\n font-size: 1.1rem;\n}\n\n.box {\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: rgba(66, 66, 66, 0.349) 5px 0px 10px 0px inset;\n transition: all 0.5s ease-in-out;\n display: grid;\n place-content: center;\n padding: 2rem 2rem 3rem 2rem;\n border: 1px solid black;\n}\n\n.box .content {\n position: relative;\n transform: translateY(-100%);\n opacity: 0;\n transition: all 0.5s ease-in-out 0.3s;\n}\n\n.box .content .box-title {\n display: block;\n color: white;\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 1rem;\n}\n\n.box .content .box-text {\n color: rgba(255, 255, 255, 0.738);\n font-size: 0.8rem;\n}\n\n.box:hover {\n right: 0;\n top: 0;\n border-radius: 0;\n border: 1px solid transparent;\n box-shadow: rgba(66, 66, 66, 0) 5px 0px 10px 0px inset;\n}\n\n.box:hover .content {\n transform: translate(0, 0);\n opacity: 1;\n}\n\n.box1 {\n top: -85%;\n right: -40%;\n background: rgb(255, 112, 60);\n border-radius: 200px;\n}\n\n.box2 {\n top: -70%;\n right: -45%;\n background: rgb(255, 174, 0);\n border-radius: 200px;\n}\n\n.box3 {\n top: -62%;\n right: -30%;\n background: rgb(255, 194, 52);\n border-radius: 200px;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"0e2169","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1593,"cssLen":2018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\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{position:absolute}.relative{position:relative}.right-2{right:0.5rem}.top-3{top:0.75rem}.flex{display:flex}.h-12{height:3rem}.h-80{height:20rem}.w-12{width:3rem}.w-60{width:15rem}.flex-col{flex-direction:column}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.border-2{border-width:2px}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.stroke-blue-400{stroke:#60a5fa}.p-1{padding:0.25rem}.p-4{padding:1rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sky-800{--tw-shadow-color:#075985;--tw-shadow:var(--tw-shadow-colored)}.hover\\:bg-blue-300:hover{--tw-bg-opacity:1;background-color:rgb(147 197 253 / var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}"},{"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"}]}},"actionData":null,"errors":null}