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

Abo

10$

\n \n

lorem-impus

\n \n

lorem-ipsum

","css":".card {\n width: 12em;\n height: 15em;\n background: white;\n border-radius: 1em;\n border-color: black;\n border-style: solid;\n border-width: 0.4em;\n box-shadow: 0.3em 0.3em black;\n}\n\n.svg-icon {\n margin-top: 0.3em;\n margin-left: 0.5em;\n width: 2em;\n height: 2.5em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: grey;\n}\n\n.svg-icon circle {\n stroke: #000;\n stroke-width: 1;\n}\n\n.Name-9999 {\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n font-size: 2em;\n margin-left: 0.5em;\n}\n\n.Price-9999 {\n margin-bottom: 0.3em;\n margin-top: -0.3em;\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n font-size: 3em;\n margin-left: 0.3em;\n}\n\n.Description-9999 {\n font-size: 1.1em;\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n position: relative;\n margin-left: 4em;\n margin-top: -2.4em;\n}\n\n.YouGet-9999 {\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n position: relative;\n margin-left: 4em;\n margin-top: -2.4em;\n font-size: 1.1em;\n}\n\n.svg-icon2 {\n margin-top: 1em;\n margin-left: 0.5em;\n width: 2em;\n height: 2em;\n}\n\n.svg-icon2 path,\n.svg-icon2 polygon,\n.svg-icon2 rect {\n fill: grey;\n}\n\n.svg-icon2 circle {\n stroke: #000;\n stroke-width: 1;\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"c9b3b9","snapshot":null,"tags":null,"title":"card by Juanes200122","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":847,"cssLen":1597,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Pyhton\n\n

\n \n 80%\n \n

\n\n

\n Php\n\n

\n \n 30%\n \n

\n Java\n\n

\n \n 40%\n \n

\n C++\n\n

\n \n 60%\n \n

\n","css":".container {\n position: relative;\n max-width: 500px;\n width: 100%;\n background: #ececec;\n margin: 0 15px;\n padding: 10px 20px;\n border-radius: 7px;\n user-select: none;\n}\n\n.container .skill-box {\n width: 100%;\n margin: 25px 0;\n}\n\n.skill-box .title {\n display: block;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.skill-box .skill-bar {\n height: 8px;\n width: 100%;\n border-radius: 6px;\n margin-top: 6px;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.skill-bar .skill-per {\n position: relative;\n display: block;\n height: 100%;\n width: 90%;\n border-radius: 6px;\n background: #000000;\n animation: progress 0.4s ease-in-out forwards;\n opacity: 0;\n}\n\n.skill-per.html {\n /*progreso de las diferentes lenguajes*/\n width: 80%;\n animation-delay: 0.1s;\n}\n\n.skill-per.css {\n /*progreso de las diferentes lenguajes*/\n width: 30%;\n animation-delay: 0.1s;\n}\n\n.skill-per.javascript {\n /*progreso de las diferentes lenguajes*/\n width: 40%;\n animation-delay: 0.2s;\n}\n\n.skill-per.nodejs {\n /*progreso de las diferentes lenguajes*/\n width: 70%;\n animation-delay: 0.3s;\n}\n\n@keyframes progress {\n 0% {\n width: 0;\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.skill-per .tooltip {\n position: absolute;\n right: -14px;\n top: -28px;\n font-size: 9px;\n font-weight: 500;\n color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n background: #000000;\n\n z-index: 1;\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n left: 50%;\n bottom: -2px;\n height: 10px;\n width: 10px;\n z-index: -1;\n background: #000000;\n transform: translateX(-50%) rotate(45deg);\n}\n"}]}},"actionData":null,"errors":null}