{"loaderData":{"0":null,"0-2":{"total":7188,"projects":[{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"b85558","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":200,"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 background: lightgrey;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"38faf9","snapshot":null,"tags":null,"title":"card by ElSombrero2","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":1313,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n HOVER ME\n

","css":".card {\n width: 190px;\n height: 254px;\n background: #171717;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0px 0px 3px 1px #00000088;\n cursor: pointer;\n}\n\n.card .content {\n border-radius: 5px;\n background: #171717;\n width: 186px;\n height: 250px;\n z-index: 1;\n padding: 20px;\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.content::before {\n opacity: 0;\n transition: opacity 300ms;\n content: ' ';\n display: block;\n background: white;\n width: 50px;\n height: 50px;\n position: absolute;\n filter: blur(50px);\n}\n\n.card:hover .content::before {\n opacity: 1;\n}\n\n.card::before {\n opacity: 0;\n content: ' ';\n position: absolute;\n display: block;\n width: 120px;\n height: 360px;\n background: linear-gradient(90deg, transparent, #ff2288, #387EF0, transparent);\n transition: opacity 300ms;\n animation: rotation_9018 3000ms infinite linear;\n animation-play-state: paused;\n}\n\n.card:hover::before {\n opacity: 1;\n animation-play-state: running;\n}\n\n.card::after {\n position: absolute;\n content: ' ';\n display: block;\n width: 190px;\n height: 254px;\n background: #17171733;\n backdrop-filter: blur(50px);\n}\n\n@keyframes rotation_9018 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"50c2ce","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4265,"cssLen":2451,"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 width: 200px;\n height: 200px;\n background: lightgrey;\n border-radius: 30px;\n overflow: hidden;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n transition: all 1s ease-in-out;\n}\n\n.background {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 100% 107%, #ff89cc 0%, #9cb8ec 30%, #00ffee 60%, #62c2fe 100%);\n}\n\n.logo {\n position: absolute;\n right: 50%;\n bottom: 50%;\n transform: translate(50%, 50%);\n transition: all 0.6s ease-in-out;\n}\n\n.logo .logo-svg {\n fill: white;\n width: 30px;\n height: 30px;\n}\n\n.icon {\n display: inline-block;\n width: 20px;\n height: 20px;\n}\n\n.icon .svg {\n fill: rgba(255, 255, 255, 0.797);\n width: 100%;\n transition: all 0.5s ease-in-out;\n}\n\n.box {\n position: absolute;\n padding: 10px;\n text-align: right;\n background: rgba(255, 255, 255, 0.389);\n border-top: 2px solid rgb(255, 255, 255);\n border-right: 1px solid white;\n border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;\n box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;\n transform-origin: bottom left;\n transition: all 1s ease-in-out;\n}\n\n.box::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n opacity: 0;\n transition: all 0.5s ease-in-out;\n}\n\n.box:hover .svg {\n fill: white;\n}\n\n.box1 {\n width: 70%;\n height: 70%;\n bottom: -70%;\n left: -70%;\n}\n\n.box1::before {\n background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);\n}\n\n.box1:hover::before {\n opacity: 1;\n}\n\n.box1:hover .icon .svg {\n filter: drop-shadow(0 0 5px white);\n}\n\n.box2 {\n width: 50%;\n height: 50%;\n bottom: -50%;\n left: -50%;\n transition-delay: 0.2s;\n}\n\n.box2::before {\n background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);\n}\n\n.box2:hover::before {\n opacity: 1;\n}\n\n.box2:hover .icon .svg {\n filter: drop-shadow(0 0 5px white);\n}\n\n.box3 {\n width: 30%;\n height: 30%;\n bottom: -30%;\n left: -30%;\n transition-delay: 0.4s;\n}\n\n.box3::before {\n background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);\n}\n\n.box3:hover::before {\n opacity: 1;\n}\n\n.box3:hover .icon .svg {\n filter: drop-shadow(0 0 5px white);\n}\n\n.box4 {\n width: 10%;\n height: 10%;\n bottom: -10%;\n left: -10%;\n transition-delay: 0.6s;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card:hover .box {\n bottom: -1px;\n left: -1px;\n}\n\n.card:hover .logo {\n transform: translate(0, 0);\n bottom: 20px;\n right: 20px;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"3715ff","snapshot":null,"tags":null,"title":"card by absoluteSTrange","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":32,"cssLen":307,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 190px;\n height: 254px;\n background: white;\n border-radius: 10px;\n transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\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"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"56229a","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7969,"cssLen":1541,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Cameron Williamson

Web Development

\n \n \n

","css":".card {\n --main-color: #000;\n --submain-color: #78858F;\n --bg-color: #fff;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n position: relative;\n width: 300px;\n height: 384px;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 20px;\n background: var(--bg-color);\n}\n\n.card__img {\n height: 192px;\n width: 100%;\n}\n\n.card__img svg {\n height: 100%;\n border-radius: 20px 20px 0 0;\n}\n\n.card__avatar {\n position: absolute;\n width: 114px;\n height: 114px;\n background: var(--bg-color);\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: calc(50% - 57px);\n}\n\n.card__avatar svg {\n width: 100px;\n height: 100px;\n}\n\n.card__title {\n margin-top: 60px;\n font-weight: 500;\n font-size: 18px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 10px;\n font-weight: 400;\n font-size: 15px;\n color: var(--submain-color);\n}\n\n.card__btn {\n margin-top: 15px;\n width: 76px;\n height: 31px;\n border: 2px solid var(--main-color);\n border-radius: 4px;\n font-weight: 700;\n font-size: 11px;\n color: var(--main-color);\n background: var(--bg-color);\n text-transform: uppercase;\n transition: all 0.3s;\n}\n\n.card__btn-solid {\n background: var(--main-color);\n color: var(--bg-color);\n}\n\n.card__btn:hover {\n background: var(--main-color);\n color: var(--bg-color);\n}\n\n.card__btn-solid:hover {\n background: var(--bg-color);\n color: var(--main-color);\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"8d951f","snapshot":null,"tags":null,"title":"card by JohnnyCSilva","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5718,"cssLen":1535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

Meeting your Colleagues

6 Video - 40 min

\n\n

\n \n

Business Trip\n

","css":".card {\n width: 252px;\n height: 265px;\n background: white;\n border-radius: 30px;\n box-shadow: 15px 15px 30px #bebebe,\n -15px -15px 30px #ffffff;\n transition: 0.2s ease-in-out;\n}\n\n.img {\n width: 100%;\n height: 50%;\n border-top-left-radius: 30px;\n border-top-right-radius: 30px;\n background: linear-gradient(#e66465, #9198e5);\n display: flex;\n align-items: top;\n justify-content: right;\n}\n\n.save {\n transition: 0.2s ease-in-out;\n border-radius: 10px;\n margin: 20px;\n width: 30px;\n height: 30px;\n background-color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.text {\n margin: 20px;\n display: flex;\n flex-direction: column;\n align-items: space-around;\n}\n\n.save .svg {\n transition: 0.2s ease-in-out;\n width: 15px;\n height: 15px;\n}\n\n.icon-box {\n margin-top: 15px;\n width: 70%;\n padding: 10px;\n background-color: #e3fff9;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: left;\n}\n\n.icon-box svg {\n width: 17px;\n}\n\n.text .h3 {\n font-family: 'Lucida Sans' sans-serif;\n font-size: 15px;\n font-weight: 600;\n color: black;\n}\n\n.text .p {\n font-family: 'Lucida Sans' sans-serif;\n color: #999999;\n font-size: 13px;\n}\n\n.icon-box .span {\n margin-left: 10px;\n font-family: 'Lucida Sans' sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: #9198e5;\n}\n\n.card:hover {\n cursor: pointer;\n box-shadow: 0px 10px 20px rgba(0,0,0,0.1);\n}\n\n.save:hover {\n transform: scale(1.1) rotate(10deg);\n}\n\n.save:hover .svg {\n fill: #ced8de;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"23e652","snapshot":null,"tags":null,"title":"card by EmmaxPlay","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #F8FBFE;\n border-radius: 8px;\n z-index: 1;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n}\n\n.circle {\n padding: 0 4px;\n}\n\n.box {\n display: inline-block;\n align-items: center;\n width: 10px;\n height: 10px;\n padding: 1px;\n border-radius: 50%;\n}\n\n.red {\n background-color: #ff605c;\n}\n\n.yellow {\n background-color: #ffbd44;\n}\n\n.green {\n background-color: #00ca4e;\n}\n"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"13c55b","snapshot":null,"tags":null,"title":"card by Tiagoadag","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":401,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 190px;\n height: 254px;\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n border-radius: 20px;\n transition: all .3s;\n}\n\n.card2 {\n width: 190px;\n height: 254px;\n background-color: #1a1a1a;\n border-radius:;\n transition: all .2s;\n}\n\n.card2:hover {\n transform: scale(0.98);\n border-radius: 20px;\n}\n\n.card:hover {\n box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"f3d07a","snapshot":null,"tags":null,"title":"card by arshshaikh06","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":715,"cssLen":1097,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

264653

2A9D8F

E9C46A

F4A261

E76F51

\n 53421 saves\n \n

","css":".container {\n height: 200px;\n width: 350px;\n border-radius: 1em;\n overflow: hidden;\n box-shadow: 0 10px 20px #dbdbdb;\n font-family: sans-serif;\n}\n\n.palette {\n display: flex;\n height: 86%;\n width: 100%;\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: flex 0.1s linear;\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}\n\n#stats {\n height: 14%;\n width: 100%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1.5em;\n box-sizing: border-box;\n color: #bebebe;\n}\n\n#stats svg {\n fill: #bebebe;\n transform: scale(1.2);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"33ec9c","snapshot":null,"tags":null,"title":"card by htwarriors108","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":1078,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Hover Me : )

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n color: #fff;\n transition: 0.5s;\n cursor: pointer;\n}\n\n.card:hover {\n transform: translateY(-20px);\n}\n\n.card::before {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background: linear-gradient(45deg, #ffbc00, #ff0058);\n border-radius: 1.2em;\n}\n\n.card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #ffbc00, #ff0058);\n filter: blur(30px);\n}\n\n.card span {\n position: absolute;\n top: 6px;\n left: 6px;\n right: 6px;\n bottom: 6px;\n background-color: rgba(0, 0, 0, 0.6);\n z-index: 2;\n border-radius: 1em;\n}\n\n.card span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.card .content {\n position: relative;\n padding: 10px;\n z-index: 10;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.5em;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"ac1e59","snapshot":null,"tags":null,"title":"card by EmmaxPlay","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #011522;\n border-radius: 8px;\n z-index: 1;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n}\n\n.circle {\n padding: 0 4px;\n}\n\n.box {\n display: inline-block;\n align-items: center;\n width: 10px;\n height: 10px;\n padding: 1px;\n border-radius: 50%;\n}\n\n.red {\n background-color: #ff605c;\n}\n\n.yellow {\n background-color: #ffbd44;\n}\n\n.green {\n background-color: #00ca4e;\n}\n"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"f8b880","snapshot":null,"tags":null,"title":"card by catraco","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1081,"cssLen":1577,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n card title\n

\n Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal · One of the earliest examples\n of the Lorem ipsum placeholder text on 1960s advertising...\n

\n \n

\n \n\n

","css":".col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.grid{display:grid}.w-60{width:15rem}.justify-center{justify-content:center}.gap-4{gap:1rem}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-gradient-to-l{background-image:linear-gradient(to left, var(--tw-gradient-stops))}.from-slate-300{--tw-gradient-from:#cbd5e1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(203 213 225 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-slate-100{--tw-gradient-to:#f1f5f9 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.capitalize{text-transform:capitalize}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / 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)}.duration-300{transition-duration:300ms}.hover\\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.hover\\:text-slate-200:hover{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity))}"}]}},"actionData":null,"errors":null}