{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"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}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"7f8523","snapshot":null,"tags":null,"title":"card by Satwinder04","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":354,"cssLen":1294,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Card Title

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

\n Read More\n

\n","css":".card {\n position: relative;\n width: 300px;\n height: 400px;\n margin: 20px;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 10px;\n}\n\n.card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 20px;\n background-color: #fff;\n transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.card__title {\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.card__text {\n font-size: 16px;\n line-height: 1.5;\n margin-bottom: 20px;\n}\n\n.card__button {\n display: inline-block;\n padding: 10px 20px;\n background-color: #000;\n color: #fff;\n text-decoration: none;\n border-radius: 5px;\n}\n\n.card:hover {\n transform: translateY(-10px);\n}\n\n.card:hover .card__image img {\n transform: scale(1.2);\n}\n\n.card:hover .card__content {\n transform: translateY(-100%);\n}\n\n.card__image {\n height: 400px;\n width: 300px;\n background-color: #000;\n /* you can put img url here */\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"b7cb69","snapshot":null,"tags":null,"title":"card by VassoD","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5985,"cssLen":2143,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Gold Plated

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

CARDHOLDER NAME

\n \n \n \n

9759 2484 5269 6576

12/24

EXP

123

CVC

\n","css":".flip-card {\n background-color: transparent;\n width: 240px;\n height: 154px;\n perspective: 1000px;\n color: white;\n}\n\n.heading_8264 {\n position: absolute;\n font-size: 1em;\n top: 0.75em;\n left: 1em;\n font-weight: 600;\n text-shadow: -0.2px -0.2px 0.2px white, 0.2px -0.2px 0.2px gray,\n -0.2px 0.2px 0.2px white, 0.2px 0.2px 0.2px gray;\n}\n\n.logo {\n position: absolute;\n top: 6.8em;\n left: 11.7em;\n}\n\n.chip {\n position: absolute;\n top: 2.3em;\n left: 1.5em;\n}\n\n.contactless {\n position: absolute;\n top: 3.5em;\n left: 12.4em;\n}\n\n.number {\n position: absolute;\n font-weight: 600;\n letter-spacing: 1px;\n font-size: 0.75em;\n top: 7em;\n left: 1.5em;\n}\n\n.date_8264 {\n position: absolute;\n font-weight: 600;\n font-size: 0.75em;\n top: 9em;\n left: 1.5em;\n letter-spacing: 2px;\n}\n\n.cvc_number {\n position: absolute;\n font-weight: 600;\n font-size: 0.75em;\n top: 9em;\n left: 8.5em;\n letter-spacing: 2px;\n}\n\n.cvc {\n position: absolute;\n font-weight: 600;\n font-size: 5px;\n top: 6.9rem;\n left: 8rem;\n}\n\n.exp {\n position: absolute;\n font-weight: 600;\n font-size: 5px;\n top: 6.9rem;\n left: 3.8rem;\n}\n\n.name {\n position: absolute;\n font-weight: 400;\n font-size: 8.5px;\n top: 15em;\n left: 2em;\n color: #bea35c;\n}\n\n.strip {\n position: absolute;\n background-color: white;\n width: 15em;\n height: 2.25em;\n top: 0;\n border-radius: 1rem 1rem 0 0;\n}\n\n.flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.flip-card:hover .flip-card-inner {\n transform: rotateY(180deg);\n}\n\n.flip-card-front,\n.flip-card-back {\n box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: 1rem;\n}\n\n.flip-card-front {\n background: linear-gradient(135deg, #edcb78, #f7e4b2, #fee08b);\n border: 1px solid white;\n}\n\n.flip-card-back {\n background: linear-gradient(135deg, #fee08b, #f7e4b2, #edcb78);\n transform: rotateY(180deg);\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"67dbbc","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3485,"cssLen":1303,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Honey\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit

\n \n

","css":".card {\n width: 300px;\n height: 300px;\n background: #003566;\n color: white;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n box-sizing: border-box;\n border: 2px solid #001d3d;\n}\n\n.card::before {\n content: \"10%\";\n position: absolute;\n width: 100px;\n height: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n top: -20px;\n left: -20px;\n background-color: red;\n color: white;\n font-weight: 900;\n font-size: 2em;\n clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);\n transform: rotate(40deg);\n}\n\n.card__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n text-align: center;\n}\n\n.card__content span {\n font-size: 1.5em;\n font-weight: 900;\n}\n\n.cart {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n padding: 10px 0px;\n border: none;\n background: #ffd60a;\n color: #003566;\n font-weight: 800;\n transition: all .5s ease;\n cursor: pointer;\n}\n\n.svg-icon {\n fill: #ffd60a;\n transition: all .7s ease;\n}\n\n.cart .svg-icon {\n fill: blue;\n width: 15px;\n}\n\n.cart:hover {\n background: white;\n color: black;\n}\n\n.card:hover .card__content svg {\n transform: scale(1.5) rotate(-25deg);\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"3c8ef6","snapshot":null,"tags":null,"title":"card by Thomasfadi","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

","css":".cards {\n display: flex;\n flex-direction: row;\n gap: 15px;\n}\n\n.cards .red {\n background-color: #007e9e;\n}\n\n.cards .blue {\n background-color: #0062ff;\n}\n\n.cards .green {\n background-color: #18cd5e;\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n height: 100px;\n width: 100px;\n border-radius: 10px;\n color: white;\n cursor: pointer;\n transition: 400ms;\n}\n\n.cards .card p.tip {\n font-size: 1em;\n font-weight: 700;\n}\n\n.cards .card p.second-text {\n font-size: .7em;\n}\n\n.cards .card:hover {\n transform: scale(1.2, 1.2);\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(10px);\n transform: scale(0.9, 0.9);\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"d338d5","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":274,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?

Autor

","css":"/*Magic card*/\n.card {\n width: 190px;\n height: 254px;\n background: #f5f5f5;\n overflow: visible;\n box-shadow: 0 5px 20px 2px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2em;\n padding: 0 1rem;\n}\n\n.card-img {\n --size: 100px;\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n transform: translateY(-50%);\n background: #42caff;\n background: linear-gradient(to bottom, #42caff 0%, #e81aff 100%);\n position: relative;\n transition: all .3s ease-in-out;\n}\n\n.card-img::before {\n content: \"\";\n border-radius: inherit;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 90%;\n height: 90%;\n transform: translate(-50%, -50%);\n border: 1rem solid #e8e8e8;\n}\n\n/*Text*/\n.text-title {\n text-transform: uppercase;\n font-size: 0.75em;\n color: #42caff;\n letter-spacing: 0.05rem;\n}\n\n.text-body {\n font-size: .8em;\n text-align: center;\n color: #6f6d78;\n font-weight: 400;\n font-style: italic;\n}\n\n/*Hover*/\n.card:hover .card-img {\n --size: 110px;\n width: var(--size);\n height: var(--size);\n}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"926ac2","snapshot":null,"tags":null,"title":"card by omar-alghaish","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover

","css":".card {\n width: 200px;\n height: 270px;\n background: linear-gradient(45deg,#00cc0a 25%, #00cc0a 25%, #444 25%, #444 50%, #00cc0a 50%, #00cc0a 75%, #444 75%, #444 100%);\n animation: animate_6810 15s linear infinite;\n transition: .3s;\n background-size: 60px 60px;\n position: relative;\n overflow: visible;\n border-radius: 20px;\n}\n\n.card-info {\n position: absolute;\n width: 96%;\n height: 96%;\n left: 2%;\n top: 2%;\n background-color: rgb(24, 22, 22);\n border-radius: 20px;\n transition: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card-info:hover {\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.822);\n backdrop-filter: blur(12px);\n left: 20px;\n top: 20px;\n}\n\n.card-info p {\n color: white;\n font-weight: bold;\n font-size: 30px;\n}\n\n@keyframes animate_6810 {\n 0% {\n background-position: 0px;\n }\n\n 100% {\n background-position: 1000px;\n }\n}"}]}},"actionData":null,"errors":null}