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

Card hover effect

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

\n","css":".card {\n width: 300px;\n height: 200px;\n background-color: #4158d0;\n background-image: linear-gradient(\n 43deg,\n #4158d0 0%,\n #c850c0 46%,\n #ffcc70 100%\n );\n border-radius: 8px;\n color: white;\n overflow: hidden;\n position: relative;\n transform-style: preserve-3d;\n perspective: 1000px;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n cursor: pointer;\n transform: translate3d(7%, -2%, 0px) scale3d(0.9, 0.8, 1) rotateX(15deg)\n rotateY(-9deg) rotateZ(32deg);\n}\n\n.card-content {\n padding: 20px;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 10px;\n color: white;\n align-items: center;\n justify-content: center;\n text-align: center;\n height: 100%;\n}\n\n.card-content .card-title {\n font-size: 24px;\n font-weight: 700;\n color: inherit;\n text-transform: uppercase;\n}\n\n.card-content .card-para {\n color: inherit;\n opacity: 0.8;\n font-size: 14px;\n}\n\n.card:hover {\n transform: rotateY(0) rotateX(0) scale(1);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n}\n\n.card:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 1;\n}\n\n.card:hover:before {\n transform: translateX(-100%);\n}\n\n.card:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 1;\n}\n\n.card:hover:after {\n transform: translateX(100%);\n}\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"f4aaeb","snapshot":null,"tags":null,"title":"card by itsavicreation","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9907,"cssLen":1546,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Vikash Deep Yadav

Web Development

\n \n \n

\n","css":".card {\n --main-color: #000;\n --submain-color: #78858f;\n --bg-color: #fff;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n 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}\n"},{"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}"}]}},"actionData":null,"errors":null}