{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"created":"2024-01-22T17:11:28.000Z","isPrivate":0,"projectId":"6fbe26","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2720,"cssLen":2216,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Type of work

Project name

\n\n

","css":".card {\n --main-color: #dedede;\n --sub-color: #ccc;\n --bg-color: #323232;\n --accent-color: #BC8D66;\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 270px;\n padding: 25px;\n border-radius: 25px;\n display: flex;\n flex-direction: column;\n gap: 5px;\n background-color: var(--bg-color);\n transition: all 0.2s;\n cursor: pointer;\n box-shadow: 0px 0px 5px -1.5px #000;\n}\n\n.card::before {\n content: '';\n width: 99%;\n height: 99%;\n background: var(--sub-color);\n position: absolute;\n z-index: -1;\n top: 1px;\n left: 1px;\n border-radius: 25px;\n transition: all 0.3s;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.card__img {\n width: 100%;\n}\n\n.card__title {\n color: var(--main-color);\n font-weight: 900;\n font-size: 25px;\n}\n\n.card__subtitle {\n color: var(--sub-color);\n font-weight: 600;\n font-size: 20px;\n}\n\n.card__icon {\n width: 40px;\n height: 40px;\n transform: rotate(-45deg);\n transition: all 0.3s;\n}\n\n.card__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.card__icon g {\n fill: var(--main-color);\n}\n\n.card__icon circle, polyline, line {\n stroke: var(--main-color);\n}\n\n.card:hover .card__icon {\n transform: rotate(0);\n}\n\n.card:hover .card__icon circle, .card:hover .card__icon polyline, .card:hover .card__icon line {\n stroke: var(--accent-color);\n}\n\n.card:hover .card__icon g {\n fill: var(--accent-color);\n}\n\n.card:hover {\n box-shadow: 0px 0px 20px -5px #000;\n}\n\n.card:hover::before {\n transform: rotate(10deg);\n box-shadow: 0px 0px 20px -5px #000;\n}\n\n/* remove svg from class =\"card__img\" and last styles below css code before use */\n.st1 {\n fill: #fff\n}\n\n.st2 {\n fill: none;\n stroke: #242c88;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-miterlimit: 10\n}\n\n.st7 {\n fill: #589fff\n}\n\n.st9 {\n fill: #bc8d66\n}\n\n.st15,.st16 {\n opacity: .4;\n fill: #242c88\n}\n\n.st16 {\n opacity: .2\n}\n\n.st18 {\n fill: #ffc408\n}\n\n.st53 {\n fill: none;\n stroke: #242c88;\n stroke-width: 1.848;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-miterlimit: 10\n}"},{"created":"2024-01-22T17:11:28.000Z","isPrivate":0,"projectId":"5e2a99","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3753,"cssLen":7289,"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

\n \n 3D Animation\n

Design, Dimension

\n \n \n \n

\n\n","css":".relative{position:relative}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-10{width:2.5rem}.w-16{width:4rem}.w-44{width:11rem}.w-full{width:100%}.-rotate-45{--tw-rotate:-45deg;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))}.rotate-0{--tw-rotate:0deg;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))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.place-content-between{place-content:space-between}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.gap-5{gap:1.25rem}.rounded-full{border-radius:9999px}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-gray-100{--tw-gradient-from:#f3f4f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(243 244 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-gray-300{--tw-gradient-to:#d1d5db var(--tw-gradient-to-position)}.fill-lime-600{fill:#65a30d}.object-cover{object-fit:cover}.object-center{object-position:center}.p-px{padding:1px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-0::after{content:var(--tw-content);bottom:0px}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:h-0::after{content:var(--tw-content);height:0px}.after\\:h-0\\.5::after{content:var(--tw-content);height:0.125rem}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:origin-bottom-left::after{content:var(--tw-content);transform-origin:bottom left}.after\\:scale-x-0::after{content:var(--tw-content);--tw-scale-x:0;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))}.after\\:transform::after{content:var(--tw-content);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))}.after\\:bg-lime-600::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(101 163 13 / var(--tw-bg-opacity))}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.after\\:ease-in-out::after{content:var(--tw-content);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:-translate-y-12{--tw-translate-y:-3rem;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))}.group:hover .group-hover\\:-rotate-\\[360deg\\]{--tw-rotate:-360deg;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))}.group:hover .group-hover\\:rotate-45{--tw-rotate:45deg;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))}.group:hover .group-hover\\:-skew-y-12{--tw-skew-y:-12deg;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))}.group:hover .group-hover\\:skew-x-12{--tw-skew-x:12deg;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))}.group:hover .group-hover\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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))}@keyframes pulse{50%{opacity:.5}}.group:hover .group-hover\\:animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.group:hover .group-hover\\:rounded-full{border-radius:9999px}.group:hover .group-hover\\:bg-lime-600{--tw-bg-opacity:1;background-color:rgb(101 163 13 / var(--tw-bg-opacity))}.group:hover .group-hover\\:fill-white{fill:#fff}.group:hover .group-hover\\:stroke-lime-600{stroke:#65a30d}.group:hover .group-hover\\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.group:hover .group-hover\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}.group:hover .group-hover\\:duration-300{transition-duration:300ms}.group:hover .group-hover\\:ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:after\\:origin-bottom-left::after{content:var(--tw-content);transform-origin:bottom left}.group:hover .group-hover\\:after\\:scale-x-100::after{content:var(--tw-content);--tw-scale-x:1;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))}@media (prefers-color-scheme: dark){.dark\\:text-lime-500{--tw-text-opacity:1;color:rgb(132 204 22 / var(--tw-text-opacity))}.dark\\:after\\:bg-lime-500::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(132 204 22 / var(--tw-bg-opacity))}}@media (min-width: 640px){.sm\\:w-28{width:7rem}.sm\\:w-52{width:13rem}.sm\\:text-xl{font-size:1.25rem;line-height:1.75rem}.group:hover .sm\\:group-hover\\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;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))}}"},{"created":"2024-01-22T17:11:28.000Z","isPrivate":0,"projectId":"4f60d4","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":580,"cssLen":1877,"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 \n

","css":".post-card {\n width: 260px;\n height: 340px;\n background: #e4e4e4;\n box-shadow: 10px 10px 20px #afafaf, \n -10px -10px 20px #ffffff;\n padding: 10px;\n border-radius: 15px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.post-card textarea {\n resize: none;\n width: 100%;\n height: 40%;\n padding: 5px;\n font-family: Sans-serif;\n font-size: 16px;\n background-color: transparent;\n border: none;\n color: #fff;\n}\n\nhr {\n border: 1px solid #464646;\n width: 100%;\n border-radius: 10em;\n}\n\n.button-row {\n margin-top: 7px;\n margin-bottom: 3px;\n}\n\n.button-row button {\n border-radius: 10px;\n border: none;\n width: 77px;\n height: 58px;\n font-family: Sans-serif;\n color: #fff;\n box-shadow: 0px 4px 4px #bdbdbd;\n transition: all 0.3s ease-in-out;\n}\n\n.button-row button:hover {\n transform: translateY(-5px);\n box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);\n}\n\n.upload {\n font-size: 14px;\n background: linear-gradient(180deg, #b8b50a 0%, #ef4949 100%);\n}\n\n.feeling {\n font-size: 14px;\n background: linear-gradient(180deg, #31c300 0%, #ab7811 100%);\n}\n\n.life-event {\n font-size: 13.7px;\n background: linear-gradient(180deg, #ff1024 0%, #ffb34a 100%);\n}\n\n.people {\n font-size: 13.5px;\n background: linear-gradient(180deg, #0095b7 0%, #5012ba 100%);\n}\n\n.location {\n font-size: 14px;\n background: linear-gradient(180deg, #c329c9 0%, #2b5dff 100%);\n}\n\n.live-video {\n font-size: 13.8px;\n background: linear-gradient(180deg, #c800ff 0%, #ff076a 51%, #ff6c6c 100%);\n}\n\n.post {\n width: 100%;\n padding: 10px;\n margin-top: 7px;\n border: none;\n border-radius: 11px;\n font-size: 18px;\n font-family: Sans-serif;\n color: #fff;\n background-size: 200% 100%;\n background-image: linear-gradient(145deg, #ff00e1, #0000ff, #00d9ff);\n transition: 0.3s ease-out;\n}\n\n.post:hover {\n background-position: 99%;\n}"},{"created":"2024-01-22T17:11:28.000Z","isPrivate":0,"projectId":"4789b0","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":1584,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card * {\n position: absolute;\n}\n\n.pentagon1 {\n width: 250px;\n height: 250px;\n background: #03045e;\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n transition: all .3s ease-in-out;\n}\n\n.pentagon2 {\n width: 220px;\n height: 220px;\n background: #0077b6;\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n transition: all .4s ease-in-out;\n}\n\n.pentagon3 {\n width: 190px;\n height: 190px;\n background: #00b4d8;\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n transition: all .5s ease-in-out;\n}\n\n.pentagon4 {\n width: 160px;\n height: 160px;\n background: #90e0ef;\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n transition: all .6s ease-in-out;\n}\n\n.pentagon5 {\n width: 130px;\n height: 130px;\n background: #caf0f8;\n clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n transition: all .7s ease-in-out;\n}\n\n.card:hover .pentagon1 {\n transform: scale(1.3) rotate(45deg);\n}\n\n.card:hover .pentagon2 {\n transform: scale(1.3) rotate(90deg) translate(-20px,20px);\n}\n\n.card:hover .pentagon3 {\n transform: scale(1.3) rotate(135deg) translate(-40px,40px);\n}\n\n.card:hover .pentagon4 {\n transform: scale(1.3) rotate(190deg) translate(-60px,60px);\n}\n\n.card:hover .pentagon5 {\n transform: scale(1.3) rotate(235deg) translate(-80px,80px);\n}\n\n/* .card:hover .pentagon1, .card:hover .pentagon2 , .card:hover .pentagon3, .card:hover .pentagon4, .card:hover .pentagon5 {\n transform: scale(1.3) rotate(45deg);\n} */"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"cd104d","snapshot":null,"tags":null,"title":"card by Li-Deheng","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":821,"cssLen":2695,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Price Range

$735

-\n

$6 465

\n \n Current Range:\n

$7 200

\n \n

\n 1\n 10 000\n

\n \n \n

","css":".card-conteiner {\n cursor: default;\n --color-primary: #275efe;\n --color-headline: #3f4656;\n --color-text: #99a3ba;\n}\n\n.card-content {\n width: 100%;\n max-width: 312px;\n padding: 36px 32px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 1px 4px rgba(18, 22, 33, .12);\n}\n\n.card-content .card-title {\n font-family: inherit;\n font-size: 32px;\n font-weight: 700;\n margin: 0 0 10px 0;\n color: var(--color-headline);\n}\n\n.card-content .card-title span {\n font-weight: 500;\n}\n\n.card-content .values div, .card-content .current-range div {\n display: inline-block;\n vertical-align: top;\n}\n\n.card-content .values {\n margin: 0;\n font-weight: 500;\n color: var(--color-primary);\n}\n\n.card-content .values > div:first-child {\n margin-right: 2px;\n}\n\n.card-content .values > div:last-child {\n margin-left: 2px;\n}\n\n.card-content .current-range {\n display: block;\n color: var(--color-text);\n margin-top: 8px;\n font-size: 14px;\n}\n\n.card-content .slider {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n font-size: .6em;\n color: var(--color-text);\n}\n\n/* Range Slider */\n.input-ranges[type='range'] {\n width: 210px;\n height: 30px;\n overflow: hidden;\n outline: none;\n}\n\n.input-ranges[type='range'],\n.input-ranges[type='range']::-webkit-slider-runnable-track,\n.input-ranges[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n background: none;\n}\n\n.input-ranges[type='range']::-webkit-slider-runnable-track {\n width: 200px;\n height: 1px;\n background: var(--color-headline);\n}\n\n.input-ranges[type='range']:nth-child(2)::-webkit-slider-runnable-track {\n background: none;\n}\n\n.input-ranges[type='range']::-webkit-slider-thumb {\n position: relative;\n height: 15px;\n width: 15px;\n margin-top: -7px;\n background: #fff;\n border: 1px solid var(--color-headline);\n border-radius: 25px;\n cursor: pointer;\n z-index: 1;\n transition: .5s;\n -webkit-transition: .5s;\n -moz-transition: .5s;\n -ms-transition: .5s;\n -o-transition: .5s;\n}\n\n.input-ranges[type='range']::-webkit-slider-thumb:hover {\n background: #eaefff;\n border: 1px solid var(--color-primary);\n outline: .5px solid var(--color-primary);\n}\n\n.input-ranges[type='range']::-webkit-slider-thumb:active {\n cursor: grabbing;\n}\n\n.input-ranges[type='range']:nth-child(1)::-webkit-slider-thumb {\n z-index: 2;\n}\n\n.rangeslider {\n font-family: sans-serif;\n font-size: 14px;\n position: relative;\n height: 20px;\n width: 210px;\n display: inline-block;\n margin-top: -5px;\n}\n\n.rangeslider input {\n position: absolute;\n}\n\n.rangeslider span {\n position: absolute;\n margin-top: 20px;\n left: 0;\n}\n\n.rangeslider .right {\n position: relative;\n float: right;\n margin-right: -5px;\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"05e668","snapshot":null,"tags":null,"title":"card by Bodyhc","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":327,"cssLen":1213,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

You Welcome In Uiverse

\n Start:\n 14.11.2023 \n

\n \n

\n","css":".ag-courses_item {\n margin: auto;\n overflow: hidden;\n border-radius: 28px;\n}\n.ag-courses-item_link {\n display: block;\n padding: 30px 20px;\n background-color: #121212;\n overflow: hidden;\n position: relative;\n text-decoration: none;\n}\n\n.ag-courses-item_link:hover,\n.ag-courses-item_link:hover .ag-courses-item_date {\n color: #121212;\n}\n.ag-courses-item_link:hover .ag-courses-item_bg {\n -webkit-transform: scale(10);\n -ms-transform: scale(10);\n transform: scale(10);\n}\n.ag-courses-item_title {\n min-height: 57px;\n margin: 0 0 30px;\n overflow: hidden;\n font-weight: bold;\n font-size: 20px;\n color: rgb(255, 255, 255);\n z-index: 2;\n position: relative;\n}\n.ag-courses-item_date-box {\n font-size: 18px;\n color: #fff;\n z-index: 2;\n position: relative;\n}\n.ag-courses-item_date {\n font-weight: bold;\n color: #f9e534;\n -webkit-transition: color 0.5s ease;\n -o-transition: color 0.5s ease;\n transition: color 0.5s ease;\n}\n.ag-courses-item_bg {\n height: 130px;\n width: 100px;\n background-color: #f9b234;\n z-index: 1;\n position: absolute;\n top: -75px;\n right: -75px;\n border-radius: 50%;\n -webkit-transition: all 0.5s ease;\n -o-transition: all 0.5s ease;\n transition: all 0.5s ease;\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"f2e6bc","snapshot":null,"tags":null,"title":"card by alexreyes091","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":506,"cssLen":1368,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Title

\n
\n

Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n

\n \n \n

","css":".card {\n width: 190px;\n height: 254px;\n padding: 2%;\n background: rgb(255, 255, 255);\n border-bottom: 2px solid blueviolet;\n border-right: 2px solid blueviolet;\n border-top: 2px solid white;\n border-left: 2px solid white;\n transition-duration: 1s;\n transition-property: border-top, \n border-left, \n border-bottom,\n border-right,\n box-shadow;\n}\n\n.card:hover {\n border-top: 2px solid blueviolet;\n border-left: 2px solid blueviolet;\n border-bottom: 2px solid rgb(238, 103, 238);\n border-right: 2px solid rgb(238, 103, 238);\n box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;\n}\n\n.card__content {\n font-size: small;\n text-align: center;\n}\n\n.card__content-heading {\n color: blueviolet;\n}\n\n.card__content-body p {\n color: rgb(118, 104, 128);\n padding-bottom: 1rem;\n}\n\n.card__content-footer button {\n background-color: rgb(255, 255, 255);\n color: grey;\n font-weight: 700;\n border-radius: .2rem;\n border: 1px solid grey;\n padding: .5rem;\n margin: 1rem;\n transition-duration: 1s;\n transition-property: background-color, color, border;\n}\n\nbutton:hover {\n color: white;\n background-color: rgb(238, 103, 238);\n border: 1px solid white;\n box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;\n}\n\n\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"c9f395","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":955,"cssLen":1108,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Dad Jokes Alert!

\n Why don’t scientists trust atoms? Because they make up everything.\n

\n \n

\n","css":".notifications-container {\n width: 320px;\n height: auto;\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.dad-joke {\n padding: 1rem;\n border-radius: 0.375rem;\n background-color: rgb(248, 231, 28);\n}\n\n.dad-joke-svg {\n color: rgb(255, 255, 255);\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.dad-joke-prompt-wrap {\n margin-left: 0.75rem;\n}\n\n.dad-joke-prompt-heading {\n font-weight: bold;\n color: rgb(57, 55, 54);\n}\n\n.dad-joke-prompt {\n margin-top: 0.5rem;\n color: rgb(57, 55, 54);\n}\n\n.dad-joke-button-container {\n display: flex;\n margin-top: 0.875rem;\n margin-bottom: -0.375rem;\n margin-left: -0.5rem;\n margin-right: -0.5rem;\n}\n\n.dad-joke-button-main {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n background-color: #F75404;\n color: #FFFFFF;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: bold;\n border-radius: 0.375rem;\n border: none\n}\n\n.dad-joke-button-main:hover {\n background-color: #D1410C;\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"1f96e9","snapshot":null,"tags":null,"title":"card by ahmed150up","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":662,"cssLen":1311,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Chat

Hello, How are you?

I'm good, thanks for asking! How about you?

\n \n

\n","css":".card-container {\n background-color: #fff;\n border-radius: 10px;\n padding: 15px;\n margin: 20px;\n display: flex;\n flex-direction: column;\n width: 280px;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n border-bottom: 1px solid #ccc;\n}\n\n.card-header .img-avatar {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-right: 20px;\n background-color: #333;\n}\n\n.card-header .text-chat {\n color: black;\n margin: 0;\n font-size: 20px;\n}\n\n.card-body {\n flex: 1;\n overflow-y: auto;\n}\n\n.messages-container {\n padding: 15px;\n}\n\n.message-box {\n padding: 10px;\n margin-bottom: 5px;\n border-radius: 10px;\n}\n\n.message-box.left {\n background-color: #f1f1f1;\n color: black;\n font-size: 13px;\n left: 0;\n}\n\n.message-box.right {\n background-color: #333;\n color: #fff;\n font-size: 13px;\n right: 0;\n}\n\n.message-input {\n padding: 5px;\n border-top: 1px solid #ccc;\n}\n\n.message-input .message-send {\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: 10px;\n resize: none;\n}\n\n.message-input .button-send {\n background-color: #333;\n color: #fff;\n padding: 10px 20px;\n border: none;\n cursor: pointer;\n margin-left: 10px;\n border-radius: 10px;\n font-size: 13px;\n}\n\n.message-input .button-send:hover {\n background-color: #f1f1f1;\n color: #333;\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"09305e","snapshot":null,"tags":null,"title":"card by akshat-patel28","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1408,"cssLen":2296,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Card Title

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam\n inventore natus modi repellendus dolorem unde odio sequi! Porro, cum\n maiores tempore suscipit laudantium perspiciatis, illo sunt,\n reprehenderit quae est blanditiis.\n

\n \n Watch Video\n

","css":".card {\n display: flex;\n flex-direction: column;\n width: 230px;\n height: 280px;\n max-height: 330px;\n background-color: var(--white);\n border-radius: 10px;\n box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.08),\n -4px -4px 12px rgba(0, 0, 0, 0.08);\n overflow: hidden;\n transition: all 0.3s;\n cursor: pointer;\n box-sizing: border-box;\n padding: 10px;\n}\n\n.card:hover {\n transform: translateY(-10px);\n box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1),\n -4px -4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.card-image-container {\n width: 100%;\n height: 64%;\n border-radius: 10px;\n margin-bottom: 12px;\n overflow: hidden;\n background-color: rgb(165, 165, 165);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.video-icon {\n font-size: 40px;\n}\n\n.card-title {\n margin: 0;\n font-size: 17px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #1797b8;\n cursor: default;\n -webkit-box-orient: vertical;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n}\n\n.card-des {\n -webkit-box-orient: vertical;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n margin: 0;\n font-size: 13px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n color: #1797b8;\n cursor: default;\n}\n\n.card-btn {\n font-size: 15px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n color: #fff;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #12bde7;\n width: 25px;\n height: 25px;\n max-height: 25px;\n border-radius: 10px;\n overflow: hidden;\n transition: all ease-in-out 0.5s;\n gap: 1px;\n box-sizing: border-box;\n padding-left: 5px;\n margin-top: 8px;\n}\n\n.card-btn:hover {\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06);\n width: 100%;\n border-radius: 8px;\n height: 30px;\n gap: 10px;\n padding: 0;\n}\n\n.card-btn-text {\n opacity: 0;\n font-size: 1px;\n font-weight: 500;\n transition: all ease-in-out 0.5s;\n}\n\n.card-btn:hover > .card-btn-text {\n opacity: 1;\n font-size: 15px;\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"0e2f00","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2869,"cssLen":878,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

Pepper Potts

Profile

","css":".card {\n width: 210px;\n height: 280px;\n background: rgb(39, 39, 39);\n border-radius: 12px;\n box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.123);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n transition-duration: .5s;\n}\n\n.profileImage {\n background: linear-gradient(to right,rgb(54, 54, 54),rgb(32, 32, 32));\n margin-top: 20px;\n width: 170px;\n height: 170px;\n border-radius: 50%;\n box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.329);\n}\n\n.textContainer {\n width: 100%;\n text-align: left;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.name {\n font-size: 0.9em;\n font-weight: 600;\n color: white;\n letter-spacing: 0.5px;\n}\n\n.profile {\n font-size: 0.84em;\n color: rgb(194, 194, 194);\n letter-spacing: 0.2px;\n}\n\n.card:hover {\n background-color: rgb(43, 43, 43);\n transition-duration: .5s;\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"44cd43","snapshot":null,"tags":null,"title":"card by PriyanshuGupta28","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":433,"cssLen":1973,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Form

\n \n

","css":".card {\n height: 20rem;\n background: lightgrey;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n border-top-left-radius: 2rem;\n border-bottom-right-radius: 2rem;\n padding: 1rem;\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n transition: 0.5s ease-in-out;\n}\n\n.heading {\n text-align: center;\n font-weight: 600;\n padding-top: 1rem;\n font-size: large;\n}\n\n.input-div {\n display: flex;\n margin-top: 1rem;\n transition: 0.5s ease-in-out;\n}\n\n.card input {\n background-color: transparent;\n border: none;\n border-bottom: 1px solid black;\n width: 12rem;\n padding: 8px;\n outline: none;\n}\n\n.button-div {\n text-align: center;\n}\n\n.submit {\n margin-top: 3rem;\n text-align: center;\n padding: 8px 3rem;\n border: none;\n border-top-left-radius: 1rem;\n border-bottom-right-radius: 1rem;\n background-color: black;\n color: white;\n transition: 0.5s ease-in-out;\n cursor: pointer\n}\n\n.submit:hover {\n box-shadow: rgba(44, 43, 43, 0.664) 5px 5px, rgba(45, 45, 45, 0.3) 10px 10px, rgba(60, 59, 59, 0.2) 15px 15px, rgba(54, 53, 53, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;\n}\n\n.card input::placeholder {\n color: black;\n}\n\n.input:focus {\n transition: 0.2s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n}\n\n.input:hover {\n transition: 0.2s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n}\n\n"}]}},"actionData":null,"errors":null}