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

\n \n

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus pariatur animi praesentium\n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #f4f4f3;\n border-radius: 8px;\n z-index: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.card::after {\n position: absolute;\n content: '';\n background-color: #454a50;\n width: 50px;\n height: 100px;\n z-index: -1;\n border-radius: 8px;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n border-radius: 8px;\n background: #454a50;\n margin-top: -2px;\n}\n\n.circle {\n padding: 0 4px;\n}\n\n.card__content {\n height: 100%;\n margin: 0px;\n border-radius: 8px;\n background: #f4f4f3;\n padding: 10px;\n}\n\n.title {\n font-size: 20px;\n}\n\n.content {\n margin-top: 10px;\n font-size: 14px;\n}\n\n.box {\n display: inline-block;\n align-items: center;\n width: 10px;\n height: 10px;\n padding: 1px;\n border-radius: 50%;\n}\n\n.red {\n background-color: #ff605c;\n}\n\n.yellow {\n background-color: #ffbd44;\n}\n\n.green {\n background-color: #00ca4e;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"b56564","snapshot":null,"tags":null,"title":"card by VashonG","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2021,"cssLen":3609,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

TITLE

\n \n \n \n

\n","css":".card {\n position: relative;\n height: 300px;\n width: 230px;\n}\n.card:nth-child(2) {\n filter: hue-rotate(300deg) brightness(1.3);\n}\n.card:nth-child(3) {\n filter: hue-rotate(200deg) brightness(1.5);\n}\n.card:nth-child(4) {\n filter: hue-rotate(60deg) brightness(3);\n}\n.card .boxshadow {\n position: absolute;\n height: 100%;\n width: 100%;\n border: 1px solid rgb(0, 217, 255);\n transform: scale(0.8);\n box-shadow: rgb(0, 217, 255) 0px 30px 70px 0px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main {\n width: 230px;\n height: 300px;\n overflow: hidden;\n background: rgb(0, 255, 149);\n background: linear-gradient(\n 0deg,\n #3e0000 0%,\n rgb(0, 247, 255) 60%,\n #3e0000 100%\n );\n position: relative;\n clip-path: polygon(\n 0 0,\n 100% 0,\n 100% 40px,\n 100% calc(100% - 40px),\n calc(100% - 40px) 100%,\n 40px 100%,\n 0 calc(100% - 40px)\n );\n box-shadow: rgb(0, 132, 255) 0px 7px 29px 0px;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .top {\n position: absolute;\n top: 0px;\n left: 0;\n width: 0px;\n height: 0px;\n z-index: 2;\n border-top: 115px solid black;\n border-left: 115px solid transparent;\n border-right: 115px solid transparent;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .side {\n position: absolute;\n width: 100%;\n top: 0;\n transform: translateX(-50%);\n height: 101%;\n background: black;\n clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;\n}\n.card .main .left {\n left: 0;\n}\n.card .main .right {\n right: 0;\n transform: translateX(50%) scale(-1, 1);\n}\n.card .main .title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 90px;\n font-weight: bold;\n font-size: 25px;\n opacity: 0;\n z-index: -1;\n transition: all 0.2s ease-out 0s;\n}\n.card .main .button-container {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n}\n.card .main .button-container .button {\n position: absolute;\n transform: translateX(-50%);\n padding: 5px 10px;\n clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);\n background: black;\n border: none;\n color: white;\n display: grid;\n place-content: center;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .button-container .button .svg {\n width: 15px;\n transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .button-container .button:nth-child(1) {\n bottom: 300px;\n transition-delay: 0.4s;\n}\n.card .main .button-container .button:nth-child(2) {\n bottom: 300px;\n transition-delay: 0.6s;\n}\n.card .main .button-container .button:nth-child(3) {\n bottom: 300px;\n transition-delay: 0.8s;\n}\n.card .main .button-container .button:hover .svg {\n transform: scale(1.2);\n}\n.card .main .button-container .button:active .svg {\n transform: scale(0.7);\n}\n.card:hover .main {\n transform: scale(1.1);\n}\n.card:hover .main .top {\n top: -50px;\n}\n.card:hover .main .left {\n left: -50px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;\n}\n.card:hover .main .right {\n right: -50px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;\n}\n.card:hover .main .title {\n opacity: 1;\n transition: all 0.2s ease-out 1.3s;\n}\n.card:hover .main .button-container .button:nth-child(1) {\n bottom: 80px;\n transition-delay: 0.8s;\n}\n.card:hover .main .button-container .button:nth-child(2) {\n bottom: 40px;\n transition-delay: 0.6s;\n}\n.card:hover .main .button-container .button:nth-child(3) {\n bottom: 0;\n transition-delay: 0.4s;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"78d2d2","snapshot":null,"tags":null,"title":"card by uctteam","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4300,"cssLen":2838,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

2000

lorem

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

\n \n

1999

lorem

\n\n \n \n \n \n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.right-\\[10\\%\\]{right:10%}.top-\\[50\\%\\]{top:50%}.grid{display:grid}.w-\\[700px\\]{width:700px}.w-full{width:100%}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%;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))}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.gap-2{gap:0.5rem}.rounded-lg{border-radius:0.5rem}.bg-\\[\\#673ab7\\]{--tw-bg-opacity:1;background-color:rgb(103 58 183 / var(--tw-bg-opacity))}.bg-\\[rgb\$41\\2c 49\\2c 79\$\\]{--tw-bg-opacity:1;background-color:rgb(41 49 79 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-20{opacity:0.2}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\\:translate-y-\\[3px\\]:hover{--tw-translate-y:3px;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\\:shadow-\\[0_-8px_0px_0px_\\#2196f3\\]:hover{--tw-shadow:0 -8px 0px 0px #2196f3;--tw-shadow-colored:0 -8px 0px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\\:shadow-\\[0_-8px_0px_0px_rgb\$244\\2c 67\\2c 54\$\\]:hover{--tw-shadow:0 -8px 0px 0px rgb(244,67,54);--tw-shadow-colored:0 -8px 0px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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-100{opacity:1}@media (max-width: 500px){.max-\\[500px\\]\\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"b9cbc3","snapshot":null,"tags":null,"title":"card by Rodrypaladin","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":469,"cssLen":2732,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Category\n

This is the article title

Lorem ipsum dolor sit amet consectetur adipiscing elit, donec suspendisse vulputate dictumst enim per mus imperdiet, platea non massa dictum tempus sapien.

\n \n

","css":".card {\n width: 275px;\n position: relative;\n background: rgb(255, 255, 255);\n padding: 20px;\n}\n\n.card::after {\n z-index: -1;\n content: \"\";\n position: absolute;\n width: 50%;\n height: 10px;\n bottom: 15px;\n right: 0;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);\n transform: rotate(5deg);\n transition: all 0.1s ease-in;\n}\n\n.card::before {\n z-index: -1;\n content: \"\";\n position: absolute;\n width: 50%;\n height: 10px;\n bottom: 15px;\n left: 0;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);\n transform: rotate(-5deg);\n transition: all 0.1s ease-in;\n}\n\n.card:hover:before, .card:hover:after {\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.6);\n}\n\n.card:hover:before {\n transform: rotate(-8deg);\n}\n\n.card:hover:after {\n transform: rotate(8deg);\n}\n\n.card__img {\n position: relative;\n background: #FFFFFF;\n background: linear-gradient(315deg, #68aeff, #0032a6);\n width: 100%;\n height: 175px;\n}\n\n.card__span {\n cursor: pointer;\n font-size: 11px;\n position: absolute;\n background-color: white;\n top: 10px;\n left: 10px;\n padding: 3px 7px;\n box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);\n transition: transform 0.1s ease-in;\n user-select: none;\n}\n\n.card__span:hover {\n transform: translateX(5px);\n}\n\n.card-int {\n padding: 20px 0 0 0;\n}\n\n.card-int__title {\n font-weight: bold;\n font-size: 1.2rem;\n font-family: Arial, Helvetica, sans-serif;\n margin-bottom: 10px;\n}\n\n.card-int__button {\n cursor: pointer;\n margin: 20px 0 0 0;\n padding: 7px 20px;\n width: 100%;\n background-color: rgb(238, 246, 255);\n border: none;\n color: black;\n position: relative;\n overflow: hidden;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);\n transition: box-shadow 0.1s ease-in;\n user-select: none;\n}\n\n.card-int__button:active {\n box-shadow: 0px 0px 15px rgba(0, 119, 255, 0.5);\n}\n\n.card-int__button:hover::before {\n animation: effect_two 0.4s 1;\n}\n\n.card-int__button::before {\n content: 'More for this article';\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n background: rgb(0,133,255);\n background: linear-gradient(146deg, #0032a6 0%, #68aeff 100%);\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform: translateX(-99%);\n z-index: 1;\n animation: effect_one 10s infinite;\n}\n\n.card-int__button:hover::before {\n transform: translateX(0%);\n}\n\n.excerpt {\n font-size: 14px;\n}\n\n@keyframes effect_one {\n 0% {\n transform: translateX(-99%);\n }\n\n 25% {\n transform: translateX(-90%);\n }\n\n 50% {\n transform: translateX(-80%);\n }\n\n 75% {\n transform: translateX(-95%);\n }\n\n 100% {\n transform: translateX(-99%);\n }\n}\n\n@keyframes effect_two {\n to {\n transform: translateX(-1%);\n }\n\n from {\n transform: translateX(-99%);\n }\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"b908c5","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4704,"cssLen":1395,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".social-card {\n height: fit-content;\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n background: rgb(255, 255, 255);\n padding: 20px 25px;\n border-radius: 14px;\n}\n.Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n z-index: 2;\n}\n\n.BG {\n position: absolute;\n width: 100%;\n height: 100%;\n background: #181818;\n z-index: 1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n font-size: 0px;\n}\n.github .BG {\n background: #181818;\n}\n.linkdin .BG {\n background: #0077b5;\n}\n.whatsapp .BG {\n background: #075e54;\n}\n.discord .BG {\n background: #7289da;\n}\n.Btn:hover .BG {\n transform: scale(1.5);\n /* transform-origin: bottom; */\n font-size: 20px;\n color: white;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(216, 216, 216, 0.466);\n background-color: rgba(209, 209, 209, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"8759bc","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":707,"cssLen":1483,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n $\"\"$ \n

\n Card title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non\n dolor augue. Nunc dictum erat sit amet iaculis interdum. Ut neque\n tellus, congue vel lectus aliquam, dignissim porttitor velit.\n

\n \n See more\n \n\n","css":".line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.flex {\n display: flex;\n}\n.h-24 {\n height: 6rem;\n}\n.h-40 {\n height: 10rem;\n}\n.w-24 {\n width: 6rem;\n}\n.w-72 {\n width: 18rem;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-col {\n flex-direction: column;\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-indigo-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(99 102 241 / var(--tw-bg-opacity));\n}\n.bg-neutral-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(250 250 250 / var(--tw-bg-opacity));\n}\n.bg-purple-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(233 213 255 / var(--tw-bg-opacity));\n}\n.p-2 {\n padding: 0.5rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.italic {\n font-style: italic;\n}\n.text-indigo-500 {\n --tw-text-opacity: 1;\n color: rgb(99 102 241 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),\n 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.hover\\:bg-purple-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(216 180 254 / var(--tw-bg-opacity));\n}\n"},{"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}"}]}},"actionData":null,"errors":null}