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

\n \n \n \n

Lorem ipsum

Soluta dolor praesentium at quod autem omnis, amet earum nesciunt porro.

","css":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 350px;\n background: #444;\n border-radius: 10px;\n}\n\n.card {\n position: relative;\n background: #333;\n width: 250px;\n height: 350px;\n border-radius: 10px;\n padding: 2rem;\n color: #aaa;\n box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),\n 0 0 1rem rgba(0,0,0,0.2);\n overflow: hidden;\n}\n\n.card__image-container {\n margin: -2rem -2rem 1rem -2rem;\n}\n\n.card__line {\n opacity: 0;\n animation: LineFadeIn .8s .8s forwards ease-in;\n}\n\n.card__image {\n opacity: 0;\n animation: ImageFadeIn .8s 1.4s forwards;\n}\n\n.card__title {\n color: white;\n margin-top: 35px;\n margin-bottom: 10px;\n font-weight: 800;\n letter-spacing: 0.01em;\n}\n\n.card__content {\n margin-top: -1rem;\n opacity: 0;\n animation: ContentFadeIn .8s 1.6s forwards;\n}\n\n.card__svg {\n position: absolute;\n left: 0;\n top: 115px;\n}\n\n@keyframes LineFadeIn {\n 0% {\n opacity: 0;\n d: path(\"M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 \");\n stroke: #fff;\n }\n\n 50% {\n opacity: 1;\n d: path(\"M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300\");\n stroke: #888BFF;\n }\n\n 100% {\n opacity: 1;\n d: path(\"M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400\");\n stroke: #545581;\n }\n}\n\n@keyframes ContentFadeIn {\n 0% {\n transform: translateY(-1rem);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes ImageFadeIn {\n 0% {\n transform: translate(-.5rem, -.5rem) scale(1.05);\n opacity: 0;\n filter: blur(2px);\n }\n\n 50% {\n opacity: 1;\n filter: blur(2px);\n }\n\n 100% {\n transform: translateY(0) scale(1.0);\n opacity: 1;\n filter: blur(0);\n }\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"f4d9c7","snapshot":null,"tags":null,"title":"card by EddyBel","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1479,"cssLen":7242,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Preview

\n \n

10:19

The Backwards Brain Bicycle - Smarter Every Day 133\" by Destin Sandlin

SmarterEveryDay

519.7K Views

3 months ago

","css":"/* In this section you start by assigning a shape to the letter and an assigned size. */\n.card {\n --rounded: 20px;\n --size: 270px;\n width: var(--size);\n height: calc(var(--size) - 10px);\n border-radius: var(--rounded);\n background: #fff;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n/* With the before property assigns the gradient that will be used as background for the chart. */\n.card::before {\n --size: 100%;\n --blur: 20px;\n content: \"\";\n position: absolute;\n width: var(--size);\n height: var(--size);\n filter: blur(var(--blur));\n background-color: #faff99;\n background-image: radial-gradient(at 33% 82%, hsla(254,71%,69%,1) 0px, transparent 50%),\n radial-gradient(at 28% 4%, hsla(289,96%,63%,1) 0px, transparent 50%),\n radial-gradient(at 69% 49%, hsla(309,91%,71%,1) 0px, transparent 50%),\n radial-gradient(at 94% 14%, hsla(232,66%,62%,1) 0px, transparent 50%),\n radial-gradient(at 19% 93%, hsla(51,98%,74%,1) 0px, transparent 50%),\n radial-gradient(at 15% 80%, hsla(194,87%,63%,1) 0px, transparent 50%),\n radial-gradient(at 56% 52%, hsla(109,71%,61%,1) 0px, transparent 50%);\n}\n\n/* Cover the chart with a light white tone, this helps the gradient colors to be less aggressive. */\n.card::after {\n --size: 100%;\n content: \"\";\n position: absolute;\n width: var(--size);\n height: var(--size);\n background: rgba(255, 255, 255, 0.5);\n}\n\n/* \nIn this section you define where the video cover will be displayed.\nModify the background-image with the address of the cover to use. */\n.card__view {\n position: absolute;\n height: 55%;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n z-index: 1;\n background-image: linear-gradient(to right bottom, #fff, #e2e2e2);\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n/* When hovering over the element you can see the video preview. */\n/* Place in the HTML an \"iframe\" tag with the address of the youtube video to show as preview. \n The iframe tag must be a child of the div with the class \"card__view\".\n Also place a class with name \"preview__video\". */\n.card:hover .preview__video {\n opacity: 100;\n}\n\n.preview__video {\n transition: opacity 300ms;\n opacity: 0;\n}\n\n\n/* In this section you define the size and position of the section that will contain the video content. */\n.card__content {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 40%;\n left: 0;\n right: 0;\n bottom: 0;\n padding-left: 9px;\n padding-right: 9px;\n color: #000;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.channel__video__name {\n font-size: 0.8em;\n margin-bottom: 10px;\n max-height: 50%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: bold;\n color: #000;\n}\n\n.channel__data {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n/* In this section you assign the image of the channel that owns the video, modify the parameter \"background-image\" by the address of the channel cover. */\n.channel__img {\n --size-channel: 35px;\n --rounded: 50%;\n --duration: 300ms;\n min-width: var(--size-channel);\n min-height: var(--size-channel);\n border-radius: var(--rounded);\n transition: transform var(--duration);\n background-repeat: no-repeat;\n background-size: cover;\n background-color: #99cfff;\n background-image: radial-gradient(at 6% 14%, hsla(234,90%,72%,1) 0px, transparent 50%),\n radial-gradient(at 9% 73%, hsla(298,79%,64%,1) 0px, transparent 50%),\n radial-gradient(at 50% 38%, hsla(196,72%,75%,1) 0px, transparent 50%),\n radial-gradient(at 61% 82%, hsla(288,92%,79%,1) 0px, transparent 50%),\n radial-gradient(at 91% 67%, hsla(170,86%,66%,1) 0px, transparent 50%),\n radial-gradient(at 83% 29%, hsla(289,73%,63%,1) 0px, transparent 50%),\n radial-gradient(at 93% 34%, hsla(191,88%,75%,1) 0px, transparent 50%);\n}\n\n.channel__img:hover {\n transform: scale(1.08);\n}\n\n.channel__data__text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n width: 100%;\n}\n\n.channel__subdata {\n display: flex;\n gap: 10px;\n}\n\n.channel__name {\n font-size: 0.8em;\n transition: color 400ms;\n}\n\n.channel__views, .channel__date {\n font-size: 0.6em;\n}\n\n.card__view__data {\n position: absolute;\n bottom: 0;\n width: 100%;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding: 8px;\n box-sizing: border-box;\n pointer-events: none;\n}\n\n.card__lenght, .card__play__icon, .card__view__preview {\n background: rgba(0, 0, 0, 0.5);\n padding: 5px;\n border-radius: 6px;\n font-size: 0.6em;\n font-weight: bold;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.card__play__icon {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 30px;\n}\n\n.card__view__preview {\n opacity: 0;\n transform: translateY(-10px);\n transition: opacity 900ms, transform 900ms;\n}\n\n.card:hover .card__view__preview {\n opacity: 100;\n transform: translateY(0px);\n}\n\n/* List of other colors you can use */\n.card:nth-child(2n)::before {\n background-color: #ffd399;\n background-image: radial-gradient(at 15% 65%, hsla(249,84%,60%,1) 0px, transparent 50%),\n radial-gradient(at 38% 24%, hsla(197,80%,66%,1) 0px, transparent 50%),\n radial-gradient(at 65% 93%, hsla(228,83%,60%,1) 0px, transparent 50%),\n radial-gradient(at 16% 58%, hsla(314,83%,72%,1) 0px, transparent 50%),\n radial-gradient(at 77% 57%, hsla(298,90%,78%,1) 0px, transparent 50%),\n radial-gradient(at 76% 95%, hsla(178,64%,76%,1) 0px, transparent 50%),\n radial-gradient(at 15% 61%, hsla(248,75%,64%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(3n)::before {\n background-color: #99b3ff;\n background-image: radial-gradient(at 93% 72%, hsla(293,71%,70%,1) 0px, transparent 50%),\n radial-gradient(at 28% 37%, hsla(252,81%,71%,1) 0px, transparent 50%),\n radial-gradient(at 25% 59%, hsla(158,67%,62%,1) 0px, transparent 50%),\n radial-gradient(at 48% 16%, hsla(197,69%,63%,1) 0px, transparent 50%),\n radial-gradient(at 70% 56%, hsla(171,69%,70%,1) 0px, transparent 50%),\n radial-gradient(at 7% 33%, hsla(65,65%,79%,1) 0px, transparent 50%),\n radial-gradient(at 89% 22%, hsla(286,64%,72%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(4n)::before {\n background-color: #e2ff99;\n background-image: radial-gradient(at 22% 80%, hsla(265,77%,67%,1) 0px, transparent 50%),\n radial-gradient(at 91% 77%, hsla(292,60%,78%,1) 0px, transparent 50%),\n radial-gradient(at 66% 7%, hsla(46,95%,76%,1) 0px, transparent 50%),\n radial-gradient(at 16% 32%, hsla(275,90%,75%,1) 0px, transparent 50%),\n radial-gradient(at 26% 23%, hsla(283,60%,69%,1) 0px, transparent 50%),\n radial-gradient(at 2% 64%, hsla(208,62%,62%,1) 0px, transparent 50%),\n radial-gradient(at 62% 77%, hsla(112,88%,75%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(5n)::before {\n background-color: #99d1ff;\n background-image: radial-gradient(at 21% 94%, hsla(270,95%,76%,1) 0px, transparent 50%),\n radial-gradient(at 56% 5%, hsla(252,65%,79%,1) 0px, transparent 50%),\n radial-gradient(at 67% 94%, hsla(194,81%,67%,1) 0px, transparent 50%),\n radial-gradient(at 15% 72%, hsla(304,97%,77%,1) 0px, transparent 50%),\n radial-gradient(at 63% 56%, hsla(38,98%,63%,1) 0px, transparent 50%),\n radial-gradient(at 41% 67%, hsla(321,61%,77%,1) 0px, transparent 50%),\n radial-gradient(at 68% 68%, hsla(263,67%,69%,1) 0px, transparent 50%);\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"0b511b","snapshot":null,"tags":null,"title":"card by Darlley","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25504,"cssLen":1969,"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","css":".absolute{position:absolute}.relative{position:relative}.-bottom-4{bottom:-1rem}.-left-0{left:-0px}.-left-4{left:-1rem}.-right-0{right:-0px}.-right-4{right:-1rem}.-top-\\[4px\\]{top:-4px}.bottom-8{bottom:2rem}.left-\\[45px\\]{left:45px}.right-\\[40\\%\\]{right:40%}.right-\\[45px\\]{right:45px}.top-20{top:5rem}.z-0{z-index:0}.z-\\[2\\]{z-index:2}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-20{height:5rem}.h-\\[200px\\]{height:200px}.h-\\[40px\\]{height:40px}.h-full{height:100%}.w-20{width:5rem}.w-\\[200px\\]{width:200px}.w-\\[40px\\]{width:40px}.w-full{width:100%}.border-spacing-4{--tw-border-spacing-x:1rem;--tw-border-spacing-y:1rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-gray-400\\/50{border-color:rgb(156 163 175 / 0.5)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-cover{background-size:cover}.object-cover{object-fit:cover}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-\\[2px\\]{padding:2px}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.hover\\:scale-95:hover{--tw-scale-x:.95;--tw-scale-y:.95;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))}.hover\\:border-gray-400\\/50:hover{border-color:rgb(156 163 175 / 0.5)}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;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))}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"b266ab","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":722,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

YOUR
CONTENT
HERE

\n","css":".card {\n --bg: #f1f1f1;\n --contrast: #f9f9f9;\n --grey: #d9d9d9;\n position: relative;\n padding: 12px;\n background-color: var(--bg);\n border-radius: 20px;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -10px;\n}\n\n.card-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: repeating-linear-gradient(45deg, var(--bg), var(--grey) 20px);\n filter: opacity(15%);\n}\n\n.card-inner {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: 180px;\n height: 240px;\n background-color: var(--contrast);\n border-radius: 25px;\n /* Content style */\n font-size: 26px;\n font-weight: 700;\n color: #555;\n text-align: center;\n font-family: Arial, sans-serif;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"2edbed","snapshot":null,"tags":null,"title":"card by Jarol20cb","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":795,"cssLen":826,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n // Código de ejemplo\n function example()\n {\n let message = \"Hello, World!\";\n console.log(message);\n }\n

\n","css":".card {\n width: 200px;\n height: 200px;\n background-color: #f9f9f9;\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n position: relative;\n}\n\n.code-container {\n background-color: #222;\n border-radius: 8px;\n padding: 16px;\n}\n\n.line {\n display: block;\n color: #fff;\n font-size: 14px;\n line-height: 1.5;\n margin: 4px 0;\n position: relative;\n}\n\n.code-comment {\n color: #5c6370;\n}\n\n.code-keyword {\n color: #c678dd;\n}\n\n.code-function {\n color: #61afef;\n}\n\n.code-variable {\n color: #dcdcaa;\n}\n\n.code-string {\n color: #98c379;\n}\n\n.indent {\n padding-left: 20px;\n}\n\n/* Animación */\n@keyframes float {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n.float-animation {\n animation: float 2s ease-in-out infinite;\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"d6052d","snapshot":null,"tags":null,"title":"card by eduardo-amaro-maciel","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":946,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Hello\n

\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n

\n Hover\n

","css":".container {\n margin: 0 auto;\n}\n\n.card {\n position: relative;\n width: 200px;\n height: 300px;\n margin: 0 auto;\n background: #000;\n border-radius: 15px;\n box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);\n}\n\n.face {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.face.back {\n box-sizing: border-box;\n padding: 20px;\n}\n\n.face.back b {\n margin: 0;\n padding: 0;\n}\n\n.face.back .desc {\n background-color: #eee;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.face.front {\n transition: 0.5s;\n}\n\n.face.front b {\n margin: 0;\n padding: 0;\n font-size: 5.1em;\n color: #fff;\n transition: 0.5s;\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n z-index: 10;\n}\n\n.card:hover .face.front {\n height: 60px;\n}\n\n.card:hover .face.front b {\n font-size: 2em;\n}\n\n.face.front {\n background-color: #0cbaba;\n border-radius: 15px;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"6721c3","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":330,"cssLen":548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n In this article\n

Try it

Syntax

Formal definition

Formal syntax

Examples

\n Corporate\n

Grow steadily and pizza.

\n \n $35\n \n /mo \n

\n \n Get started\n \n

","css":".mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-6 {\n margin-top: 1.5rem\n}\n\n.flex {\n display: flex\n}\n\n.grid {\n display: grid\n}\n\n.w-full {\n width: 100%\n}\n\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr))\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.rounded-3xl {\n border-radius: 1.5rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem\n}\n\n.pb-8 {\n padding-bottom: 2rem\n}\n\n.text-left {\n text-align: left\n}\n\n.text-center {\n text-align: center\n}\n\n.text-5xl {\n font-size: 3rem;\n line-height: 1\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-light {\n font-weight: 300\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.tracking-tight {\n letter-spacing: -0.025em\n}\n\n.tracking-tighter {\n letter-spacing: -0.05em\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.text-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(243 244 246 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:border-white:hover {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.hover\\:bg-transparent:hover {\n background-color: transparent\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus-visible\\:outline-white:focus-visible {\n outline-color: #fff\n}\n\n.focus-visible\\:ring-white:focus-visible {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))\n}\n\n@media (min-width: 640px) {\n .sm\\:p-10 {\n padding: 2.5rem\n }\n\n .sm\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n }\n\n .sm\\:pb-6 {\n padding-bottom: 1.5rem\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"827d03","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1292,"cssLen":3069,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n To the moon!\n

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

\n","css":".card {\n width: 290px;\n height: 350px;\n background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%);\n background-size: 300%,300%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 15px;\n box-shadow: 5px 5px 15px 5px #000000;\n overflow: hidden;\n transition: all 1s ease;\n}\n\n.moon {\n width: 70px;\n height: 70px;\n top: 15%;\n right: 120px;\n position: absolute;\n fill: white;\n transform: rotate(-20deg);\n transition: all 1s ease;\n}\n\n.rocket {\n width: 70px;\n height: 70px;\n bottom: -2%;\n left: -2%;\n position: absolute;\n fill: white;\n transition: all 1.9s ease;\n}\n\n.star {\n position: absolute;\n background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n\n.star-1 {\n width: 100px;\n height: 100px;\n bottom: 90px;\n left: -15px;\n transition: all 1s ease;\n}\n\n.star-2 {\n width: 150px;\n height: 150px;\n top: -10%;\n left: -10%;\n transition: all .5s ease;\n}\n\n.star-3 {\n width: 100px;\n height: 100px;\n bottom: 5%;\n right: -15px;\n transition: all .3s ease;\n}\n\n.star-4 {\n width: 20px;\n height: 20px;\n top: 4%;\n right: 5px;\n transition: all 1.4s ease;\n}\n\n.star-5 {\n width: 20px;\n height: 20px;\n bottom: 24%;\n right: 45%;\n animation: rotate 3s normal linear infinite;\n}\n\n.star-6 {\n width: 20px;\n height: 20px;\n top: 14%;\n right: 25%;\n animation: rotate 5s normal linear infinite;\n}\n\n.star-7 {\n width: 40px;\n height: 40px;\n top: 34%;\n right: 65%;\n animation: rotate 5s normal linear infinite;\n}\n\n.card-info span {\n font-size: 1.2em;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n transition: all 1s ease;\n}\n\n.card:hover {\n background: rgb(48,48,48);\n background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%);\n background-size: 100%,100%;\n}\n\n.card:hover .star-1,\n.card:hover .star-3 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(10deg);\n}\n\n.card:hover .star-2,\n.card:hover .star-4,\n.card:hover .star-5 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(-150deg);\n}\n\n.card:hover .rocket {\n transform: scale(.3) translate(450px,-730px) rotate(-260deg);\n}\n\n.card:hover .moon {\n width: 50px;\n height: 50px;\n}\n\n.card:hover span {\n font-size: 1.5em;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n\n 25% {\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n }\n\n 50% {\n -webkit-transform: rotate3d(0, 0, 1, 180deg);\n transform: rotate3d(0, 0, 1, 180deg);\n }\n\n 75% {\n -webkit-transform: rotate3d(0, 0, 1, 270deg);\n transform: rotate3d(0, 0, 1, 270deg);\n }\n\n 100% {\n -webkit-transform: rotate3d(0, 0, 1, 360deg);\n transform: rotate3d(0, 0, 1, 360deg);\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"60ca9a","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":485,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity))\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n\n.bg-yellow-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 179 8 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"}]}},"actionData":null,"errors":null}