{"loaderData":{"0":null,"0-3":{"total":7397,"projects":[{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a3b360","snapshot":null,"tags":null,"title":"card by zanina-yassine","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8878,"cssLen":3428,"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 \n

\n\n

Best Results

\n\n

\n \n

\n Create a new File\n Add a new file to your library list\n

\n \n

\n Upload a file\n Use your one of your system files to save and edit\n

\n\n

\n \n

\n Generate a new document with AI\n Use our ChatGPT plug-in to generate a new document\n

New\n

\n \n

\n Create from a template\n Use our free templates to quickly create a document\n

\n\n

\n \n \n

Navigate\n

\n \n

Select\n

\n \n

Quit\n

\n\n

Edit Actions\n

","css":".card {\n width: 450px;\n background: #FFFFFF;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 11px;\n}\n\n.search-container {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 10px;\n padding: 0 20px;\n}\n\n.search-container input {\n width: 100%;\n height: 50px;\n border: 0;\n outline: none;\n font-size: 13px;\n}\n\n.categories {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 5px;\n padding: 0px 20px 20px 20px;\n}\n\n.categories button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 15px;\n background: #FFFFFF;\n border: 1px solid #E5E5E5;\n box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 20px;\n font-weight: 600;\n color: #171718;\n transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.categories button:hover {\n transform: scale(1.05) translateY(-3px);\n}\n\n.results {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.results hr {\n width: 100%;\n height: 1px;\n border: 0;\n background-color: #ECECEC;\n}\n\n.results p {\n padding: 0 20px;\n}\n\np.label {\n font-weight: 600;\n font-size: 11px;\n line-height: 13px;\n color: #5F6368;\n}\n\n.results .entry {\n display: grid;\n grid-template-columns: 40px 1fr 40px;\n gap: 12px;\n padding: 5px 20px;\n transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.results .entry:hover {\n background-color: #F5F8FE;\n}\n\n.results .results-list .entry:hover .icon {\n background-color: #1763fa;\n}\n\n.results .results-list .entry:hover .icon svg path,\n.results .results-list .entry:hover .icon svg circle {\n stroke: #ffffff;\n}\n\n.results .results-list .entry:hover label {\n color: #1763fa;\n}\n\n.results .results-list .entry:hover span {\n color: #7ba0eb;\n}\n\n.results .results-list {\n display: flex;\n flex-direction: column;\n}\n\n.results .entry .icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #ECECEC;\n border-radius: 7px;\n transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.results .entry .desc {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 5px;\n}\n\n.results .entry .desc label {\n display: block;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n color: #171718;\n}\n\n.results .entry .desc span {\n font-weight: 600;\n font-size: 10px;\n line-height: 12px;\n color: #72767c;\n}\n\n.results .entry .badge {\n width: 40px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n background: #DDFFDE;\n border: 1px solid #08581d0e;\n border-radius: 7px;\n font-weight: 700;\n font-size: 11px;\n line-height: 13px;\n text-align: center;\n color: #08581D;\n}\n\n.card-footer {\n height: 40px;\n display: flex;\n align-items: center;\n gap: 25px;\n margin-top: 10px;\n padding: 0 7px;\n background: #F8F8F8;\n}\n\n.card .action {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.card .action p {\n padding-left: 5px;\n}\n\n.card-footer button {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n border: 0;\n background: #ECECEC;\n outline: none;\n}\n\n.edit-actions {\n width: 100%;\n text-align: right;\n padding-right: 10px;\n opacity: 0.6;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"5d6f2e","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":170,"cssLen":1311,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: linear-gradient(to bottom right, #ff2ab7, #7522a1);\n box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;\n z-index: 1;\n border-radius: 21px;\n overflow: hidden;\n}\n\n.card__content {\n background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(150, 150, 150, 0.1));\n z-index: 1;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 21px;\n backdrop-filter: blur(35px);\n}\n\n.card .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 200px;\n height: 200px;\n animation-name: blob-animation;\n animation-duration: 2s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n.card .blob:nth-child(1) {\n left: -50px;\n top: -90px;\n background: #c52791;\n}\n\n.card .blob:nth-child(2) {\n left: 110px;\n top: -20px;\n z-index: -1;\n background: #6d1d7f;\n}\n\n.card .blob:nth-child(3) {\n left: -40px;\n top: 100px;\n background: #a31c72;\n}\n\n.card .blob:nth-child(4) {\n left: 100px;\n top: 180px;\n background: #4a158a;\n}\n\n@keyframes blob-animation {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n\n 50% {\n transform: translate(10%, 10%) scale(1.1);\n }\n\n 100% {\n transform: translate(0, 0) scale(1);\n }\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"3577a5","snapshot":null,"tags":null,"title":"card by Mhyar-nsi","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1528,"cssLen":1008,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n function helloWorld(text){
\n for(let i = 0 ; i < 10 ; i++){
\n console.log(`${text}`);
\n }
\n }
\n
\n helloWorld('Hello World');\n

","css":".card {\n font-family: monospace;\n margin-top: 40px;\n width: 350px;\n height: 260px;\n background: #292828da;\n border: 2px solid #000;\n border-radius: 15px;\n}\n\n.top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 10px;\n}\n\n.dots {\n display: flex;\n justify-content: last baseline;\n}\n\n.dot {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n}\n\n.dot-1 {\n background-color: rgb(0, 132, 255);\n}\n\n.dot-2 {\n background-color: rgb(230, 0, 255);\n}\n\n.dot-3 {\n background-color: rgb(0, 255, 89);\n}\n\n.top p {\n font-size: 20px;\n font-weight: bold;\n}\n\n.dot , .top p {\n margin: 5px;\n}\n\n.g-color {\n color: darkgreen;\n}\n\n.bottom {\n margin-top: 30px;\n padding: 0 25px;\n}\n\n.code {\n font-size: 15px;\n}\n\n.red {\n color: rgb(210, 63, 52);\n}\n\n.violet {\n color: rgb(181, 40, 203);\n}\n\n.blue {\n color: rgb(91, 131, 223);\n}\n\n.orange {\n color: rgb(195, 128, 3);\n}\n\n.white {\n color: rgb(163, 163, 163);\n}\n\n.space-4 {\n margin-left: 35px;\n}\n\n.space-4x2 {\n margin-left: 70px;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a2c267","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":291,"cssLen":1912,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

UIVERSE

Love to Code.

Love to spend hours in codeing and get lost in own fantasy world of code, the feeling 😂🚀😊

","css":".h3 span {\n font-weight: 800;\n background: linear-gradient(125deg, #b663ff, #13c1ef);\n text-transform: uppercase;\n -webkit-background-cLip: text;\n -webkit-text-filL-coLor: transparent;\n}\n\n.h3::after {\n content: '';\n margin-top: -5px;\n height: 3px;\n width: 25%;\n background: linear-gradient(125deg, #b663ff, #13c1ef);\n display: block;\n}\n\n.main {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card {\n width: 80%;\n position: relative;\n background-color: rgb(16 16 16);\n border: 1px solid rgb(255 255 255 / 5%);\n border-radius: 1.5rem;\n padding: 1rem;\n}\n\n.card:after {\n content: \"\";\n height: 70px;\n width: 1px;\n position: absolute;\n left: -1px;\n top: 65%;\n transition: top, opacity;\n transition-duration: 600ms;\n transition-timing-function: ease;\n background: linear-gradient(transparent, mediumslateblue,transparent);\n box-shadow: 0 0 30px mediumslateblue;\n opacity: 0;\n}\n\n.card:after {\n top: 65%;\n opacity: 0;\n}\n\n.card:hover:after {\n top: 25%;\n opacity: 1;\n}\n\n.card-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-image: radial-gradient(\n rgba(255, 255, 255, 0.1) 1px, \n transparent 1px\n );\n background-position: 50% 50%;\n background-size: 1.1rem 1.1rem;\n padding: 2.3rem;\n border-radius: 1.25rem;\n overflow: hidden;\n}\n\n.card-content .h1,.h3,.p {\n text-align: center;\n}\n\n.card-content .h1 {\n color: rgb(250 249 246);\n font-size: 2.6rem;\n}\n\n.card-content .h3 {\n color: #fff;\n text-transform: uppercase;\n font-size: 1.5rem;\n}\n\n.card-content .p {\n color: rgb(255 255 255 / 75%);\n line-height: 1.3rem;\n}\n\n@media(max-width: 700px) {\n .card {\n width: calc(100% - 2rem);\n margin: 0rem 1rem;\n padding: 0.75rem;\n border-radius: 1rem;\n }\n}\n\n@media(max-width: 600px) {\n .card-content {\n padding: 3rem;\n }\n\n .card-content .h1 {\n font-size: 2.2rem;\n }\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a950ab","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":936,"cssLen":1427,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n John Doe\n

\n Front-end dev \n

\n Articles\n \n 34\n \n

\n Followers\n \n 455\n \n

\n \n

\n","css":".card {\n max-width: 320px;\n border-radius: 1rem;\n background-color: rgba(31, 41, 55, 1);\n padding: 1rem;\n}\n\n.infos {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.image {\n height: 7rem;\n width: 7rem;\n border-radius: 0.5rem;\n background-color: rgb(118, 36, 194);\n background: linear-gradient(to bottom right, rgb(118, 36, 194), rgb(185, 128, 240));\n}\n\n.info {\n height: 7rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.name {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 500;\n color: rgba(255, 255, 255, 1);\n}\n\n.function {\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgba(156, 163, 175, 1);\n}\n\n.stats {\n width: 100%;\n border-radius: 0.5rem;\n background-color: rgba(255, 255, 255, 1);\n padding: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgba(0, 0, 0, 1);\n}\n\n.flex {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0 4px;\n}\n\n.state-value {\n font-weight: 700;\n color: rgb(118, 36, 194);\n}\n\n.request {\n margin-top: 1.5rem;\n width: 100%;\n border: 1px solid transparent;\n border-radius: 0.5rem;\n padding: 0.5rem 1rem;\n font-size: 1rem;\n line-height: 1.5rem;\n transition: all .3s ease;\n}\n\n.request:hover {\n background-color: rgb(118, 36, 194);\n color: #fff;\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"2a0672","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":874,"cssLen":1565,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n 2022\n \n Oct 10\n \n

\n \n

\n \n \n How to make this blog card ?\n \n \n\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae\n dolores, possimus pariatur animi temporibus nesciunt praesentium dolore\n sed nulla ipsum eveniet corporis quidem, mollitia itaque minus soluta,\n voluptates neque explicabo tempora nisi culpa eius atque dignissimos.\n Molestias explicabo corporis voluptatem?\n

\n\n \n Read Blog\n \n

","css":".card {\n box-sizing: border-box;\n display: flex;\n max-width: 320px;\n background-color: rgba(255, 255, 255, 1);\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.card:hover {\n box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.081);\n}\n\n.date-time-container {\n writing-mode: vertical-lr;\n transform: rotate(180deg);\n padding: 0.5rem;\n}\n\n.date-time {\n display: flex;\n align-items: center;\n justify-content: space-between;\n grid-gap: 1rem;\n gap: 1rem;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n color: rgba(17, 24, 39, 1);\n}\n\n.separator {\n width: 1px;\n flex: 1 1 0%;\n background-color: rgba(17, 24, 39, 0.1);\n}\n\n.content {\n display: flex;\n flex: 1 1 0%;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.infos {\n border-left: 1px solid rgba(17, 24, 39, 0.1);\n padding: 1rem;\n}\n\n.title {\n font-weight: 700;\n text-transform: uppercase;\n font-size: 18.72px;\n color: rgba(17, 24, 39, 1);\n}\n\n.description {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n line-clamp: 5;\n margin-top: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(55, 65, 81, 1);\n}\n\n.action {\n display: block;\n background-color: rgba(253, 224, 71, 1);\n padding: 0.75rem 1.25rem;\n text-align: center;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n color: rgba(17, 24, 39, 1);\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.action:hover {\n background-color: rgba(250, 204, 21, 1);\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"90b5d9","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1160,"cssLen":3091,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Discount

Up to

\n 70%\n \n

*Variable prices

","css":".absolute{position:absolute}.relative{position:relative}.-bottom-12{bottom:-3rem}.-right-12{right:-3rem}.z-10{z-index:10}.-mt-1{margin-top:-0.25rem}.mb-1{margin-bottom:0.25rem}.mb-5{margin-bottom:1.25rem}.inline-block{display:inline-block}.flex{display:flex}.h-40{height:10rem}.h-64{height:16rem}.w-40{width:10rem}.w-56{width:14rem}.-rotate-12{--tw-rotate:-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))}.-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))}.-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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-400{--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.stroke-current{stroke:currentColor}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-7xl{font-size:4.5rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-extrabold{font-weight:800}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248 / var(--tw-text-opacity))}.opacity-30{opacity:0.3}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:top-1\\/2::before{content:var(--tw-content);top:50%}.before\\:-ml-14::before{content:var(--tw-content);margin-left:-3.5rem}.before\\:h-0::before{content:var(--tw-content);height:0px}.before\\:h-0\\.5::before{content:var(--tw-content);height:0.125rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:bg-sky-200::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(186 230 253 / var(--tw-bg-opacity))}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:top-1\\/2::after{content:var(--tw-content);top:50%}.after\\:ml-2::after{content:var(--tw-content);margin-left:0.5rem}.after\\:h-0::after{content:var(--tw-content);height:0px}.after\\:h-0\\.5::after{content:var(--tw-content);height:0.125rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:bg-sky-200::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(186 230 253 / var(--tw-bg-opacity))}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.hover\\:bg-sky-300:hover{--tw-bg-opacity:1;background-color:rgb(125 211 252 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"18fb2e","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":891,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

YOUR
CONTENT
HERE

","css":".card {\n --bg: #555;\n --contrast: #999;\n --grey: #93a1a1;\n position: relative;\n padding: 9px;\n background-color: var(--bg);\n border-radius: 35px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n}\n\n.card-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: repeating-conic-gradient(var(--bg) 0.0000001%, var(--grey) 0.000104%) 60% 60%/600% 600%;\n filter: opacity(10%) contrast(105%);\n}\n\n.card-inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: 190px;\n height: 254px;\n background-color: var(--contrast);\n border-radius: 30px;\n /* Content style */\n font-size: 30px;\n font-weight: 900;\n color: #c7c4c4;\n text-align: center;\n font-family: monospace;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"7b9d77","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1053,"cssLen":1776,"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 WEBSITE SEO\n

\n Website ravida surna eveti semen the conse tusio anivite dianne one nivam\n acestion vue artin dictum.\n

\n \n 09\n

\n\n","css":".flex {\n display: flex;\n}\n.h-12 {\n height: 3rem;\n}\n.w-12 {\n width: 3rem;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.snap-start {\n scroll-snap-align: start;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-start {\n align-items: flex-start;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.self-end {\n align-self: flex-end;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.stroke-gray-800 {\n stroke: #1f2937;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-5xl {\n font-size: 3rem;\n line-height: 1;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-black\\/80 {\n color: rgb(0 0 0 / 0.8);\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-\\[\\#202127\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(32 33 39 / var(--tw-bg-opacity));\n}\n.group:hover .group-hover\\:stroke-gray-400 {\n stroke: #9ca3af;\n}\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"734945","snapshot":null,"tags":null,"title":"card by LightAndy1","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1461,"cssLen":2317,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Good news Mac users!\n

This software is now available for download.

\n Try it free\n

\n Not now\n

\n \n

\n","css":".card {\n max-width: 320px;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n border-radius: 0.5rem;\n background: #606c88;\n background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);\n background: linear-gradient(to right top, #3f4c6b, #606c88);\n padding: 1rem;\n color: rgb(107, 114, 128);\n box-shadow: 0px 87px 78px -39px rgba(0, 0, 0, 0.4);\n}\n\n.icon {\n height: 2rem;\n width: 2rem;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n background-color: #153586;\n color: rgb(59, 130, 246);\n}\n\n.icon svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\n.content {\n margin-left: 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n}\n\n.title {\n margin-bottom: 0.25rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n color: rgb(255, 255, 255);\n cursor: default;\n}\n\n.desc {\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n color: rgb(202, 200, 200);\n cursor: default;\n}\n\n.actions {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-gap: 0.5rem;\n gap: 0.5rem;\n}\n\n.download,\n.notnow {\n width: 100%;\n display: inline-flex;\n justify-content: center;\n border-radius: 0.5rem;\n padding: 0.375rem 0.5rem;\n text-align: center;\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(255, 255, 255);\n outline: 2px solid transparent;\n border: 1px solid rgba(253, 253, 253, 0.363);\n}\n\n.download {\n background-color: #284385;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.25s cubic-bezier(0.18, 0.69, 0.18, 0.94);\n}\n\n.download:hover {\n background-color: #153586;\n}\n\n.notnow {\n background-color: #606c88;\n font-weight: 500;\n text-decoration: none;\n transition: all 0.25s cubic-bezier(0.18, 0.69, 0.18, 0.94);\n}\n\n.notnow:hover {\n background-color: #3f4c6b;\n}\n\n.close {\n margin: -0.375rem -0.375rem -0.375rem auto;\n height: 2rem;\n width: 2rem;\n display: inline-flex;\n border-radius: 0.5rem;\n background-color: #606c88;\n padding: 0.375rem;\n color: rgba(255, 255, 255, 1);\n border: none;\n transition: all 0.25s cubic-bezier(0.18, 0.69, 0.18, 0.94);\n cursor: pointer;\n}\n\n.close svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\n.close:hover {\n background-color: rgb(58, 69, 83);\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a90974","snapshot":null,"tags":null,"title":"card by Saad3092003","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":748,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello There

\n","css":".one-div {\n position: relative;\n height: 250px;\n width: 200px;\n background-color: rgb(15, 15, 15);\n transform-style: preserve-3d;\n animation: rot 2s infinite ease;\n border-radius: 20px;\n box-shadow: 0 0 50px 0px, inset 0 0 90px 0px;\n color: white;\n transition: 1s;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.one-div .text {\n opacity: 0;\n transition: all 0.5s;\n}\n\n.one-div:hover.one-div .text {\n scale: 1.2;\n opacity: 0.7;\n}\n\n.one-div:hover {\n box-shadow: 0 0 50px 0px, inset 5px 5px 20px 0px black;\n}\n\n@keyframes rot {\n 0% {\n transform: rotateX(-15deg) translateY(0px);\n }\n\n 50% {\n transform: rotateX(-15deg) translateY(-10px);\n }\n\n 100% {\n transform: rotateX(-15deg) translateY(0px);\n }\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"9f04c9","snapshot":null,"tags":null,"title":"card by qhns3","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":1085,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Popular this month

Uiverse

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n"}]}},"actionData":null,"errors":null}