{"loaderData":{"0":null,"0-3":{"total":7264,"projects":[{"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"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"f8e42a","snapshot":null,"tags":null,"title":"card by IWhat1","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5164,"cssLen":1431,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Profile

\n \n \n

Front Card

Follow me for more...\n

Follow Me

\n \n \n\n

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

\n","css":".container {\n height: 294px;\n width: 240px;\n color: white;\n perspective: 800px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card {\n width: 100%;\n height: 100%;\n background: black;\n border-radius: 2rem;\n position: relative;\n transition: transform 1500ms;\n transform-style: preserve-3d;\n}\n\n.card-top {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 10%;\n position: absolute;\n width: 50%;\n background-color: transparent;\n border: 2px solid black;\n top: 0;\n border-top: none;\n border-radius: 0 0 1rem 1rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.7);\n}\n\n.card-top-para {\n font-size: 16px;\n font-weight: bold;\n}\n\n.container:hover > .card {\n cursor: pointer;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.front,\n.back {\n height: 100%;\n width: 100%;\n border-radius: 2rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.7);\n position: absolute;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.back {\n background-color: black;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.heading {\n font-size: 22px;\n font-weight: bold;\n}\n\n.follow {\n font-size: 16px;\n font-weight: 500;\n}\n\n.icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-top: 20px;\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"d02592","snapshot":null,"tags":null,"title":"card by bociKond","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":859,"cssLen":1684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n User list:\n

\n Olivia Anderson\n Marketing Manager\n
\n Ethan Murphy\n Graphic Designer\n
\n Ava Collins\n Financial Analyst\n
\n Noah Walker\n Journalist\n

","css":".wrapper {\n position: relative;\n --white: #e3e3e3;\n --bc: rgb(203,46,79);\n --bc-al: rgba(203,46,79,0.6);\n}\n\n.card {\n max-width: 340px;\n padding: 1rem 0;\n display: grid;\n grid-template-areas: \"top\" \"bottom\";\n grid-template-rows: 20% 1fr;\n border: 1px solid var(--bc-al);\n border-radius: .75rem;\n background: var(--bc-al);\n color: var(--white);\n backdrop-filter: blur(14px);\n box-shadow: 0 15px 30px -15px var(--bc-al);\n isolation: isolate;\n}\n\n.circle-1 {\n position: absolute;\n content: '';\n width: 5rem;\n height: 5rem;\n left: 1rem;\n top: 50%;\n transform: translate(-50%);\n background-color: var(--bc-al);\n border-radius: 50%;\n z-index: -10;\n}\n\n.circle-2 {\n position: absolute;\n content: '';\n width: 3rem;\n height: 3rem;\n right: -1rem;\n top: 3rem;\n background-color: var(--bc-al);\n border-radius: 50%;\n z-index: -10;\n}\n\n.top {\n padding: .5rem 4rem;\n z-index: 1;\n}\n\n.bottom {\n z-index: 2;\n}\n\n.users {\n display: flex;\n flex-direction: column;\n padding: .5rem 0;\n}\n\n.user {\n width: 100%;\n padding: .75rem 4rem;\n display: flex;\n gap: .1rem;\n flex-direction: column;\n align-items: flex;\n font-size: 1.1rem;\n border-bottom: 1px solid var(--bc-al);\n position: relative;\n}\n\n.user:hover {\n background-color: var(--bc-al);\n}\n\n.user:nth-last-child(1) {\n border-bottom: none;\n}\n\n.user::before {\n content: '';\n position: absolute;\n width: 5px;\n height: 5px;\n left: 1.75rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: var(--white);\n border-radius: 50%;\n}\n\n.user-name {\n font-weight: 700;\n font-style: italic;\n}\n\n.user-occupation {\n opacity: .8;\n}\n\n.u-l {\n font-size: 1.1rem;\n font-weight: 700;\n font-style: italic;\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"2af398","snapshot":null,"tags":null,"title":"card by ahkamboh","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":570,"cssLen":963,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n New\n Get the coolest t-shirts\n \n

\n","css":".mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}.max-w-\\[300px\\]{max-width:300px}.flex-auto{flex:1 1 auto}.items-center{align-items:center}.rounded-full{border-radius:9999px}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.bg-indigo-800{--tw-bg-opacity:1;background-color:rgb(55 48 163 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.p-2{padding:0.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.text-left{text-align:left}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.text-indigo-100{--tw-text-opacity:1;color:rgb(224 231 255 / var(--tw-text-opacity))}.opacity-75{opacity:0.75}@media (min-width: 1024px){.lg\\:inline-flex{display:inline-flex}.lg\\:rounded-full{border-radius:9999px}}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"86d00d","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2321,"cssLen":2017,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Team

\n\n

Avanced feaures for Individuals and organizations

\n\n

\n \n Unlimited file storage\n

\n \n 10 GB bandwidth per month\n

\n \n\n 10.000 tasks per month\n

\n \n\n Email support\n

\n \n\n 100 Webhooks\n

\n \n

\n $\n 19\n /month\n

\n Continue with Team\n

","css":".pack_card {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.5rem;\n border: 2px solid rgb(99 102 241);\n padding: 1.5rem 1rem 1rem 1rem;\n margin-top: 1rem;\n background-color: #fff;\n max-width: 300px;\n}\n\n.banner {\n position: absolute;\n left: 0px;\n right: 0px;\n top: -2rem;\n display: flex;\n justify-content: center;\n}\n\n.banner_tag {\n display: flex;\n height: 1.5rem;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background-color: rgb(99 102 241);\n padding: 0.25rem 0.75rem;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: #fff;\n}\n\n.pack_name {\n margin-bottom: 0.5rem;\n text-align: center;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: rgb(31 41 55 );\n}\n\n.description {\n margin: 0 auto 2rem auto;\n text-align: center;\n color: rgb(107 114 128 );\n}\n\n.lists > :not([hidden]) ~ :not([hidden]) {\n margin-top: 0.5rem;\n}\n\n.list {\n display: flex;\n gap: 0.5rem;\n}\n\n.list svg {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n color: rgb(99 102 241 );\n}\n\n.list span {\n color: rgb( 75 85 99 );\n}\n\n.bottom {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.price_container {\n display: flex;\n align-items: flex-end;\n justify-content: center;\n gap: 0.25rem;\n}\n\n.devise {\n align-self: flex-start;\n color: rgb( 75 85 99 );\n}\n\n.price {\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 700;\n color: rgb(31 41 55 );\n}\n\n.date {\n color: rgb(107 114 128 );\n}\n\n.btn {\n display: block;\n border-radius: 0.5rem;\n background-color: rgb(99 102 241 );\n padding: 0.75rem 2rem;\n text-align: center;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n color: #fff;\n outline: 2px solid transparent;\n outline-offset: 2px;\n transition: all .1s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.btn:hover {\n background-color: rgb(79 70 229 );\n}\n\n.btn:active {\n background-color: rgb(67 56 202 );\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"f35600","snapshot":null,"tags":null,"title":"card by NouvelleTechno","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":468,"cssLen":1222,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 🍪 Cookie Notice\n

We use cookies to ensure that we give you the best experience on our website. Read cookies policies.

\n \n Manage preferences\n \n \n \n

","css":".card {\n width: 350px;\n background: white;\n padding: 20px;\n position: relative;\n}\n\n.card .title {\n color: black;\n font-size: 2rem;\n font-weight: 600;\n}\n\n.card .description {\n color: black;\n margin-top: 10px;\n margin-bottom: 20px;\n}\n\n.card .prefs {\n color: blue;\n}\n\n.card .actions {\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: .8em;\n}\n\n.card button {\n border: 1px solid;\n border-radius: 4px;\n padding: 5px;\n background: none;\n font-size: 1.2em;\n font-weight: bold;\n}\n\n.card .decline {\n border-color: red;\n color: red;\n}\n\n.card .decline:hover {\n background-color: red;\n color: white;\n}\n\n.card .valid {\n border-color: green;\n color: green;\n}\n\n.card .valid:hover {\n background-color: green;\n color: white;\n}\n\n.card div::before, div::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n bottom: 15px;\n left: 10px;\n width: 50%;\n top: 80%;\n max-width: 300px;\n background: rgba(0,0,0,0.7);\n -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.7);\n box-shadow: 0 15px 10px rgba(0,0,0,0.7);\n -webkit-transform: rotate(-3deg);\n transform: rotate(-3deg);\n}\n\n.card div::after {\n right: 10px;\n left: unset;\n transform: rotate(3deg);\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"026791","snapshot":null,"tags":null,"title":"card by AyuuLima","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":1217,"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: rgb(0, 0, 0);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 12px;\n gap: 12px;\n border-radius: 15px;\n cursor: pointer;\n color: #000000;\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: 15px;\n background: linear-gradient(-45deg, #1cc2ff 0%, #ff261b 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, #1cffa4 0%, #ff01aee6 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(40px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: uppercase;\n font-weight: 800;\n}\n\n.card p:not(.heading) {\n font-size: 20px;\n color: #000000;\n}\n\n.card p:not::after) {\n font-size: 0px;\n color: #ffffff;\n}\n\n.card p:last-child {\n color: #ffffff;\n}\n\n.card:hover::after {\n filter: blur(50px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n\n.card:hover {\n transform: scale(1);\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"e0bcff","snapshot":null,"tags":null,"title":"card by shadowmurphy","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":243,"cssLen":660,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Runtime

\n Details\n

42 ms

\n \n

\n","css":".card {\n width: 350px;\n height: 150px;\n background: #262626;\n border-radius: 10px;\n border: 1px solid #3F3F40;\n}\n\na {\n text-decoration: none;\n}\n\nheader, footer, main {\n display: flex;\n align-items: center;\n}\n\nheader {\n justify-content: space-between;\n margin: 20px;\n color: #BDBFB7;\n}\n\nheader a {\n font-size: 15px;\n cursor: pointer;\n color: #BDBFB7\n}\n\nmain {\n justify-content: flex-start;\n margin: 20px;\n}\n\nmain p {\n color: white;\n font-weight: 600;\n}\n\nmain a {\n color: #BDBFB7;\n font-weight: 100;\n}\n\nfooter {\n margin: 20px;\n font-size: 15px;\n gap: 5px;\n}\n\nfooter a {\n color: #2CAD3D;\n font-weight: 600;\n}\n\nfooter p {\n color: white;\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"bdb8b2","snapshot":null,"tags":null,"title":"card by naveenkumarr-onyx","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":807,"cssLen":876,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

HTML

90%

CSS

80%

JavaScript

75%

\n","css":".card {\n width: 300px;\n background-color: #fff;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.card:hover {\n border-bottom: 5px solid violet;\n transform: scale(1.2);\n transition: 1s ease-in-out;\n}\n\n.header {\n background-color: #333;\n color: #fff;\n padding: 20px;\n text-align: center;\n font-size: 18px;\n}\n\n.body {\n padding: 20px;\n}\n\n.skill {\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.skill-name {\n width: 120px;\n font-size: 16px;\n}\n\n.html:hover {\n color: blue;\n}\n\n.css:hover {\n color: purple;\n}\n\n.js:hover {\n color: red;\n}\n\n.skill-level {\n width: 160px;\n height: 10px;\n background-color: #eee;\n border-radius: 10px;\n overflow: hidden;\n margin-left: 20px;\n}\n\n.skill-percent {\n background-color: #333;\n height: 100%;\n}\n\n.skill-percent-number {\n margin-left: 20px;\n font-size: 16px;\n}\n"}]}},"actionData":null,"errors":null}