{"loaderData":{"0":null,"0-2":{"total":7187,"projects":[{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"615d4c","snapshot":null,"tags":null,"title":"card by ahmed150up2","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3112,"cssLen":1715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n background-color: white;\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n}\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-left: 1em;\n padding-right: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: lightgray;\n}\n\n.currentplaying {\n display: flex;\n margin: 1em;\n}\n\n.soundcloud {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: #ff8800;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: black;\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: black;\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"cd835e","snapshot":null,"tags":null,"title":"card by shahbaz4783","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1001,"cssLen":1214,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Affiliate and Influencer Marketing

Posted on 23 Dec, 2023

\n\n

$120

Budget

Intermediate

Experience

\n\n

\n Are you a highly motivated and results-driven individual with a passion for\n affiliate and influencer marketing? Jaspr, a fast-growing company\n specializing in air quality products, is seeking a dedicated specialist to\n help us scale our affiliate and influencer marketing efforts, utilizing\n tools like Hype Auditor.\n

\n\n

marketing

seo

content writing

\n\n

\n \">\n \n \n

\n","css":".job-card {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1.2em;\n box-shadow: #091e4240 0px 1px 1px, #091e4221 0px 0px 1px 1px;\n border-radius: 0.6em;\n padding: 1em;\n max-width: 30em;\n}\n\n.text-title {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font-size: 1.25em;\n font-weight: 600;\n font-family: \"Noto Sans\", sans-serif;\n}\n\n.text-body {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font-family: \"Poppins\", sans-serif;\n letter-spacing: 0.4px;\n}\n\n.post-date {\n color: #598551;\n}\n\n.budget-exp {\n display: flex;\n gap: 5em;\n}\n\n.budget-exp .value {\n font-size: 1em;\n font-weight: 600;\n}\n\n.budget-exp .label {\n font-size: 1em;\n color: #598551;\n}\n\n.card-btn {\n border: none;\n font-size: 1rem;\n background-color: green;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 2em;\n padding: 0.6em 1em;\n}\n\n.card-btn:hover {\n background-color: #026602;\n}\n\n.tags article {\n display: flex;\n flex-wrap: wrap;\n gap: 0.6em;\n}\n\n.tags p {\n border-radius: 1.2em;\n padding: 0.2em 0.5em;\n background-color: #f2f7f2;\n color: #598551;\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"e92f0c","snapshot":null,"tags":null,"title":"card by andreafortuna00","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4445,"cssLen":1076,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n $ 251\n

\n \n Connect 80 websites \n
\n \n Connect up to 5 bank accounts \n
\n \n Track up to 50 credit cards \n
\n \n Analytics support \n
\n \n Export up to 12 months data \n
\n \n Cloud service 24/7 \n

\n\n Get started\n \n

","css":".card {\n max-width: 320px;\n display: flex;\n flex-direction: column;\n border-radius: 1.5rem;\n background-color: rgba(0, 0, 0, 1);\n padding: 1.5rem;\n box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);\n}\n\n.price {\n font-size: 3rem;\n line-height: 1;\n font-weight: 600;\n color: rgba(255, 255, 255, 1);\n}\n\n.lists {\n margin-top: 2.5rem;\n display: flex;\n flex-direction: column;\n grid-row-gap: 0.75rem;\n row-gap: 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(255, 255, 255, 1);\n}\n\n.list {\n display: flex;\n align-items: center;\n}\n\n.list svg {\n height: 1rem;\n width: 1rem;\n}\n\n.list span {\n margin-left: 1rem;\n}\n\n.action {\n margin-top: 2rem;\n width: 100%;\n border: 2px solid rgba(255, 255, 255, 1);\n border-radius: 9999px;\n background-color: rgba(255, 255, 255, 1);\n padding: 0.625rem 1.5rem;\n font-weight: 600;\n text-align: center;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 1);\n outline: none;\n text-decoration: none;\n transition: all .2s ease;\n}\n\n.action:hover {\n color: rgba(255, 255, 255, 1);\n background-color: transparent;\n}"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"95f932","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":431,"cssLen":1664,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Free plan

\n $\n 0\n /month\n

Benefits:

Lorem ipsum, dolor sit amet
Lorem ipsum, dolor sit amet

\n \n

\n","css":".card {\n --main-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --main-color: #fefefe;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n width: 150px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n padding: 10px;\n display: flex;\n flex-direction: column;\n}\n\n.card-content-wrapper {\n transform: translateY(10px);\n display: flex;\n flex-direction: column;\n gap: 5px;\n transition: all 0.7s;\n}\n\n.card-title {\n letter-spacing: 3px;\n font-size: 20px;\n font-weight: 700;\n color: var(--font-color);\n}\n\n.card-price {\n letter-spacing: 2px;\n font-size: 20px;\n color: var(--font-color);\n font-weight: 700;\n}\n\n.card-price span {\n font-size: 15px;\n color: var(--font-color-sub);\n font-weight: 500;\n}\n\n.card-subtitle {\n letter-spacing: 2px;\n font-size: 17px;\n color: var(--main-focus);\n font-weight: 500;\n}\n\n.card-benefits {\n font-size: 15px;\n padding-left: 20px;\n color: var(--font-color);\n}\n\n.card-btn {\n cursor: pointer;\n width: 100px;\n padding: 5px;\n background: var(--main-focus);\n border: none;\n border-radius: 5px;\n margin: 0 auto;\n transform: translateY(30px);\n color: var(--bg-color);\n font-weight: 500;\n font-size: 12px;\n letter-spacing: 0.7px;\n opacity: 0;\n transition: all 0.7s;\n}\n\n.card:hover > .card-btn {\n opacity: 1;\n transform: translateY(17px);\n}\n\n.card-btn:hover {\n font-weight: 700;\n letter-spacing: 1px;\n}\n\n.card:hover > .card-content-wrapper {\n transform: translateY(5px);\n}\n"},{"created":"2024-01-22T17:11:04.000Z","isPrivate":0,"projectId":"78cfef","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":95,"cssLen":1512,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n Hover Me\n \n \n

","css":"ul {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n margin: 0;\n padding: 0;\n}\n\nul li {\n list-style: none;\n margin: 0 5px;\n}\n\nul li a span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #fff;\n letter-spacing: 1px;\n transition: .5s;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-family: sans-serif;\n font-size: px;\n font-weight: 900;\n}\n\nul li a {\n text-decoration: none;\n display: block;\n width: 200px;\n height: 250px;\n background: #333;\n padding-left: 20px;\n transform: rotate(-30deg) skew(25deg) translate(0,0);\n transition-duration: .5s;\n box-shadow: -20px 20px 10px rgba(0,0,0,.5);\n}\n\nul li a:before {\n content: '';\n position: absolute;\n top: 10px;\n left: -20px;\n height: 100%;\n width: 20px;\n background: #444;\n transition-duration: .5s;\n transform: rotate(0deg) skewY(-45deg);\n}\n\nul li a:after {\n content: '';\n position: absolute;\n bottom: -20px;\n left: -10px;\n height: 20px;\n width: 100%;\n background: #444;\n transition-duration: .5s;\n transform: rotate(0deg) skewX(-45deg);\n}\n\nul li a:hover {\n transform: rotate(-30deg) skew(25deg) translate(20px,-15px);\n box-shadow: -50px 50px 50px rgba(0,0,0,.5);\n}\n\nul li:hover span {\n color: #fff;\n}\n\nul li:hover:nth-child(1) a {\n background: #00aced;\n}\n\nul li:hover:nth-child(1) a:before {\n background: #097aa5;\n}\n\nul li:hover:nth-child(1) a:after {\n background: #53b9e0;\n}\n\n\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"e31c3d","snapshot":null,"tags":null,"title":"card by Ykingdev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3888,"cssLen":1570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

John Doe

June 1, 2000

Great Experience!

\n\n

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

\n\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia\n odio vitae vestibulum. Donec in efficitur ipsum, sed dapibus eros.\n

\n\n","css":".mt-8{margin-top:2rem}.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.rounded-md{border-radius:0.375rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138 / var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21 / 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-150{transition-duration:150ms}.hover\\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;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))}.hover\\:duration-150:hover{transition-duration:150ms}@media (prefers-color-scheme: dark){.dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}}"},{"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}"}]}},"actionData":null,"errors":null}