{"loaderData":{"0":null,"0-3":{"total":7264,"projects":[{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"2ccfe4","snapshot":null,"tags":null,"title":"card by marwam112010","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1985,"cssLen":1795,"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 2 team members\n
\n
\n \n \n \n
\n 1000+ components\n
\n
\n \n \n \n
\n 1 month free updates\n
\n
\n \n \n \n
\n Life time technical support\n
\n

\n \n

","css":".pack-container {\n position: relative;\n display: flex;\n max-width: 350px;\n flex-direction: column;\n border-radius: 12px;\n background-color: #212121;\n border: 1px solid #fff;\n padding: 1.6rem;\n color: #fff;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.header {\n position: relative;\n margin: 0;\n margin-bottom: 2rem;\n overflow: hidden;\n border-radius: 0;\n border-bottom: 1px solid #fff;\n background: transparent;\n padding-bottom: 1rem;\n text-align: center;\n}\n\n.title {\n display: block;\n font-family: sans-serif;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-transform: uppercase;\n color: #fff\n}\n\n.price-container {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n font-family: sans-serif;\n font-size: 4.5rem;\n line-height: 1;\n}\n\n.price-container span:first-child {\n margin-top: 10px;\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.price-container span:last-child {\n align-self: flex-end;\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.lists {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.list {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.list span {\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.24);\n background-color: rgba(255, 255, 255, 0.185);\n height: 30px;\n width: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.list span svg {\n height: 12px;\n width: 12px;\n}\n\n.list p {\n display: block;\n font-family: sans-serif;\n}\n\n.button-container {\n margin-top: 20px;\n padding: 0;\n}\n\n.button-container button {\n display: block;\n width: 100%;\n background-color: #fff;\n padding: 10px 20px;\n text-transform: uppercase;\n color: #000;\n outline: 0;\n border: 0;\n border-radius: 10px;\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"e7c461","snapshot":null,"tags":null,"title":"card by themrsami","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":2494,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Your Message Sent Successfully

\n \n

Lorem Ipsum is simply dummy text of the printing and\n typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

\n \n \n

\n","css":".mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-1{height:0.25rem}.w-\\[90px\\]{width:90px}.w-full{width:100%}.max-w-\\[570px\\]{max-width:570px}.flex-wrap{flex-wrap:wrap}.gap-3{gap:0.75rem}.rounded{border-radius:0.25rem}.rounded-\\[20px\\]{border-radius:20px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pb-2{padding-bottom:0.5rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.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}.hover\\:border-red-600:hover{--tw-border-opacity:1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.hover\\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.hover\\:bg-opacity-90:hover{--tw-bg-opacity:0.9}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (min-width: 640px){.sm\\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width: 768px){.md\\:px-\\[70px\\]{padding-left:70px;padding-right:70px}.md\\:py-\\[60px\\]{padding-top:60px;padding-bottom:60px}}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"cca857","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2353,"cssLen":560,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".navigation-card {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 30px;\n background-color: rgb(255, 255, 255);\n padding: 15px 20px;\n border-radius: 50px;\n}\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n overflow: hidden;\n background-color: rgb(252, 252, 252);\n padding: 15px;\n border-radius: 50%;\n cursor: pointer;\n text-decoration: none;\n transition: all 0.3s;\n}\n.tab:hover {\n background-color: rgb(223, 223, 223);\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"abc1a2","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":941,"cssLen":1379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n

\n Card title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.\n

\n\n","css":".line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.flex{display:flex}.h-40{height:10rem}.w-72{width:18rem}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-evenly{justify-content:space-evenly}.gap-4{gap:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.stroke-purple-300{stroke:#d8b4fe}.px-4{padding-left:1rem;padding-right:1rem}.font-bold{font-weight:700}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254 / 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}.duration-500{transition-duration:500ms}.hover\\:translate-y-2:hover{--tw-translate-y: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))}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"070ed2","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":428,"cssLen":1421,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover me

Card Hover

\n Lorem ipsum dolor sit amet, consectetur adipii\n voluptas ten mollitia pariatur odit, ab\n minus ratione adipisci accusamus vel est excepturi laboriosam magnam\n necessitatibus dignissimos molestias.\n

","css":".card-container {\n width: 300px;\n height: 300px;\n position: relative;\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.card {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.card .front-content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .front-content p {\n font-size: 32px;\n font-weight: 700;\n opacity: 1;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n color: #e8e8e8;\n padding: 20px;\n line-height: 1.5;\n border-radius: 5px;\n pointer-events: none;\n transform: translateX(-96%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card .content .heading {\n font-size: 32px;\n font-weight: 700;\n}\n\n.card:hover .content {\n transform: translateY(0);\n}\n\n.card:hover .front-content {\n transform: translateX(-30%);\n}\n\n.card:hover .front-content p {\n opacity: 0;\n}\n\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"08cb48","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Go!\n

","css":".card {\n width: 150px;\n height: 150px;\n background: #a53c3c;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-size: 3em;\n font-weight: 900;\n color: aliceblue;\n transition: all .5s ease-in-out;\n}\n\n.text {\n transition: all 0.3s ease-in-out;\n}\n\n.card:hover {\n box-shadow: 75px 75px 5px -20px #bf5e37, -75px 75px 5px -20px #d08432, -75px -75px 5px -20px #bf5e37 , 75px -75px 5px -20px #d08432;\n transform: rotate(-45deg);\n}\n\n.card:hover .text {\n transform: rotate(45deg);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"08c695","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":700,"cssLen":3437,"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-64{width:16rem}.origin-bottom-right{transform-origin:bottom right}.-rotate-12{--tw-rotate:-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))}.skew-x-0{--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))}.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-64::before{content:var(--tw-content);width:16rem}.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))}.before\\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.hover\\:-translate-x-6:hover{--tw-translate-x:-1.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\\:translate-y-12:hover{--tw-translate-y:3rem;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\\:-rotate-0:hover{--tw-rotate:-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))}.hover\\:-skew-x-12:hover{--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))}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .group-hover\\:before\\:-right-3::before{content:var(--tw-content);right:-0.75rem}.group:hover .group-hover\\: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))}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"8473ec","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":198,"cssLen":2154,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: lightgrey;\n box-shadow: 12px 12px 20px -12px rgba(0,0,0,0.75);\n z-index: 1;\n border-radius: 21px;\n overflow: hidden;\n transform: rotate(-2deg);\n}\n\n.card__content {\n background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));\n z-index: 1;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 21px;\n}\n\n.blob {\n position: absolute;\n z-index: -1;\n border-radius: 50%;\n width: 150px;\n height: 150px;\n filter: blur(15px);\n opacity: 0.5;\n}\n\n.blob-1 {\n left: -65px;\n top: -45px;\n background: #59C173;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(12deg);\n}\n\n.blob-2 {\n left: -30px;\n top: 120px;\n background: #A8EB12;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom, #54C0EC, #A8EB12);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom, #54C0EC, #A8EB12);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(20deg);\n}\n\n.blob-3 {\n right: -60px;\n bottom: -10px;\n background: #CC2E5C;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom, #753a88, #CC2E5C);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom, #753a88, #CC2E5C);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(-10deg);\n}\n\n.blob-4 {\n right: -70px;\n top: 20px;\n background: #FFA17F;\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n transform: rotate(-25deg);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"c9512f","snapshot":null,"tags":null,"title":"card by zanina-yassine","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4615,"cssLen":3109,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\"I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to use.\"

\n Yassine Zanina\n Creative Designer & Developer\n

","css":".container {\n height: fit-content;\n display: flex;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 9px;\n}\n\n.login-form {\n width: 350px;\n height: auto;\n display: flex;\n flex-direction: column;\n gap: 15px;\n padding: 20px;\n border-radius: 9px 0 0 9px;\n background-color: #fff;\n}\n\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 15px 0;\n}\n\n.title {\n font-weight: 700;\n font-size: 15px;\n line-height: 21px;\n text-align: center;\n color: #2B2B2F;\n margin-bottom: 10px;\n}\n\n.description {\n max-width: 80%;\n margin: auto;\n font-weight: 600;\n font-size: 10px;\n line-height: 14px;\n text-align: center;\n color: #5F5D6B;\n}\n\n.input_container {\n width: 100%;\n height: fit-content;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.icon {\n width: 20px;\n position: absolute;\n z-index: 99;\n left: 12px;\n bottom: 9px;\n}\n\n.input_field {\n width: auto;\n height: 40px;\n padding: 0 0 0 40px;\n border-radius: 7px;\n outline: none;\n border: 1px solid #e5e5e5;\n filter: drop-shadow(0px 1px 0px #efefef)\n drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.input_field:focus {\n border: 1px solid transparent;\n box-shadow: 0px 0px 0px 2px #115DFC;\n background-color: transparent;\n}\n\n.sign-in_btn {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 36px;\n background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);\n box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 5px;\n border: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n color: #ffffff;\n transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.sign-in_btn:hover {\n transform: scale(1.01) translateY(-2px);\n box-shadow: 0 10px 20px 0#054eed6b;\n}\n\n.testimonial {\n width: 250px;\n height: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding: 20px;\n background: linear-gradient(358.31deg,#fff -24.13%,hsla(0,0%,100%,0) 338.58%),linear-gradient(89.84deg,rgba(230,36,174,.15) .34%,rgba(94,58,255,.15) 16.96%,rgba(10,136,255,.15) 34.66%,rgba(75,191,80,.15) 50.12%,rgba(137,206,0,.15) 66.22%,rgba(239,183,0,.15) 82%,rgba(246,73,0,.15) 99.9%);\n border-radius: 0 9px 9px 0;\n}\n\n.testimonial p {\n color: #4d4c6d;\n font-size: 11px;\n text-align: center;\n font-weight: 600;\n}\n\n.user-profile-picture {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #00000011;\n}\n\n.user {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 3px;\n}\n\n.username {\n color: #4d4c6d;\n font-size: 11px;\n text-align: center;\n font-weight: 600;\n}\n\n.occupation {\n color: rgb(141, 140, 161);\n font-size: 10px;\n text-align: center;\n font-weight: 600;\n}"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"7154e1","snapshot":null,"tags":null,"title":"card by e-coders","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":283,"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: linear-gradient(135deg, #ff85ec 0%, #84ff98 100%);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"0a3a2e","snapshot":null,"tags":null,"title":"card by Pranali9922","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":896,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n width: 200px;\n height: 200px;\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n}\n\n.card-inner {\n width: inherit;\n height: inherit;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(10px);\n border-radius: 8px;\n}\n\n.card:hover {\n transform: scale(1.04) rotate(1deg);\n}\n\n.circle {\n width: 100px;\n height: 100px;\n background: repeating-linear-gradient(48deg, #3023ae 0%, #ff0099 100%);\n border-radius: 35% 30% 75% 30% / 49% 30% 70% 51%;\n position: absolute;\n animation: move-up6 2s ease-in infinite alternate-reverse;\n}\n\n.circle:nth-child(1) {\n top: -25px;\n left: -25px;\n}\n\n.circle:nth-child(2) {\n bottom: -25px;\n right: -25px;\n animation-name: move-down1;\n}\n\n@keyframes move-up6 {\n to {\n transform: translateY(-10px);\n }\n}\n\n@keyframes move-down1 {\n to {\n transform: translateY(10px);\n }\n}\n"},{"created":"2024-01-22T17:11:18.000Z","isPrivate":0,"projectId":"d3001f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1035,"cssLen":1264,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Who to follow

\n Name\n

@namedlorem

\n \n

\n Name\n

@namedlorem

\n \n

\n Name\n

@namedlorem

\n \n

\n\n

\n See more\n

","css":".card {\n width: 350px;\n height: 350px;\n background: #E8EAEA;\n border-radius: 15px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.title, .more {\n padding: 10px 15px;\n}\n\n.user {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 10px 15px;\n}\n\n.user__content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-grow: 1;\n}\n\n.user__container {\n display: flex;\n flex-direction: column;\n}\n\n.title {\n font-weight: 900;\n font-size: 1.3em;\n}\n\n.name {\n font-weight: 800;\n}\n\n.username {\n font-size: .9em;\n color: #64696e;\n}\n\n.image {\n width: 60px;\n height: 60px;\n background: rgb(22,19,70);\n background: linear-gradient(295deg, rgba(22,19,70,1) 41%, rgba(89,177,237,1) 100%);\n border-radius: 50%;\n margin-right: 15px;\n}\n\n.follow {\n border: none;\n border-radius: 25px;\n background-color: #0f1113;\n color: white;\n padding: 8px 15px;\n font-weight: 700;\n}\n\n.more {\n display: block;\n text-decoration: none;\n color: rgb(29, 155, 240);\n font-weight: 800;\n}\n\n.user:hover {\n background-color: #b3b6b6;\n}\n\n.more:hover {\n background-color: #b3b6b6;\n border-radius: 0px 0px 15px 15px;\n}\n\n.follow:hover {\n background-color: #2c3136;\n}"}]}},"actionData":null,"errors":null}