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

\n\t\t\n

\n\t

\n\t\tNebula Ludis\n\t

\n\t

\n\t\t$149.90\n\t

\n\t

\n \n \n B\n \n \n \n D\n \n \n \n \n 2E\n \n \n \n \n 4E\n \n

\n\t\n

","css":".card {\n width: 230px;\n height: 340px;\n background: #131313;\n border: 2px solid #569E67;\n border-radius: 40px;\n}\n\n.image {\n background-color: #1f1f1fa3;\n border-radius: 2.5em 2.5em 0em 0em;\n width: 100%;\n height: 37%;\n padding: 2px;\n}\n\n.image svg {\n width: 75%;\n margin-top: -335px;\n margin-left: 30px;\n}\n\n.productTitle {\n text-align: center;\n font-size: 22px;\n font-weight: bold;\n color: #569E67;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin-top: 10px;\n}\n\n.cost {\n text-align: center;\n margin-top: 10px;\n font-weight: bold;\n color: white;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.radio-inputs {\n position: relative;\n margin-top: 20px;\n margin-left: 13px;\n display: flex;\n flex-wrap: wrap;\n border-radius: 0.5rem;\n background-color: #182b1c;\n box-sizing: border-box;\n box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);\n padding: 0.25rem;\n width: 200px;\n font-size: 14px;\n}\n\n.radio-inputs .radio {\n flex: 1 1 auto;\n text-align: center;\n}\n\n.radio-inputs .radio input {\n display: none;\n}\n\n.radio-inputs .radio .name {\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n padding: .5rem 0;\n color: #fff;\n transition: all .15s ease-in-out;\n}\n\n.radio-inputs .radio input:checked + .name {\n background-color: #000;\n color: #569E67;\n font-weight: 600;\n}\n\n.addtocart {\n width: 100%;\n margin-top: 19px;\n padding: 15px;\n border: none;\n border-top: 2px solid #569E67;\n background-color: #131313;\n color: #569E67;\n font-weight: bold;\n font-size: 15px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n border-radius: 0px 0px 38px 38px;\n transition: 0.2s;\n}\n\n.addtocart:hover {\n background-color: #569E67;\n border-top: 2px solid transparent;\n color: #111111;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"6d75d2","snapshot":null,"tags":null,"title":"card by wojtek221221","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":324,"cssLen":959,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cookie-card {\n border-radius: 15px;\n width: 320px;\n height: 200px;\n background-color: #fff;\n}\n\n.cookie-title {\n font-size: 20px;\n position: relative;\n left: 90px;\n top: 15px;\n font-weight: bold;\n color: rgb(31 41 55);\n}\n\n.cookie-description {\n position: relative;\n top: 25px;\n font-size: 15px;\n text-align: center;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n color: rgb(75 85 99);\n}\n\n.cookies-policy {\n color: rgb(31 41 55);\n text-decoration: underline;\n}\n\n.cookies-policy:hover {\n text-decoration: none;\n}\n\n.cookies-policy:active {\n color: rgba(31, 41, 55, 0.61);\n ;\n}\n\n.accept-button {\n cursor: pointer;\n font-weight: bold;\n border-radius: 5px;\n width: 85px;\n height: 35px;\n background-color: rgba(255, 255, 255, 0);\n position: relative;\n left: 115px;\n top: 45px;\n}\n\n.accept-button:hover {\n background-color: rgb(31 41 55);\n color: #fff;\n border: rgb(31 41 55);\n ;\n}\n\n.accept-button:active {\n font-weight: 100;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"558d2d","snapshot":null,"tags":null,"title":"card by ahmed150up","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":564,"cssLen":1420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

ChatGPT

Hello, how can I assist you today?

I have a question about your services.

Sure, I'm here to help. What would you like to know?

\n \n

\n","css":".chat-card {\n width: 300px;\n background-color: #fff;\n border-radius: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.chat-header {\n padding: 10px;\n background-color: #f2f2f2;\n display: flex;\n align-items: center;\n}\n\n.chat-header .h2 {\n font-size: 16px;\n color: #333;\n}\n\n.chat-body {\n padding: 20px;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n}\n\n.incoming {\n background-color: #e1e1e1;\n}\n\n.outgoing {\n background-color: #f2f2f2;\n text-align: right;\n}\n\n.message p {\n font-size: 14px;\n color: #333;\n margin: 0;\n}\n\n.chat-footer {\n padding: 10px;\n background-color: #f2f2f2;\n display: flex;\n}\n\n.chat-footer input[type=\"text\"] {\n flex-grow: 1;\n padding: 5px;\n border: none;\n border-radius: 3px;\n}\n\n.chat-footer button {\n padding: 5px 10px;\n border: none;\n background-color: #4285f4;\n color: #fff;\n font-weight: bold;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.chat-footer button:hover {\n background-color: #0f9d58;\n}\n\n@keyframes chatAnimation {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.chat-card .message {\n animation: chatAnimation 0.3s ease-in-out;\n animation-fill-mode: both;\n animation-delay: 0.1s;\n}\n\n.chat-card .message:nth-child(even) {\n animation-delay: 0.2s;\n}\n\n.chat-card .message:nth-child(odd) {\n animation-delay: 0.3s;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"cf2156","snapshot":null,"tags":null,"title":"card by arafatrahat94","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":604,"cssLen":2164,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Clans of Clash

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

Price:

\n","css":".cardCollection {\n width: 100%;\n max-width: 290px;\n height: 80px;\n background: #353535;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: left;\n\n transition: 0.5s ease-in-out;\n}\n\n.cardCollection:hover {\n cursor: pointer;\n transform: scale(1.05);\n}\n\n.cardCollectionimg {\n width: 50px;\n height: 50px;\n margin-left: 10px;\n border-radius: 10px;\n background: linear-gradient(#d7cfcf, #9198e5);\n}\n\n.cardCollection:hover > .cardCollectionimg {\n transition: 0.5s ease-in-out;\n background: linear-gradient(#9198e5, #712020);\n}\n\n.cardCollectiontextBox {\n width: calc(100% - 90px);\n margin-left: 10px;\n color: white;\n font-family: \"Poppins\" sans-serif;\n}\n\n.cardCollectiontextContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.span {\n font-size: 10px;\n}\n\n.cardCollectionh1 {\n font-size: 16px;\n font-weight: bold;\n}\n\n.cardCollectionp {\n font-size: 12px;\n font-weight: lighter;\n}\n.cardCollectioncheckbox-container {\n display: inline-block;\n position: relative;\n padding-left: 35px;\n margin-bottom: 12px;\n cursor: pointer;\n font-size: 16px;\n user-select: none;\n}\n\n.cardCollectioncustom-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.cardCollectioncheckmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 25px;\n width: 25px;\n background-color: #eee;\n border-radius: 4px;\n transition: background-color 0.3s;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.cardCollectioncheckmark:after {\n content: \"\";\n position: absolute;\n display: none;\n left: 9px;\n top: 5px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 3px 3px 0;\n transform: rotate(45deg);\n}\n\n.cardCollectioncustom-checkbox:checked ~ .cardCollectioncheckmark {\n background-color: #2196f3;\n box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);\n}\n\n.cardCollectioncustom-checkbox:checked ~ .cardCollectioncheckmark:after {\n display: block;\n}\n\n@keyframes checkAnim {\n 0% {\n height: 0;\n }\n\n 100% {\n height: 10px;\n }\n}\n\n.cardCollectioncustom-checkbox:checked ~ .cardCollectioncheckmark:after {\n animation: checkAnim 0.2s forwards;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d487d7","snapshot":null,"tags":null,"title":"card by anthondevg","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":827,"cssLen":2956,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n ╳ \n ▣ \n — \n

\n WINDOWS XP TIMES

","css":".absolute{position:absolute}.relative{position:relative}.right-0{right:0px}.right-14{right:3.5rem}.right-7{right:1.75rem}.top-\\[2px\\]{top:2px}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.flex{display:flex}.h-72{height:18rem}.w-72{width:18rem}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-800{--tw-gradient-from:#1e40af var(--tw-gradient-from-position);--tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-800{--tw-gradient-from:#991b1b var(--tw-gradient-from-position);--tw-gradient-to:rgb(153 27 27 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-\\[12\\%\\]{--tw-gradient-from-position:12%}.via-blue-500{--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-red-500{--tw-gradient-to:rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\\[12\\%\\]{--tw-gradient-via-position:12%}.to-blue-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position)}.to-red-800{--tw-gradient-to:#991b1b var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.to-70\\%{--tw-gradient-to-position:70%}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-\\[\\.6em\\]{padding-top:.6em;padding-bottom:.6em}.text-\\[\\.6em\\]{font-size:.6em}.font-bold{font-weight:700}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"234330","snapshot":null,"tags":null,"title":"card by sahilxkhadka","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":788,"cssLen":1029,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

5430 4900 3232 9755

Elon Musk

Valid Date

2/14/2024

\n \n

","css":".relative{position:relative}.flex{display:flex}.h-\\[260px\\]{height:260px}.w-\\[400px\\]{width:400px}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-8{gap:2rem}.self-end{align-self:flex-end}.self-center{align-self:center}.rounded-3xl{border-radius:1.5rem}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"408699","snapshot":null,"tags":null,"title":"card by ahmed150up","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":795,"cssLen":675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

HTML

90%

CSS

80%

JavaScript

75%

\n","css":".card {\n width: 300px;\n background-color: #fff;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.header {\n background-color: #333;\n color: #fff;\n padding: 20px;\n text-align: center;\n font-size: 18px;\n}\n\n.body {\n padding: 20px;\n}\n\n.skill {\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.skill-name {\n width: 120px;\n font-size: 16px;\n}\n\n.skill-level {\n width: 160px;\n height: 10px;\n background-color: #eee;\n border-radius: 10px;\n overflow: hidden;\n margin-left: 20px;\n}\n\n.skill-percent {\n background-color: #333;\n height: 100%;\n}\n\n.skill-percent-number {\n margin-left: 20px;\n font-size: 16px;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d33a6a","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":646,"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

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 1em;\n padding: 1.9rem;\n background: #f5f5f5;\n position: relative;\n display: flex;\n align-items: flex-end;\n transition: 0.4s ease-out;\n box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);\n}\n\n.card:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n background: rgba(238, 116, 116, 0.4);\n z-index: 2;\n transition: 0.5s;\n}\n\n.card-info {\n position: relative;\n z-index: 3;\n color: #f5f5f5;\n opacity: 0;\n transform: translateY(20%);\n transition: 0.5s;\n}\n\n/*Text*/\n.text-title {\n font-size: 1.5rem;\n font-weight: 500;\n}\n\n.text-body {\n letter-spacing: 1px;\n font-size: 0.9rem;\n margin: 5px 0 15px 0;\n}\n\n/*Button*/\n.card-button {\n padding: 0.6rem;\n outline: none;\n border: none;\n border-radius: 4px;\n background: #ee9ca7;\n color: white;\n font-weight: bold;\n transition: 0.4s ease;\n}\n\n/*Image*/\n.card-img {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background: #ee9ca7;\n background: linear-gradient(to bottom, #e7aeae, #ee9ca7);\n}\n\n/*Hover*/\n.card:hover {\n transform: translateY(5%);\n}\n\n.card:hover:before {\n opacity: 1;\n}\n\n.card:hover .card-info {\n opacity: 1;\n transform: translateY(0);\n}\n\n.card-button:hover {\n background: rgba(218, 77, 77, 0.4);\n color: #f5f5f5;\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"a140a5","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1130,"cssLen":713,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".error {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #FCE8DB;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.error__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.error__icon path {\n fill: #EF665B;\n}\n\n.error__title {\n font-weight: 500;\n font-size: 14px;\n color: #71192F;\n}\n\n.error__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.error__close path {\n fill: #71192F;\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"0f543b","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":651,"cssLen":1436,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-full {\n width: 100%\n}\n\n.max-w-lg {\n max-width: 32rem\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\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-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-6 {\n padding: 1.5rem\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity))\n}\n\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / 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}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"7dbca9","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3717,"cssLen":1914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Jhon Doe\n CEO of WritBook\n \n

\n \n

","css":".card-client {\n background: #555;\n width: 13rem;\n padding-top: 25px;\n padding-bottom: 25px;\n padding-left: 20px;\n padding-right: 20px;\n border: 4px solid #fff;\n box-shadow: 0 6px 10px #212121;\n border-radius: 10px;\n text-align: center;\n color: #fff;\n font-family: \"Poppins\", sans-serif;\n transition: all 0.3s ease;\n}\n\n.card-client:hover {\n transform: translateY(-10px);\n}\n\n.user-picture {\n overflow: hidden;\n object-fit: cover;\n width: 5rem;\n height: 5rem;\n border: 4px solid #fff;\n border-radius: 999px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: auto;\n}\n\n.user-picture svg {\n width: 2.5rem;\n fill: currentColor;\n}\n\n.name-client {\n margin: 0;\n margin-top: 20px;\n font-weight: 600;\n font-size: 18px;\n}\n\n.name-client span {\n display: block;\n font-weight: 200;\n font-size: 16px;\n}\n\n.social-media:before {\n content: \" \";\n display: block;\n width: 100%;\n height: 2px;\n margin: 20px 0;\n background: #fff;\n}\n\n.social-media a {\n position: relative;\n margin-right: 15px;\n text-decoration: none;\n color: inherit;\n}\n\n.social-media a:last-child {\n margin-right: 0;\n}\n\n.social-media a svg {\n width: 1.1rem;\n fill: currentColor;\n}\n\n/*-- Tooltip Social Media --*/\n.tooltip-social {\n background: #262626;\n display: block;\n position: absolute;\n bottom: 0;\n left: 50%;\n padding: 0.5rem 0.4rem;\n border-radius: 5px;\n font-size: 0.8rem;\n font-weight: 600;\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -90%);\n transition: all 0.2s ease;\n z-index: 1;\n}\n\n.tooltip-social:after {\n content: \" \";\n position: absolute;\n bottom: 1px;\n left: 50%;\n border: solid;\n border-width: 10px 10px 0 10px;\n border-color: transparent;\n transform: translate(-50%, 100%);\n}\n\n.social-media a .tooltip-social:after {\n border-top-color: #262626;\n}\n\n.social-media a:hover .tooltip-social {\n opacity: 1;\n transform: translate(-50%, -130%);\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"3ab28c","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":732,"cssLen":2192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 🚀2023 LEC Summer - Group Stage - Day 2 - KOI vs. G2\n

\n ibai\n League of Legends\n

\n \n \n Español\n KOI\n LOL\n \n

","css":".temporary__storage {\n/*delete this*/\n width: 350px;\n height: 350px;\n background: #1b1a1a;\n border-radius: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card {\n width: 320px;\n height: 300px;\n background: #1b1a1a;\n position: relative;\n color: #e6e6ea;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.image {\n width: 100%;\n height: 180px;\n position: absolute;\n background-color: rgb(144, 197, 47);\n cursor: pointer;\n transition: all .2s ease;\n}\n\n.image::before {\n content: \"LIVE\";\n position: absolute;\n top: 7px;\n left: 7px;\n font-weight: 900;\n font-size: .8em;\n background-color: rgb(228, 33, 33);\n border-radius: 5px;\n padding: 3px 5px;\n}\n\n.image::after {\n content: \"102.2k viewers\";\n position: absolute;\n bottom: 7px;\n left: 7px;\n font-weight: 300;\n font-size: .7em;\n background-color: rgb(59, 53, 53);\n border-radius: 2px;\n padding: 3px 5px;\n}\n\n.image__overlay {\n width: 100%;\n height: 180px;\n}\n\n.image:hover {\n transform: translate(8px, -8px);\n box-shadow: -1px 1px 0px 0px violet,-2px 2px 0px 0px violet,-3px 3px 0px 0px violet,-4px 4px 0px 0px violet,-5px 5px 0px 0px violet,-6px 6px 0px 0px violet,-7px 7px 0px 0px violet,-8px 8px 0px 0px violet;\n}\n\n.avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n cursor: pointer;\n background-image: linear-gradient(to right top, #371f05, #654607, #8b7600, #a4ae00, #a8eb12);\n}\n\n.content {\n display: flex;\n flex-direction: row;\n gap: 10px;\n}\n\n.content__text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.content__body {\n display: flex;\n flex-direction: column;\n}\n\n.stream__title {\n font-weight: 900;\n width: 260px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n cursor: pointer;\n}\n\n.event {\n cursor: pointer;\n}\n\n.streamer__name, .event {\n font-size: .8em;\n font-weight: 400;\n color: rgb(216, 213, 213);\n}\n\n.categories__btn {\n text-decoration: none;\n color: rgb(216, 213, 213);\n font-size: .8em;\n background-color: rgb(73, 71, 71);\n padding: 3px 10px;\n border-radius: 15px;\n}\n\n.stream__title:hover, .event:hover {\n color: #9f7cd3;\n}\n\n.categories__btn:hover {\n background-color: rgb(79, 79, 79);\n}"}]}},"actionData":null,"errors":null}