{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"2bd77c","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1999,"cssLen":2863,"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 Explore More\n

\n Dive into curated collections, traverse user-friendly interfaces, and let\n curiosity guide your exploration.\n

\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-left-12{left:-3rem}.-top-12{top:-3rem}.-top-24{top:-6rem}.left-12{left:3rem}.left-14{left:3.5rem}.left-56{left:14rem}.top-12{top:3rem}.top-24{top:6rem}.top-44{top:11rem}.flex{display:flex}.h-12{height:3rem}.h-24{height:6rem}.h-4{height:1rem}.h-44{height:11rem}.h-64{height:16rem}.h-full{height:100%}.w-12{width:3rem}.w-24{width:6rem}.w-4{width:1rem}.w-44{width:11rem}.w-64{width:16rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.bg-neutral-600{--tw-bg-opacity:1;background-color:rgb(82 82 82 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-3{padding:0.75rem}.p-5{padding:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.italic{font-style:italic}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212 / var(--tw-text-opacity))}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 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-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)}.shadow-green-800{--tw-shadow-color:#166534;--tw-shadow:var(--tw-shadow-colored)}.shadow-neutral-900{--tw-shadow-color:#171717;--tw-shadow:var(--tw-shadow-colored)}.shadow-red-800{--tw-shadow-color:#991b1b;--tw-shadow:var(--tw-shadow-colored)}.shadow-sky-500{--tw-shadow-color:#0ea5e9;--tw-shadow:var(--tw-shadow-colored)}.shadow-sky-800{--tw-shadow-color:#075985;--tw-shadow:var(--tw-shadow-colored)}.shadow-yellow-800{--tw-shadow-color:#854d0e;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-1000{transition-duration:1000ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:duration-1000:hover{transition-duration:1000ms}.group:hover .group-hover\\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;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\\:duration-1000{transition-duration:1000ms}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"182bda","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":299,"cssLen":981,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mauris risus, lobortis a neque aliquet, ornare rutrum purus. Integer hendrerit ac est non cursus. Integer quis risus tincidunt nunc mattis ultricies. Proin sed enim tellus.

","css":".page {\n position: relative;\n box-sizing: border-box;\n max-width: 300px;\n font-family: cursive;\n font-size: 20px;\n border-radius: 10px;\n background: #fff;\n background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);\n background-size: 100% 1.2rem;\n line-height: 1.2rem;\n padding: 1.4rem 0.5rem 0.3rem 4.5rem;\n}\n\n.page::before,\n.page::after {\n position: absolute;\n content: \"\";\n bottom: 10px;\n width: 40%;\n height: 10px;\n box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);\n z-index: -1;\n transition: all 0.3s ease;\n}\n\n.page::before {\n left: 15px;\n transform: skew(-5deg) rotate(-5deg);\n}\n\n.page::after {\n right: 15px;\n transform: skew(5deg) rotate(5deg);\n}\n\n.page:hover::before,\n.page:hover::after {\n box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);\n}\n\n.margin {\n position: absolute;\n border-left: 1px solid #d88;\n height: 100%;\n left: 3.3rem;\n top: 0;\n}\n\n.page p {\n margin: 0;\n text-indent: 1rem;\n padding-bottom: 1.2rem;\n color: black;\n line-height: 20px;\n}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"041ea0","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":988,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n width: 200px;\n height: 200px;\n background-color: rgba(0, 0, 0, 0.253);\n box-shadow: inset 10px 10px 10px 10px rgba(8, 7, 7, 0.342),\n inset 20px 20px 20px 20px rgba(8, 7, 7, 0.1),\n 10px 10px 20px rgba(0, 0, 0, 0.425),\n inset -10px -10px 10px 10px rgba(41, 40, 40, 0.568),\n inset -20px -20px 20px 20px rgba(41, 40, 40, 0.568);\n border-radius: 51% 49% 62% 38% / 25% 57% 43% 75%;\n position: relative;\n}\n\n.card::after {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.329);\n box-shadow: 0 0 50px rgb(226, 226, 226);\n border-radius: 80% 20% 91% 9% / 48% 67% 33% 52%;\n top: 50px;\n left: 40px;\n}\n\n.card::before {\n content: \"\";\n display: inline-block;\n width: 20px;\n height: 20px;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.315);\n box-shadow: 0 0 50px rgb(255, 255, 255);\n border-radius: 48% 52% 45% 55% / 48% 67% 33% 52%;\n top: 40px;\n left: 60px;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"e8c9df","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":151,"cssLen":2253,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n width: 280px;\n height: 280px;\n background-color: #151716;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n filter: hue-rotate(10deg);\n}\n\n.card {\n width: 200px;\n height: 200px;\n background: #000000;\n border-radius: 50%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #18D322;\n overflow: hidden;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n width: 2px;\n height: 200px;\n left: 49%;\n background-color: #18D322;\n animation: rotate 3s linear infinite;\n z-index: 6;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n width: 0px;\n height: 200px;\n left: 49%;\n transform: rotate(-4deg);\n background-color: #18D322;\n animation: rotate 3s linear infinite;\n box-shadow: 0 0 10px 10px #2fbb39;\n z-index: 6;\n}\n\n.circle {\n width: 100px;\n height: 100px;\n border: 2px solid #18D322;\n border-radius: 50%;\n}\n\n.circle::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n border: 2px solid #18D322;\n border-radius: 50%;\n}\n\n.circle::after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n border: 2px solid #18D322;\n border-radius: 50%;\n}\n\n.dot {\n width: 4px;\n height: 4px;\n top: 30%;\n background-color: #18D322;\n border-radius: 50%;\n position: absolute;\n animation: doted 1.5s ease infinite;\n}\n\n.dot2 {\n width: 4px;\n height: 4px;\n top: 80%;\n right: 30%;\n background-color: #18D322;\n border-radius: 50%;\n position: absolute;\n animation: doted 1.5s 1.2s ease infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes doted {\n 0% {\n transform: scale(0.95);\n box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);\n }\n\n 60% {\n transform: scale(0.95);\n box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),0 0 10px 10px rgba(24, 211, 33, 0.3);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7),0 0 0 0 rgba(24, 211, 33, 0.5),0 0 0 0 rgba(24, 211, 33, 0.3);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"183ea2","snapshot":null,"tags":null,"title":"card by IWhat1","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5164,"cssLen":1428,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Profile

\n \n \n

Front Card

Follow me for more...\n

Follow Me

\n \n \n\n

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

\n","css":".container {\n height: 294px;\n width: 240px;\n color: yellow;\n perspective: 800px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card {\n width: 100%;\n height: 100%;\n background: black;\n border-radius: 2rem;\n position: relative;\n transition: transform 1500ms;\n transform-style: preserve-3d;\n}\n\n.card-top {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 10%;\n position: absolute;\n width: 50%;\n background-color: transparent;\n border: 2px solid black;\n top: 0;\n border-top: none;\n border-radius: 0 0 1rem 1rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 255, 0, 0.7);\n}\n\n.card-top-para {\n font-size: 16px;\n font-weight: bold;\n}\n\n.container:hover > .card {\n cursor: pointer;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.front,\n.back {\n height: 100%;\n width: 100%;\n border-radius: 2rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 255, 0, 0.7);\n position: absolute;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.back {\n background-color: black;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.heading {\n font-size: 22px;\n font-weight: bold;\n}\n\n.follow {\n font-size: 16px;\n font-weight: 500;\n}\n\n.icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-top: 20px;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"4b4864","snapshot":null,"tags":null,"title":"card by bociKond","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5175,"cssLen":2656,"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

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n --clr: #FDFFFC;\n --clr-text: #1C1D21;\n --clr1: #018E42;\n background-color: var(--clr);\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n display: flex;\n flex-direction: column;\n outline: 2px solid var(--clr);\n outline-offset: 3px;\n}\n\n/* new start */\n.top-bar {\n display: flex;\n align-items: center;\n align-self: flex-end;\n gap: .5rem;\n list-style: none;\n}\n\n.btn {\n fill: var(--clr);\n border: none;\n width: 2rem;\n aspect-ratio: 1/1;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 10;\n border-radius: 50%;\n}\n\n.close {\n background-color: orangered;\n}\n\n.minimize {\n background-color: var(--clr1);\n}\n\n.songs {\n display: flex;\n flex-direction: column;\n gap: .5rem;\n}\n/* new end */\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-inline: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.song > * {\n transition: .4s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: var(--clr1);\n --clr-text: #FDFFFC;\n}\n\n.currentplaying {\n display: flex;\n align-items: center;\n align-self: center;\n margin: 1em 2rem;\n padding: .5rem;\n width: 100%;\n background-color: #018E42dd;\n border-radius: .5rem;\n}\n\n.spotify {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: var(--clr);\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: limegreen;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: var(--clr-text);\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n transition: .4s ease-in-out;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: var(--clr-text);\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n color: var(--clr-text);\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"e6be91","snapshot":null,"tags":null,"title":"card by chavarahul","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1642,"cssLen":1260,"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

#include <iostream>\nusing namespace std;\n\nint main() {\n\n  int a = 12;\n  int b = 5;\n\n  cout << \"Sum of the numbers\n    is: \" << (a + b);\n\n  return 0;\n\n}\n

\n","css":".card {\n width: 250px;\n height: 300px;\n background: #15001f;\n border: 1px solid #c042ff;\n font-size: 14px;\n font-family: monospace;\n overflow: auto;\n}\n.card::-webkit-scrollbar {\n width: 0px;\n}\n\n.titlebar {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n font-size: 21px;\n font-weight: 450;\n background-color: #2e0043;\n width: 100%;\n text-align: right;\n}\n\n.card button {\n width: 40px;\n height: 35px;\n margin-left: -5px;\n border: 0;\n outline: 0;\n background: transparent;\n transition: 0.2s;\n}\n\nbutton svg path,\nbutton svg rect,\nbutton svg polygon {\n fill: #ffffff;\n}\n\nbutton svg {\n width: 10px;\n height: 10px;\n}\n\n.close:hover {\n background-color: #e81123;\n}\n\n.maximize:hover {\n background-color: #c042ff2e;\n}\n\n.minimize:hover {\n background-color: #c042ff2e;\n}\n\n#pre {\n overflow: auto;\n width: 100%;\n padding: 10px;\n height: auto;\n color: #bafff8;\n}\n\n.curlies {\n color: #ff0000;\n}\n\n.sc {\n color: #e600ff;\n}\n\n.rounds {\n color: #ffffff;\n}\n\n.operator {\n color: #ffff00;\n}\n\n.s1 {\n color: #22ff00;\n}\n\n.s2 {\n color: #4281ff;\n}\n\n.s3 {\n color: #ff4284;\n}\n\n.s4 {\n color: #ffae00;\n}\n\n.s5 {\n color: #ffffff;\n}\n\n.s6 {\n color: #ffff00;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"5bf5ce","snapshot":null,"tags":null,"title":"card by Saad3092003","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":397,"cssLen":1939,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

","css":".obj {\n position: relative;\n width: 200px;\n height: 200px;\n /* background-color: rgb(96, 96, 232); */\n transform-style: preserve-3d;\n transition: 0.5s all;\n transform: rotateX(-25deg) rotateY(20deg);\n}\n\n.objchild {\n animation: rotate 4s infinite linear;\n transform-style: preserve-3d;\n position: absolute;\n width: 100%;\n height: 100%;\n /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */\n}\n\n.objchild::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n /* background: rgb(37, 101, 230); */\n /* background: radial-gradient(center center, farthest-side , #9993, transparent); */\n filter: blur(20px);\n box-shadow: 0 0 200px 15px white;\n transform: rotateX(90deg) scale(1.1) translateZ(-120px);\n}\n\n.inn1 {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n filter: blur(2px);\n transform: translateZ(-250px);\n background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );\n}\n\n.inn2 {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateZ(100px);\n background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );\n}\n\n.inn3 {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateX(-100px) rotateY(90deg);\n background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );\n}\n\n.inn4 {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateX(100px) rotateY(90deg);\n background: linear-gradient( to top,rgb(10, 10, 78),rgb(96, 96, 232) );\n}\n\n.inn5 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(10, 10, 79);\n transform: rotateX(90deg) translateZ(-100px);\n}\n\n.inn6 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(46, 46, 46);\n transform: rotateX(90deg) translateZ(100px);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate3d(0,1,0,0deg);\n }\n\n 100% {\n transform: rotate3d(0,1,0,360deg);\n }\n}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"f763da","snapshot":null,"tags":null,"title":"card by TimTrayler","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 200px;\n height: 260px;\n background-color: #212121;\n box-shadow: 15px 15px 30px #191919,\n -15px -15px 30px #292929;\n transition: border-radius cubic-bezier(0.075, 0.82, 0.165, 1) 1s,\n transform cubic-bezier(0.075, 0.82, 0.165, 1) 1s;\n}\n\n.card:hover {\n border-bottom-right-radius: 50px;\n border-top-left-radius: 50px;\n transform: scale(1.05);\n}\n"},{"created":"2024-01-22T17:11:29.000Z","isPrivate":0,"projectId":"2b71a1","snapshot":null,"tags":null,"title":"card by Toseef-Ahmad","updated":"2024-01-22T17:11:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":272,"cssLen":302,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Write here

\n","css":".card {\n width: 190px;\n height: 254px;\n display: flex;\n padding: 2em;\n box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;\n background: #fffef0;\n filter: url(#wavy2);\n}\n\n.card p {\n color: black;\n font-size: 3rem;\n align-items: center;\n}\n\n.filter {\n display: none;\n position: absolute;\n}"},{"created":"2024-01-22T17:11:29.000Z","isPrivate":0,"projectId":"a2c2a1","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":715,"cssLen":674,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Confused? So are we, yet you can\n click here to pretend you know what you're doing →\n

","css":".notifications-container {\n width: 320px;\n height: auto;\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.info {\n background-color: rgb(239, 246, 255);\n border-left-width: 4px;\n border-radius: 0.375rem;\n padding: 1rem;\n}\n\n.info-svg {\n height: 1.25rem;\n width: 1.25rem;\n opacity: 70%;\n color: rgb(29, 78, 216);\n}\n\n.info-prompt-wrap {\n margin-left: 0.75rem;\n color: rgb(29, 78, 216);\n}\n\n.info-prompt-link {\n font-weight: 500;\n color: rgb(0, 29, 110);\n text-decoration: underline;\n}\n\n.info-prompt-link:hover {\n color: rgb(29, 78, 216);\n}"},{"created":"2024-01-22T17:11:29.000Z","isPrivate":0,"projectId":"e3c187","snapshot":null,"tags":null,"title":"card by Cobp","updated":"2024-01-22T17:11:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":494,"cssLen":1656,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n (Topic)\n

\n Main Title\n

\n Access the list (Topic)\n Username-id\n

\n Access\n

\n","css":".card {\n position: relative;\n display: flex;\n flex-direction: column;\n background-color: #242824;\n padding: 10px;\n border-radius: 6px;\n gap: 0.5rem;\n height: max-content;\n}\n.card_form {\n position: relative;\n width: 15em;\n height: 15em;\n border-radius: 4px;\n background-color: #9147ff;\n transition: 0.2s ease-in-out;\n overflow: hidden;\n}\n.card_form span {\n font-size: 1.5em;\n position: absolute;\n inset: 0;\n padding: 5px 10px;\n color: #fff;\n background-image: linear-gradient(\n to top,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.7) 100%\n );\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n.card:hover .card_form span,\n.card:hover .card_data span {\n opacity: 1;\n}\n.card_data {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.card_data span {\n color: #9147ff;\n display: flex;\n align-items: center;\n font-size: 0.9em;\n transition: 0.2s ease-in-out;\n opacity: 0;\n cursor: pointer;\n}\n.card_data span:hover {\n text-decoration: underline;\n}\n.text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 0.5em;\n color: white;\n}\n.text_m {\n font-size: 0.9em;\n}\n.text_s {\n color: #9147ff;\n font-size: 0.6em;\n}\n.cube {\n width: max-content;\n height: 10px;\n transition: all 0.2s;\n transform-style: preserve-3d;\n}\n.card:hover .cube {\n transform: rotateX(90deg);\n}\n.side {\n width: max-content;\n height: 1em;\n display: flex;\n justify-content: center;\n align-items: center;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: bold;\n}\n.top {\n transform: rotateX(-90deg) translate3d(0, 0, 0em);\n}\n.front {\n transform: translate3d(0, 0, 1em);\n}\n"}]}},"actionData":null,"errors":null}