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

\n Hover over me to show details\n

\n Title\n

\n A beautiful place at the shore of XYZ sea.\n
\n California, USA\n

","css":".card {\n width: 190px;\n height: 254px;\n box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);\n position: relative;\n}\n\n.remove-when-use {\n text-align: center;\n width: 100%;\n position: absolute;\n color: black;\n top: 85px;\n font-weight: bold;\n}\n\n.details > p {\n font-size: .8em;\n margin-top: .5em;\n}\n\n.details > label {\n font-weight: bold;\n}\n\n.details {\n color: white;\n box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);\n width: 100%;\n background-color: rgba(0,0,0,0.5);\n position: absolute;\n bottom: 0;\n height: 2.6em;\n transition: height .5s ease-in-out;\n padding: 0.6em;\n overflow: hidden;\n}\n\n.card:hover > .details {\n height: 6.7em;\n}\n\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"b575de","snapshot":null,"tags":null,"title":"card by benjimich","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":1049,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n John Doe\n

Web Dev

\n Button\n

","css":".card {\n width: 190px;\n height: 254px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #f2f2f3;\n border-radius: 12px;\n box-shadow: inset 5px 5px 10px #a9a9aa77,\n inset -5px -5px 10px #ffffff7e;\n}\n\n.card .img {\n height: 100px;\n margin-top: 1.6em;\n aspect-ratio: 1;\n border-radius: 30%;\n background: #f2f2f3;\n margin-bottom: 0.4em;\n box-shadow: -5px -5px 8px #ffffff7a, \n 5px 5px 8px #a9a9aa7a;\n}\n\n.card .info {\n text-align: center;\n margin-top: 0.4em;\n background: linear-gradient(120deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);\n background-clip: border-box;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.card .info > span {\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.card a {\n margin-top: 1em;\n color: #fff;\n text-decoration: none;\n background: linear-gradient(90deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);\n padding: .5em 2em;\n border-radius: 0.7em;\n}\n\n.card a:active {\n box-shadow: inset 3px 3px 3px #0056ff,\n inset -3px -3px 3px #00c2ff;\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"ee7412","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6615,"cssLen":1649,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\t\t

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

\n\t

\n\t\t

\t\n\t

\n\t

\n\t\t

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

\n\t\t

12:23 / 15:43

\n\t

","css":".card {\n width: 350px;\n height: 225px;\n background: rgba(114,113,114);\n border-radius: 15px;\n padding: 10px;\n color: white;\n display: flex;\n flex-direction: column;\n box-shadow: inset 0px 0px 1px black;\n transition: all .2s ease-in;\n}\n\n.card::after {\n content: \"hover video\";\n font-size: 1.4em;\n font-weight: 800;\n position: absolute;\n right: 50%;\n top: 50%;\n transform: translate(50%,-50%);\n}\n\n.up {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.up .right {\n display: flex;\n gap: 20px;\n}\n\n.playbar {\n flex-grow: 1;\n display: flex;\n justify-content: center;\n align-items: end;\n}\n\n.bar {\n width: 340px;\n height: 8px;\n margin-bottom: 8px;\n background-color: rgba(170, 163, 163, 0.356);\n}\n\n.bar::after {\n content: \"\";\n width: 10px;\n height: 8px;\n position: absolute;\n background: rgb(167, 57, 57);\n animation: example 25s ease;\n}\n\n.down {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.down__icons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 20px;\n}\n\n.pause {\n width: 50px;\n height: 50px;\n fill: rgb(241, 239, 239);\n}\n\n.time {\n font-size: .85em;\n}\n\n.svg-icon {\n width: 30px;\n height: 30px;\n padding: 5px;\n border-radius: 50%;\n ;\n fill: rgb(241, 239, 239);\n}\n\n.card * {\n opacity: 0;\n transition: all .2s ease-in;\n}\n\n.card:hover * {\n opacity: 1;\n}\n\n.card:hover {\n box-shadow: inset 0px 10px 36px -13px rgba(0,0,0,0.75);\n}\n\n.svg-icon:hover {\n background-color: rgba(3, 5, 5, 0.5);\n}\n\n@keyframes example {\n 0% {\n width: 0px;\n }\n\n 100% {\n width: 330px;\n }\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"44cb7b","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":659,"cssLen":754,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

lorem ipsum dolor sit amet

","css":".warning {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #FEF7D1;\n border: 1px solid #F7C752;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.warning__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.warning__icon path {\n fill: #F7C752;\n}\n\n.warning__title {\n font-weight: 500;\n font-size: 14px;\n color: #755118;\n}\n\n.warning__close {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n}\n\n.warning__close path {\n fill: #755118;\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"da477c","snapshot":null,"tags":null,"title":"card by ElsayedShamsEldeen","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":528,"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 border-radius: 30px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset,\n rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;\n transition: all 0.3s ease-in-out;\n background: linear-gradient(50deg, #c7d3dc, #d9e7f1);\n background-size: 1px 25px;\n -webkit-transition: all 1s ease-out;\n -moz-transition: all 1s ease-out;\n -o-transition: all 1s ease-out;\n border: 1px solid #839db0;\n cursor: pointer;\n}\n.card:hover {\n background-position: 10px;\n transform: scale(1.2);\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"a19b86","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1596,"cssLen":1467,"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 CARD NUMBER\n \n

\n\n

\n CARD HOLDER\n \n

\n\n

\n VALID THRU\n \n

\n CVV\n \n

\n","css":".visa-card {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-end;\n width: 300px;\n height: 180px;\n background-image: radial-gradient(\n circle 897px at 9% 80.3%,\n rgba(55, 60, 245, 1) 0%,\n rgba(234, 161, 15, 0.9) 100.2%\n );\n border-radius: 10px;\n padding: 20px;\n font-family: Arial, Helvetica, sans-serif;\n position: relative;\n gap: 15px;\n}\n.logoContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: fit-content;\n position: absolute;\n top: 0;\n left: 0;\n padding: 18px;\n}\n.svgLogo {\n height: 40px;\n width: auto;\n}\n.inputstyle::placeholder {\n color: #ffffff;\n}\n.inputstyle {\n background-color: transparent;\n border: none;\n outline: none;\n color: white;\n caret-color: red;\n font-size: 13px;\n height: 25px;\n letter-spacing: 1.5px;\n}\n.number-container {\n width: 100%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n}\n#cardNumber {\n width: 100%;\n height: 25px;\n}\n.name-date-cvv-container {\n width: 100%;\n height: 25px;\n display: flex;\n gap: 10px;\n}\n.name-wrapper {\n width: 60%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n}\n.expiry-wrapper,\n.cvv-wrapper {\n width: 30%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n}\n.cvv-wrapper {\n width: 10%;\n}\n#expiry,\n#cvv {\n width: 100%;\n}\n.input-label {\n font-size: 8px;\n letter-spacing: 1.5px;\n color: #e2e2e2;\n width: 100%;\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"d2d809","snapshot":null,"tags":null,"title":"card by PaolaMarai","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1260,"cssLen":918,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

lorem ipsum dolor sit amet

\n \n \n \n

\n","css":".error {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n border-radius: 50px;\n background: -webkit-linear-gradient(to right, #f45c43, #eb3349);\n background: linear-gradient(to right, #f45c43, #eb3349);\n box-shadow: 0 0px 10px #de1c3280;\n}\n\n.error__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n filter: drop-shadow(2px 1px 2px rgb(0 0 0 / 0.4));\n}\n\n.error__icon path {\n fill: #fff;\n}\n\n.error__title {\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n}\n\n.error__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n filter: drop-shadow(2px 1px 2px rgb(0 0 0 / 0.4));\n}\n\n.error__close path {\n fill: #fff;\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"e556b9","snapshot":null,"tags":null,"title":"card by reshades","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":202,"cssLen":829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n TITLE HERE\n

\n This is the description of this card.
You can enter anything here.\n

","css":".card {\n width: 290px;\n height: 404px;\n background: linear-gradient(10deg, rgb(212, 38, 255) 0%, rgb(76, 0, 255) 100%);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10.5px);\n -webkit-backdrop-filter: blur(10.5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.top {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10.5px);\n -webkit-backdrop-filter: blur(10.5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n width: 290px;\n height: 300px;\n}\n\n.top .title {\n color: #fff;\n font-weight: bolder;\n font-size: x-large;\n margin-left: 10px;\n margin-top: 90%\n}\n\n.card .desc {\n color: #fff;\n opacity: 75%;\n font-size: small;\n font-weight: lighter;\n margin-left: 10px;\n margin-top: 2%\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"097434","snapshot":null,"tags":null,"title":"card by elijahwgummer-poc","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":233,"cssLen":1180,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Cool Card

This is a cool card design.

\n \n

","css":".card {\n width: 300px;\n height: 400px;\n background-color: #F7F7F7;\n border-radius: 10px;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.card:before {\n content: \"\";\n position: absolute;\n top: -100%;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom right, #FF5F6D, #FF9671);\n transform: rotate(-45deg);\n transition: all 0.3s ease;\n z-index: -1;\n}\n\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);\n}\n\n.card:hover:before {\n top: 0;\n left: 0;\n}\n\n.card-content {\n padding: 20px;\n text-align: center;\n}\n\n.card-title {\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 10px;\n color: #333;\n}\n\n.card-description {\n font-size: 16px;\n color: #777;\n margin-bottom: 20px;\n}\n\n.card-button {\n padding: 10px 20px;\n background-color: #FF5F6D;\n color: #FFF;\n border: none;\n border-radius: 4px;\n font-size: 18px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.card-button:hover {\n background-color: #FF3A4C;\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"9a9c99","snapshot":null,"tags":null,"title":"card by SujitAdroja","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":413,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

JOB OFFER

\n \"As a UX designer,you will design the entire UI.\"\n

Verify alignment of job description with proposed position.
\n \n

","css":".columns {\n width: 18em;\n position: relative;\n border-radius: 20px;\n padding: 35px;\n border: 2px solid black;\n transition: all 0.4s;\n}\n\n.columns:hover {\n box-shadow: 4px 4px 0 1px rgba(0,0,0);\n}\n\n.dots {\n position: absolute;\n right: 15px;\n top: 15px;\n}\n\n.columns .button-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 30px;\n margin-bottom: 20px;\n}\n\n.offer {\n font-size: 17px;\n font-weight: 900;\n border-bottom: 2px solid black;\n cursor: pointer;\n transition: all 0.4s;\n}\n\n.btn {\n padding: 7px 15px;\n border: 1px solid black;\n background-color: orange;\n border-radius: 10px;\n letter-spacing: 1px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.4s;\n}\n\n.columns:hover .btn {\n box-shadow: 2px 2px 0 1px rgba(0,0,0);\n}\n\n.columns:hover .offer {\n color: green;\n border-color: green;\n}\n\n.btn:focus {\n background: transparent;\n}\n\n.secondary-heading {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 20px;\n}\n\n.card-description {\n font-size: 18px;\n font-weight: 500;\n line-height: 1.2;\n}\n "},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"d497f9","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2799,"cssLen":1105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".card {\n background-color: #1e2127;\n border: 3px solid #61dafb;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n font-weight: 700;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n padding: 30px 20px;\n color: #61dafb;\n border-radius: 45px;\n}\n\n.App-logo {\n pointer-events: none;\n margin-top: -10px\n}\n\n.App-button {\n padding: 10px 20px;\n background-color: transparent;\n color: #61dafb;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n border: 3px solid #61dafb;\n border-radius: 5em;\n margin-top: 20px;\n transition: 0.2s;\n}\n\n.App-button:hover {\n color: #1e2127;\n background-color: #61dafb;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 5s linear;\n }\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"7d53e6","snapshot":null,"tags":null,"title":"card by gagan-gv","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4402,"cssLen":748,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n John Doe\n

\n \n \n \n

","css":".card {\n width: 200px;\n height: 250px;\n background: #07182E;\n border-radius: 5px;\n text-align: center;\n color: #f0f0f0;\n overflow: hidden;\n font-family: inherit;\n z-index: 1;\n}\n\n.img {\n display: flex;\n margin: 60px auto 10px auto;\n width: 75px;\n height: 75px;\n border: 1px solid #f0f0f0;\n border-radius: 50%;\n font-size: 11px;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n z-index: 99;\n background-color: #152f50;\n}\n\np {\n opacity: 0;\n transition: all 0.5s;\n}\n\n.heading {\n padding: 10px;\n font-weight: 500;\n font-size: 18px;\n}\n\nsvg {\n padding: 0 5px;\n cursor: pointer;\n}\n\n.card:hover .img {\n transform: scale(1.1);\n border: 1px solid #f0f0f0;\n}\n\n.card:hover h1,\n.card:hover p {\n opacity: 1;\n}"}]}},"actionData":null,"errors":null}