{"loaderData":{"0":null,"0-2":{"total":7187,"projects":[{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"070adc","snapshot":null,"tags":null,"title":"card by kamehame-ha","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":277,"cssLen":490,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Scroll On Me

","css":".red {\n background-color: #f43f5e;\n}\n\n.blue {\n background-color: #3b82f6;\n}\n\n.green {\n background-color: #22c55e;\n}\n\n.scroll-snap-card {\n height: 150px;\n width: 250px;\n scroll-snap-type: y mandatory;\n overflow: auto;\n border-radius: 10px;\n}\n\n.scroll-snap-card .slide {\n width: 100%;\n height: 100%;\n scroll-snap-align: start;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.scroll-snap-card .slide p {\n font-size: 1em;\n color: white;\n font-weight: 700;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"002cd1","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1846,"cssLen":3157,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\t

\n\t\t

\n\t\t\t

\n\t\t\t\tGet Your Document\n\t\t\t\t

Access your document instantly, simply click the download link.

\n\t\t\t

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

\n\t\t

\n\t

","css":".relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-48{height:12rem}.h-6{height:1.5rem}.h-full{height:100%}.w-6{width:1.5rem}.w-64{width:16rem}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:0.75rem}.bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-cyan-800{--tw-gradient-from:#155e75 var(--tw-gradient-from-position);--tw-gradient-to:rgb(21 94 117 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-cyan-700{--tw-gradient-to:rgb(14 116 144 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0e7490 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.stroke-cyan-800{stroke:#155e75}.p-3{padding:0.75rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-left-4::before{content:var(--tw-content);left:-1rem}.before\\:-top-12::before{content:var(--tw-content);top:-3rem}.before\\:h-28::before{content:var(--tw-content);height:7rem}.before\\:w-28::before{content:var(--tw-content);width:7rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:border-8::before{content:var(--tw-content);border-width:8px}.before\\:bg-transparent::before{content:var(--tw-content);background-color:transparent}.before\\:opacity-50::before{content:var(--tw-content);opacity:0.5}.before\\:blur-none::before{content:var(--tw-content);--tw-blur:blur(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\\:duration-700::before{content:var(--tw-content);transition-duration:700ms}.hover\\:opacity-90:hover{opacity:0.9}.group:hover .group-hover\\:before\\:left-44::before{content:var(--tw-content);left:11rem}.group:hover .group-hover\\:before\\:top-28::before{content:var(--tw-content);top:7rem}.group:hover .group-hover\\:before\\:scale-125::before{content:var(--tw-content);--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))}.group:hover .group-hover\\:before\\:blur::before{content:var(--tw-content);--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"eae6e5","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3763,"cssLen":1908,"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

Credentialing

\n\n\n\n\n

","css":".credentialing {\n --bg-color: #B8F9D3;\n --bg-color-light: #e2fced;\n --text-color-hover: #4C5656;\n --box-shadow-color: rgba(184, 249, 211, 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:03.000Z","isPrivate":0,"projectId":"01acec","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2965,"cssLen":1253,"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","css":".socials-container {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 25px;\n padding: 20px 40px;\n background-color: #333333;\n}\n.social {\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n border: 1px solid rgb(194, 194, 194);\n}\n.twitter:hover {\n background: linear-gradient(45deg, #66757f, #00acee, #36daff, #dbedff);\n}\n.facebook:hover {\n background: linear-gradient(45deg, #134ac0, #316ff6, #78a3ff);\n}\n.google-plus:hover {\n background: linear-gradient(45deg, #872419, #db4a39, #ff7061);\n}\n.instagram:hover {\n background: #f09433;\n background: -moz-linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n background: -webkit-linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n background: linear-gradient(\n 45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%\n );\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n}\n.social svg {\n fill: white;\n height: 20px;\n}\n"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"d29157","snapshot":null,"tags":null,"title":"card by syahrulnaufal","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":186,"cssLen":1680,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#content {\n width: 250px;\n height: 400px;\n box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n z-index: 1;\n display: flex;\n background-color: bisque;\n border-radius: 15px;\n}\n\n.blob {\n flex-shrink: 0;\n flex-basis: 1;\n width: 230px;\n height: 230px;\n position: relative;\n z-index: 2;\n border-radius: 50%;\n}\n\n.blob:nth-child(2) {\n top: -10px;\n left: -320px;\n background-color: #FFB84C;\n animation: wave 1.5s infinite alternate;\n animation-delay: 0s;\n}\n\n.blob:nth-child(3) {\n top: 0px;\n left: -360px;\n background-color: #F266AB;\n animation: wave 1.5s infinite alternate;\n animation-delay: 0.5s;\n}\n\n.blob:nth-child(4) {\n top: 180px;\n left: -750px;\n background-color: #A459D1;\n animation: wave 1.5s infinite alternate;\n animation-delay: 1s;\n}\n\n.blob:nth-child(5) {\n top: 230px;\n left: -820px;\n background-color: #2CD3E1;\n animation: wave 1.5s infinite alternate;\n animation-delay: 1.5s;\n}\n\n#blurer {\n position: relative;\n z-index: 5;\n width: 100%;\n height: 100%;\n backdrop-filter: blur(40px);\n flex-shrink: 0;\n flex-basis: 1;\n border-radius: 15px;\n}\n\n#article {\n position: relative;\n width: 90%;\n height: 93%;\n flex-shrink: 0;\n flex-basis: 1;\n background-color: rgba(255, 255, 255, 0.6);\n z-index: 10;\n justify-self: center;\n align-self: center;\n border-radius: 15px;\n left: -1157px;\n display: flex;\n justify-content: center;\n align-items: start;\n}\n\n@keyframes wave {\n 0% {\n transform: translateY(-30px);\n }\n\n 50% {\n transform: translateY(30px);\n }\n\n 100% {\n transform: translateY(-30px);\n }\n}\n\n#article h1 {\n padding: 20px 10px;\n color: #303030;\n font-size: 3em;\n font-family: 'Caveat', cursive;\n}"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"181d69","snapshot":null,"tags":null,"title":"card by livinggston","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1516,"cssLen":1582,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Try Lorem in browser\n

Lorem Ipsum is simply dummy text of the printing.

Enjoy your meal.

\n \n

","css":".m-2 {\n margin: 0.5rem\n}\n\n.ml-10 {\n margin-left: 2.5rem\n}\n\n.mr-2 {\n margin-right: 0.5rem\n}\n\n.mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-6 {\n height: 1.5rem\n}\n\n.w-12 {\n width: 3rem\n}\n\n.w-6 {\n width: 1.5rem\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-start {\n align-items: flex-start\n}\n\n.items-end {\n align-items: flex-end\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-orange-400 {\n --tw-border-opacity: 1;\n border-color: rgb(251 146 60 / var(--tw-border-opacity))\n}\n\n.bg-orange-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 215 170 / var(--tw-bg-opacity))\n}\n\n.bg-orange-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(194 65 12 / var(--tw-bg-opacity))\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.pb-1 {\n padding-bottom: 0.25rem\n}\n\n.pb-1\\.5 {\n padding-bottom: 0.375rem\n}\n\n.pl-4 {\n padding-left: 1rem\n}\n\n.pr-4 {\n padding-right: 1rem\n}\n\n.pt-1 {\n padding-top: 0.25rem\n}\n\n.pt-1\\.5 {\n padding-top: 0.375rem\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.text-orange-900 {\n --tw-text-opacity: 1;\n color: rgb(124 45 18 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.hover\\:bg-orange-800:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(154 52 18 / var(--tw-bg-opacity))\n}"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"c33f1e","snapshot":null,"tags":null,"title":"card by VD232004","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":198,"cssLen":1382,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Title

Card Details

\n More info\n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 20px;\n background: #f5f5f5;\n position: relative;\n padding: 1.8rem;\n border: 2px solid #c3c6ce;\n -webkit-transition: 0.5s ease-out;\n transition: 0.5s ease-out;\n overflow: visible;\n}\n\n.card-details {\n color: rgb(162, 0, 255);\n height: 100%;\n gap: .5em;\n display: grid;\n place-content: center;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.card-button {\n text-decoration: none;\n text-align: center;\n -webkit-transform: translate(-50%, 125%);\n -ms-transform: translate(-50%, 125%);\n transform: translate(-50%, 125%);\n width: 70%;\n border-radius: 1rem;\n border: none;\n background-color: #6c00f8;\n color: #fff;\n font-size: 1rem;\n padding: .5rem 1rem;\n position: absolute;\n left: 50%;\n bottom: 0;\n opacity: 0;\n -webkit-transition: 0.3s ease-out;\n transition: 0.3s ease-out;\n cursor: pointer;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.text-body {\n color: rgb(134, 134, 134);\n}\n\n/*Text*/\n.text-title {\n font-size: 1.5em;\n font-weight: bold;\n}\n\n/*Hover*/\n.card:hover {\n border-color: #6c00f8;\n -webkit-box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877);\n box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877);\n}\n\n.card:hover .card-button {\n -webkit-transform: translate(-50%, 50%);\n -ms-transform: translate(-50%, 50%);\n transform: translate(-50%, 50%);\n opacity: 1;\n}"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"123f4a","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":227,"cssLen":2756,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n Text Here\n

","css":".card {\n width: 200px;\n height: 290px;\n background: white;\n border-radius: 10px;\n transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n display: flex;\n flex-direction: column;\n}\n\n.shadow {\n box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),\n 0 0 0 2px rgb(190, 190, 190),\n 0.3em 0.3em 1em rgba(0,0,0,0.3);\n}\n\n.ribbon {\n width: 230px;\n position: absolute;\n margin-top: 229px;\n margin-left: -20px;\n text-align: center;\n font-size: 20px !important;\n background: #D64B4B;\n background: -webkit-gradient(linear, left top, left bottom, from(#D64B4B), to(#AB2C2C));\n background: -webkit-linear-gradient(top, #D64B4B, #AB2C2C);\n background: -moz-linear-gradient(top, #D64B4B, #AB2C2C);\n background: -ms-linear-gradient(top, #D64B4B, #AB2C2C);\n background: -o-linear-gradient(top, #D64B4B, #AB2C2C);\n background-image: -ms-linear-gradient(top, #D64B4B 0%, #AB2C2C 100%);\n -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 1px;\n -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 1px;\n box-shadow: rgba(0,0,0,0.3) 0 1px 1px;\n font-family: 'Helvetica Neue',Helvetica, sans-serif;\n}\n\n.ribbon span {\n font-size: 35px !important;\n color: #801111;\n text-shadow: #D65C5C 0 1px 0;\n margin: 0px;\n padding: 19px 10px;\n}\n\n.ribbon:before, .ribbon:after {\n content: '';\n position: absolute;\n display: block;\n bottom: -1em;\n border: 1.5em solid #C23A3A;\n z-index: -1;\n}\n\n.ribbon:before {\n left: -2em;\n border-right-width: 1.5em;\n border-left-color: transparent;\n -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;\n -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;\n box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;\n}\n\n.ribbon:after {\n right: -2em;\n border-left-width: 1.5em;\n border-right-color: transparent;\n -webkit-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;\n -moz-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;\n box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;\n}\n\n.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {\n border-color: #871616 transparent transparent transparent;\n position: absolute;\n display: block;\n border-style: solid;\n bottom: -1em;\n content: '';\n}\n\n.ribbon .ribbon-content:before {\n left: 0;\n border-width: 1em 0 0 1em;\n}\n\n.ribbon .ribbon-content:after {\n right: 0;\n border-width: 1em 1em 0 0;\n}\n\n.ribbon-stitches-top {\n margin-top: 2px;\n border-top: 1px dashed rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);\n -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);\n box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);\n}\n\n.ribbon-stitches-bottom {\n margin-bottom: 2px;\n border-top: 1px dashed rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);\n -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);\n box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);\n}\n"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"5b0903","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":183,"cssLen":963,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 250px;\n height: 90px;\n background: #262626;\n}\n\n.smallIcon {\n width: 100%;\n height: 100%;\n background-color: #ff5858;\n}\n\n.smallIcon div {\n background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 \n 40%, #e5e5e5 48%);\n margin-top: 10px;\n background-size: 200% 100%;\n background-position: 100% 0;\n animation: load89234 2s infinite;\n color: #262626;\n font-weight: bold;\n font-size: 15px;\n}\n\n.Icon {\n margin: 10px;\n width: 70px;\n height: 70px;\n float: left;\n border-radius: 5px;\n}\n\n.Name {\n width: 90px;\n height: 20px;\n float: left;\n transform: translate(10px ,0px);\n border-radius: 5px;\n}\n\n.Roles {\n width: 40px;\n height: 20px;\n float: left;\n transform: translate(20px ,0px);\n border-radius: 5px;\n}\n\n.Descripion {\n margin: 10px;\n width: 140px;\n height: 45px;\n float: left;\n transform: translate(0px ,-5px);\n border-radius: 5px;\n}\n\n@keyframes load89234 {\n 100% {\n background-position: -100% 0;\n }\n}"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"3808f0","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":189,"cssLen":1621,"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":".card {\n width: 350px;\n height: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background-color: #fffffe;\n border-radius: 15px;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n\n.card::before {\n content: \"\";\n width: 350px;\n height: 100px;\n position: absolute;\n top: 0;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n border-bottom: 3px solid #fefefe;\n background: linear-gradient(40deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);\n transition: all 0.3s ease;\n}\n\n.card * {\n z-index: 1;\n}\n\n.image {\n width: 90px;\n height: 90px;\n background-color: #1468BF;\n border-radius: 50%;\n border: 4px solid #fefefe;\n margin-top: 30px;\n transition: all 0.5s ease;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n transition: all 0.5s ease;\n}\n\n.card-info span {\n font-weight: 600;\n font-size: 24px;\n color: #161A42;\n margin-top: 15px;\n line-height: 5px;\n}\n\n.card-info p {\n color: rgba(0, 0, 0, 0.5);\n}\n\n.button {\n text-decoration: none;\n background-color: #1468BF;\n color: white;\n padding: 5px 20px;\n border-radius: 5px;\n border: 1px solid white;\n transition: all 0.5s ease;\n}\n\n.card:hover {\n width: 300px;\n border-radius: 250px;\n}\n\n.card:hover::before {\n width: 300px;\n height: 300px;\n border-radius: 50%;\n border-bottom: none;\n transform: scale(0.95);\n}\n\n.card:hover .card-info {\n transform: translate(0%,-15%);\n}\n\n.button:hover {\n background-color: #FF6844;\n transform: scale(1.1);\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"b52f80","snapshot":null,"tags":null,"title":"card by D3OXY","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":892,"cssLen":1343,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

\n \n \n

\n","css":".card {\n position: relative;\n width: 350px;\n aspect-ratio: 16/9;\n background-color: #f2f2f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n box-shadow: 0 0 0 5px #ffffff80;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card svg {\n width: 48px;\n fill: #333;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card__image {\n width: 100%;\n height: 100%;\n}\n\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);\n}\n\n.card__content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #f2f2f2;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n font-size: 20px;\n color: #333;\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 10px;\n font-size: 12px;\n color: #777;\n line-height: 1.4;\n}\n\n.card__button {\n padding: 15px;\n border-radius: 8px;\n background: #777;\n border: none;\n color: white;\n}\n\n.secondary {\n background: transparent;\n color: #777;\n border: 1px solid #777;\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"26ee74","snapshot":null,"tags":null,"title":"card by IWhat1","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5164,"cssLen":1421,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Profile

\n \n \n

Front Card

Follow me for more...\n

Follow Me

\n \n \n\n

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

\n","css":".container {\n height: 294px;\n width: 240px;\n color: red;\n perspective: 800px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card {\n width: 100%;\n height: 100%;\n background: black;\n border-radius: 2rem;\n position: relative;\n transition: transform 1500ms;\n transform-style: preserve-3d;\n}\n\n.card-top {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 10%;\n position: absolute;\n width: 50%;\n background-color: transparent;\n border: 2px solid black;\n top: 0;\n border-top: none;\n border-radius: 0 0 1rem 1rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);\n}\n\n.card-top-para {\n font-size: 16px;\n font-weight: bold;\n}\n\n.container:hover > .card {\n cursor: pointer;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.front,\n.back {\n height: 100%;\n width: 100%;\n border-radius: 2rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);\n position: absolute;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.back {\n background-color: black;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.heading {\n font-size: 22px;\n font-weight: bold;\n}\n\n.follow {\n font-size: 16px;\n font-weight: 500;\n}\n\n.icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-top: 20px;\n}\n"}]}},"actionData":null,"errors":null}