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

Corporate

\n For those that want to grow steadily and buy pizza and\n burguers.\n

\n $35\n /mo\n

\n \n Purchase\n \n

","css":".mt-2{margin-top:0.5rem}.mt-5{margin-top:1.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.w-80{width:20rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{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))}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:0.75rem}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:0.75rem}.border-2{border-width:2px}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138 / var(--tw-bg-opacity))}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-8{padding-bottom:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.tracking-tight{letter-spacing:-0.025em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.shadow-\\[5px_5px_black\\]{--tw-shadow:5px 5px black;--tw-shadow-colored:5px 5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.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-200{transition-duration:200ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\\:shadow-none:hover{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width: 640px){.sm\\:flex-row{flex-direction:row}.sm\\:p-10{padding:2.5rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:pb-6{padding-bottom:1.5rem}}@media (min-width: 1024px){.lg\\:px-8{padding-left:2rem;padding-right:2rem}.lg\\:py-4{padding-top:1rem;padding-bottom:1rem}.lg\\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1280px){.xl\\:text-2xl{font-size:1.5rem;line-height:2rem}.xl\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"3aa029","snapshot":null,"tags":null,"title":"card by mvykool","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":518,"cssLen":3124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n\n

Title

\n\n \n Button\n \n

\n\n","css":".m-2{margin:0.5rem}.mt-2{margin-top:0.5rem}.flex{display:flex}.h-3\\/6{height:50%}.h-52{height:13rem}.w-56{width:14rem}.transform{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}.flex-col{flex-direction:column}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-rose-100{--tw-gradient-from:#ffe4e6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 228 230 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-200{--tw-gradient-to:rgb(233 213 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-purple-200{--tw-gradient-to:#e9d5ff var(--tw-gradient-to-position)}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.pt-2{padding-top:0.5rem}.font-semibold{font-weight:600}.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)}.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-150{transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\\:scale-110:hover{--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))}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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:15.000Z","isPrivate":0,"projectId":"c613d5","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23588,"cssLen":5306,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

$49.9

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

ADIDAS

Classic oversized hoodie

\n Color\n

Collegiate Gold
Team Navy
Pulse Blue
Pink Fusion

\n Size\n

\n \n \n XS\n \n
\n \n \n S\n \n
\n \n \n M\n \n
\n \n \n L\n \n
\n \n \n XL\n \n

\n \n (29,062)\n

\n\n

\n \n \n

","css":".card {\n --accent-color: #ffd426;\n position: relative;\n width: 240px;\n background: white;\n border-radius: 1rem;\n padding: 0.3rem;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 50px 30px -20px;\n transition: all 0.5s ease-in-out;\n}\n\n.card .image-container {\n position: relative;\n width: 100%;\n height: 130px;\n border-radius: 0.7rem;\n border-top-right-radius: 4rem;\n margin-bottom: 1rem;\n}\n\n.card .image-container img {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n border-radius: inherit;\n}\n\n.card .image-container .svg {\n height: 100%;\n width: 100%;\n border-radius: inherit;\n}\n\n.card .image-container .price {\n position: absolute;\n right: 0.7rem;\n bottom: -1rem;\n background: white;\n color: var(--accent-color);\n font-weight: 900;\n font-size: 0.9rem;\n padding: 0.5rem;\n border-radius: 1rem 1rem 2rem 2rem;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 15px 0px;\n}\n\n.card .favorite {\n position: absolute;\n width: 19px;\n height: 19px;\n top: 5px;\n right: 5px;\n cursor: pointer;\n}\n\n.card .favorite input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.card .favorite input:checked ~ svg {\n animation: bouncing 0.5s;\n fill: rgb(255, 95, 95);\n filter: drop-shadow(0px 3px 1px rgba(53, 53, 53, 0.14));\n}\n\n.card .favorite svg {\n fill: #a8a8a8;\n}\n\n.card .content {\n padding: 0px 0.8rem;\n margin-bottom: 1rem;\n}\n\n.card .content .brand {\n font-weight: 900;\n color: #a6a6a6;\n}\n\n.card .content .product-name {\n font-weight: 700;\n color: #666666;\n font-size: 0.7rem;\n margin-bottom: 1rem;\n}\n\n.card .content .color-size-container {\n display: flex;\n justify-content: space-between;\n text-transform: uppercase;\n font-size: 0.7rem;\n font-weight: 700;\n color: #a8a8a8;\n gap: 2rem;\n margin-bottom: 1.5rem;\n}\n\n.card .content .color-size-container > * {\n flex: 1;\n}\n\n.card .content .color-size-container .colors .colors-container {\n list-style-type: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.3rem;\n font-size: 0.5rem;\n margin-top: 0.2rem;\n}\n\n.card .content .color-size-container .colors .colors-container .color {\n height: 14px;\n position: relative;\n}\n\n.card .content .color-size-container .colors .colors-container .color:hover .color-name {\n display: block;\n}\n\n.card .content .color-size-container .colors .colors-container .color a {\n display: inline-block;\n height: 100%;\n aspect-ratio: 1;\n border: 3px solid black;\n border-radius: 50%;\n}\n\n.card .content .color-size-container .colors .colors-container .color .color-name {\n display: none;\n position: absolute;\n bottom: 125%;\n left: 50%;\n transform: translateX(-50%);\n z-index: 99;\n background: black;\n padding: 0.2rem 1rem;\n border-radius: 1rem;\n text-align: center;\n}\n\n.card .content .color-size-container .colors .colors-container .color:first-child a {\n border-color: #ffd426;\n}\n\n.card .content .color-size-container .colors .colors-container .color:nth-child(2) a {\n background: #144076;\n}\n\n.card .content .color-size-container .colors .colors-container .color:nth-child(3) a {\n border-color: #00b9ff;\n}\n\n.card .content .color-size-container .colors .colors-container .color:nth-child(4) a {\n border-color: #ff6ba1;\n}\n\n.card .content .color-size-container .colors .colors-container .active {\n border-color: black;\n}\n\n.card .content .color-size-container .sizes .size-container {\n list-style-type: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n margin-top: 0.2rem;\n}\n\n.card .content .color-size-container .sizes .size-container .size {\n height: 14px;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio {\n cursor: pointer;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio input {\n display: none;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio input:checked ~ .name {\n background: var(--accent-color);\n border-radius: 2rem 2rem 1.5rem 1.5rem;\n color: white;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio .name {\n display: grid;\n place-content: center;\n height: 100%;\n aspect-ratio: 1.2/1;\n text-decoration: none;\n color: #484848;\n font-size: 0.5rem;\n text-align: center;\n}\n\n.card .content .rating {\n color: #a8a8a8;\n font-size: 0.6rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.card .content .rating svg {\n height: 12px;\n}\n\n.card .button-container {\n display: flex;\n gap: 0.3rem;\n}\n\n.card .button-container .button {\n border-radius: 1.4rem 1.4rem 0.7rem 0.7rem;\n border: none;\n padding: 0.5rem 0;\n background: var(--accent-color);\n color: white;\n font-weight: 900;\n cursor: pointer;\n}\n\n.card .button-container .button:hover {\n background: orangered;\n}\n\n.card .button-container .buy-button {\n flex: auto;\n}\n\n.card .button-container .cart-button {\n display: grid;\n place-content: center;\n width: 50px;\n}\n\n.card .button-container .cart-button svg {\n width: 15px;\n fill: white;\n}\n\n.card:hover {\n transform: scale(1.03);\n}\n\n@keyframes bouncing {\n from, to {\n transform: scale(1, 1);\n }\n\n 25% {\n transform: scale(1.5, 2.1);\n }\n\n 50% {\n transform: scale(2.1, 1.5);\n }\n\n 75% {\n transform: scale(1.5, 2.05);\n }\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"ab94fc","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":484,"cssLen":826,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n\t\t\t\n\t\t\t\tFacere ipsa nulla corrupti praesentium \n\t\t\t\n\t\t\t

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat, excepturi. Lorem ipsum dolor sit ...

\n\t\t

\n\t

\n","css":".card {\n padding: 10px;\n max-width: 260px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n background-color: rgb(255, 255, 255);\n font-family: sans-serif;\n}\n\n.content {\n margin-top: 1rem;\n}\n\n.content .header {\n margin-top: 0.5rem;\n}\n\n.image {\n width: 100%;\n height: 150px;\n border-radius: 4px;\n background-color: rgb(205, 235, 255);\n padding: 9px;\n}\n\n.tag {\n text-transform: capitalize;\n background-color: rgba(0, 0, 0, 0.425);\n padding: 2px 8px;\n border-radius: 4px;\n color: #fff;\n}\n\n.date {\n display: flex;\n font-size: 0.75rem;\n line-height: 1rem;\n align-items: center;\n margin: 2px;\n}\n\n.title {\n display: block;\n font-size: 1.25rem;\n line-height: 1.35rem;\n font-weight: 600;\n padding-bottom: 5px;\n padding-top: 14px;\n}\n\n.description {\n line-height: 1.375;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"fea7e8","snapshot":null,"tags":null,"title":"card by iSweat-exe","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1555,"cssLen":1251,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\r\n

\n \n \n \n

\n Sales\n

\n 20%\n

\n 1,500 €\n

\n \n

\n","css":".card {\n padding: 1rem;\n background-color: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n max-width: 320px;\n border-radius: 20px;\n width: 250px;\n}\n\n.title {\n display: flex;\n align-items: center;\n}\n\n.title span {\n position: relative;\n padding: 0.5rem;\n background-color: #B9101E;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 9999px;\n}\n\n.title span svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #ffffff;\n height: 1rem;\n}\n\n.title-text {\n margin-left: 0.5rem;\n color: #374151;\n font-size: 18px;\n}\n\n.percent {\n margin-left: 0.5rem;\n color: #B9101E;\n font-weight: 600;\n display: flex;\n}\n\n.data {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.data p {\n margin-top: 1rem;\n margin-bottom: 1rem;\n color: #1F2937;\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 700;\n text-align: left;\n}\n\n.data .range {\n position: relative;\n background-color: #E5E7EB;\n width: 100%;\n height: 0.5rem;\n border-radius: 0.25rem;\n}\n\n.data .range .fill {\n position: absolute;\n top: 0;\n left: 0;\n background-color: #B9101E;\n width: 36%;\n height: 100%;\n border-radius: 0.25rem;\n transition: .5s all;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"0b08c5","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":740,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".card {\n background-color: #25241c;\n border: 3px solid #f7df1e;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n font-weight: 700;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n padding: 30px 40px;\n color: #f7df1e;\n border-radius: 45px;\n}\n\n.App-logo {\n pointer-events: none;\n width: 120px;\n margin-bottom: 20px;\n}\n\n.App-button {\n padding: 10px 20px;\n background-color: transparent;\n color: #f7df1e;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n border: 3px solid #f7df1e;\n border-radius: 5em;\n margin-top: 20px;\n transition: 0.2s;\n}\n\n.App-button:hover {\n color: #2e2d23;\n background-color: #f7df1e;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"a5af3c","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":229,"cssLen":1780,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Hover

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.\n

\n \n

\n","css":".card {\n position: relative;\n width: 350px;\n height: 250px;\n background-image: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n border-radius: 10px;\n display: flex;\n padding: 10px 30px;\n flex-direction: column;\n gap: 10px;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n}\n\n.heading {\n font-size: 24px;\n font-weight: 700;\n color: #ffffff;\n}\n\n.para {\n text-align: center;\n color: #ffffff;\n opacity: 0.7;\n line-height: 1.4;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.6);\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n\n.card:hover .overlay {\n opacity: 1;\n pointer-events: auto;\n}\n\n.card .card-btn {\n position: absolute;\n top: 50%;\n left: 50%;\n font-weight: 600;\n padding: 10px 20px;\n font-size: 16px;\n transform: translate(-50%, -50%);\n background-color: #ffffff;\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 999;\n border: none;\n opacity: 0;\n scale: 0;\n transform-origin: 0 0;\n box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.15);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card:hover .card-btn {\n opacity: 1;\n scale: 1;\n}\n\n.card .card-btn:hover {\n box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.3);\n}\n\n.card .card-btn:active {\n scale: 0.95;\n}\n\n.overlay::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 100%;\n height: 100%;\n background-image: linear-gradient(-45deg, #f89b2980 0%, #ff0f7b80 100% );\n transition: transform 0.5s ease;\n}\n\n.card:hover .overlay::after {\n transform: translate(-50%, -50%) scale(2);\n}\n"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"10144d","snapshot":null,"tags":null,"title":"card by fanishah","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":316,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 12.5rem;\n height: 17rem;\n background-color: #212121;\n border-radius: 1rem;\n border: #212121 0.2rem solid;\n transition: all 0.4s ease-in;\n box-shadow: 0.4rem 0.4rem 0.6rem #00000040;\n}\n\n.card:hover {\n transform: translateY(-1.5rem);\n border: #f2295bf0 0.2em solid;\n border-radius: 2.5rem 0 2.5rem 0;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"dcf2f0","snapshot":null,"tags":null,"title":"card by csozidev","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2233,"cssLen":653,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

#49

creator on

uiverse.io

\n\n

","css":"/* UIverse rank card made by: csozi | Website: www.csozi.hu*/\n\n.card {\n position: relative;\n width: 280px;\n height: 130px;\n background: rgb(23,23,23);\n border-radius: 20px;\n padding: 20px;\n padding-left: 130px;\n transition: 0.3s;\n}\n\n.card:hover {\n filter: drop-shadow(5px 5px 0px rgb(185,100,255))\n drop-shadow(5px 5px 0px rgb(103,74,255))\n drop-shadow(5px 5px 0px rgb(12,204,238));\n scale: 1.05;\n}\n\n.svg {\n position: absolute;\n top: 18px;\n left: 18px;\n}\n\n.title1 {\n color: white;\n font-weight: bolder;\n font-size: 50px;\n line-height: 40px;\n}\n\n.title2 {\n color: white;\n font-weight: bolder;\n font-size: 24px;\n line-height: 22px;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"5ce968","snapshot":null,"tags":null,"title":"card by NotReal22","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":417,"cssLen":2027,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Welcome\n

Easer
Cheaper
World Wild

Secrets
Expensive
World Wild

","css":".card-2 {\n position: relative;\n width: 300px;\n height: 400px;\n background-image: linear-gradient(to top,rgb(117, 117, 197),#67be96);\n border-radius: 30px;\n border: 2px solid white;\n overflow: hidden;\n}\n\n.h1-circle {\n position: absolute;\n right: 70px;\n border-radius: 50%;\n width: 400px;\n height: 400px;\n background-image: radial-gradient(circle at center, #8798c5, #494fa1);\n opacity: .8;\n}\n\n.card-2:hover .h1-circle,\n.h1-circle:hover {\n animation: moving-weel 1s linear;\n animation-fill-mode: forwards;\n}\n\n.h1-circle:not(:hover) {\n animation: moving-weel-2 1s linear;\n animation-fill-mode: backwards;\n}\n\n@keyframes moving-weel-2 {\n 0% {\n rotate: 160deg;\n right: -170px;\n }\n\n 50% {\n right: 20px;\n rotate: 75deg;\n }\n\n 100% {\n rotate: 0deg;\n }\n}\n\n@keyframes moving-weel {\n 0% {\n rotate: 0deg;\n }\n\n 50% {\n right: 20px;\n rotate: 90deg;\n }\n\n 100% {\n rotate: 180deg;\n right: -170px;\n }\n}\n\n.h1-circle ul li {\n list-style: none;\n color: white;\n font-size: 20px;\n margin: 20px;\n}\n\n#h1-circle-ul-1 {\n display: flex;\n flex: 1;\n flex-direction: column;\n position: absolute;\n top: 100px;\n left: 200px;\n transition: 500ms ease-in;\n}\n\n#h1-circle-ul-2 {\n opacity: 0;\n flex: 1;\n flex-direction: column;\n position: absolute;\n top: 100px;\n left: 200px;\n transition: 1s ease-in;\n}\n\n#h1-circle-ul-2 li {\n transform: rotate(180deg);\n font-size: 20px;\n margin: 30px;\n}\n\n#card-2-h1 {\n position: absolute;\n left: 60px;\n top: 10px;\n color: transparent;\n font-size: 40px;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n z-index: 700;\n background: linear-gradient(to bottom right, transparent, white 90%),rgb(117, 190, 117);\n -webkit-background-clip: text;\n background-clip: text;\n text-transform: uppercase;\n transition: 1s ease-in;\n}\n\n.card-2:hover #h1-circle-ul-2 {\n opacity: 1;\n transition: 1s ease-in;\n}\n\n.card-2:hover #h1-circle-ul-1 {\n opacity: 0;\n transition: 500ms ease-in;\n}"},{"created":"2024-01-22T17:11:14.000Z","isPrivate":0,"projectId":"b4a3dc","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2480,"cssLen":1348,"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 background-color: #e4e4e4;\n border-radius: 15px;\n box-shadow: 10px 10px 20px #c4c4c4,\n -10px -10px 20px #ffffff;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n padding: 4px;\n}\n\n.button {\n background-color: #e4e4e4;\n border: none;\n border-radius: 10px;\n box-shadow: inset 5px 5px 5px #c4c4c4,\n inset -5px -5px 5px #ffffff;\n color: #333;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n font-size: 13px;\n font-weight: bold;\n margin: 3px;\n padding: 10px;\n text-transform: uppercase;\n}\n\n.button:hover {\n box-shadow: none;\n}\n\n.svg {\n width: 20px;\n height: 20px;\n margin-right: 5px;\n}\n\n.card .Explore {\n color: #3035cb;\n}\n\n.card .Explore:hover {\n background-color: #3035cb;\n color: #e4e4e4;\n}\n\n.card .Explore svg {\n fill: #3035cb;\n}\n\n.card .Explore:hover svg {\n fill: #e4e4e4;\n}\n\n.card .Post {\n color: #333;\n}\n\n.card .Post:hover {\n background-color: #333;\n color: #e4e4e4;\n}\n\n.card .Post svg {\n fill: #333;\n}\n\n.card .Post:hover svg {\n fill: #e4e4e4;\n}\n\n.card .Chat {\n color: #b82323;\n}\n\n.card .Chat:hover {\n background-color: #b82323;\n color: #e4e4e4;\n}\n\n.card .Chat svg {\n fill: #b82323;\n}\n\n.card .Chat:hover svg {\n fill: #e4e4e4;\n}\n"},{"created":"2024-01-22T17:11:14.000Z","isPrivate":0,"projectId":"44f041","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2758,"cssLen":1460,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 7 Tools for Faster Development in React\n 3 min to read\n

\n 10\n 4\n

\n\n\n

","css":".post-card {\n width: 320px;\n background: lightgrey;\n background-color: rgb(24 27 32);\n border: 1px solid rgb(84 90 106);\n border-radius: 20px;\n color: white;\n display: flex;\n flex-direction: column;\n padding: 10px 20px;\n}\n\n.avatar {\n height: 35px;\n width: 35px;\n border-radius: 50%;\n background-color: blueviolet;\n background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));\n}\n\n.title {\n font-size: 20px;\n line-height: 22px;\n font-weight: 600;\n margin-top: 10px;\n color: #fff;\n text-decoration: none;\n transition: all .35s ease-in;\n}\n\n.title:hover {\n text-decoration: underline blueviolet;\n}\n\n.datetime {\n font-size: 12px;\n color: rgb(168 179 207);\n margin: 10px 0;\n}\n\n.image-preview {\n flex: 1;\n min-height: 150px;\n width: 100%;\n border-radius: 20px;\n background-color: blueviolet;\n background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));\n margin-bottom: 4px;\n}\n\n.comment-like {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 2px 0;\n}\n\n.comment-like span {\n cursor: pointer;\n height: 40px;\n width: 50px;\n padding: 0 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n border-radius: 10px;\n background-color: transparent;\n transition: all .15s ease;\n}\n\n.comment-like span:hover {\n background-color: rgba(137, 43, 226, 0.096);\n}\n\n.comment-like span svg {\n fill: rgb(255, 255, 255);\n margin-right: 2px;\n}"}]}},"actionData":null,"errors":null}