{"loaderData":{"0":null,"0-2":{"total":7182,"projects":[{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"6a2779","snapshot":null,"tags":null,"title":"card by stlyash","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":844,"cssLen":1588,"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 dolor sit amet consectetur adipisicing elit. Ipsam ea quo unde\n vel adipisci blanditiis voluptates eum. Nam, cum minima?\n

\n\n

\n Take a Look \n\n Mark as Read \n

\n","css":".card {\n max-width: 320px;\n border-width: 1px;\n border-color: rgba(219, 234, 254, 1);\n border-radius: 1rem;\n background-color: rgba(255, 255, 255, 1);\n padding: 1rem;\n}\n\n.header {\n display: flex;\n align-items: center;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background-color: rgba(96, 165, 250, 1);\n padding: 0.5rem;\n color: rgba(255, 255, 255, 1);\n}\n.closeButton {\n border: none;\n margin-left: 23%;\n border-radius: 0.6rem;\n font-size: 1rem;\n height: 2rem;\n width: 2rem;\n display: grid;\n place-items: center;\n transition: background-color ease 0.25s;\n}\n.closeButton:hover {\n background-color: rgba(230, 25, 25, 1);\n color: white;\n}\n.icon svg {\n height: 1rem;\n width: 1rem;\n}\n\n.alert {\n font-weight: 600;\n color: rgba(107, 114, 128, 1);\n}\n\n.message {\n margin-top: 1rem;\n color: rgba(107, 114, 128, 1);\n}\n\n.actions {\n margin-top: 1.5rem;\n}\n\n.actions a {\n text-decoration: none;\n}\n\n.mark-as-read,\n.read {\n display: inline-block;\n border-radius: 0.5rem;\n width: 100%;\n padding: 0.75rem 1.25rem;\n text-align: center;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n}\n\n.read {\n background-color: rgba(59, 130, 246, 1);\n color: rgba(255, 255, 255, 1);\n}\n.read:hover {\n background-color: rgba(17, 104, 245, 1);\n}\n\n.mark-as-read {\n margin-top: 0.5rem;\n background-color: rgba(249, 250, 251, 1);\n color: rgba(107, 114, 128, 1);\n transition: all 0.15s ease;\n}\n\n.mark-as-read:hover {\n background-color: rgb(230, 231, 233);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"7d2d25","snapshot":null,"tags":null,"title":"card by Valeron-T","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5627,"cssLen":1729,"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

","css":".card {\n display: flex;\n height: 70px;\n width: 350px;\n}\n\n.card svg {\n position: absolute;\n display: flex;\n width: 60%;\n height: 100%;\n font-size: 24px;\n font-weight: 700;\n opacity: 1;\n transition: opacity 0.25s;\n z-index: 2;\n padding: 0.25rem;\n cursor: pointer;\n}\n\n.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4,.card .social-link5 {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25%;\n color: whitesmoke;\n font-size: 24px;\n text-decoration: none;\n transition: 0.25s;\n border-radius: 50px;\n}\n\n.card svg {\n transform: scale(1);\n}\n\n.card .social-link1:hover {\n background: #f09433;\n background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link2:hover {\n background-color: #242c34;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link3:hover {\n background-color: #5865f2;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link4:hover {\n background-color: #0a66c2;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link5:hover {\n background-color: #ff8000;\n animation: bounce_613 0.4s linear;\n}\n\n@keyframes bounce_613 {\n 40% {\n transform: scale(1.4);\n }\n\n 60% {\n transform: scale(0.8);\n }\n\n 80% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"3a447f","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7969,"cssLen":1538,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Cameron Williamson

Web Development

\n \n \n

","css":".card {\n --main-color: #fff;\n --submain-color: #ccc;\n --bg-color: #000;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n position: relative;\n width: 300px;\n height: 384px;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 20px;\n background: var(--bg-color);\n}\n\n.card__img {\n height: 192px;\n width: 100%;\n}\n\n.card__img svg {\n height: 100%;\n border-radius: 20px 20px 0 0;\n}\n\n.card__avatar {\n position: absolute;\n width: 114px;\n height: 114px;\n background: var(--bg-color);\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: calc(50% - 57px);\n}\n\n.card__avatar svg {\n width: 100px;\n height: 100px;\n}\n\n.card__title {\n margin-top: 60px;\n font-weight: 500;\n font-size: 18px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 10px;\n font-weight: 400;\n font-size: 15px;\n color: var(--submain-color);\n}\n\n.card__btn {\n margin-top: 15px;\n width: 76px;\n height: 31px;\n border: 2px solid var(--main-color);\n border-radius: 4px;\n font-weight: 700;\n font-size: 11px;\n color: var(--main-color);\n background: var(--bg-color);\n text-transform: uppercase;\n transition: all 0.3s;\n}\n\n.card__btn-solid {\n background: var(--main-color);\n color: var(--bg-color);\n}\n\n.card__btn:hover {\n background: var(--main-color);\n color: var(--bg-color);\n}\n\n.card__btn-solid:hover {\n background: var(--bg-color);\n color: var(--main-color);\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"82056f","snapshot":null,"tags":null,"title":"card by ahmed150up","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":406,"cssLen":690,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Voice Chat

\n \n \n

\n","css":".card-container {\n width: 330px;\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.card-header {\n background-color: #333;\n color: #fff;\n padding: 10px;\n font-size: 20px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n.card-body {\n padding: 10px;\n}\n\n.card-footer {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n}\n\n.mute-button, .unmute-button {\n background-color: #333;\n color: white;\n padding: 12px 20px;\n border: none;\n cursor: pointer;\n width: 100%;\n}\n\n.mute-button:hover, .unmute-button:hover {\n background-color: rgb(247, 247, 247);\n color: rgb(0, 0, 0);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"9bdeb7","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2396,"cssLen":1910,"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

Human Resources

\n\n

","css":".human-resources {\n --bg-color: #DCE9FF;\n --bg-color-light: #f1f7ff;\n --text-color-hover: #4C5656;\n --box-shadow-color: rgba(220, 233, 255, 0.48);\n}\n\n.card {\n width: 220px;\n height: 321px;\n background: #fff;\n border-top-right-radius: 10px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0 14px 26px rgba(0,0,0,0.04);\n transition: all 0.3s ease-out;\n text-decoration: none;\n}\n\n.card:hover {\n transform: translateY(-5px) scale(1.005) translateZ(0);\n box-shadow: 0 24px 36px rgba(0,0,0,0.11),\n 0 24px 46px var(--box-shadow-color);\n}\n\n.card:hover .overlay {\n transform: scale(4) translateZ(0);\n}\n\n.card:hover .circle {\n border-color: var(--bg-color-light);\n background: var(--bg-color);\n}\n\n.card:hover .circle:after {\n background: var(--bg-color-light);\n}\n\n.card:hover p {\n color: var(--text-color-hover);\n}\n\n.card:active {\n transform: scale(1) translateZ(0);\n box-shadow: 0 15px 24px rgba(0,0,0,0.11),\n 0 15px 24px var(--box-shadow-color);\n}\n\n.card p {\n font-size: 17px;\n color: #4C5656;\n margin-top: 30px;\n z-index: 1000;\n transition: color 0.3s ease-out;\n}\n\n.circle {\n width: 131px;\n height: 131px;\n border-radius: 50%;\n background: #fff;\n border: 3px solid var(--bg-color);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n transition: all 0.3s ease-out;\n}\n\n.circle:after {\n content: \"\";\n width: 118px;\n height: 118px;\n display: block;\n position: absolute;\n background: var(--bg-color);\n border-radius: 50%;\n transition: opacity 0.3s ease-out;\n}\n\n.circle svg {\n z-index: 10000;\n transform: translateZ(0);\n}\n\n.overlay {\n width: 118px;\n position: absolute;\n height: 118px;\n border-radius: 50%;\n background: var(--bg-color);\n top: 70px;\n left: 50px;\n z-index: 0;\n transition: transform 0.3s ease-out;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"9560b8","snapshot":null,"tags":null,"title":"card by naveenkumarr-onyx","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2525,"cssLen":949,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n 90+ \n Icons \n

\n 70+ \n Illustrations \n

\n \n 150+ \n Components \n

\n \n 30+ \n Animations \n

","css":".card {\n width: 190px;\n height: 254px;\n color: white;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 5px;\n overflow: visible;\n}\n\n.card .item {\n border-radius: 10px;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.item:hover {\n transform: scale(1.95);\n transition: all 1s ease-in-out;\n rotate: 360deg;\n}\n\n.item svg {\n width: 40px;\n height: 40px;\n margin-bottom: 7px;\n}\n\n.item--1 {\n background: #c7c7ff;\n}\n\n.item--2 {\n background: #ffd8be;\n}\n\n.item--3 {\n background: #a9ecbf;\n}\n\n.item--4 {\n background: #f3bbe1;\n}\n\n.quantity {\n font-size: 25px;\n font-weight: 600;\n}\n\n.text {\n font-size: 12px;\n font-family: inherit;\n font-weight: 600;\n}\n\n.text--1 {\n color: rgba(149,149,255,1);\n}\n\n.text--2 {\n color: rgba(252,161,71,1);\n}\n\n.text--3 {\n color: rgba(66,193,110,1);\n}\n\n.text--4 {\n color: rgba(220,91,183,1);\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d785ed","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":15106,"cssLen":1180,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Super Petya

Cool guy

\n ★★★★★\n

\n Cucumba\n

\n ▲Helpful\n Share\n Feb 10\n ...\n

","css":".-mt-1{margin-top:-0.25rem}.-mt-3{margin-top:-0.75rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-1{gap:0.25rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.rounded-2xl{border-radius:1rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-8{padding:2rem}.text-\\[12px\\]{font-size:12px}.text-\\[18px\\]{font-size:18px}.text-\\[8px\\]{font-size:8px}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-light{font-weight:300}.font-normal{font-weight:400}.font-semibold{font-weight:600}.italic{font-style:italic}.tracking-\\[1px\\]{letter-spacing:1px}.tracking-\\[2px\\]{letter-spacing:2px}.text-\\[\\#005ef6\\]{--tw-text-opacity:1;color:rgb(0 94 246 / var(--tw-text-opacity))}.text-\\[\\#4b587c\\]{--tw-text-opacity:1;color:rgb(75 88 124 / var(--tw-text-opacity))}.text-\\[\\#ff6154\\]{--tw-text-opacity:1;color:rgb(255 97 84 / var(--tw-text-opacity))}.hover\\:text-\\[\\#ff6154\\]:hover{--tw-text-opacity:1;color:rgb(255 97 84 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"802eef","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":338,"cssLen":1061,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Hover Effect\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi\n laboriosam at voluptas minus culpa deserunt delectus sapiente\n inventore pariatur\n

\n \n

","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 320px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n padding: 32px;\n overflow: hidden;\n border-radius: 10px;\n background: #212121;\n border: 2px solid #313131;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n color: #e8e8e8;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content .heading {\n font-weight: 700;\n font-size: 32px;\n}\n\n.content .para {\n line-height: 1.5;\n}\n\n.content .btn {\n color: #e8e8e8;\n text-decoration: none;\n padding: 10px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n background: #0974f1;\n border-radius: 5px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n}\n\n.card:hover {\n box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);\n border-color: #0974f1;\n}\n\n.content .btn:hover {\n outline: 2px solid #e8e8e8;\n background: transparent;\n color: #e8e8e8;\n}\n\n.content .btn:active {\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"aee8ea","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3188,"cssLen":3467,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Wed, Sep 19\n 12:58\n

\n 89\n

\n \n \n \n

\n fitbit\n

","css":".relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-40{height:10rem}.h-5{height:1.25rem}.h-52{height:13rem}.h-56{height:14rem}.h-60{height:15rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-52{width:13rem}.w-56{width:14rem}.w-60{width:15rem}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.animate-bounce{animation:bounce 1s infinite}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.fill-red-500{fill:#ef4444}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6 / var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-gray-50{--tw-shadow-color:#f9fafb;--tw-shadow:var(--tw-shadow-colored)}.\\[text-shadow\\:_2px_2px_\\#fff\\2c _1px_2px_\\#fff\\]{text-shadow:2px 2px #fff, 1px 2px #fff}.\\[text-shadow\\:none\\]{text-shadow:none}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-right-2::before{content:var(--tw-content);right:-0.5rem}.before\\:top-16::before{content:var(--tw-content);top:4rem}.before\\:top-24::before{content:var(--tw-content);top:6rem}.before\\:-z-10::before{content:var(--tw-content);z-index:-10}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:w-3::before{content:var(--tw-content);width:0.75rem}.before\\:rounded-2xl::before{content:var(--tw-content);border-radius:1rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-orange-800::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(154 52 18 / var(--tw-bg-opacity))}.before\\:bg-sky-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(14 165 233 / var(--tw-bg-opacity))}.before\\:shadow-inner::before{content:var(--tw-content);--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.before\\:shadow-gray-50::before{content:var(--tw-content);--tw-shadow-color:#f9fafb;--tw-shadow:var(--tw-shadow-colored)}.before\\:blur-xl::before{content:var(--tw-content);--tw-blur:blur(24px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"8ab40d","snapshot":null,"tags":null,"title":"card by ahmed150up","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":414,"cssLen":777,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

User name

\n\n

\n","css":".voice-chat-card {\n width: 300px;\n margin: 20px auto;\n border: 1px solid #ccc;\n border-radius: 10px;\n box-shadow: 2px 2px 10px #ccc;\n padding: 10px;\n background-color: #e8e8e8;\n}\n\n.voice-chat-card-header {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.avatar {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-right: 10px;\n color: black;\n background-color: #333;\n}\n\n.username {\n margin: 0;\n font-size: 18px;\n color: black;\n}\n\n.status {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: green;\n margin-left: 10px;\n}\n\n.voice-chat-card-body {\n padding: 10px;\n}\n\n.status-text {\n font-size: 14px;\n margin-bottom: 10px;\n}\n\n.audio-container {\n display: flex;\n align-items: center;\n}\n\naudio {\n width: 100%;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"44460d","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3083,"cssLen":1591,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n\n \n

Hover For Free*
Uiverse Points

*at the expense of your sanity

","css":"/* RIP Uiverse points, welcome Creator points! */\n\n.card-id567 {\n width: 190px;\n height: 190px;\n background: rgb(255, 255, 255);\n border-radius: 1rem;\n padding: 1rem;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 300ms ease;\n animation: 8s thumb-thumb infinite;\n}\n\n.card-id567 svg path {\n transition: 300ms ease;\n stroke: rgb(20, 20, 20);\n opacity: 0;\n}\n\n.bold-567 {\n font-weight: bold;\n}\n\n.blurry-splash {\n position: absolute;\n inset: 0;\n width: 60px;\n margin: 0 auto;\n height: 60px;\n border-radius: 1rem;\n z-index: -1;\n opacity: 70%;\n filter: blur(15px);\n background: linear-gradient(\n 120deg, rgb(119, 0, 255)\n , rgb(22, 94, 250), rgb(44, 226, 250));\n}\n\n.prompt-id567 {\n position: absolute;\n color: rgb(29, 29, 29);\n text-align: center;\n}\n\n.really-small-text {\n text-align: center;\n width: 100%;\n position: absolute;\n font-size: 8px;\n margin-top: 28px;\n opacity: 0.5;\n}\n\n.card-id567:hover {\n cursor: none;\n}\n\n.card-id567:hover .prompt-id567 {\n transition: 300ms ease;\n opacity: 0;\n}\n\n.token-container {\n animation: 2s spinny-token-yayyy infinite;\n margin-bottom: 10px;\n}\n\n.prompt-id567 svg path {\n stroke: none;\n opacity: 1;\n}\n\n.card-id567:hover svg path {\n opacity: 1;\n}\n\n@keyframes spinny-token-yayyy {\n 0% {\n transform: perspective(200px) rotateY(0deg);\n }\n\n 100% {\n transform: perspective(200px) rotateY(360deg);\n }\n}\n\n@keyframes thumb-thumb {\n 0%, 10%, 100% {\n transform: scale(100%);\n }\n\n 5% {\n transform: scale(103%);\n }\n\n 7% {\n transform: scale(97%);\n }\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"15c52f","snapshot":null,"tags":null,"title":"card by Cornerstone-04","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":459,"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: 160px;\n height: 200px;\n background: #ffffff;\n transform: rotate(20deg) skew(-10deg, -5deg);\n transition: .4s linear;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-size: 1.2rem;\n font-weight: 700;\n line-height: 200px;\n}\n\n.card:hover {\n box-shadow: rgba(0,0,0,0.5) 5px 3px,\n rgba(0,0,0,0.4) 10px 6px,\n rgba(0,0,0,0.3) 15px 9px;\n background: #000;\n color: #fff;\n font-size: 1.5rem;\n}"}]}},"actionData":null,"errors":null}