{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"32b041","snapshot":null,"tags":null,"title":"card by mrhyddenn","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":1275,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card_box {\n width: 200px;\n height: 250px;\n border-radius: 20px;\n background: linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%);\n position: relative;\n box-shadow: 0 25px 50px rgba(0,0,0,0.55);\n cursor: pointer;\n transition: all .3s;\n}\n\n.card_box:hover {\n transform: scale(0.9);\n}\n\n.card_box span {\n position: absolute;\n overflow: hidden;\n width: 150px;\n height: 150px;\n top: -10px;\n left: -10px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card_box span::before {\n content: 'Premium';\n position: absolute;\n width: 150%;\n height: 40px;\n background-image: linear-gradient(45deg, #ff6547 0%, #ffb144 51%, #ff7053 100%);\n transform: rotate(-45deg) translateY(-20px);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n box-shadow: 0 5px 10px rgba(0,0,0,0.23);\n}\n\n.card_box span::after {\n content: '';\n position: absolute;\n width: 10px;\n bottom: 0;\n left: 0;\n height: 10px;\n z-index: -1;\n box-shadow: 140px -140px #cc3f47;\n background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"1b758f","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5119,"cssLen":1456,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Draggable\n \n

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown

Feb 24

\n \n \n \n +20\n

\n \n

","css":".task {\n position: relative;\n color: #2e2e2f;\n cursor: move;\n background-color: #fff;\n padding: 1rem;\n border-radius: 8px;\n box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;\n margin-bottom: 1rem;\n border: 3px dashed transparent;\n max-width: 350px;\n}\n\n.task:hover {\n box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;\n border-color: rgba(162, 179, 207, 0.2) !important;\n}\n\n.task p {\n font-size: 15px;\n margin: 1.2rem 0;\n}\n\n.tag {\n border-radius: 100px;\n padding: 4px 13px;\n font-size: 12px;\n color: #ffffff;\n background-color: #1389eb;\n}\n\n.tags {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.options {\n background: transparent;\n border: 0;\n color: #c4cad3;\n font-size: 17px;\n}\n\n.options svg {\n fill: #9fa4aa;\n width: 20px;\n}\n\n.stats {\n position: relative;\n width: 100%;\n color: #9fa4aa;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.stats div {\n margin-right: 1rem;\n height: 20px;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.stats svg {\n margin-right: 5px;\n height: 100%;\n stroke: #9fa4aa;\n}\n\n.viewer span {\n height: 30px;\n width: 30px;\n background-color: rgb(28, 117, 219);\n margin-right: -10px;\n border-radius: 50%;\n border: 1px solid #fff;\n display: grid;\n align-items: center;\n text-align: center;\n font-weight: bold;\n color: #fff;\n padding: 2px;\n}\n\n.viewer span svg {\n stroke: #fff;\n}\n\n\n"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"aa4283","snapshot":null,"tags":null,"title":"card by Sharkotech","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":972,"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: rgba(211, 211, 211, 0.199);\n position: absolute;\n transition: .3s ease-in-out;\n cursor: pointer;\n box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.3);\n}\n\n#c1 {\n background-color: black;\n}\n\n#c2 {\n background-color: blue;\n}\n\n#c3 {\n background-color: red;\n}\n\n#c4 {\n background-color: green;\n}\n\n.main:hover #c1 {\n transform: translateX(-100px) rotate(-40deg);\n}\n\n.main:hover #c2 {\n transform: translateX(-50px) rotate(-30deg);\n}\n\n.main:hover #c3 {\n transform: translateX(0) rotate(-20deg);\n}\n\n.main:hover #c4 {\n transform: translateX(50px) rotate(-10deg);\n}\n\n#c1:hover {\n transform: translateX(-150px) rotate(0deg) !important;\n}\n\n#c2:hover {\n transform: translateX(-100px) rotate(0deg) !important;\n}\n\n#c3:hover {\n transform: translateX(-50px) rotate(0deg) !important;\n}\n\n#c4:hover {\n transform: translateX(50px) rotate(0deg) !important;\n}\n\n.main {\n display: grid;\n height: 50vmax;\n place-items: center;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"f167f8","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3146,"cssLen":1438,"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

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(38, 38, 38);\n box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.333);\n}\n\n.imge {\n height: 70px;\n background-color: #ff5858;\n}\n\n.imge .Usericon {\n background-color: #414141;\n transform: translateX(10px) translateY(10px);\n width: 50px;\n height: 50px;\n border-radius: 10px;\n}\n\n.imge .UserName {\n background-color: #414141;\n width: 60px;\n height: 15px;\n border-width: 10px;\n border-radius: 5px;\n border-color: #262626;\n color: #262626;\n font-size: 15px;\n font-weight: bold;\n transform: translateX(70px) translateY(-35px);\n}\n\n.imge .Id {\n background-color: #414141;\n width: 100px;\n height: 15px;\n border-width: 10px;\n border-radius: 5px;\n border-color: #262626;\n color: #262626;\n font-size: 15px;\n font-weight: bold;\n transform: translateX(70px) translateY(-25px);\n}\n\n.Description {\n border-color: #141414;\n background-color: #414141;\n transform: translate(5px, 6px);\n width: 180px;\n height: 130px;\n border-radius: 5px;\n}\n\n/*______Social Media______*/\n.social-media:before {\n content: \" \";\n display: block;\n width: 100%;\n height: 2px;\n transform: translatey(10px);\n background: #414141;\n}\n\n.social-media a {\n margin-right: 15px;\n text-decoration: none;\n color: inherit;\n}\n\n.social-media a:last-child {\n margin-right: 0;\n}\n\n.social-media a svg {\n color: #ff5858;\n transform: translatex(25px) translateY(20px);\n width: 20px;\n fill: currentColor;\n}"},{"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}"}]}},"actionData":null,"errors":null}