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

UltraFlex

Beste Design till date.
Flex it up as you wish,
but you can't break it.

$299

\n \n \n

\n\n\n

","css":".card {\n position: relative;\n top: 2em;\n width: 12.5em;\n height: 7.5em;\n background: white;\n transition: .4s ease-in-out;\n border-radius: 15px;\n box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;\n overflow: hidden;\n}\n\n.heading {\n position: relative;\n color: black;\n font-weight: bold;\n font-size: 1.1em;\n padding-top: 1em;\n padding-left: 1em;\n transition: .4s ease-in-out;\n}\n\n.details {\n position: relative;\n color: black;\n font-size: 0.6em;\n padding-top: 1.5em;\n padding-left: 2em;\n transition: .4s ease-in-out;\n}\n\n.price {\n position: relative;\n color: black;\n font-weight: bold;\n font-size: 0.8em;\n padding-top: 1.5em;\n padding-left: 1.5em;\n top: 9.6em;\n left: 5em;\n transition: .4s ease-in-out;\n}\n\n.btn1 {\n position: relative;\n border: none;\n outline: none;\n background-color: black;\n color: white;\n font-size: 0.6em;\n padding-left: 6.9em;\n padding-right: 6.9em;\n padding-top: 0.8em;\n padding-bottom: 0.85em;\n border-radius: 10px;\n left: 2.6em;\n top: 14.8em;\n transition: .4s ease-in-out;\n font-weight: bold;\n}\n\n.btn1:hover {\n background-color: limegreen;\n cursor: pointer;\n}\n\n.btn2 {\n position: relative;\n border: none;\n outline: none;\n background-color: black;\n color: white;\n font-size: 0.6em;\n padding-left: 5.1em;\n padding-right: 5.1em;\n padding-top: 0.8em;\n padding-bottom: 0.85em;\n border-radius: 10px;\n left: 2.6em;\n top: 15.5em;\n transition: .4s ease-in-out;\n font-weight: bold;\n}\n\n.btn2:hover {\n background-color: limegreen;\n cursor: pointer;\n}\n\n.glasses {\n position: relative;\n top: -4em;\n left: 9.5em;\n width: 70px;\n height: 70px;\n transition: .4s ease-in-out;\n}\n\n.card:hover {\n width: 12.5em;\n height: 23em;\n transform: translateY(1.25em);\n}\n\n.card:hover + .glasses {\n transform: rotateX(360deg);\n height: 100px;\n width: 100px;\n left: 3em;\n top: -18em;\n}\n\n.card:hover .heading {\n transform: translateY(7em) translateX(2.3em);\n}\n\n.card:hover .details {\n transform: translateY(13em) translateX(3.5em);\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"d48fcc","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5472,"cssLen":1893,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Runaway

Smalltown Boy , Shane D

03:34

02:04

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

","css":".card {\n --main-color: #fff;\n --bg-color: #090909;\n --sub-main-color: #B9B9B9;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 360px;\n height: 478px;\n background: var(--bg-color);\n border-radius: 20px;\n padding: 30px;\n}\n\n.card__menu {\n cursor: pointer;\n}\n\n.card__img {\n height: 224px;\n width: 224px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline: auto;\n background: #131313;\n border-radius: 100%;\n}\n\n.card__img svg {\n width: 154px;\n height: 154px;\n border-radius: 100%;\n}\n\n.card__title {\n font-weight: 500;\n font-size: 28px;\n color: var(--main-color);\n text-align: center;\n margin-bottom: 10px;\n}\n\n.card__subtitle {\n font-weight: 400;\n font-size: 16px;\n color: var(--sub-main-color);\n text-align: center;\n cursor: pointer;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n margin-top: 20px;\n}\n\n.card__time {\n font-weight: 400;\n font-size: 12px;\n color: var(--main-color);\n}\n\n.card__timeline {\n width: 100%;\n height: 4px;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.card__timeline progress {\n width: 100%;\n height: 100%;\n border-radius: 100px;\n}\n\n.card__timeline progress::-webkit-progress-bar {\n background-color: #424242;\n border-radius: 100px;\n}\n\n.card__timeline progress::-webkit-progress-value {\n background-color: #fff;\n border-radius: 100px;\n}\n\n.card__btn {\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n.card__btn path {\n fill: var(--main-color);\n}\n\n.card__btn-play {\n width: 60px;\n height: 60px;\n background: var(--main-color);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card__btn-play path {\n fill: var(--bg-color);\n}\n \n "},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"ee4065","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1174,"cssLen":2553,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n #4B0082\n

\n #8A2BE2\n

\n #9932CC\n

\n #BA55D3\n

\n \n

\n","css":".container {\n width: 300px;\n height: 340px;\n border-radius: 1em;\n overflow: hidden;\n box-shadow: 0 10px 20px #dbdbdb;\n font-family: sans-serif;\n background: white;\n pointer-events: none;\n}\n\n.palette {\n position: relative;\n width: 300px;\n height: 300px;\n border-radius: 1rem;\n overflow: hidden;\n pointer-events: auto;\n}\n\n.palette:hover > #color-code {\n opacity: 0;\n}\n\n.color {\n position: absolute;\n width: 300px;\n height: 300px;\n transform-origin: center;\n transition: 0.3s ease-in-out;\n box-sizing: inline-block;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color span {\n color: white;\n font-weight: 600;\n letter-spacing: 1px;\n}\n\n#color1 {\n background: #4B0082;\n rotate: 45deg;\n translate: 212.13px 0;\n outline: 0 solid #4B0082;\n z-index: 9;\n}\n\n#color1:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #4B0082;\n}\n\n#color2 {\n background: #8A2BE2;\n rotate: 45deg;\n translate: 0 212.13px;\n outline: 0 solid #8A2BE2;\n z-index: 9;\n}\n\n#color2:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #8A2BE2;\n}\n\n#color2 span {\n color: #1A1A1A;\n}\n\n#color3 {\n background: #9932CC;\n rotate: 45deg;\n translate: -212.13px 0;\n outline: 0 solid #9932CC;\n z-index: 9;\n}\n\n#color3:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #9932CC;\n}\n\n#color4 {\n background: #BA55D3;\n rotate: 45deg;\n translate: 0 -212.13px;\n outline: 0 solid #BA55D3;\n z-index: 9;\n}\n\n#color4:hover {\n translate: 0 0;\n rotate: 0deg;\n z-index: 99;\n outline: 20px solid #BA55D3;\n}\n\n#color-code {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 40px;\n translate: 130px 130px;\n border-radius: 20px;\n overflow: hidden;\n z-index: 199;\n opacity: 1;\n transition: 0.3s ease-in-out;\n}\n\n#color-code-bg {\n position: absolute;\n width: 40px;\n height: 40px;\n background-color: rgba(255, 255, 255, 0.8);\n filter: blur(10px);\n}\n\n#color-code-text {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#color-code-text::after {\n content: \"v2\";\n font-weight: 600;\n font-family: sans-serif;\n color: #1a1a1a;\n}\n\n#footer {\n height: 12%;\n width: 100%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1em;\n box-sizing: border-box;\n color: #bebebe;\n}\n\n#footer svg {\n scale: 0.75;\n}\n\n#footer #bookmarks {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: smaller;\n}"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"6915f4","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1305,"cssLen":1621,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Tags

\n \n #uiverse\n

\n \n #html\n

\n\n \n #css\n

\n \n #tailwindcss\n

\n\n \n #hoverme\n

\n \n #figma\n

\n\n \n #card\n

\n \n #PSD\n

\n\n","css":".mb-2 {\n margin-bottom: 0.5rem;\n}\n.flex {\n display: flex;\n}\n.w-\\[280px\\] {\n width: 280px;\n}\n.max-w-max {\n max-width: max-content;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.bg-\\[\\#d9dfe3\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(217 223 227 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.text-\\[12px\\] {\n font-size: 12px;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-\\[\\#7281a3\\] {\n --tw-text-opacity: 1;\n color: rgb(114 129 163 / var(--tw-text-opacity));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / 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@media (prefers-color-scheme: dark) {\n .dark\\:bg-transparent {\n background-color: transparent;\n }\n}\n"},{"created":"2024-01-22T17:11:17.000Z","isPrivate":0,"projectId":"5bb258","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":254,"cssLen":1198,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Title card\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit vitae orci quis dignissim.

","css":".card {\n width: 300px;\n height: 350px;\n background: #ffd166;\n color: #073b4c;\n font-weight: 600;\n padding: 15px;\n display: flex;\n flex-direction: column;\n align-items: left;\n position: relative;\n transition: all .5s ease;\n}\n\n.card::before {\n content: \"32,99$\";\n position: absolute;\n width: 75px;\n height: 75px;\n top: 35%;\n right: 2px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: #ef476f;\n color: aliceblue;\n font-weight: 800;\n transition: all .5s ease;\n}\n\n.card__image {\n width: initial;\n height: 150px;\n background: rgb(6,214,160);\n background: linear-gradient(163deg, #06d6a0 18%, rgba(17,138,178,1) 79%);\n transition: all .5s ease;\n}\n\n.title {\n font-weight: 800;\n font-size: 1.4em;\n}\n\n.card__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex-grow: 1;\n gap: 10px;\n}\n\n.card:hover {\n border-top-left-radius: 35px;\n box-shadow: 5px 5px 0px 0px #06d6a0, 10px 10px 0px 0px #118ab2, 15px 15px 0px 0px #06d6a0, 5px 5px 15px 5px rgba(0,0,0,0);\n}\n\n.card:hover .card__image {\n border-top-left-radius: 25px;\n}\n\n.card:hover::before {\n transform: scale(1.3) rotate(-30deg);\n}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"25e4b8","snapshot":null,"tags":null,"title":"card by htwarriors108","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1979,"cssLen":1523,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

John Doe

Incoming Call

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

\n","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 1em;\n flex-direction: column;\n justify-content: space-evenly;\n background-color: #080808;\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.8);\n cursor: pointer;\n transition: 0.2s ease-in-out;\n padding: 5px;\n color: #fff;\n}\n\n.card:hover {\n rotate: 1deg;\n scale: 1.05;\n}\n\n.card, .imgBox, .caller {\n display: flex;\n align-items: center;\n}\n\n.imgBox {\n width: 6em;\n height: 6em;\n box-shadow: 0px 0.25em 1rem rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n justify-content: center;\n}\n\n.imgBox svg {\n width: 100%;\n height: 100%;\n}\n\n.name {\n width: 100%;\n text-align: center;\n font-weight: 900;\n transition: 1s ease-in-out;\n}\n\n.name .p1 {\n font-size: 1.2em;\n}\n\n.name .p2 {\n font-size: 0.8em;\n color: rgb(50, 146, 255);\n}\n\n.caller {\n width: 100%;\n flex-direction: row;\n justify-content: space-evenly;\n}\n\n.callerBtn {\n width: 2em;\n height: 2em;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.5rem;\n cursor: pointer;\n transition: 0.1s ease-in-out;\n animation: animate linear infinite 2s;\n}\n\n.callerBtn:hover {\n scale: 1.1;\n}\n\n#pick {\n background-color: #28ff28;\n box-shadow: 0px 3px 10px #28ff28;\n}\n\n#end {\n background-color: #ff2828;\n box-shadow: 0px 3px 10px #ff2828;\n}\n\n#end svg {\n rotate: 135deg;\n}\n\n@keyframes animate {\n 0% {\n transform: translateY(0px);\n }\n\n 50% {\n transform: translateY(3px) rotate(-10deg);\n }\n\n 100% {\n transform: translateY(0px);\n }\n}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"169460","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":71,"cssLen":537,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\ncard

\n\n\n\n\n\n\n","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 20px;\n padding: 2px;\n box-shadow: #111 0 1px 3px 2px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n position: relative;\n cursor: pointer;\n}\n\n.card__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: linear-gradient(0deg, #000, #272727);\n color: #fff;\n border-radius: 17px;\n width: 100%;\n height: 100%;\n font-size: 20px;\n font-weight: 900;\n}\n\n\n \n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"c2ba13","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":714,"cssLen":1258,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n $\"\"$ \n

\n Card title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non\n dolor augue. Nunc dictum erat sit amet iaculis interdum. Ut neque\n tellus, congue vel lectus aliquam, dignissim porttitor velit.\n

\n \n See more\n \n\n","css":".line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.flex{display:flex}.h-24{height:6rem}.h-40{height:10rem}.w-24{width:6rem}.w-72{width:18rem}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-500{--tw-bg-opacity:1;background-color:rgb(115 115 115 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.font-bold{font-weight:700}.italic{font-style:italic}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"0fe1a6","snapshot":null,"tags":null,"title":"card by arafatrahat94","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n width: 190px;\n height: 254px;\n transition: all 0.2s;\n position: relative;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: 7px 7px 0px 0px #0b2447;\n}\n\n.card-inner {\n width: inherit;\n height: inherit;\n background: rgba(255, 255, 255, 0.05);\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(10px);\n border-radius: 8px;\n}\n\n.card:hover {\n transform: scale(1.04) rotate(1deg);\n}\n\n.circle {\n width: 100px;\n height: 100px;\n background: white;\n border-radius: 50%;\n position: absolute;\n box-shadow: 0px 0px 5px 5px #0b2447;\n animation: move-up6 2s ease-in infinite alternate-reverse;\n}\n\n.circle:nth-child(1) {\n top: -25px;\n left: -25px;\n}\n\n.circle:nth-child(2) {\n bottom: -25px;\n right: -25px;\n animation-name: move-down1;\n}\n\n@keyframes move-up6 {\n to {\n transform: translateY(-10px);\n }\n}\n\n@keyframes move-down1 {\n to {\n transform: translateY(10px);\n }\n}\n"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"080c48","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":650,"cssLen":2345,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Long Chair\n

ID: 23432252

\n $25.99\n

\n \n

","css":".flex {\n display: flex\n}\n\n.h-48 {\n height: 12rem\n}\n\n.h-80 {\n height: 20rem\n}\n\n.w-60 {\n width: 15rem\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.gap-4 {\n gap: 1rem\n}\n\n.rounded-br-3xl {\n border-bottom-right-radius: 1.5rem\n}\n\n.rounded-br-xl {\n border-bottom-right-radius: 0.75rem\n}\n\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity))\n}\n\n.bg-sky-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(7 89 133 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-bl {\n background-image: linear-gradient(to bottom left, var(--tw-gradient-stops))\n}\n\n.from-black {\n --tw-gradient-from: #000 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.via-orange-900 {\n --tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #7c2d12 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.to-indigo-600 {\n --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity))\n}\n\n.contrast-50 {\n --tw-contrast: contrast(.5);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.hover\\:bg-sky-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.hover\\:contrast-100:hover {\n --tw-contrast: contrast(1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"004310","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1297,"cssLen":754,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".success {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #EDFBD8;\n border-radius: 8px;\n border: 1px solid #84D65A;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.success__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.success__icon path {\n fill: #84D65A;\n}\n\n.success__title {\n font-weight: 500;\n font-size: 14px;\n color: #2B641E;\n}\n\n.success__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.success__close path {\n fill: #2B641E;\n}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"2b3672","snapshot":null,"tags":null,"title":"card by Juanes200122","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":646,"cssLen":1557,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n HTML\n\n

\n \n 70%\n \n

\n\n

\n SCSS\n\n

\n \n 80%\n \n

\n Boostrap\n\n

\n \n 50%\n \n

\n","css":".container {\n position: relative;\n max-width: 500px;\n width: 100%;\n background: #282828;\n margin: 0 15px;\n padding: 10px 20px;\n border-radius: 7px;\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: rgb(226, 226, 226);\n}\n\n.skill-box .skill-bar {\n height: 8px;\n width: 100%;\n border-radius: 6px;\n margin-top: 6px;\n background: rgba(236, 236, 236, 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: rgb(226, 226, 226);\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: 70%;\n animation-delay: 0.1s;\n}\n\n.skill-per.scss {\n /*progreso de las diferentes lenguajes*/\n width: 80%;\n animation-delay: 0.1s;\n}\n\n.skill-per.Boostrap {\n /*progreso de las diferentes lenguajes*/\n width: 50%;\n animation-delay: 0.2s;\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: rgb(0, 0, 0);\n font-weight: bold;\n padding: 2px 6px;\n border-radius: 3px;\n background: rgb(226, 226, 226);\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-color: rgb(226, 226, 226);\n transform: translateX(-50%) rotate(45deg);\n}\n"}]}},"actionData":null,"errors":null}