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

\n \n

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

\n Read More\n

\n","css":".card {\n position: relative;\n width: 300px;\n height: 400px;\n margin: 20px;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 10px;\n}\n\n.card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 20px;\n background-color: #fff;\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__title {\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.card__text {\n font-size: 16px;\n line-height: 1.5;\n margin-bottom: 20px;\n}\n\n.card__button {\n display: inline-block;\n padding: 10px 20px;\n background-color: #000;\n color: #fff;\n text-decoration: none;\n border-radius: 5px;\n}\n\n.card:hover {\n transform: translateY(-10px);\n}\n\n.card:hover .card__image img {\n transform: scale(1.2);\n}\n\n.card:hover .card__content {\n transform: translateY(-100%);\n}\n\n.card__image {\n height: 400px;\n width: 300px;\n background-color: #000;\n /* you can put img url here */\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"b7cb69","snapshot":null,"tags":null,"title":"card by VassoD","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5985,"cssLen":2143,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Gold Plated

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

CARDHOLDER NAME

\n \n \n \n

9759 2484 5269 6576

12/24

EXP

123

CVC

\n","css":".flip-card {\n background-color: transparent;\n width: 240px;\n height: 154px;\n perspective: 1000px;\n color: white;\n}\n\n.heading_8264 {\n position: absolute;\n font-size: 1em;\n top: 0.75em;\n left: 1em;\n font-weight: 600;\n text-shadow: -0.2px -0.2px 0.2px white, 0.2px -0.2px 0.2px gray,\n -0.2px 0.2px 0.2px white, 0.2px 0.2px 0.2px gray;\n}\n\n.logo {\n position: absolute;\n top: 6.8em;\n left: 11.7em;\n}\n\n.chip {\n position: absolute;\n top: 2.3em;\n left: 1.5em;\n}\n\n.contactless {\n position: absolute;\n top: 3.5em;\n left: 12.4em;\n}\n\n.number {\n position: absolute;\n font-weight: 600;\n letter-spacing: 1px;\n font-size: 0.75em;\n top: 7em;\n left: 1.5em;\n}\n\n.date_8264 {\n position: absolute;\n font-weight: 600;\n font-size: 0.75em;\n top: 9em;\n left: 1.5em;\n letter-spacing: 2px;\n}\n\n.cvc_number {\n position: absolute;\n font-weight: 600;\n font-size: 0.75em;\n top: 9em;\n left: 8.5em;\n letter-spacing: 2px;\n}\n\n.cvc {\n position: absolute;\n font-weight: 600;\n font-size: 5px;\n top: 6.9rem;\n left: 8rem;\n}\n\n.exp {\n position: absolute;\n font-weight: 600;\n font-size: 5px;\n top: 6.9rem;\n left: 3.8rem;\n}\n\n.name {\n position: absolute;\n font-weight: 400;\n font-size: 8.5px;\n top: 15em;\n left: 2em;\n color: #bea35c;\n}\n\n.strip {\n position: absolute;\n background-color: white;\n width: 15em;\n height: 2.25em;\n top: 0;\n border-radius: 1rem 1rem 0 0;\n}\n\n.flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.flip-card:hover .flip-card-inner {\n transform: rotateY(180deg);\n}\n\n.flip-card-front,\n.flip-card-back {\n box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: 1rem;\n}\n\n.flip-card-front {\n background: linear-gradient(135deg, #edcb78, #f7e4b2, #fee08b);\n border: 1px solid white;\n}\n\n.flip-card-back {\n background: linear-gradient(135deg, #fee08b, #f7e4b2, #edcb78);\n transform: rotateY(180deg);\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"67dbbc","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3485,"cssLen":1303,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Honey\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit

\n \n

","css":".card {\n width: 300px;\n height: 300px;\n background: #003566;\n color: white;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n box-sizing: border-box;\n border: 2px solid #001d3d;\n}\n\n.card::before {\n content: \"10%\";\n position: absolute;\n width: 100px;\n height: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n top: -20px;\n left: -20px;\n background-color: red;\n color: white;\n font-weight: 900;\n font-size: 2em;\n clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);\n transform: rotate(40deg);\n}\n\n.card__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n text-align: center;\n}\n\n.card__content span {\n font-size: 1.5em;\n font-weight: 900;\n}\n\n.cart {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n padding: 10px 0px;\n border: none;\n background: #ffd60a;\n color: #003566;\n font-weight: 800;\n transition: all .5s ease;\n cursor: pointer;\n}\n\n.svg-icon {\n fill: #ffd60a;\n transition: all .7s ease;\n}\n\n.cart .svg-icon {\n fill: blue;\n width: 15px;\n}\n\n.cart:hover {\n background: white;\n color: black;\n}\n\n.card:hover .card__content svg {\n transform: scale(1.5) rotate(-25deg);\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"3c8ef6","snapshot":null,"tags":null,"title":"card by Thomasfadi","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

","css":".cards {\n display: flex;\n flex-direction: row;\n gap: 15px;\n}\n\n.cards .red {\n background-color: #007e9e;\n}\n\n.cards .blue {\n background-color: #0062ff;\n}\n\n.cards .green {\n background-color: #18cd5e;\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n height: 100px;\n width: 100px;\n border-radius: 10px;\n color: white;\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: .7em;\n}\n\n.cards .card:hover {\n transform: scale(1.2, 1.2);\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(10px);\n transform: scale(0.9, 0.9);\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"d338d5","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":274,"cssLen":1104,"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 adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?

Autor

","css":"/*Magic card*/\n.card {\n width: 190px;\n height: 254px;\n background: #f5f5f5;\n overflow: visible;\n box-shadow: 0 5px 20px 2px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2em;\n padding: 0 1rem;\n}\n\n.card-img {\n --size: 100px;\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n transform: translateY(-50%);\n background: #42caff;\n background: linear-gradient(to bottom, #42caff 0%, #e81aff 100%);\n position: relative;\n transition: all .3s ease-in-out;\n}\n\n.card-img::before {\n content: \"\";\n border-radius: inherit;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 90%;\n height: 90%;\n transform: translate(-50%, -50%);\n border: 1rem solid #e8e8e8;\n}\n\n/*Text*/\n.text-title {\n text-transform: uppercase;\n font-size: 0.75em;\n color: #42caff;\n letter-spacing: 0.05rem;\n}\n\n.text-body {\n font-size: .8em;\n text-align: center;\n color: #6f6d78;\n font-weight: 400;\n font-style: italic;\n}\n\n/*Hover*/\n.card:hover .card-img {\n --size: 110px;\n width: var(--size);\n height: var(--size);\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"926ac2","snapshot":null,"tags":null,"title":"card by omar-alghaish","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover

","css":".card {\n width: 200px;\n height: 270px;\n background: linear-gradient(45deg,#00cc0a 25%, #00cc0a 25%, #444 25%, #444 50%, #00cc0a 50%, #00cc0a 75%, #444 75%, #444 100%);\n animation: animate_6810 15s linear infinite;\n transition: .3s;\n background-size: 60px 60px;\n position: relative;\n overflow: visible;\n border-radius: 20px;\n}\n\n.card-info {\n position: absolute;\n width: 96%;\n height: 96%;\n left: 2%;\n top: 2%;\n background-color: rgb(24, 22, 22);\n border-radius: 20px;\n transition: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card-info:hover {\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.822);\n backdrop-filter: blur(12px);\n left: 20px;\n top: 20px;\n}\n\n.card-info p {\n color: white;\n font-weight: bold;\n font-size: 30px;\n}\n\n@keyframes animate_6810 {\n 0% {\n background-position: 0px;\n }\n\n 100% {\n background-position: 1000px;\n }\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"0a9bef","snapshot":null,"tags":null,"title":"card by shlomo20","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":574,"cssLen":1341,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Header

Click me

Card Header

Click me

Card Header

Click me

","css":".cards {\n position: relative;\n}\n\n.card {\n z-index: 1;\n position: absolute;\n width: 254px;\n height: 190px;\n border-radius: 10px;\n transition: all .5s ease-out;\n overflow: hidden;\n transform: translateX(0px) translateY(0px) perspective(905px) rotateX(0deg) rotateY(0deg) rotateZ(-8deg);\n}\n\n.card.one {\n top: -120px;\n left: -150px;\n background: linear-gradient(180deg, #FF0055 0%, #000066 100%);\n}\n\n.card.two {\n top: -95px;\n left: -125px;\n background: linear-gradient(180deg, #fa00ff 0%, #01f998 99%);\n}\n\n.card.three {\n top: -70px;\n left: -100px;\n background: linear-gradient(180deg, #c0f901 0%, #fa00ff 100%);\n}\n\n.card:hover {\n z-index: 4;\n transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;\n transition: all .5s ease-out;\n}\n\n.cardDetails {\n width: 55%;\n height: 100%;\n padding: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n background: rgba(0,0,0,0.8);\n transition: .5s;\n transform-origin: left;\n transform: perspective(2000px) rotateY(-90deg);\n}\n\n.card:hover .cardDetails {\n transform: perspective(2000px) rotateY(0deg);\n}\n\n.cardDetailsHaeder {\n font-weight: 600;\n color: #edb899;\n}\n\n.cardDetailsButton {\n padding: 3px 6px;\n border-radius: 25px;\n background-color: #edb899;\n color: #000;\n font-weight: 600;\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"e28769","snapshot":null,"tags":null,"title":"card by samuelfcosta18","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":813,"cssLen":1274,"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

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae\n justo vel lorem tincidunt ultrices at non nunc. Donec in sapien viverra,\n tincidunt augue id, efficitur massa.\n

\n","css":"section.card {\n position: relative;\n width: 350px;\n height: 200px;\n background-color: #474dc3;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.card svg {\n fill: #333;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n border-radius: 3px;\n}\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px #000000;\n background-color: #474dc3;\n color: #ffffff;\n}\n\n.card__content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #474dc3;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n padding-left: 5px;\n font-size: 24px;\n color: var(--white);\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 0;\n font-size: 14px;\n color: #ffffff;\n line-height: 1.4;\n}\n/* Commands to change the shadows in dark mode\n@media (prefers-color-scheme: dark) {\n .card:hover {\n box-shadow: 0 8px 16px #000000;\n }\n}*/\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"503a22","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1907,"cssLen":4259,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n Thank You\n

\n It’s so nice that you had the time to view this idea\n

\n Wishing you a fantastic day ahead!\n

SMOOKYDEV

\n \n SMKY\n \n \n \n \n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.z-40{z-index:40}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.h-full{height:100%}.w-10{width:2.5rem}.w-\\[300px\\]{width:300px}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border-4{border-width:4px}.border-rose-900{--tw-border-opacity:1;border-color:rgb(136 19 55 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.bg-rose-500{--tw-bg-opacity:1;background-color:rgb(244 63 94 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pt-5{padding-top:1.25rem}.font-sans{font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}.font-serif{font-family:ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif}.text-\\[10px\\]{font-size:10px}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-1000{transition-duration:1000ms}.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}.\\[clip-path\\:polygon\$50\\%_0\\%\\2c _80\\%_10\\%\\2c _100\\%_35\\%\\2c _100\\%_70\\%\\2c _80\\%_90\\%\\2c _50\\%_100\\%\\2c _20\\%_90\\%\\2c _0\\%_70\\%\\2c _0\\%_35\\%\\2c _20\\%_10\\%\$\\]{-webkit-clip-path:polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);clip-path:polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)}.\\[clip-path\\:polygon\$50\\%_50\\%\\2c _0_0\\2c _0_100\\%\$\\]{-webkit-clip-path:polygon(50% 50%, 0 0, 0 100%);clip-path:polygon(50% 50%, 0 0, 0 100%)}.\\[clip-path\\:polygon\$50\\%_50\\%\\2c _100\\%_0\\2c _0_0\$\\]{-webkit-clip-path:polygon(50% 50%, 100% 0, 0 0);clip-path:polygon(50% 50%, 100% 0, 0 0)}.\\[clip-path\\:polygon\$50\\%_50\\%\\2c _100\\%_0\\2c _100\\%_100\\%\$\\]{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 100%);clip-path:polygon(50% 50%, 100% 0, 100% 100%)}.\\[clip-path\\:polygon\$50\\%_50\\%\\2c _100\\%_100\\%\\2c _0_100\\%\$\\]{-webkit-clip-path:polygon(50% 50%, 100% 100%, 0 100%);clip-path:polygon(50% 50%, 100% 100%, 0 100%)}.group:hover .group-hover\\:-translate-y-16{--tw-translate-y:-4rem;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\\:rotate-180{--tw-rotate:180deg;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-0{--tw-scale-x:0;--tw-scale-y:0;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\\:opacity-0{opacity:0}.group:hover .group-hover\\:duration-100{transition-duration:100ms}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:\\[clip-path\\:polygon\$50\\%_0\\%\\2c _100\\%_0\\2c _0_0\$\\]{-webkit-clip-path:polygon(50% 0%, 100% 0, 0 0);clip-path:polygon(50% 0%, 100% 0, 0 0)}@media (min-width: 640px){.sm\\:w-\\[350px\\]{width:350px}.sm\\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\\:text-\\[12px\\]{font-size:12px}}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"a80b06","snapshot":null,"tags":null,"title":"card by WrongCodeU","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":911,"cssLen":1397,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Abo

10$

\n \n

lorem-impus

\n \n

lorem-ipsum

","css":".card {\n width: 12em;\n height: 15em;\n background: lightblue;\n border-radius: 1em;\n border-color: black;\n border-style: solid;\n border-width: 0.4em;\n box-shadow: 0.3em 0.3em black;\n}\n\n.svg-icon {\n margin-top: 0.3em;\n margin-left: 0.5em;\n width: 2em;\n height: 2.5em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: rgb(0, 110, 255);\n}\n\n.svg-icon circle {\n stroke: #000;\n stroke-width: 1;\n}\n\n.Name-9999 {\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n font-size: 2em;\n margin-left: 0.5em;\n}\n\n.Price-9999 {\n margin-bottom: 0.3em;\n margin-top: -0.3em;\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n font-size: 3em;\n margin-left: 0.3em;\n}\n\n.Description-9999 {\n font-size: 1.1em;\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n position: relative;\n margin-left: 4em;\n margin-top: -2.4em;\n}\n\n.YouGet-9999 {\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n position: relative;\n margin-left: 4em;\n margin-top: -2.4em;\n font-size: 1.1em;\n}\n\n.svg-icon2 {\n margin-top: 1em;\n margin-left: 0.5em;\n width: 2em;\n height: 2em;\n}\n\n.svg-icon2 path,\n.svg-icon2 polygon,\n.svg-icon2 rect {\n fill: rgb(0, 110, 255);\n}\n\n.svg-icon2 circle {\n stroke: #000;\n stroke-width: 1;\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"cfe77e","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3267,"cssLen":3562,"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 \n \n \n \n \n \n \n \n \n \n \n\n","css":".relative {\n position: relative;\n}\n.col-span-3 {\n grid-column: span 3 / span 3;\n}\n.col-start-2 {\n grid-column-start: 2;\n}\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.h-10 {\n height: 2.5rem;\n}\n.h-12 {\n height: 3rem;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-12 {\n width: 3rem;\n}\n.-rotate-90 {\n --tw-rotate: -90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.grid-flow-row {\n grid-auto-flow: row;\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.bg-neutral-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(38 38 38 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-br {\n background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.from-sky-800 {\n --tw-gradient-from: #075985 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(7 89 133 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-sky-700 {\n --tw-gradient-to: rgb(3 105 161 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #0369a1 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-sky-400 {\n --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position);\n}\n.fill-neutral-50 {\n fill: #fafafa;\n}\n.p-4 {\n padding: 1rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.\\[box-shadow\\:2px_2px_0px_2px\\] {\n box-shadow: 2px 2px 0px 2px;\n}\n.\\[box-shadow\\:3px_4px_0px_2px\\] {\n box-shadow: 3px 4px 0px 2px;\n}\n.hover\\:translate-x-0:hover {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:translate-x-0\\.5:hover {\n --tw-translate-x: 0.125rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:translate-y-0:hover {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:translate-y-0\\.5:hover {\n --tw-translate-y: 0.125rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:\\[box-shadow\\:1px_1px_0px_1px\\]:hover {\n box-shadow: 1px 1px 0px 1px;\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"87a36a","snapshot":null,"tags":null,"title":"card by ClawHack1","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":582,"cssLen":1642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".login-card {\n background-color: #f8f8f8;\n border-radius: 10px;\n box-sizing: border-box;\n padding: 20px;\n max-width: 400px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);\n}\n\n.card-header {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.card-header h1 {\n font-size: 2em;\n color: #333;\n text-shadow: 1px 1px #ddd;\n}\n\n.form-group {\n margin-bottom: 10px;\n}\n\n.form-group label {\n display: block;\n font-size: 1.2em;\n color: #555;\n margin-bottom: 10px;\n}\n\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"password\"] {\n box-sizing: border-box;\n padding: 10px;\n border-radius: 5px;\n border: none;\n background-color: #f0f0f0;\n font-size: 1.2em;\n color: #555;\n box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);\n transition: box-shadow 0.3s ease;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"email\"]:focus,\ninput[type=\"password\"]:focus {\n box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.3);\n outline: none;\n}\n\ninput[type=\"submit\"] {\n background-color: #007bff;\n border: none;\n border-radius: 5px;\n color: #fff;\n cursor: pointer;\n font-size: 1.2em;\n padding: 10px;\n transition: background-color 0.3s ease;\n}\n\ninput[type=\"submit\"]:hover {\n background-color: #0069d9;\n}\n\n.login-button {\n background-color: #007bff;\n border: none;\n border-radius: 5px;\n color: #fff;\n cursor: pointer;\n font-size: 1.2em;\n padding: 10px;\n width: 100%;\n transition: background-color 0.3s ease;\n transition: 0.25s;\n}\n\n.login-button:hover {\n background-color: #0069d9e7;\n -webkit-box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);\n -moz-box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);\n box-shadow: 0px 0px 30px 0px rgba(0,105,217,1);\n}\n"}]}},"actionData":null,"errors":null}

Login