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

\n 03\n 40\n

\n Touch to unlock\n

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

\n \n

Hold Me : )

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

\n\t

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

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

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

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

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

","css":"@keyframes fadeInScale {\n 0% {\n opacity: 0;\n transform: scale(0) translateY(50%);\n }\n\n 90% {\n transform: scale(1.05);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n.container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card {\n position: relative;\n width: 20em;\n background-color: #292929;\n transition: all .3s ease-in-out;\n}\n\n.card:hover {\n box-shadow: 0 10px 20px 10px rgba(black, .2);\n}\n\n.card__link {\n display: block;\n padding: 1em;\n text-decoration: none;\n}\n\n.card__icon {\n position: absolute;\n width: 4em;\n height: 4em;\n transition: all .3s ease-in-out;\n}\n\n.card:hover .card__icon {\n opacity: 0;\n transform: scale(0);\n}\n\n.card__media {\n padding: 2em 0;\n}\n\n.card__media\tsvg path {\n opacity: 0;\n transition: all .3s ease-in-out;\n transform-origin: center center;\n}\n\n.card:hover svg path {\n animation: fadeInScale .3s ease-in-out forwards;\n}\n\n.card:hover \tsvg path:nth-child(2) {\n animation-delay: .1s;\n}\n\n.card:hover \tsvg path:nth-child(3) {\n animation-delay: .2s;\n}\n\n.card__header {\n position: relative;\n}\n\n.card__header-title {\n margin: 0 0 .25em;\n color: white;\n}\n\n.card__header-meta {\n margin: 0;\n color: #999;\n}\n\n.card__header-icon {\n opacity: 0;\n position: absolute;\n right: 0;\n top: 50%;\n margin-top: -1em;\n transform: translateX(-20%);\n width: 2em;\n height: 2em;\n transition: all .3s ease-in-out;\n}\n\n.card:hover .card__header-icon {\n opacity: 1;\n transform: translateX(0);\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"c6a035","snapshot":null,"tags":null,"title":"card by mohamedkhire","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":228,"cssLen":1002,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

\n","css":".card::before {\n border-radius: 50%;\n width: 7rem;\n height: 7rem;\n top: 20%;\n}\n\n.card::before,\n.card::after {\n content: \"\";\n background-color: #7090fa4b;\n position: absolute;\n filter: blur(10px);\n}\n\n.cards {\n display: flex;\n gap: 40px;\n}\n\n.cards .red,\n.cards .blue,\n.cards .green {\n width: 200px;\n height: 180px;\n font-family: \"CustomFont\", Arial, Helvetica, sans-serif;\n font-size: 24px;\n font-weight: 600;\n backdrop-filter: blur(30px);\n background-color: rgba(65, 65, 65, 0.11);\n border: 1px solid rgba(144, 161, 255, 0.171);\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-radius: 10px;\n color: rgb(0, 0, 0);\n cursor: pointer;\n transition: 400ms;\n}\n\n.cards .card p.tip {\n font-size: 1em;\n font-weight: 700;\n}\n\n.cards .card p.second-text {\n font-size: 0.7em;\n}\n\n.cards .card:hover {\n transform: scale(1.1, 1.1);\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(5px);\n transform: scale(0.9, 0.9);\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"652d08","snapshot":null,"tags":null,"title":"card by Gaurav-WebDev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":772,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

","css":".card {\n width: 190px;\n height: 254px;\n background: lightgray;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2em;\n color: #333;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n border-radius: 40px;\n cursor: pointer;\n position: relative;\n transition: all 0.7s ease-in-out;\n overflow: hidden;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n height: 40%;\n width: 100%;\n background-color: #088080;\n bottom: 0;\n right: 0;\n transform: translatey(70px);\n border-radius: 100%;\n transition: all 0.7s ease-in-out;\n}\n\n.c-txt {\n z-index: 2;\n}\n\n.card:hover::before {\n transform: scale(7) translate(-20px);\n}\n\n.card:hover {\n box-shadow: 1px -10px 500px 500px #9fe4e44a;\n color: #f3f3f3;\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"7c6831","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2349,"cssLen":2296,"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 Stance and Aim\n

Visualize the trajectory and mentally aim for your desired spot.

\n Challenge\n

\n","css":".card {\n width: 370px;\n height: 270px;\n background: linear-gradient(120deg, rgba(255,237,57,1) 0%, rgba(247,253,45,1) 100%);\n ;\n position: relative;\n display: flex;\n justify-content: center;\n padding: 20px;\n border-radius: 15px;\n transition: all 0.5s ease;\n}\n\n.card::before {\n content: 'Dart';\n position: absolute;\n width: 0px;\n height: 60px;\n border-left: 30px solid #3A486F;\n border-right: 30px solid #3A486F;\n border-bottom: 10px solid transparent;\n top: -10px;\n left: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 8px;\n text-transform: uppercase;\n transition: all 0.5s ease;\n}\n\n.svg-icon {\n width: 5em;\n height: 5em;\n fill: #3A486F;\n}\n\n.svgContainer {\n height: 100px;\n width: 100px;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svgContainer svg {\n position: absolute;\n overflow: visible;\n}\n\n.dartboard {\n width: 2em;\n height: 2em;\n padding: 6px;\n border: 3px solid #3A486F;\n border-radius: 50%;\n transition: all 0.5s ease;\n transform: scale(2) rotate(34deg);\n}\n\n.eyehole {\n transform: scale(1.2) rotate(-270deg);\n transition: all 0.5s ease;\n}\n\n.batman {\n transition: all .4s ease-in;\n transform: rotate(55deg) translate(240px, -45px) scale(1.2);\n}\n\n.svg-fill-primary {\n fill: #242424;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n justify-content: end;\n text-align: center;\n gap: 10px;\n align-items: center;\n}\n\n.card span {\n font-size: 20px;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.card-info p {\n color: #3A486F;\n font-weight: 600;\n}\n\n.card-info .challengeButton {\n text-decoration: none;\n background-color: #343434;\n color: white;\n padding: 5px 15px;\n border-radius: 10px;\n box-sizing: border-box;\n transition: all 0.5s ease;\n}\n\n.card:hover {\n box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.83);\n}\n\n.card:hover .batman {\n transform: rotate(-50deg) translate(12px, 2px);\n}\n\n.card:hover .eyehole {\n transform: scale(1);\n}\n\n.card:hover .dartboard {\n transform: scale(1) rotate(0deg) translate(0, 0);\n}\n\n.challengeButton:hover {\n background-color: #3A486F;\n}\n\n.card:hover::before {\n border-left: 30px solid #182445;\n border-right: 30px solid #182445;\n border-bottom: 10px solid transparent;\n top: -15px;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d70631","snapshot":null,"tags":null,"title":"card by MohamedSSuhail","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9046,"cssLen":1901,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Web Design templates Selection

\n Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod.\n

\n 135 Works /\n 45%\n

\n","css":".card {\n --main-color: #000;\n --bg-color: #64ccc5;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n width: 300px;\n padding: 25px;\n background: var(--bg-color);\n border-radius: 20px;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.card___wrapper-acounts {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n z-index: 1;\n cursor: pointer;\n}\n\n.card___wrapper-acounts > div:nth-child(2) {\n position: absolute;\n left: 25px;\n z-index: -1;\n}\n\n.card___wrapper-acounts > div:nth-child(3) {\n position: absolute;\n left: 50px;\n z-index: -2;\n}\n\n.card__score {\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background: var(--main-color);\n}\n\n.card__acounts {\n width: 42px;\n height: 42px;\n}\n\n.card__acounts svg {\n width: 100%;\n height: 100%;\n}\n\n.card__menu {\n width: 40px;\n height: 40px;\n background: #dafffb;\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.card__title {\n margin-top: 50px;\n font-weight: 900;\n font-size: 25px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 15px;\n font-weight: 400;\n font-size: 15px;\n color: var(--main-color);\n}\n\n.card__indicator {\n margin-top: 50px;\n font-weight: 500;\n font-size: 14px;\n color: var(--main-color);\n}\n\n.card__progress progress {\n width: 100%;\n height: 4px;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-bar {\n background-color: #00000030;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-value {\n background-color: var(--main-color);\n border-radius: 100px;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"be59e0","snapshot":null,"tags":null,"title":"card by wztd","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":295,"cssLen":2280,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

🫠

Easy Cheesy

This cheesy, juicy ultimate comforting lunch or quick and easy dinner recipe.

\n See the recipe\n

","css":".card {\n --background: #fff;\n --cardShadow: rgba(32,33,37,.1);\n --cardShadowHover: rgba(32,33,37,.06);\n --cardShadowActive: rgba(32,33,37,.55);\n --cardBorder: #dbdce0;\n --cardBorderActive: #1a73e8;\n --textColor: #202125;\n --linkColor: #1967d2;\n --ratingColor: #faab00;\n}\n\n@media (prefers-color-scheme: dark) {\n .card {\n --background: #3c4043;\n --cardShadow: rgba(0,0,0,.28);\n --cardShadowHover: rgba(0,0,0,.16);\n --cardShadowActive: rgba(0,0,0,.55);\n --cardBorder: #202125;\n --cardBorderActive: #8ab4f8;\n --textColor: #e9eaee;\n --linkColor: #8ab4f8;\n }\n}\n\n.card {\n width: 250px;\n height: 350px;\n aspect-ratio: 2/3;\n background: var(--background);\n color: var(--textColor);\n border: 1px solid var(--cardBorder);\n padding: 25px;\n box-shadow: 8px 8px 0 var(--cardShadow);\n transition: box-shadow .5s, transform .5s;\n border-radius: 8px;\n display: inline-block;\n}\n\n.card:hover {\n transform: translate(-2px, -4px);\n box-shadow: 16px 16px 0 var(--cardShadowHover);\n}\n\n.card:active {\n transform: translate(-2px, -4px);\n border: 2px solid var(--cardBorderActive);\n box-shadow: 4px 4px 0 var(--cardShadowActive);\n}\n\n.card > .icon,\n.card > .title,\n.card > .description {\n margin-bottom: 0.7em;\n cursor: default;\n user-select: none;\n}\n\n.card > .title {\n margin-top: 1.5em;\n font-weight: bold;\n}\n\n.card > .description {\n line-height: 1.5em;\n min-height: 6em;\n}\n\n.card > .icon {\n font-size: 3em;\n margin-bottom: .2em;\n}\n\n.card > .rating {\n font-size: 1.5em;\n margin-bottom: 0.8em;\n color: var(--ratingColor);\n font-weight: bold;\n position: relative;\n width: max-content;\n}\n\n.card > .rating:before {\n content: \"☆☆☆☆☆\";\n}\n\n.card > .rating:after {\n content: \"★★★★★\";\n position: absolute;\n left: 0;\n z-index: 0;\n width: calc(var(--rating) * 1%);\n overflow: hidden;\n}\n\n.card > .link {\n margin-bottom: 1rem;\n color: var(--linkColor);\n font-size: .8em;\n font-weight: 600;\n}\n\n/* Optional ~ Link the whole card */\n.card > .link::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.card > .link:after {\n content: \"↗\";\n display: inline-block;\n margin-left: .3em;\n transition: transform .3s ease-in-out;\n}\n\n.card:hover > .link:after {\n transform: translate(.2em, -.2em);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"e8c0eb","snapshot":null,"tags":null,"title":"card by xantha01","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2756,"cssLen":2795,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n
Picture 1

\n\n

\n \n
Picture 2

\n\n

\n \n
Picture 3

\n\n

\n \n
Picture 4

","css":".container {\n position: relative;\n width: 225px;\n height: 325px;\n cursor: pointer;\n}\n\n.card {\n position: absolute;\n inset: 2.5px;\n border-radius: 10px;\n transform-origin: bottom left;\n transition: 0.3s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #f1f4f7;\n font-weight: bold;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);\n}\n\n.container:hover .card:nth-child(1) {\n animation: cardAnimation1 4s 0.5s infinite ease;\n}\n\n.container:hover .card:nth-child(2) {\n animation: cardAnimation2 4s 1s infinite ease;\n}\n\n.container:hover .card:nth-child(3) {\n animation: cardAnimation3 4s 1.5s infinite ease;\n}\n\n.container:hover .card:nth-child(4) {\n animation: cardAnimation4 4s 2s infinite ease;\n}\n\n.card:nth-child(1) {\n background: linear-gradient(0deg, #4776e6 0%, #8e54e9 100%);\n}\n\n.card:nth-child(2) {\n background: linear-gradient(0deg, #b3ffab 0%, #12fff7 100%);\n opacity: 0;\n}\n\n.card:nth-child(3) {\n background: linear-gradient(178deg, #ffb99a 0%, #ffdbc5 100%);\n opacity: 0;\n}\n\n.card:nth-child(4) {\n background: linear-gradient(178deg, #606c88 0%, #3f4c6b 100%);\n opacity: 0;\n}\n\n@keyframes cardAnimation1 {\n 0% {\n transform: rotateZ(0deg);\n opacity: 0;\n z-index: -1;\n }\n\n 25% {\n transform: rotateZ(-20deg);\n opacity: 1;\n z-index: 0;\n }\n\n 50% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(20deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation2 {\n 0% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n\n 45% {\n transform: rotateZ(-15deg);\n z-index: 0;\n opacity: 1;\n }\n\n 60% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(15deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation3 {\n 0% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n\n 45% {\n transform: rotateZ(-20deg);\n z-index: 0;\n opacity: 0;\n }\n\n 60% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(20deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation4 {\n 0% {\n transform: rotateZ(0deg);\n z-index: 0;\n opacity: 0;\n }\n\n 35% {\n transform: rotateZ(-25deg);\n z-index: 0;\n opacity: 0.0;\n }\n\n 75% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 90% {\n transform: rotateZ(25deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: 0;\n opacity: 0;\n }\n}\n\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"c159c8","snapshot":null,"tags":null,"title":"card by akshat-patel28","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":822,"cssLen":1999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Title

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,\n deleniti officia. Aliquam repellendus illum pariatur nesciunt dolor et\n natus consectetur repudiandae suscipit autem distinctio commodi vel sed,\n id inventore modi.\n

\n View More\n \n

","css":".card {\n position: relative;\n width: 350px;\n height: 180px;\n box-sizing: border-box;\n background-color: #212121;\n border: 5px solid #222;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 10px;\n padding: 10px;\n box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,\n rgba(0, 0, 0, 0.23) 0px 6px 6px,\n inset rgba(0, 0, 0, 0.19) 0px 10px 20px,\n inset rgba(0, 0, 0, 0.23) 0px 6px 6px;\n transition: all ease-in-out 0.3s;\n overflow: hidden;\n}\n\n.card:hover {\n box-shadow: rgba(193, 44, 223, 0.19) 0px 10px 20px,\n rgba(193, 44, 223, 0.23) 0px 6px 6px,\n inset rgba(0, 0, 0, 0.19) 0px 10px 20px,\n inset rgba(0, 0, 0, 0.23) 0px 6px 6px;\n border: 5px solid #b671d6;\n}\n\n.card-title {\n margin: 0;\n font-size: 18px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #fff;\n cursor: default;\n}\n\n.card-des {\n margin: 0;\n font-size: 15px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #fff;\n -webkit-box-orient: vertical;\n overflow: hidden;\n display: -webkit-box;\n word-break: break-all;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n cursor: default;\n}\n\n.card-text {\n position: absolute;\n margin: 0;\n font-size: 14px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 400;\n color: #fff;\n right: 20px;\n bottom: 5px;\n display: flex;\n align-items: center;\n gap: 3px;\n opacity: 0;\n transition: all ease-in-out 0.3s;\n animation: textanimate 0.8s alternate infinite;\n cursor: pointer;\n}\n\n.card:hover > .card-text {\n opacity: 1;\n}\n\n@keyframes textanimate {\n 0% {\n right: 20px;\n }\n\n 100% {\n right: 10px;\n }\n}\n\n.arrow-icon {\n font-size: 15px;\n font-weight: 500;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d8318a","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":922,"cssLen":1163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Tarjeta 1

Contenido de la tarjeta 1...

\n\n \n

Tarjeta 2

Contenido de la tarjeta 2...

\n\n \n

Tarjeta 3

Contenido de la tarjeta 3...

\n\n \n

Tarjeta 4

Contenido de la tarjeta 4...

","css":".container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.grid{display:grid}.max-w-md{max-width:28rem}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.gap-6{gap:1.5rem}.rounded-lg{border-radius:0.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / 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)}"}]}},"actionData":null,"errors":null}