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

\n Rick Sanchez\n

\n Morty Smith\n

\n Summer Smith\n

\n\n

\n Beth Smith\n

","css":".container {\n overflow: auto;\n display: flex;\n scroll-snap-type: x mandatory;\n width: 90%;\n margin: 0 auto;\n padding: 0 15px;\n}\n\n.card {\n background: rgba(255, 255, 255, 0.25);\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(7px);\n -webkit-backdrop-filter: blur(7px);\n border-radius: 10px;\n padding: 2rem;\n margin: 1rem;\n width: 100%;\n}\n\n.container:hover > :not(:hover) {\n opacity: 0.2;\n}\n\n.title {\n width: 100%;\n display: inline-block;\n word-break: break-all;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n margin: 1rem auto;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"806dfd","snapshot":null,"tags":null,"title":"card by Qasimsaifi","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":759,"cssLen":2772,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n $\"Card$ \n

Beautiful Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ante sit amet tellus ornare tincidunt.

\n \n

","css":".mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-40 {\n height: 10rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.w-full {\n width: 100%\n}\n\n.transform {\n 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))\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-t-lg {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.object-cover {\n object-fit: cover\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / 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.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n 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))\n}\n\n.hover\\:bg-blue-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.focus\\:ring-blue-400:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity))\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"a34435","snapshot":null,"tags":null,"title":"card by howaboutsalman","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1345,"cssLen":1557,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.block{display:block}.w-full{width:100%}.max-w-\\[360px\\]{max-width:360px}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.border-b-2{border-bottom-width:2px}.border-yellow-400{--tw-border-opacity:1;border-color:rgb(250 204 21 / var(--tw-border-opacity))}.bg-\\[\\#0d1b2a\\]{--tw-bg-opacity:1;background-color:rgb(13 27 42 / var(--tw-bg-opacity))}.bg-\\[\\#F7AB0A\\]{--tw-bg-opacity:1;background-color:rgb(247 171 10 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-2{padding:0.5rem}.p-4{padding:1rem}.font-semibold{font-weight:600}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\\:bg-\\[\\#FFC857\\]:hover{--tw-bg-opacity:1;background-color:rgb(255 200 87 / var(--tw-bg-opacity))}.focus\\:border-b-2:focus{border-bottom-width:2px}.focus\\:border-yellow-600:focus{--tw-border-opacity:1;border-color:rgb(202 138 4 / var(--tw-border-opacity))}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"c36dcd","snapshot":null,"tags":null,"title":"card by david-mohseni","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":273,"cssLen":1264,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Front

Front Description

Back

Back Description

","css":".flip {\n box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);\n padding: 1em;\n width: 190px;\n height: 254px;\n transform-style: preserve-3d;\n transition: 3s ease;\n}\n\n.flip:hover {\n transform: rotateY(180deg);\n}\n/* Content */\n.flip .content {\n transform-style: preserve-3d;\n}\n\n.flip .back, .flip .front {\n transform-style: preserve-3d;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.flip .back {\n transform: rotateY(180deg);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.flip h2,\n.flip p {\n transform: translateZ(90px);\n text-shadow: 0 0 3px black;\n text-align: center;\n}\n\n.flip h2 {\n font-size: 3em;\n color: #fff;\n letter-spacing: 1px;\n}\n\n.flip p {\n font-size: 1em;\n color: #eee;\n line-height: 1.6em;\n}\n\n.flip::before,\n.flip::after {\n content: \"\";\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n background-image: linear-gradient(purple, red);\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n transform: rotateY(180deg)translateZ(1px);\n}\n\n.flip::before {\n transform: none;\n background-image: linear-gradient(violet, orange);\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"a1c4a7","snapshot":null,"tags":null,"title":"card by Kemboi-Dun","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":543,"cssLen":1184,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Place image here\n

\n This is a Title\n Thsi is a subtitle of this page. Let us see how it looks on the Web.\n

Lorem ipsum dolor, sit amet expedita exercitationem recusandae aut dolor tempora aperiam itaque possimus at, cupiditate earum, quae repudiandae aspernatur? Labore minus soluta consequatur placeat.

\n \n

","css":".card {\n position: relative;\n width: 250px;\n height: 250px;\n color: #2e2d31;\n background: #131313;\n overflow: hidden;\n border-radius: 20px;\n}\n\n.temporary_text {\n font-weight: bold;\n font-size: 24px;\n padding: 6px 12px;\n color: #f8f8f8;\n}\n\n.card_title {\n font-weight: bold;\n}\n\n.card_content {\n position: absolute;\n left: 0;\n bottom: 0;\n /* edit the width to fit card */\n width: 100%;\n padding: 20px;\n background: #f2f2f2;\n border-top-left-radius: 20px;\n /* edit here to change the height of the content box */\n transform: translateY(150px);\n transition: transform .25s;\n}\n\n.card_content::before {\n content: '';\n position: absolute;\n top: -47px;\n right: -45px;\n width: 100px;\n height: 100px;\n transform: rotate(-175deg);\n border-radius: 50%;\n box-shadow: inset 48px 48px #f2f2f2;\n}\n\n.card_title {\n color: #131313;\n line-height: 15px;\n}\n\n.card_subtitle {\n display: block;\n font-size: 12px;\n margin-bottom: 10px;\n}\n\n.card_description {\n font-size: 14px;\n opacity: 0;\n transition: opacity .5s;\n}\n\n.card:hover .card_content {\n transform: translateY(0);\n}\n\n.card:hover .card_description {\n opacity: 1;\n transition-delay: .25s;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"470f3a","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":438,"cssLen":1334,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Nam molestie pellentesque mi nec lacinia.

\n Button\n

\n\n

","css":".container {\n position: relative;\n width: 190px;\n height: 254px;\n}\n\n.card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #f5f5f5;\n border-radius: 8px;\n color: #232323;\n padding: 16px;\n border: 1px solid #232323;\n transition: all .5s ease-in-out;\n overflow: hidden;\n}\n\n.card-hidden {\n display: flex;\n transform: translateY(200%);\n flex-direction: column;\n gap: .5rem;\n transition: transform .5s ease-in, opacity .3s ease-in;\n opacity: 0;\n}\n\n.card-border {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n border: 1px dashed #232323;\n border-radius: 8px;\n z-index: -1;\n}\n\n/*Hovers*/\n.card:hover {\n transform: translate(-15px, -15px);\n border-color: #5bc0eb;\n}\n\n.card:hover .card-hidden {\n transform: translateY(0);\n opacity: 1;\n}\n\n.card:hover .title {\n transform: translateY(200%);\n}\n\n/*Text*/\n.title {\n position: absolute;\n bottom: 1rem;\n font-weight: 700;\n font-size: 1.5rem;\n transition: transform .25s ease-out;\n}\n\n.title-in {\n font-weight: 700;\n font-size: 1.25rem;\n}\n\n/*Button*/\n.button {\n display: inline-flex;\n justify-content: center;\n padding: 8px;\n border-radius: 24px;\n font-weight: 600;\n background-color: #5bc0eb;\n cursor: pointer;\n transition: background-color .3s ease-in-out;\n}\n\n.button:hover {\n background-color: #53aed4;\n}\n\n\n\n\n\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"6d18c8","snapshot":null,"tags":null,"title":"card by gagan-gv","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":189,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/*Retro Style Card*/\n\n.card {\n width: 190px;\n height: 254px;\n background: #fff;\n border: 3px solid #000;\n border-radius: 0;\n box-shadow: 15px 15px 0 -2.5px #fff, 15px 15px 0 0 #000;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"94e996","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":888,"cssLen":4278,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

2×30min

","css":".card {\n width: 300px;\n height: 200px;\n background: #252525;\n border-radius: 8px;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\n.ups {\n display: flex;\n}\n\n.screw1 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n margin: 0.5em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.screw2 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.7em;\n margin-top: 0.5em;\n margin-left: 15.8em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.downs {\n display: flex;\n}\n\n.screw3 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n margin-top: -1.3em;\n margin-left: 0.5em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.screw4 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n margin-top: -1.3em;\n margin-left: 16.35em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.card1 {\n width: 230px;\n height: 115px;\n margin-top: 0.5em;\n margin-left: 2.18em;\n background-color: #FFFDD0;\n clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);\n border-radius: 5px;\n}\n\n.line1 {\n position: relative;\n width: 200px;\n height: 1px;\n background-color: black;\n top: 1em;\n left: 0.8em;\n}\n\n.line2 {\n position: relative;\n width: 200px;\n height: 1px;\n background-color: black;\n top: 2em;\n left: 0.8em;\n}\n\n.yl {\n display: flex;\n width: 228px;\n height: 50px;\n background-color: rgb(242, 188, 0);\n margin-top: 2.5em;\n margin-left: 0.06em;\n}\n\n.roll {\n width: 8em;\n height: 2em;\n margin-left: 3em;\n border-radius: 15px;\n background-color: #171717;\n display: flex;\n}\n\n.tape {\n width: 3em;\n height: 1.5em;\n position: relative;\n left: 0.9em;\n background-color: #252525;\n}\n\n.s_wheel {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n top: 0.215em;\n left: 0.15em;\n width: 1.55em;\n height: 1.55em;\n border: 2px dashed #fff;\n box-shadow: 0 0 0 4.4px #fff;\n border-radius: 50%;\n animation: 2s run infinite linear;\n}\n\n.window {\n background-color: white;\n width: auto;\n height: 2em;\n}\n\n.e_wheel {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n top: 0.215em;\n left: 1.7em;\n width: 1.55em;\n height: 1.55em;\n border: 2px dashed #fff;\n box-shadow: 0 0 0 4.4px #fff;\n border-radius: 50%;\n animation: 2s run infinite linear;\n}\n\n.num {\n margin-left: 1.5em;\n align-self: center;\n}\n\n.or {\n display: flex;\n width: 230px;\n height: 18px;\n background-color: rgb(241, 90, 37);\n margin-top: 0.4em;\n margin-left: 0em;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n align-items: center;\n justify-content: center;\n}\n\n.time {\n font-size: 0.5em;\n}\n\n.card2_main {\n filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1));\n}\n\n.card2 {\n width: 150px;\n height: 50px;\n margin-top: 0em;\n margin-left: 4.6em;\n background-color: #252525;\n clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);\n}\n\n.screw5 {\n position: relative;\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n left: 4.25em;\n top: -0.5em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.c1 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 50%;\n left: 1.5em;\n top: 2em;\n}\n\n.t1 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 2px;\n left: 3em;\n top: 1em;\n}\n\n.t2 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 2px;\n left: 5.7em;\n top: -0.2em;\n}\n\n.c2 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 50%;\n left: 7.2em;\n top: -0.2em;\n}\n\n@keyframes run {\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"93c73b","snapshot":null,"tags":null,"title":"card by oneMoreYeti","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":268,"cssLen":806,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

#264653

#2A9D8F

#E9C46A

#F4A261

#E76F51

","css":".palette {\n display: flex;\n height: 300px;\n width: 100%;\n border-radius: 15px;\n overflow: hidden;\n margin: 10px;\n /* recomiendo quitar esto/quit this */\n}\n\n.color {\n height: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n letter-spacing: 1px;\n transition: all 0.3s ease-out;\n cursor: pointer;\n}\n\n.color span {\n opacity: 0;\n transition: opacity 0.1s linear;\n}\n\n.color:nth-child(1) {\n background: #264653;\n}\n\n.color:nth-child(2) {\n background: #2a9d8f;\n}\n\n.color:nth-child(3) {\n background: #e9c46a;\n}\n\n.color:nth-child(4) {\n background: #f4a261;\n}\n\n.color:nth-child(5) {\n background: #e76f51;\n}\n\n.color:hover {\n flex: 2;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n}\n\n.color:hover span {\n opacity: 1;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"e485f2","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1266,"cssLen":1183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

\n Wallet balance\n

₹890.12

\n\n \n

\n","css":".walletBalanceCard {\n width: fit-content;\n height: 55px;\n background-color: #1c1f2f;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 12px;\n padding: 0px 12px;\n font-family: Arial, Helvetica, sans-serif;\n}\n.svgwrapper {\n width: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.svgwrapper svg {\n width: 100%;\n}\n.balancewrapper {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: column;\n width: 120px;\n gap: 0px;\n}\n.balanceHeading {\n font-size: 8px;\n color: rgb(214, 214, 214);\n font-weight: 100;\n letter-spacing: 0.6px;\n}\n.balance {\n font-size: 13.5px;\n color: white;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.addmoney {\n padding: 1px 15px;\n border-radius: 20px;\n background-color: #c083eb;\n color: white;\n border: none;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n.addmoney:hover {\n background-color: whitesmoke;\n color: #9c59cc;\n}\n.plussign {\n font-size: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"4644dc","snapshot":null,"tags":null,"title":"card by Rodrypaladin","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":446,"cssLen":3531,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Index

","css":".card {\n width: 300px;\n height: 300px;\n background-image: linear-gradient(to right bottom, #252324, #292728, #2d2c2d, #313031, #353535);\n position: relative;\n border-radius: 5px;\n box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.307);\n}\n\n.top {\n position: absolute;\n width: 65%;\n height: 37%;\n top: 0;\n left: 37px;\n background-image: linear-gradient(to right bottom, #202020, #222222, #232323, #252525, #272727);\n z-index: 500;\n border-top: 4px solid #e8e8e8;\n border-right: 3px solid #121212;\n border-bottom: 3px solid #121212;\n border-left: 3px solid #121212;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n}\n\n.plastic {\n position: absolute;\n top: 0;\n right: 60px;\n width: 60px;\n background-color: black;\n height: 100%;\n z-index: 1000;\n border-top: 25px solid white;\n}\n\n.bottom {\n z-index: 1000;\n position: absolute;\n bottom: 1px;\n right: 50%;\n transform: translate(50%,0);\n width: 75%;\n height: 52%;\n background-color: #ecebe0;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n border-top: 3px solid #121212;\n border-left: 3px solid #121212;\n border-right: 3px solid #121212;\n border-radius: 10px;\n}\n\n.metal {\n z-index: 2000;\n position: absolute;\n top: -3px;\n right: 0;\n width: 77%;\n height: 103%;\n background-image: linear-gradient(to right bottom, #bdbdbd, #cacaca, #d7d7d7, #e5e5e5, #f2f2f2);\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n transition: transform 0.2s ease-in;\n clip-path: polygon(0% 0%, 0% 100%, 60% 100%, 60% 18%, 85% 18%, 85% 93%, 25% 93%, 25% 100%, 100% 100%, 100% 0%);\n}\n\n.cuadro-metal {\n position: absolute;\n top: 15px;\n right: 45px;\n width: 40px;\n transform: translate(50%,0);\n height: 80px;\n background-color: #252324;\n z-index: 2000;\n transition: transform 0.2s ease-in;\n border-radius: 3px;\n}\n\n.card:hover .metal {\n transform: translateX(-44px);\n}\n\n.card:hover .cuadro-metal {\n transform: translateX(-30px);\n}\n\n.minicuadro1 {\n bottom: 25px;\n right: 12px;\n position: absolute;\n width: 17px;\n height: 17px;\n background-color: #d7d7d7;\n border: 2px solid #191919;\n}\n\n.minicuadro2 {\n bottom: 25px;\n left: 12px;\n position: absolute;\n width: 17px;\n height: 17px;\n background-image: linear-gradient(to right bottom, #191919, #202020, #272727, #2e2e2e, #353535);\n border: 2px solid #191919;\n}\n\n.yellow {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 23px;\n background-color: rgb(255, 157, 0);\n}\n\n.line1 {\n position: absolute;\n bottom: 42px;\n right: 61.5%;\n transform: translate(50%,0);\n width: 125px;\n height: 2px;\n background-color: rgb(192, 33, 33);\n}\n\n.line2 {\n position: absolute;\n bottom: 64px;\n right: 50%;\n transform: translate(50%,0);\n width: 175px;\n height: 2px;\n background-color: rgb(192, 33, 33);\n z-index: 2000;\n}\n\n.line3 {\n position: absolute;\n bottom: 86px;\n right: 50%;\n transform: translate(50%,0);\n width: 175px;\n height: 2px;\n background-color: rgb(192, 33, 33);\n z-index: 2000;\n}\n\n.line4 {\n position: absolute;\n bottom: 108px;\n right: 50%;\n transform: translate(50%,0);\n width: 175px;\n height: 2px;\n background-color: rgb(192, 33, 33);\n z-index: 2000;\n}\n\n.line5 {\n position: absolute;\n bottom: 130px;\n right: 50%;\n transform: translate(50%,0);\n width: 175px;\n height: 2px;\n background-color: rgb(192, 33, 33);\n z-index: 2000;\n}\n\n.index {\n position: absolute;\n bottom: 35px;\n right: 62px;\n font-size: 11px;\n font-weight: bold;\n text-transform: uppercase;\n color: rgb(192, 33, 33);\n z-index: 2000;\n}\n\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"4fe95a","snapshot":null,"tags":null,"title":"card by xopc333","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1327,"cssLen":1134,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n position: relative;\n display: flex;\n width: 200px;\n height: 320px;\n background: #C6C6D0;\n color: #212121;\n box-shadow: inset 0 0 0 4px #212121;\n transition: .6s 0.4s;\n cursor: pointer;\n}\n\n.border {\n position: absolute;\n inset: 0;\n}\n\n.border line {\n stroke-width: 4px;\n stroke: #C6C6D0;\n fill: none;\n transition: .6s ease-in-out;\n}\n\n.border line.top,\n.border line.bottom {\n stroke-dasharray: 200;\n}\n\n.border line.left,\n.border line.right {\n stroke-dasharray: 320;\n}\n\n.logo {\n width: 50%;\n margin: auto;\n fill: #212121;\n transition: .6s;\n opacity: 0.9;\n}\n\n.card:hover {\n background-color: transparent;\n transition-delay: 0s;\n}\n\n.card:hover .border line {\n transition-delay: 0.1s;\n}\n\n.card:hover .border line.top {\n transform: translateX(-400px);\n}\n\n.card:hover .border line.bottom {\n transform: translateX(400px);\n}\n\n.card:hover .border line.left {\n transform: translateY(640px);\n}\n\n.card:hover .border line.right {\n transform: translateY(-640px);\n}\n\n.card:hover .logo {\n transition-delay: 0s;\n transform: scale(1.1);\n fill: #C6C6D0;\n filter: drop-shadow( 0 0 30px #C6C6D080);\n opacity: 0.9;\n}"}]}},"actionData":null,"errors":null}