{"loaderData":{"0":null,"0-3":{"total":7444,"projects":[{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"a0faf4","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":940,"cssLen":1883,"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 34+\n

Projects

\n\n","css":".absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.z-20{z-index:20}.ml-2{margin-left:0.5rem}.flex{display:flex}.h-44{height:11rem}.w-44{width:11rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:0.75rem}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.fill-red-300{fill:#fca5a5}.text-6xl{font-size:3.75rem;line-height:1}.font-bold{font-weight:700}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.blur{--tw-blur:blur(8px);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)}.duration-500{transition-duration:500ms}.hover\\:-translate-y-2:hover{--tw-translate-y:-0.5rem;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\\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;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\\:blur-none{--tw-blur:blur(0);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)}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"f27b95","snapshot":null,"tags":null,"title":"card by dylanharriscameron","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":192,"cssLen":2220,"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 Hover me\n

","css":".container .card {\n background-color: white;\n border-radius: 10px;\n border: 1px solid black;\n position: relative;\n z-index: 0;\n transition: all 300ms ease-out;\n transform-origin: center center;\n width: 100%;\n height: 100%;\n box-shadow: 0px;\n}\n\n.card-header {\n padding: 10px;\n background-color: #000;\n color: white;\n font-size: 16px;\n border: 1px solid white;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n}\n\n.container .card .border {\n transition: all 300ms ease-out;\n transform-origin: center center;\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 12px);\n height: calc(100% - 12px);\n border: 1px solid black;\n border-radius: 9px;\n}\n\n.container {\n perspective: 1000px;\n position: relative;\n /* you don't need width and height if your card already has a lot of content */\n width: 100%;\n max-width: 250px;\n height: 150px;\n border-radius: 10px;\n}\n.container a {\n opacity: 0;\n position: absolute;\n z-index: 1;\n width: 50%;\n height: 50%;\n}\n.container a:hover,\n.container a:focus {\n transform: translateZ(50px);\n}\n\n.container a:hover ~ .card .card-header,\n.container a:focus ~ .card .card-header {\n transform: translateZ(24px);\n}\n\n.container a:nth-child(1) {\n top: 0;\n left: 0;\n}\n.container a:nth-child(1):hover ~ .card,\n.container a:nth-child(1):focus ~ .card {\n transform: rotateX(10deg) rotateY(-10deg) translateZ(0);\n transform-origin: right bottom;\n box-shadow: 10px 20px;\n}\n.container a:nth-child(2) {\n top: 0;\n right: 0;\n}\n.container a:nth-child(2):hover ~ .card,\n.container a:nth-child(2):focus ~ .card {\n transform: rotateX(10deg) rotateY(10deg) translateZ(0);\n transform-origin: left bottom;\n box-shadow: -10px 20px;\n}\n.container a:nth-child(3) {\n bottom: 0;\n right: 0;\n}\n.container a:nth-child(3):hover ~ .card ,\n.container a:nth-child(3):focus ~ .card {\n transform-origin: left top;\n transform: rotateX(-10deg) rotateY(10deg) translateZ(0);\n box-shadow: -10px -20px;\n}\n.container a:nth-child(4) {\n bottom: 0;\n left: 0;\n}\n.container a:nth-child(4):hover ~ .card,\n.container a:nth-child(4):focus ~ .card {\n transform-origin: right top;\n transform: rotateX(-10deg) rotateY(-10deg) translateZ(0);\n box-shadow: 10px -20px;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"284619","snapshot":null,"tags":null,"title":"card by AnthonyPreite","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":412,"cssLen":1514,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Free Plan

$0/month

Access to all features
Unlimited storage
No ads

\n Get Started\n

\n","css":".main__heading {\n font-weight: 600;\n font-size: 2.25em;\n margin-bottom: 0.75em;\n text-align: center;\n color: #eceff1;\n}\n\n.cards {\n position: relative;\n}\n\n.card {\n --flow-space: 0.5em;\n --hsl: var(--hue), var(--saturation), var(--lightness);\n flex: 1 1 14rem;\n padding: 1.5em 2em;\n display: grid;\n grid-template-rows: auto auto auto 1fr;\n align-items: start;\n gap: 1.25em;\n color: #eceff1;\n background-color: #2b2b2b;\n border: 1px solid #eceff133;\n border-radius: 15px;\n}\n\n.card:nth-child(1) {\n --hue: 165;\n --saturation: 82.26%;\n --lightness: 51.37%;\n}\n\n.card__bullets {\n line-height: 1.4;\n}\n\n.card__heading {\n font-size: 1.05em;\n font-weight: 600;\n}\n\n.card__price {\n font-size: 1.75em;\n font-weight: 700;\n}\n\n.flow > * + * {\n margin-top: var(--flow-space, 1.25em);\n}\n\n.cta {\n display: block;\n align-self: end;\n margin: 1em 0 0.5em 0;\n text-align: center;\n text-decoration: none;\n color: #fff;\n background-color: transparent;\n outline: 1px solid white;\n padding: 0.7em;\n border-radius: 10px;\n font-size: 1rem;\n font-weight: 600;\n}\n\n.card:hover {\n --lightness: 80%;\n background: #ffffff80;\n color: #000;\n outline: 1px solid rgb(255, 255, 255);\n box-shadow: inset 0 0 80px whitesmoke, inset 20px 0 80px rgba(255, 0, 255, 0.747),\n inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,\n 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;\n transition: all ease-in-out 0.3s;\n}\n\n.card:hover > .cta {\n outline: none;\n background-color: #0d0d0d;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"8e8375","snapshot":null,"tags":null,"title":"card by bociKond","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6618,"cssLen":1421,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

\n Marco\n

CEO

\n \n Italy\n

\n \n

","css":".card * {\n box-sizing: border-box;\n}\n\n.card {\n --bc: #c97d60;\n --bc1: #904c31;\n --bc-al: #c97d6050;\n --clr: #f2e5d7;\n background-color: var(--bc);\n color: var(--clr);\n padding: 2rem 2.5rem;\n border-radius: 0.75rem;\n box-shadow: 0 10px 40px -1px var(--bc-al);\n outline: 2px solid var(--bc);\n outline-offset: 4px;\n max-width: 300px;\n max-height: 300px;\n transition: 0.3s ease-in-out;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2rem;\n line-height: 1.3;\n}\n\n.card:hover {\n --bc: #904c31;\n}\n\n.img {\n max-width: 100%;\n width: 5rem;\n aspect-ratio: 1/1;\n border-radius: 50%;\n outline: 2px solid var(--clr);\n outline-offset: 4px;\n fill: var(--clr);\n}\n\n.text {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.heading {\n font-size: 1.5rem;\n font-weight: 700;\n}\n\n.info {\n font-size: 0.9rem;\n font-weight: 500;\n opacity: 0.7;\n}\n\n.country {\n display: flex;\n align-items: center;\n font-size: 1rem;\n gap: .2rem;\n}\n\n.svg-country {\n width: 1rem;\n height: 1rem;\n}\n\n.soc {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n list-style: none;\n margin-top: 0.5rem;\n padding-bottom: 0;\n margin-inline: auto;\n}\n\n.li-soc {\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n color: var(--clr);\n width: 0.5rem;\n height: 0.5rem;\n padding: 0.5rem;\n}\n\n.li-soc:hover {\n opacity: 0.7;\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"80c701","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1042,"cssLen":1401,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Why couldn't the bicycle stand up by itself?\n

It was two-tired.

\n \n \n

\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.success {\n padding: 1rem;\n border-radius: 0.375rem;\n background-color: rgb(240 253 244);\n}\n\n.succes-svg {\n color: rgb(74 222 128);\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.success-prompt-wrap {\n margin-left: 0.75rem;\n}\n\n.success-prompt-heading {\n font-weight: bold;\n color: rgb(22 101 52);\n}\n\n.success-prompt-prompt {\n margin-top: 0.5rem;\n color: rgb(21 128 61);\n}\n\n.success-button-container {\n display: flex;\n margin-top: 0.875rem;\n margin-bottom: -0.375rem;\n margin-left: -0.5rem;\n margin-right: -0.5rem;\n}\n\n.success-button-main {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n background-color: #ECFDF5;\n color: rgb(22 101 52);\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: bold;\n border-radius: 0.375rem;\n border: none\n}\n\n.success-button-main:hover {\n background-color: #D1FAE5;\n}\n\n.success-button-secondary {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n margin-left: 0.75rem;\n background-color: #ECFDF5;\n color: #065F46;\n font-size: 0.875rem;\n line-height: 1.25rem;\n border-radius: 0.375rem;\n border: none;\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"2ecc90","snapshot":null,"tags":null,"title":"card by MuhammadHasann","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39158,"cssLen":2248,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Photos

\n \n

","css":".card {\n position: relative;\n background: #a68b8a;\n width: 190px;\n height: 265px;\n cursor: pointer;\n transition: all .3 ease;\n overflow: visible;\n box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);\n}\n\n.product {\n content: \"\";\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 150px;\n height: 150px;\n background-color: #faf3e8;\n z-index: 1;\n}\n\n.product p {\n font-size: 17px;\n text-align: center;\n color: #181818;\n line-height: 150px;\n}\n\n.shine {\n position: relative;\n top: 0;\n left: 0;\n width: 190px;\n height: 265px;\n overflow: hidden;\n}\n\n.shine-effect {\n position: absolute;\n top: -15%;\n left: 150%;\n width: 25px;\n height: 400px;\n background-color: #ffffff2a;\n box-shadow: 0 0 15px 2px #ffffff42;\n transform: rotate(25deg);\n transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);\n z-index: 5;\n}\n\n.pattern-1 {\n position: absolute;\n top: 0;\n left: 0;\n width: 125px;\n height: auto;\n z-index: 2;\n}\n\n.pattern-2 {\n position: absolute;\n top: -10%;\n left: -10%;\n width: 200px;\n height: auto;\n z-index: 2;\n}\n\n.tree {\n position: absolute;\n bottom: 1%;\n right: -2%;\n width: 100px;\n height: auto;\n transform-origin: 100% 0;\n transform: rotate(-15deg);\n z-index: 3;\n}\n\n.tape-1 {\n position: absolute;\n top: -20%;\n left: 2%;\n width: 35px;\n height: auto;\n filter: drop-shadow(1px 3px 3px #18181870);\n z-index: 6;\n}\n\n.tape-2 {\n position: absolute;\n top: -25%;\n right: 2%;\n width: 35px;\n height: auto;\n filter: drop-shadow(1px 3px 3px #18181870);\n z-index: 6;\n}\n\n.card:hover {\n transform: scale(1.02);\n}\n\n.card:hover .tape-1 {\n transform: scale(1);\n}\n\n.card:hover .tape-2 {\n transform: scale(1);\n}\n\n.card:hover .shine-effect {\n left: -100%;\n}\n\n.card:active {\n transform: scale(1.02) translate(0, 5%);\n}\n\n.card:active .tape-1 {\n transform-origin: 0 100%;\n transform: scaleY(1.1);\n}\n\n.card:active .tape-2 {\n transform-origin: 0 100%;\n transform: scaleY(1.1);\n}\n\n.fil-tape-10 {\n fill: #A99473\n}\n\n.fil-tape-11 {\n fill: #BBAA88;\n fill-rule: nonzero\n}\n\n.fil-tape-20 {\n fill: #A99473\n}\n\n.fil-tape-21 {\n fill: #BBAA88;\n fill-rule: nonzero\n}\n\n.fil-pattern-1 {\n fill: #f3dfde\n}\n\n.fil-pattern-2 {\n fill: #333333;\n fill-rule: nonzero\n}\n\n.fil0 {\n fill: #333333\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"f6343c","snapshot":null,"tags":null,"title":"card by mirbasit01","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":447,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Different ways to use HTML, CSS, JAVA SCRIPT, IN REACT\n

\n HTML\n CSS\n JAVA SCRIPT\n REACT \n

\n \n

\n","css":".card {\n width: 330px;\n height: 370px;\n padding: 20px;\n color: white;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%, #0a89a8, #252e31) border-box;\n border: 2px solid transparent;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: top bottom;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.card .main-content {\n flex: 1;\n}\n\n.card .header span:first-child {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card .heading {\n font-size: 24px;\n margin: 24px 0 16px;\n font-weight: 600;\n}\n\n.card .categories {\n display: flex;\n gap: 10px;\n}\n\n.card .categories span {\n background-color: #0a89a8;\n padding: 4px 8px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 12px;\n border-radius: 50em;\n}\n\n.card .footer {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card:hover {\n rotate: -6deg;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"b59b94","snapshot":null,"tags":null,"title":"card by sabbircoder07","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1530,"cssLen":6036,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Your Result

of 100

excellent

\n You scored higher than 65% of the people who have taken these tests.\n

\n \n

","css":".results-summary-container {\n font-family: \"Hanken Grotesk\", sans-serif;\n display: flex;\n width: 320px;\n border-radius: 30px;\n box-shadow: 10px 20px 20px rgba(120, 87, 255, 0.3);\n backface-visibility: hidden;\n}\n\n.heading-primary,\n.heading-secondary,\n.heading-tertiary {\n color: #ffffff;\n text-transform: capitalize;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.heading-primary {\n font-size: 36px;\n font-weight: 600;\n background-image: linear-gradient(to right, #f7bb97, #dd5e89);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transform: scale(1.6);\n}\n\n.heading-secondary {\n font-size: 24px;\n font-weight: 600;\n margin-top: 20px;\n letter-spacing: 2px;\n}\n\n.heading-tertiary {\n font-size: 20px;\n font-weight: 500;\n color: hsl(221, 100%, 96%);\n}\n\n.paragraph {\n font-size: 17px;\n line-height: 1.4;\n color: hsl(221, 100%, 96%);\n}\n\n.paragraph-text-box {\n width: 100%;\n}\n\n.text-center {\n text-align: center;\n}\n\n.margin-1 {\n margin-bottom: 10px;\n}\n\n.results-summary-container__result {\n width: 100%;\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n justify-content: center;\n padding: 20px;\n border-radius: 30px;\n background-image: linear-gradient(to bottom, #734b6d, #42275a);\n animation: gradient 9s infinite alternate linear;\n .result-box {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n background-image: linear-gradient(-45deg, #ef629f, #42275a);\n background-color: #56ab2f;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n animation: gradient 9s linear infinite;\n}\n\n.result {\n margin-top: -8px;\n font-size: 16px;\n font-weight: 400;\n color: hsl(241, 100%, 89%);\n}\n}\n\n.btn {\n width: 240px;\n padding: 10px;\n color: #ffffff;\n background-image: linear-gradient(to right, #aa076b, #61045f);\n border: none;\n border-radius: 100px;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 3px;\n font-weight: 500;\n cursor: pointer;\n margin: 20px 0 2px 0;\n transition: all 0.3s;\n}\n\n.btn:hover {\n transform: translateY(5px);\n background-image: linear-gradient(to left, #aa076b, #61045f);\n}\n\n@keyframes gradient {\n 0% {\n background-position: 0% 50%;\n background-image: linear-gradient(-45deg, #ef629f, #42275a);\n }\n\n 50% {\n background-position: 100% 50%;\n background-image: linear-gradient(to bottom, #aa076b, #61045f);\n }\n\n 100% {\n background-position: 0% 50%;\n background-image: linear-gradient(to top, #ef629f, #42275a);\n }\n}\n\n.confetti {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 300px;\n height: 60%;\n overflow: hidden;\n z-index: 1000;\n}\n\n.confetti-piece {\n position: absolute;\n width: 10px;\n height: 20px;\n background-color: hsl(39, 100%, 56%);\n top: 0;\n opacity: 0;\n animation: makeItRain 3000ms infinite linear;\n}\n\n.confetti-piece:nth-child(1) {\n left: 7%;\n transform: rotate(-10deg);\n animation-delay: 182ms;\n animation-duration: 2000ms;\n}\n\n.confetti-piece:nth-child(2) {\n left: 14%;\n transform: rotate(20deg);\n animation-delay: 161ms;\n animation-duration: 2076ms;\n}\n\n.confetti-piece:nth-child(3) {\n left: 21%;\n transform: rotate(-51deg);\n animation-delay: 481ms;\n animation-duration: 2103ms;\n}\n\n.confetti-piece:nth-child(4) {\n left: 28%;\n transform: rotate(61deg);\n animation-delay: 334ms;\n animation-duration: 1008ms;\n}\n\n.confetti-piece:nth-child(5) {\n left: 35%;\n transform: rotate(-52deg);\n animation-delay: 302ms;\n animation-duration: 1776ms;\n}\n\n.confetti-piece:nth-child(6) {\n left: 42%;\n transform: rotate(38deg);\n animation-delay: 180ms;\n animation-duration: 1168ms;\n}\n\n.confetti-piece:nth-child(7) {\n left: 49%;\n transform: rotate(11deg);\n animation-delay: 395ms;\n animation-duration: 1200ms;\n}\n\n.confetti-piece:nth-child(8) {\n left: 56%;\n transform: rotate(49deg);\n animation-delay: 14ms;\n animation-duration: 1887ms;\n}\n\n.confetti-piece:nth-child(9) {\n left: 63%;\n transform: rotate(-72deg);\n animation-delay: 149ms;\n animation-duration: 1805ms;\n}\n\n.confetti-piece:nth-child(10) {\n left: 70%;\n transform: rotate(10deg);\n animation-delay: 351ms;\n animation-duration: 2059ms;\n}\n\n.confetti-piece:nth-child(11) {\n left: 77%;\n transform: rotate(4deg);\n animation-delay: 307ms;\n animation-duration: 1132ms;\n}\n\n.confetti-piece:nth-child(12) {\n left: 84%;\n transform: rotate(42deg);\n animation-delay: 464ms;\n animation-duration: 1776ms;\n}\n\n.confetti-piece:nth-child(13) {\n left: 91%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 1818ms;\n}\n\n.confetti-piece:nth-child(14) {\n left: 94%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 818ms;\n}\n\n.confetti-piece:nth-child(15) {\n left: 96%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(16) {\n left: 98%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(17) {\n left: 50%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(18) {\n left: 60%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 1818ms;\n}\n\n.confetti-piece:nth-child(odd) {\n background-color: hsl(0, 100%, 67%);\n}\n\n.confetti-piece:nth-child(even) {\n z-index: 1;\n}\n\n.confetti-piece:nth-child(4n) {\n width: 6px;\n height: 14px;\n animation-duration: 4000ms;\n background-color: #c33764;\n}\n\n.confetti-piece:nth-child(5n) {\n width: 3px;\n height: 10px;\n animation-duration: 4000ms;\n background-color: #b06ab3;\n}\n\n.confetti-piece:nth-child(3n) {\n width: 4px;\n height: 12px;\n animation-duration: 2500ms;\n animation-delay: 3000ms;\n background-color: #dd2476;\n}\n\n.confetti-piece:nth-child(3n-7) {\n background-color: hsl(166, 100%, 37%);\n}\n\n@keyframes makeItRain {\n from {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n transform: translateY(250px);\n }\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"b89811","snapshot":null,"tags":null,"title":"card by laminelawal","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1086,"cssLen":2474,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".phoneContainer {\n width: 185px;\n height: 350px;\n background-color: black;\n border-radius: 20px;\n position: relative;\n}\n\n.screen {\n width: 180px;\n height: 340px;\n background: rgb(255,196,196);\n background: linear-gradient(167deg, rgba(255,196,196,1) 10%, rgba(45,138,253,1) 20%, rgba(34,193,195,1) 48%, rgba(211,216,255,1) 69%, rgba(0,164,24,1) 88%);\n border-radius: 20px;\n position: absolute;\n top: 4px;\n bottom: 2px;\n right: 2px;\n left: 2px;\n box-sizing: border-box;\n}\n\n.camera {\n width: 80px;\n background-color: black;\n position: absolute;\n height: 20px;\n top: 4%;\n right: 50%;\n transform: translate(50%, -50%);\n border-radius: 25px;\n transition: 0.3s;\n animation-name: callTransition;\n animation-duration: 1.9s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n animation-timing-function: ease;\n}\n\n@keyframes callTransition {\n 15% {\n width: 40px;\n }\n\n 95% {\n width: 95px;\n background-color: darkblue;\n }\n}\n\n.camera:before {\n content: \"\";\n width: 15px;\n height: 15px;\n background-color: rgb(19, 19, 51);\n position: absolute;\n border-radius: 50%;\n left: 5px;\n top: 2px;\n}\n\n.camera:after {\n content: \"\";\n width: 5px;\n height: 5px;\n background-color: lightgreen;\n position: absolute;\n border-radius: 50%;\n right: 5px;\n top: 6px;\n}\n\n.appsContainer {\n margin-top: 10px;\n position: absolute;\n right: 50%;\n top: 40%;\n transform: translate(50%, -50%);\n}\n\n.widgets {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n box-sizing: border-box;\n}\n\n.one, .two {\n height: 80px;\n width: 80px;\n background-color: blue;\n border-radius: 10px;\n cursor: pointer;\n}\n\n.two {\n background-color: lightblue;\n}\n\n.oneApp, .twoApp {\n width: 35px;\n height: 35px;\n background-color: white;\n border-radius: 5px;\n margin-top: 10px;\n}\n\n.apps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin-top: 15px;\n margin-left: 5px;\n}\n\n.menuBar {\n display: flex;\n border-radius: 20px;\n position: absolute;\n bottom: -70px;\n}\n\n.menuBar .twoApp:not(:last-child) {\n margin-right: 10px;\n}\n\n.menuBar::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 13px;\n background-color: lightgray;\n border: none;\n border-radius: 20px;\n top: -5px;\n right: 50%;\n transform: translate(50%, -50%);\n}\n\n.menuBar::before {\n content: \"°°°°°°\";\n position: absolute;\n display: flex;\n justify-content: center;\n font-size: 18px;\n font-weight: bolder;\n color: gray;\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"fc50c0","snapshot":null,"tags":null,"title":"card by seyed-mohsen-mousavi","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1100,"cssLen":2459,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Premium

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus rerum\n deleniti eaque ...\n

\n \n \n \n

\n \n glee\n \n \n download\n \n

\n\n","css":".flex {\n display: flex;\n}\n.h-6 {\n height: 1.5rem;\n}\n.w-72 {\n width: 18rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.flex-col {\n flex-direction: column;\n}\n.justify-between {\n justify-content: space-between;\n}\n.justify-around {\n justify-content: space-around;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-b-lg {\n border-bottom-right-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n}\n.border-t-8 {\n border-top-width: 8px;\n}\n.border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(74 222 128 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-slate-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.font-sans {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition-colors {\n transition-property: color, background-color, border-color, fill, stroke,\n -webkit-text-decoration-color;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:bg-slate-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(148 163 184 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"9d3a8a","snapshot":null,"tags":null,"title":"card by Gerente-S4V1T4R","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":2707,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n --background: linear-gradient(to left, #880505 0%, #f36b11 100%);\n width: 190px;\n height: 254px;\n padding: 4px;\n border-radius: 5px;\n overflow: visible;\n display: flex;\n align-items: center;\n background: var(--background);\n position: relative;\n}\n\n.container .box {\n position: relative;\n width: 190px;\n height: 244px;\n background: #1b1b1b;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 10px;\n}\n\n.container .box .content {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n text-align: center;\n gap: 20px;\n padding: 0 20px;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.container .box .content .icon {\n width: 50px;\n height: 50px;\n -webkit-box-shadow: 0 0 0 4px #e6e6e6,\n 0 0 0 6px rgb(212, 10, 10);\n box-shadow: 0 0 0 4px #e6e6e6,\n 0 0 0 6px rgb(212, 10, 10);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: 2.5em;\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n}\n\n.container .box::before {\n content: '';\n position: absolute;\n inset: -10px 50px;\n border-top: 4px solid rgb(99, 89, 247);\n z-index: -1;\n border-bottom: 4px solid rgb(65, 44, 250);\n z-index: -1;\n z-index: -1;\n -webkit-transform: skewY(15deg);\n -ms-transform: skewY(15deg);\n transform: skewY(15deg);\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n}\n\n.container .box:hover::before {\n -webkit-transform: skewY(0deg);\n -ms-transform: skewY(0deg);\n transform: skewY(0deg);\n inset: -10px 40px;\n}\n\n.container .box::after {\n content: '';\n position: absolute;\n inset: 60px -10px;\n border-left: 4px solid #880505;\n z-index: -1;\n border-right: 4px solid #aa551d;\n z-index: -1;\n -webkit-transform: skew(15deg);\n -ms-transform: skew(15deg);\n transform: skew(15deg);\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n}\n\n.container .box:hover::after {\n -webkit-transform: skew(0deg);\n -ms-transform: skew(0deg);\n transform: skew(0deg);\n inset: 40px -10px;\n}\n\n.container .box .content {\n border-radius: 50%;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"d0762a","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":945,"cssLen":4855,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n JR \n

Frontend developer

\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-56 {\n height: 14rem\n}\n\n.w-80 {\n width: 20rem\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.gap-2 {\n gap: 0.5rem\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.text-6xl {\n font-size: 3.75rem;\n line-height: 1\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\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-sky-500 {\n --tw-shadow-color: #0ea5e9;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline {\n outline-style: solid\n}\n\n.-outline-offset-8 {\n outline-offset: -8px\n}\n\n.outline-slate-400 {\n outline-color: #94a3b8\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\\: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\\:h-12::after {\n content: var(--tw-content);\n height: 3rem\n}\n\n.after\\:h-24::after {\n content: var(--tw-content);\n height: 6rem\n}\n\n.after\\:w-12::after {\n content: var(--tw-content);\n width: 3rem\n}\n\n.after\\:w-24::after {\n content: var(--tw-content);\n width: 6rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-sky-700::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / 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.hover\\:duration-500:hover {\n transition-duration: 500ms\n}\n\n.hover\\:before\\:-translate-x-32:hover::before {\n content: var(--tw-content);\n --tw-translate-x: -8rem;\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.hover\\:before\\:translate-y-12:hover::before {\n content: var(--tw-content);\n --tw-translate-y: 3rem;\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.hover\\:after\\:translate-x-24:hover::after {\n content: var(--tw-content);\n --tw-translate-x: 6rem;\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.hover\\:after\\:duration-500:hover::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}"}]}},"actionData":null,"errors":null}