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

Nitro Style

\n","css":".package {\n width: 200px;\n height: 254px;\n background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);\n border-radius: 20px;\n text-align: center;\n transition: all 0.25s cubic-bezier(0, 0, 0, 1);\n}\n\n.package:hover {\n box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);\n}\n\n.package2 {\n width: 200px;\n height: 254px;\n background-color: #1d1724;\n border-radius: 10px;\n transition: all 0.25s cubic-bezier(0, 0, 0, 1);\n padding: 15px;\n cursor: pointer;\n}\n\n.package2:hover {\n transform: scale(0.98);\n border-radius: 18px;\n}\n\n.text {\n color: white;\n font-size: 17px;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"aeee33","snapshot":null,"tags":null,"title":"card by lowa2006","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4779,"cssLen":1167,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n About Me\n

\n I’m Walter, a multidisciplinary designer who focuses on telling my clients’\n stories visually, through enjoyable and meaningful experiences. I specialize\n in responsive websites and functional user interfaces.\n

\n \n \n

\n","css":".card {\n width: 17em;\n height: 22.5em;\n background: #171717;\n transition: 1s ease-in-out;\n clip-path: polygon(\n 30px 0%,\n 100% 0,\n 100% calc(100% - 30px),\n calc(100% - 30px) 100%,\n 0 100%,\n 0% 30px\n );\n border-top-right-radius: 20px;\n border-bottom-left-radius: 20px;\n display: flex;\n flex-direction: column;\n}\n\n.card span {\n font-weight: bold;\n color: white;\n text-align: center;\n display: block;\n font-size: 1em;\n}\n\n.card .info {\n font-weight: 400;\n color: white;\n display: block;\n text-align: center;\n font-size: 0.72em;\n margin: 1em;\n}\n\n.card .img {\n width: 4.8em;\n height: 4.8em;\n background: white;\n border-radius: 15px;\n margin: auto;\n}\n\n.card .share {\n margin-top: 1em;\n display: flex;\n justify-content: center;\n gap: 1em;\n}\n\n.card a {\n color: white;\n transition: 0.4s ease-in-out;\n}\n\n.card a:hover {\n color: red;\n}\n\n.card button {\n padding: 0.8em 1.7em;\n display: block;\n margin: auto;\n border-radius: 25px;\n border: none;\n font-weight: bold;\n background: #ffffff;\n color: rgb(0, 0, 0);\n transition: 0.4s ease-in-out;\n}\n\n.card button:hover {\n background: red;\n color: white;\n cursor: pointer;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"75c982","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2117,"cssLen":5852,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

JOHN DOE
\n Fullstack dev & UX UI\n

\n \n \n \n

","css":"/* before adding the photo to the div with the \"card-photo\" class, in the css clear the styles for .card-photo and remove .card-photo::before and .card-photo::after, then set the desired styles for .card- photo. */\n\n.card {\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n width: 200px;\n height: 254px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.card-photo {\n/* clear and add new css */\n transform: scale(0.3) translate(220px, 230px);\n width: 250px;\n height: 250px;\n margin-left: -125px;\n margin-top: -125px;\n background: radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 14% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 10% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 7.5% 29%/20% 20%,radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 86% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 90% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 92.5% 29%/20% 20%,radial-gradient(circle at 50% 0,#ffdab9 29.5%,#8b4513 30%,#8b4513 35%,rgba(139,69,19,0) 35.5%) 50% 95%/40% 20%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 49%,#8b4513 49.5%,#8b4513 52%,rgba(139,69,19,0) 52.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(255,255,255,0) 35%,white 35%,white 45%,rgba(255,255,255,0) 45.5%) 50% 89%/40% 13%,linear-gradient(#8b4513,#8b4513) 37% 100%/.25em 22%,linear-gradient(#8b4513,#8b4513) 63% 100%/.25em 22%,linear-gradient(80deg,rgba(0,0,0,0) 50%,#333 50.5%) 24% 100%/1em 18%,linear-gradient(-80deg,rgba(0,0,0,0) 50%,#333 50.5%) 76% 100%/1em 18%,linear-gradient(162deg,rgba(0,0,0,0) 10%,#333 10%) 30% 100%/1.5em 21%,linear-gradient(-162deg,rgba(0,0,0,0) 10%,#333 10%) 70% 100%/1.5em 21%,radial-gradient(ellipse at 100% 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 0 100%/37% 29%,radial-gradient(ellipse at 0 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 100% 100%/37% 29%,radial-gradient(ellipse at 50% 100%,#222 51%,rgba(0,0,0,0) 51.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(0,0,0,0.15) 40%,rgba(0,0,0,0) 40.5%) 50% 82%/20% 20%,linear-gradient(to right,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(to left,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(#ffdab9,#ffdab9) 50% 80%/20% 20%,linear-gradient(#48240a,#48240a) 50% 100%/65% 60%,radial-gradient(circle,white 30%,rgba(255,255,255,0) 62%) 50% 50%/100% 100%;\n background-color: #ccc;\n background-repeat: no-repeat;\n border-radius: 30%;\n}\n\n/* delete */\n.card-photo::before {\n display: block;\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 160px;\n height: 200px;\n left: 50%;\n top: -10%;\n margin-left: -80px;\n background: radial-gradient(circle at 50% 0,#ffdab9 30%,#8b4513 30.5%,#8b4513 41%,rgba(139,69,19,0) 41.5%) 50% 76%/2em 2em,radial-gradient(ellipse,rgba(139,69,19,0) 25%,#5e2f0d 25.5%,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 50% 100%/100% 40%,radial-gradient(ellipse at 50% 0,#8b4513 40%,#ffdab9 40.5%,#ffdab9 58%,rgba(255,218,185,0) 59%) 50% 83%/3em 1em,linear-gradient(#5e2f0d,#5e2f0d) 50% 86%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 26% 56%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 74% 56%/1em 1em,radial-gradient(ellipse,rgba(139,69,19,0) 52%,#8b4513 52.5%,#8b4513 55%,rgba(139,69,19,0) 55.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(0,0,0,0) 46%,rgba(0,0,0,0.15) 46.5%,rgba(0,0,0,0.15) 53%,rgba(0,0,0,0) 53%) 50% 100%/150% 80%,radial-gradient(ellipse,#ffdab9 53%,rgba(255,218,185,0) 53.5%) 50% 100%/150% 80%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 35.5%,#8b4513 36%,#8b4513 38%,white 38.5%) 50% -45%/110% 60%,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 30% 26%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 40% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 50% 24.5%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 60% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 70% 26%/1em 1em,radial-gradient(ellipse,#666 63%,#8b4513 63.5%,#8b4513 66%,rgba(139,69,19,0) 66.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(139,69,19,0) 40%,#5e2f0d 40.5%) 50% 0/150% 80%,linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)) 50% 50%/100% 100%;\n background-repeat: no-repeat;\n background-color: #ffdab9;\n border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;\n border: 4px solid #8b4513;\n box-shadow: inset 0 -.2em 0 .5em rgba(0,0,0,0.15),inset 0 -1.6em 0 #5e2f0d;\n}\n\n/* delete */\n.card-photo::after {\n display: block;\n content: '';\n position: absolute;\n width: 2.5em;\n height: .8em;\n left: 28.5%;\n top: 26%;\n background-color: #5e2f0d;\n border-radius: .3em;\n box-shadow: 4.2em 0 0 #5e2f0d;\n}\n\n.card-title {\n text-align: center;\n color: var(--font-color);\n font-size: 20px;\n font-weight: 400;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card-title span {\n font-size: 15px;\n color: var(--font-color-sub);\n}\n\n.card-socials {\n display: flex;\n height: 0;\n opacity: 0;\n margin-top: 20px;\n gap: 20px;\n transition: 0.5s;\n}\n\n.card-socials-btn {\n width: 25px;\n height: 25px;\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n.card-socials-btn svg {\n width: 100%;\n height: 100%;\n fill: var(--main-color);\n}\n\n.card:hover > .card-socials {\n opacity: 1;\n height: 35px;\n}\n\n.card-socials-btn:hover {\n transform: translateY(-5px);\n transition: all 0.15s;\n}\n\n.card-photo:hover {\n transition: 0.3s;\n transform: scale(0.4) translate(160px, 150px);\n}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"c378b3","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":3250,"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 \n

\n","css":".card {\n width: 200px;\n height: 200px;\n background: transparent;\n border-radius: 50%;\n border: 20px solid transparent;\n position: relative;\n overflow: hidden;\n box-shadow: 2px 2px 2px black, inset 2px 2px 2px black,\n -1px -1px 5px rgba(0, 0, 0, 0.473), inset -1px -1px 5px rgba(0, 0, 0, 0.473);\n}\n\n.numbers {\n font-weight: bold;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n border-radius: 50%;\n padding: 20px;\n background-color: transparent;\n}\n\n.number {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: inline-block;\n width: 0.1rem;\n height: 0.9rem;\n background-color: rgb(106, 108, 117);\n}\n.number:nth-child(1) {\n transform: translate(-50%, -50%) rotateZ(calc(30deg)) translateY(-80px);\n}\n\n.number:nth-child(2) {\n transform: translate(-50%, -50%) rotateZ(calc(60deg)) translateY(-80px);\n}\n\n.number:nth-child(3) {\n transform: translate(-50%, -50%) rotateZ(calc(90deg)) translateY(-80px);\n}\n\n.number:nth-child(4) {\n transform: translate(-50%, -50%) rotateZ(calc(120deg)) translateY(-80px);\n}\n\n.number:nth-child(5) {\n transform: translate(-50%, -50%) rotateZ(calc(150deg)) translateY(-80px);\n}\n\n.number:nth-child(6) {\n transform: translate(-50%, -50%) rotateZ(calc(180deg)) translateY(-80px);\n}\n\n.number:nth-child(7) {\n transform: translate(-50%, -50%) rotateZ(calc(210deg)) translateY(-80px);\n}\n\n.number:nth-child(8) {\n transform: translate(-50%, -50%) rotateZ(calc(240deg)) translateY(-80px);\n}\n\n.number:nth-child(9) {\n transform: translate(-50%, -50%) rotateZ(calc(270deg)) translateY(-80px);\n}\n\n.number:nth-child(10) {\n transform: translate(-50%, -50%) rotateZ(calc(300deg)) translateY(-80px);\n}\n\n.number:nth-child(11) {\n transform: translate(-50%, -50%) rotateZ(calc(330deg)) translateY(-80px);\n}\n\n.number:nth-child(12) {\n transform: translate(-50%, -50%) rotateZ(calc(0deg)) translateY(-80px);\n}\n\n.number:nth-child(3),\n.number:nth-child(6),\n.number:nth-child(9),\n.number:nth-child(12) {\n width: 0.3rem;\n height: 1.5rem;\n}\n\n.needles {\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.h,\n.m,\n.s,\n.center {\n display: inline-block;\n width: 7px;\n height: 20px;\n background-color: black;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50% 50% 0 0;\n}\n\n.s {\n transform: translate(-50%, -80%);\n}\n\n.h {\n background-color: black;\n transform-origin: 50% 100%;\n animation: rotate 43200s 60s infinite linear;\n transform: translate(-50%, -100%) rotateZ(5deg);\n height: 2.5rem;\n z-index: 1;\n}\n\n.m {\n background-color: rgb(176, 176, 185);\n z-index: 2;\n height: 4rem;\n width: 5px;\n transform-origin: 50% 100%;\n transform: translate(-50%, -100%) rotateZ(60deg);\n animation: rotate 3600s 60s infinite steps(60, end);\n}\n\n.s {\n background-color: rgb(240, 31, 31);\n z-index: 3;\n height: 5rem;\n width: 3px;\n transform-origin: 50% 80%;\n animation: rotate 60s infinite steps(60, end);\n}\n\n.center {\n width: 15px;\n height: 15px;\n background-color: white;\n border: solid 4px red;\n z-index: 4;\n border-radius: 50%;\n}\n\n@keyframes rotate {\n 100% {\n transform: translate(-50%, -80%) rotateZ(360deg);\n }\n}\n"},{"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}"}]}},"actionData":null,"errors":null}