{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"d0c2b6","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":181818,"cssLen":3478,"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 My Name\n Lorem ipsum dolor sit amet consectetur adipisicinFcls \n

\n \n \n

","css":".card {\n width: 280px;\n height: 280px;\n background: white;\n border-radius: 32px;\n padding: 3px;\n position: relative;\n box-shadow: #604b4a30 0px 70px 30px -50px;\n transition: all 0.5s ease-in-out;\n}\n\n.card .mail {\n position: absolute;\n right: 2rem;\n top: 1.4rem;\n background: transparent;\n border: none;\n}\n\n.card .mail svg {\n stroke: #fbb9b6;\n stroke-width: 3px;\n}\n\n.card .mail svg:hover {\n stroke: #f55d56;\n}\n\n.card .profile-pic {\n position: absolute;\n width: calc(100% - 6px);\n height: calc(100% - 6px);\n top: 3px;\n left: 3px;\n border-radius: 29px;\n z-index: 1;\n border: 0px solid #fbb9b6;\n overflow: hidden;\n transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;\n}\n\n.card .profile-pic img {\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n height: 100%;\n -o-object-position: 0px 0px;\n object-position: 0px 0px;\n transition: all 0.5s ease-in-out 0s;\n}\n\n.card .profile-pic svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -o-object-position: 0px 0px;\n object-position: 0px 0px;\n transform-origin: 45% 20%;\n transition: all 0.5s ease-in-out 0s;\n}\n\n.card .bottom {\n position: absolute;\n bottom: 3px;\n left: 3px;\n right: 3px;\n background: #fbb9b6;\n top: 80%;\n border-radius: 29px;\n z-index: 2;\n box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;\n}\n\n.card .bottom .content {\n position: absolute;\n bottom: 0;\n left: 1.5rem;\n right: 1.5rem;\n height: 160px;\n}\n\n.card .bottom .content .name {\n display: block;\n font-size: 1.2rem;\n color: white;\n font-weight: bold;\n}\n\n.card .bottom .content .about-me {\n display: block;\n font-size: 0.9rem;\n color: white;\n margin-top: 1rem;\n}\n\n.card .bottom .bottom-bottom {\n position: absolute;\n bottom: 1rem;\n left: 1.5rem;\n right: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.card .bottom .bottom-bottom .social-links-container {\n display: flex;\n gap: 1rem;\n}\n\n.card .bottom .bottom-bottom .social-links-container svg {\n height: 20px;\n fill: white;\n filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));\n}\n\n.card .bottom .bottom-bottom .social-links-container svg:hover {\n fill: #f55d56;\n transform: scale(1.2);\n}\n\n.card .bottom .bottom-bottom .button {\n background: white;\n color: #fbb9b6;\n border: none;\n border-radius: 20px;\n font-size: 0.6rem;\n padding: 0.4rem 0.6rem;\n box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;\n}\n\n.card .bottom .bottom-bottom .button:hover {\n background: #f55d56;\n color: white;\n}\n\n.card:hover {\n border-top-left-radius: 55px;\n}\n\n.card:hover .bottom {\n top: 20%;\n border-radius: 80px 29px 29px 29px;\n transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;\n}\n\n.card:hover .profile-pic {\n width: 100px;\n height: 100px;\n aspect-ratio: 1;\n top: 10px;\n left: 10px;\n border-radius: 50%;\n z-index: 3;\n border: 7px solid #fbb9b6;\n box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;\n transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;\n}\n\n.card:hover .profile-pic:hover {\n transform: scale(1.3);\n border-radius: 0px;\n}\n\n.card:hover .profile-pic img {\n transform: scale(2.5);\n -o-object-position: 0px 25px;\n object-position: 0px 25px;\n transition: all 0.5s ease-in-out 0.5s;\n}\n\n.card:hover .profile-pic svg {\n transform: scale(2.5);\n transition: all 0.5s ease-in-out 0.5s;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"6dff8e","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":514,"cssLen":2156,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Jr\n

- Frontend Developer -

","css":".relative{position:relative}.flex{display:flex}.h-36{height:9rem}.w-72{width:18rem}.skew-x-6{--tw-skew-x:6deg;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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.rounded-2xl{border-radius:1rem}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.font-thin{font-weight:100}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77 / var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-3::before{content:var(--tw-content);right:0.75rem}.before\\:top-0::before{content:var(--tw-content);top:0px}.before\\:-z-10::before{content:var(--tw-content);z-index:-10}.before\\:h-32::before{content:var(--tw-content);height:8rem}.before\\:w-72::before{content:var(--tw-content);width:18rem}.before\\:-skew-x-12::before{content:var(--tw-content);--tw-skew-x:-12deg;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))}.before\\:rounded-2xl::before{content:var(--tw-content);border-radius:1rem}.before\\:bg-neutral-700::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(64 64 64 / var(--tw-bg-opacity))}.hover\\:translate-x-2:hover{--tw-translate-x:0.5rem;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\\:-skew-x-0:hover{--tw-skew-x:-0deg;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))}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"da1906","snapshot":null,"tags":null,"title":"card by Giuxpro","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":154,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(46, 44, 44);\n transition: all 300ms;\n}\n\n.card:hover {\n opacity: 0.8;\n transform: scale(1.10);\n}\n\n\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"960263","snapshot":null,"tags":null,"title":"card by codebykay101","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":205,"cssLen":843,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n}\n\n.loader {\n position: relative;\n width: 150px;\n height: 150px;\n background: rgba(45, 45, 45, 1);\n overflow: hidden;\n transform: rotate(calc(90deg * var(--i)));\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n width: 300px;\n height: 300px;\n background: radial-gradient(var(--clr), transparent);\n animation: animate 1.5s linear infinite;\n}\n\n.loader::after {\n content: \"\";\n position: absolute;\n inset: 2px;\n background: rgba(45, 45, 45, 0.9);\n}\n\n@keyframes animate {\n 0% {\n transform: translate(-150px, -150px);\n }\n 25% {\n transform: translate(0px, -150px);\n }\n 50% {\n transform: translate(0px, 0px);\n }\n 75% {\n transform: translate(-150px, 0px);\n }\n 100% {\n transform: translate(-150px, -150px);\n }\n}\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"03749a","snapshot":null,"tags":null,"title":"card by mi-series","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":399,"cssLen":1317,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

GPT Plus

$20/month

Access to GPT-4, our most capable model. Faster response speed.

\n Act fast! Offer ends on October 25, 2023.\n \n

Special Offer!

","css":".container {\n width: 300px;\n padding: 15px;\n background: #ffffff;\n text-align: center;\n border: 1px solid #000;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);\n position: relative;\n}\n\n.container .title {\n font-size: 2rem;\n font-weight: 500;\n color: #333;\n}\n\n.container .price {\n color: #40B3A2;\n font-weight: 700;\n font-size: 2.2rem;\n margin: 10px 0;\n}\n\n.container span {\n font-size: 1.2rem;\n}\n\n.container .description {\n color: #3b3b3b;\n font-size: 1.1rem;\n margin: 10px 0 10px;\n}\n\n.container .offer {\n display: block;\n color: #555;\n font-size: 1rem;\n margin-top: 10px;\n}\n\n.subscribe-button {\n display: inline-block;\n padding: 5px 0;\n background-color: #40B3A2;\n color: #fff;\n text-decoration: none;\n border: 1px solid #000;\n border-radius: 30px;\n font-size: 1.2rem;\n margin-top: 20px;\n width: 50%;\n font-weight: 500;\n transition: 0.2s ease;\n}\n\n.subscribe-button:hover {\n opacity: .85;\n}\n\n.ribbon-wrap {\n width: 80px;\n height: 80px;\n position: absolute;\n top: -20px;\n left: 50px;\n pointer-events: none;\n}\n\n.ribbon {\n width: 200px;\n font-size: 0.8rem;\n text-align: center;\n padding: 4px 0;\n border: 1px solid #000;\n background: #40B3A2;\n color: #fff;\n position: absolute;\n transform: rotate(-45deg);\n right: -10px;\n top: 55%;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"a4c89b","snapshot":null,"tags":null,"title":"card by EcheverriaJesus","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1512,"cssLen":1837,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

Jesus Echeverria

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro est numquam ipsa consequatur provident fugiat quaerat cupiditate temporibus cum?

\n \n

\n","css":".m-12{margin:3rem}.flex{display:flex}.h-10{height:2.5rem}.w-10{width:2.5rem}.w-36{width:9rem}.max-w-\\[300px\\]{max-width:300px}.justify-center{justify-content:center}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.bg-blue-800{--tw-bg-opacity:1;background-color:rgb(30 64 175 / var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-5{padding:1.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.pb-2{padding-bottom:0.5rem}.pt-5{padding-top:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-7{line-height:1.75rem}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.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\\:scale-90:hover{--tw-scale-x:.9;--tw-scale-y:.9;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-gray-900:hover{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"cdc2ce","snapshot":null,"tags":null,"title":"card by lonefox-xxx","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":486,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Click me\n

","css":".card {\n width: 210px;\n height: 235px;\n background: #212121;\n box-shadow: rgba(0, 0, 0, 0.4) 10px 20px 30px, rgba(0, 0, 0, 0.3) 10px 1px 53px 3px, rgba(1, 0, 0, 0.2) 0px -1px 3px inset;\n text-align: center;\n cursor: pointer;\n transition: all 0.5s;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n font-weight: bolder;\n color: #fff;\n}\n\n.card:hover {\n transform: scale(1.021);\n}\n\n.card:active {\n transform: scale(0.95) rotateZ(1.1deg);\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"04183e","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":684,"cssLen":1224,"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 consectetur adipisicing elit. At velit illum\n provident a, ipsa maiores deleniti consectetur nobis et eaque.\n

Published: 31st June, 2021
Reading time: 3 minute

","css":".card {\n max-width: 320px;\n position: relative;\n display: block;\n overflow: hidden;\n border: 1px solid rgba(243, 244, 246, );\n border-radius: 0.5rem;\n padding: 1rem;\n background-color: #fff;\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.title {\n font-size: 1.125rem;\n line-height: 1.25rem;\n font-weight: 700;\n color: rgba(17, 24, 39, 1);\n text-decoration: none;\n}\n\n.title:hover {\n text-decoration: underline royalblue;\n}\n\n.name {\n margin-top: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 500;\n color: rgba(75, 85, 99, 1);\n}\n\n.image {\n display: block;\n flex-shrink: 0;\n height: 3rem;\n width: 3rem;\n border-radius: 0.5rem;\n object-fit: cover;\n background-color: royalblue;\n}\n\n.description {\n margin-top: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(107, 114, 128, 1);\n}\n\n.post-info {\n margin-top: 1.5rem;\n display: flex;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.cr {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.dt {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n color: rgba(75, 85, 99, 1);\n}\n\n.dd {\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgba(107, 114, 128,1);\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"a7e5db","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":976,"cssLen":4479,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n George Johnson\n

Support Specialist

\n Folow\n

","css":".relative{position:relative}.z-10{z-index:10}.mt-8{margin-top:2rem}.flex{display:flex}.h-28{height:7rem}.h-72{height:18rem}.w-28{width:7rem}.w-80{width:20rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border-4{border-width:4px}.border-slate-50{--tw-border-opacity:1;border-color:rgb(248 250 252 / var(--tw-border-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.from-sky-200{--tw-gradient-from:#bae6fd var(--tw-gradient-from-position);--tw-gradient-to:rgb(186 230 253 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-orange-200{--tw-gradient-to:rgb(254 215 170 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #fed7aa var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-orange-700{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.text-slate-50{--tw-text-opacity:1;color:rgb(248 250 252 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:top-0::before{content:var(--tw-content);top:0px}.before\\:h-24::before{content:var(--tw-content);height:6rem}.before\\:w-80::before{content:var(--tw-content);width:20rem}.before\\:rounded-t-2xl::before{content:var(--tw-content);border-top-left-radius:1rem;border-top-right-radius:1rem}.before\\:bg-gradient-to-bl::before{content:var(--tw-content);background-image:linear-gradient(to bottom left, var(--tw-gradient-stops))}.before\\:transition-all::before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.hover\\:scale-125:hover{--tw-scale-x:1.25;--tw-scale-y:1.25;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-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.before\\:hover\\:h-44:hover::before{content:var(--tw-content);height:11rem}.before\\:hover\\:h-72:hover::before{content:var(--tw-content);height:18rem}.before\\:hover\\:w-80:hover::before{content:var(--tw-content);width:20rem}.before\\:hover\\:scale-95:hover::before{content:var(--tw-content);--tw-scale-x:.95;--tw-scale-y:.95;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))}.before\\:hover\\:rounded-b-2xl:hover::before{content:var(--tw-content);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}.group:hover .group-hover\\:-translate-x-24{--tw-translate-x:-6rem;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\\:-translate-y-10{--tw-translate-y:-2.5rem;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\\:-translate-y-20{--tw-translate-y:-5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;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))}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"f1a60b","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1995,"cssLen":1898,"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

Wallet

\n\n\n\n

","css":".wallet {\n --bg-color: #CEB2FC;\n --bg-color-light: #F0E7FF;\n --text-color-hover: #fff;\n --box-shadow-color: rgba(206, 178, 252, 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:32.000Z","isPrivate":0,"projectId":"1c0e97","snapshot":null,"tags":null,"title":"card by AbanoubMagdy1","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":228,"cssLen":1332,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n John Doe\n Software engineer\n

","css":".card {\n border: .05rem solid black;\n height: 210px;\n width: 180px;\n overflow: hidden;\n position: relative;\n}\n\n.card:hover .img1 {\n transform: scale(1.5, 1.2) translate(5px, -30px) rotate(5deg);\n}\n\n.card:hover .img1::before {\n transition: transform 1s 0.4s;\n transform: translateX(400px) skewX(-10deg);\n}\n\n.card:hover .img2 {\n transform: translateY(120%);\n}\n\n.card .img {\n position: absolute;\n width: 100%;\n height: 50%;\n background: linear-gradient(180deg, rgb(65, 122, 255), rgb(23, 65, 193));\n background-size: 100% 200%;\n transition: 0.3s all;\n}\n\n.card .img1 {\n top: 0;\n right: 0;\n position: relative;\n}\n\n.card .img1::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -25px;\n height: 100%;\n width: 10px;\n transform: skewX(-10deg);\n background-image: linear-gradient(to right, rgb(32, 151, 248), rgba(255, 255, 255, 0.9));\n}\n\n.card .img2 {\n bottom: 0;\n right: 0;\n background-position: bottom center;\n}\n\n.card__content {\n margin-left: 1rem;\n margin-top: 1rem;\n transform: translateX(-130%);\n transition: .5s ease-in-out transform .3s;\n position: relative;\n z-index: -1;\n}\n\n.card__content span {\n display: block;\n}\n\n.card__content .name {\n font-weight: bold;\n font-size: 1.7rem;\n}\n\n.card__content .job {\n color: #B2B2B2;\n}\n\n.card:hover .card__content {\n transform: translateX(0);\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"3adcc9","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9267,"cssLen":5378,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

ANNA WILSON

DEVELOPER

\n \n

\n \n \n \n \n

+123-458-784

\n \n \n \n \n

smkys@gmail.com

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

smkydevelopr.com

\n \n \n \n

456 Anytown, Near Anywhere, ST 47523

\n \n

\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.z-40{z-index:40}.z-\\[100\\]{z-index:100}.flex{display:flex}.size-36{width:9rem;height:9rem}.size-\\[60\\%\\]{width:60%;height:60%}.h-3{height:0.75rem}.w-\\[300px\\]{width:300px}.w-full{width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.snap-start{scroll-snap-align:start}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border-4{border-width:4px}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.bg-\\[\\#58b0e0\\]{--tw-bg-opacity:1;background-color:rgb(88 176 224 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fill-stone-700{fill:#44403c}.pb-3{padding-bottom:0.75rem}.pt-5{padding-top:1.25rem}.font-serif{font-family:ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-\\[\\#434955\\]{--tw-text-opacity:1;color:rgb(67 73 85 / var(--tw-text-opacity))}.shadow-xl{--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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-700{transition-delay:700ms}.duration-300{transition-duration:300ms}.\\*\\:inline-flex > *{display:inline-flex}.\\*\\:items-center > *{align-items:center}.\\*\\:justify-center > *{justify-content:center}.\\*\\:gap-2 > *{gap:0.5rem}.\\*\\:border-b-\\[1\\.5px\\] > *{border-bottom-width:1.5px}.\\*\\:border-dotted > *{border-style:dotted}.\\*\\:border-b-stone-700 > *{--tw-border-opacity:1;border-bottom-color:rgb(68 64 60 / var(--tw-border-opacity))}.\\*\\:text-center > *{text-align:center}.\\*\\:text-xs > *{font-size:0.75rem;line-height:1rem}.\\*\\:font-semibold > *{font-weight:600}.\\*\\:leading-4 > *{line-height:1rem}.\\*\\:text-\\[\\#434955\\] > *{--tw-text-opacity:1;color:rgb(67 73 85 / var(--tw-text-opacity))}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:bottom-4::before{content:var(--tw-content);bottom:1rem}.before\\:h-\\[6px\\]::before{content:var(--tw-content);height:6px}.before\\:w-full::before{content:var(--tw-content);width:100%}.before\\:bg-\\[\\#58b0e0\\]::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(88 176 224 / var(--tw-bg-opacity))}.before\\:transition-all::before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.before\\:delay-300::before{content:var(--tw-content);transition-delay:300ms}.before\\:duration-300::before{content:var(--tw-content);transition-duration:300ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:top-4::after{content:var(--tw-content);top:1rem}.after\\:h-\\[6px\\]::after{content:var(--tw-content);height:6px}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:bg-\\[\\#58b0e0\\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(88 176 224 / var(--tw-bg-opacity))}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:delay-300::after{content:var(--tw-content);transition-delay:300ms}.after\\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.group:hover .group-hover\\:size-\\[1\\%\\]{width:1%;height:1%}.group:hover .group-hover\\:h-5{height:1.25rem}.group:hover .group-hover\\:border-8{border-width:8px}.group:hover .group-hover\\:fill-\\[\\#58b0e0\\]{fill:#58b0e0}.group:hover .group-hover\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\\:delay-0{transition-delay:0s}.group:hover .group-hover\\:duration-300{transition-duration:300ms}.group:hover .before\\:group-hover\\:size-\\[1\\%\\]::before{content:var(--tw-content);width:1%;height:1%}.group:hover .before\\:group-hover\\:transition-all::before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .before\\:group-hover\\:delay-0::before{content:var(--tw-content);transition-delay:0s}.group:hover .before\\:group-hover\\:duration-300::before{content:var(--tw-content);transition-duration:300ms}.group:hover .after\\:group-hover\\:size-\\[1\\%\\]::after{content:var(--tw-content);width:1%;height:1%}.group:hover .after\\:group-hover\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .after\\:group-hover\\:delay-0::after{content:var(--tw-content);transition-delay:0s}.group:hover .after\\:group-hover\\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.has-\\[\\:last\\]\\:border-b-0:has(:last){border-bottom-width:0px}"}]}},"actionData":null,"errors":null}