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

\n Popular this month\n

\n Powered By\n

Uiverse\n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.card::before {\n content: '';\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"5c44f4","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1097,"cssLen":2684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Corporate\n

Grow steadily and pizza.

\n \n $35\n \n /mo \n

\n \n Get started\n \n

","css":".mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-6 {\n margin-top: 1.5rem\n}\n\n.flex {\n display: flex\n}\n\n.grid {\n display: grid\n}\n\n.w-full {\n width: 100%\n}\n\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr))\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-3xl {\n border-radius: 1.5rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem\n}\n\n.pb-8 {\n padding-bottom: 2rem\n}\n\n.text-left {\n text-align: left\n}\n\n.text-center {\n text-align: center\n}\n\n.text-5xl {\n font-size: 3rem;\n line-height: 1\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-light {\n font-weight: 300\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.tracking-tight {\n letter-spacing: -0.025em\n}\n\n.tracking-tighter {\n letter-spacing: -0.05em\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.text-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(243 244 246 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:border-white:hover {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.hover\\:bg-transparent:hover {\n background-color: transparent\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus-visible\\:outline-white:focus-visible {\n outline-color: #fff\n}\n\n.focus-visible\\:ring-white:focus-visible {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))\n}\n\n@media (min-width: 640px) {\n .sm\\:p-10 {\n padding: 2.5rem\n }\n\n .sm\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n }\n\n .sm\\:pb-6 {\n padding-bottom: 1.5rem\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"827d03","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1292,"cssLen":3069,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n To the moon!\n

\n \n \n\t\t\t\t\t\t\n

\n","css":".card {\n width: 290px;\n height: 350px;\n background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%);\n background-size: 300%,300%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 15px;\n box-shadow: 5px 5px 15px 5px #000000;\n overflow: hidden;\n transition: all 1s ease;\n}\n\n.moon {\n width: 70px;\n height: 70px;\n top: 15%;\n right: 120px;\n position: absolute;\n fill: white;\n transform: rotate(-20deg);\n transition: all 1s ease;\n}\n\n.rocket {\n width: 70px;\n height: 70px;\n bottom: -2%;\n left: -2%;\n position: absolute;\n fill: white;\n transition: all 1.9s ease;\n}\n\n.star {\n position: absolute;\n background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n\n.star-1 {\n width: 100px;\n height: 100px;\n bottom: 90px;\n left: -15px;\n transition: all 1s ease;\n}\n\n.star-2 {\n width: 150px;\n height: 150px;\n top: -10%;\n left: -10%;\n transition: all .5s ease;\n}\n\n.star-3 {\n width: 100px;\n height: 100px;\n bottom: 5%;\n right: -15px;\n transition: all .3s ease;\n}\n\n.star-4 {\n width: 20px;\n height: 20px;\n top: 4%;\n right: 5px;\n transition: all 1.4s ease;\n}\n\n.star-5 {\n width: 20px;\n height: 20px;\n bottom: 24%;\n right: 45%;\n animation: rotate 3s normal linear infinite;\n}\n\n.star-6 {\n width: 20px;\n height: 20px;\n top: 14%;\n right: 25%;\n animation: rotate 5s normal linear infinite;\n}\n\n.star-7 {\n width: 40px;\n height: 40px;\n top: 34%;\n right: 65%;\n animation: rotate 5s normal linear infinite;\n}\n\n.card-info span {\n font-size: 1.2em;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n transition: all 1s ease;\n}\n\n.card:hover {\n background: rgb(48,48,48);\n background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%);\n background-size: 100%,100%;\n}\n\n.card:hover .star-1,\n.card:hover .star-3 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(10deg);\n}\n\n.card:hover .star-2,\n.card:hover .star-4,\n.card:hover .star-5 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(-150deg);\n}\n\n.card:hover .rocket {\n transform: scale(.3) translate(450px,-730px) rotate(-260deg);\n}\n\n.card:hover .moon {\n width: 50px;\n height: 50px;\n}\n\n.card:hover span {\n font-size: 1.5em;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n\n 25% {\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n }\n\n 50% {\n -webkit-transform: rotate3d(0, 0, 1, 180deg);\n transform: rotate3d(0, 0, 1, 180deg);\n }\n\n 75% {\n -webkit-transform: rotate3d(0, 0, 1, 270deg);\n transform: rotate3d(0, 0, 1, 270deg);\n }\n\n 100% {\n -webkit-transform: rotate3d(0, 0, 1, 360deg);\n transform: rotate3d(0, 0, 1, 360deg);\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"60ca9a","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":485,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity))\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(34 197 94 / var(--tw-bg-opacity))\n}\n\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n\n.bg-yellow-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(234 179 8 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"edca2c","snapshot":null,"tags":null,"title":"card by KhaledMatalkah","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":300,"cssLen":1153,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Front

Back

Right

Left

Top

Bottom

\n","css":".cube-container {\n width: 200px;\n height: 200px;\n perspective: 800px;\n margin: 50px auto;\n}\n\n.cube {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotate 8s infinite linear;\n}\n\n.face {\n position: absolute;\n width: 200px;\n height: 200px;\n color: rgb(214, 21, 21);\n font-size: 18px;\n text-align: center;\n line-height: 200px;\n background: transparent;\n opacity: 0.9;\n border: 2px solid;\n border-image: linear-gradient(to right, #ff6b6b, #355c7d, #557d35, #cfcf16, #a51f1f) 1;\n box-shadow: 0 0 100px rgba(245, 8, 8, 0.8);\n}\n\n.front {\n transform: translateZ(100px);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(100px);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(100px);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(100px);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(100px);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(100px);\n}\n\n.cube-container:hover .cube {\n animation-play-state: paused;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"0add08","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":428,"cssLen":1420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover me

Card Hover

\n Lorem ipsum dolor sit amet, consectetur adipii\n voluptas ten mollitia pariatur odit, ab\n minus ratione adipisci accusamus vel est excepturi laboriosam magnam\n necessitatibus dignissimos molestias.\n

","css":".card-container {\n width: 300px;\n height: 300px;\n position: relative;\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.card {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.card .front-content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .front-content p {\n font-size: 32px;\n font-weight: 700;\n opacity: 1;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n color: #e8e8e8;\n padding: 20px;\n line-height: 1.5;\n border-radius: 5px;\n pointer-events: none;\n transform: translateY(-96%);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card .content .heading {\n font-size: 32px;\n font-weight: 700;\n}\n\n.card:hover .content {\n transform: translateY(0);\n}\n\n.card:hover .front-content {\n transform: translateY(30%);\n}\n\n.card:hover .front-content p {\n opacity: 0;\n}\n\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"90db85","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":491,"cssLen":716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.bg-indigo-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(99 102 241 / var(--tw-bg-opacity))\n}\n\n.bg-orange-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 115 22 / var(--tw-bg-opacity))\n}\n\n.bg-teal-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(20 184 166 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"0a1047","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1677,"cssLen":3237,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

City Name

Sunny

\n \n \n \n

22°C

\n Feels Like\n 20°C\n

\n Wind\n 10 km/h\n

\n Humidity\n 75%\n

\n\n","css":".absolute{position:absolute}.-right-2{right:-0.5rem}.-top-2{top:-0.5rem}.mr-2{margin-right:0.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-600{--tw-border-opacity:1;border-color:rgb(82 82 82 / var(--tw-border-opacity))}.bg-gradient-to-bl{background-image:linear-gradient(to bottom left, var(--tw-gradient-stops))}.from-sky-400{--tw-gradient-from:#38bdf8 var(--tw-gradient-from-position);--tw-gradient-to:rgb(56 189 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-sky-500{--tw-gradient-to:rgb(14 165 233 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-sky-700{--tw-gradient-to:#0369a1 var(--tw-gradient-to-position)}.stroke-yellow-300{stroke:#fde047}.p-6{padding:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-bold{font-weight:700}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.duration-500{transition-duration:500ms}.\\[box-shadow\\:12px_12px_0px_0px_\\#0d0d0d\\]{box-shadow:12px 12px 0px 0px #0d0d0d}.\\[transform\\:rotate3d\$1_\\2c -1\\2c _1\\2c _15deg\$\\]{transform:rotate3d(1 ,-1, 1, 15deg)}.hover\\:-rotate-0:hover{--tw-rotate:-0deg;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\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"c043f1","snapshot":null,"tags":null,"title":"card by EcheverriaJesus","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3251,"cssLen":3728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

Jesus Echeverria

Web\n Developer

\n \n \n \n \n

","css":".m-3 {\n margin: 0.75rem\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.h-14 {\n height: 3.5rem\n}\n\n.h-28 {\n height: 7rem\n}\n\n.w-14 {\n width: 3.5rem\n}\n\n.w-4 {\n width: 1rem\n}\n\n.w-7 {\n width: 1.75rem\n}\n\n.w-72 {\n width: 18rem\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.gap-3 {\n gap: 0.75rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-l {\n border-left-width: 1px\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-l {\n background-image: linear-gradient(to left, var(--tw-gradient-stops))\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-\\[\\#005BC4\\] {\n --tw-gradient-from: #005BC4 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 91 196 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.from-\\[\\#F9C97C\\] {\n --tw-gradient-from: #F9C97C var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(249 201 124 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-\\[\\#27272A\\] {\n --tw-gradient-to: #27272A var(--tw-gradient-to-position)\n}\n\n.to-\\[\\#A2E9C1\\] {\n --tw-gradient-to: #A2E9C1 var(--tw-gradient-to-position)\n}\n\n.bg-clip-text {\n -webkit-background-clip: text;\n background-clip: text\n}\n\n.fill-gray-700 {\n fill: #374151\n}\n\n.fill-white {\n fill: #fff\n}\n\n.stroke-2 {\n stroke-width: 2\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.pl-3 {\n padding-left: 0.75rem\n}\n\n.pt-2 {\n padding-top: 0.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity))\n}\n\n.text-transparent {\n color: transparent\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n 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))\n}\n\n.hover\\:scale-125:hover {\n --tw-scale-x: 1.25;\n --tw-scale-y: 1.25;\n 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))\n}\n\n.hover\\:cursor-pointer:hover {\n cursor: pointer\n}\n\n.hover\\:from-\\[\\#C9A9E9\\]:hover {\n --tw-gradient-from: #C9A9E9 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(201 169 233 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.hover\\:to-\\[\\#7EE7FC\\]:hover {\n --tw-gradient-to: #7EE7FC var(--tw-gradient-to-position)\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"4f04ed","snapshot":null,"tags":null,"title":"card by Juanes200122","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1133,"cssLen":1593,"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 50%\n \n

\n\n

\n CSS\n\n

\n \n 70%\n \n

\n JavaScript\n\n

\n \n 50%\n \n

\n NodeJS\n\n

\n \n 30%\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}\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: #4070f4;\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: 50%;\n animation-delay: 0.1s;\n}\n\n.skill-per.css {\n /*progreso de las diferentes lenguajes*/\n width: 70%;\n animation-delay: 0.1s;\n}\n\n.skill-per.javascript {\n /*progreso de las diferentes lenguajes*/\n width: 50%;\n animation-delay: 0.2s;\n}\n\n.skill-per.nodejs {\n /*progreso de las diferentes lenguajes*/\n width: 30%;\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: #4070f4;\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: #4070f4;\n transform: translateX(-50%) rotate(45deg);\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"e39cf5","snapshot":null,"tags":null,"title":"card by htwarriors108","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":108,"cssLen":1102,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me :)

","css":".card {\n position: absolute;\n width: 190px;\n height: 254px;\n border: 4px solid rgba(255, 255, 255, 0.3);\n border-radius: 0.8em;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: 0.5s;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.card:hover {\n scale: 1.05;\n rotate: 3deg;\n}\n\n.card::after {\n content: '';\n width: 93%;\n height: 95%;\n position: absolute;\n border-radius: 0.7em;\n background-color: rgba(255, 255, 255, 0.1);\n z-index: 0;\n}\n\n.shadow {\n width: 100%;\n height: 100%;\n background: linear-gradient(315deg, #03a9f4, #ff0058);\n z-index: -1;\n filter: blur(25px);\n}\n\n.txt {\n position: absolute;\n font-weight: 800;\n font-size: 1.6em;\n color: #fff;\n}\n\n.card:hover .shadow {\n animation: rotate 3s linear infinite;\n}\n\n@keyframes rotate {\n 0% {\n rotate: 0deg;\n background: linear-gradient(315deg, #03a9f4, #ff0058);\n }\n\n 50% {\n rotate: 180deg;\n background: linear-gradient(45deg, #ffbc00, #ff0058);\n }\n\n 100% {\n rotate: 360deg;\n background: linear-gradient(315deg, #4dff03, #00d0ff);\n }\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"8e5e53","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2720,"cssLen":2219,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Type of work

Project name

\n\n

","css":".card {\n --main-color: #323232;\n --sub-color: #5b5b5b;\n --bg-color: #c7c7c7;\n --accent-color: #242C88;\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 270px;\n padding: 25px;\n border-radius: 25px;\n display: flex;\n flex-direction: column;\n gap: 5px;\n background-color: var(--bg-color);\n transition: all 0.2s;\n cursor: pointer;\n box-shadow: 0px 0px 5px -1.5px #000;\n}\n\n.card::before {\n content: '';\n width: 99%;\n height: 99%;\n background: var(--sub-color);\n position: absolute;\n z-index: -1;\n top: 1px;\n left: 1px;\n border-radius: 25px;\n transition: all 0.3s;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.card__img {\n width: 100%;\n}\n\n.card__title {\n color: var(--main-color);\n font-weight: 900;\n font-size: 25px;\n}\n\n.card__subtitle {\n color: var(--sub-color);\n font-weight: 600;\n font-size: 20px;\n}\n\n.card__icon {\n width: 40px;\n height: 40px;\n transform: rotate(-45deg);\n transition: all 0.3s;\n}\n\n.card__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.card__icon g {\n fill: var(--main-color);\n}\n\n.card__icon circle, polyline, line {\n stroke: var(--main-color);\n}\n\n.card:hover .card__icon {\n transform: rotate(0);\n}\n\n.card:hover .card__icon circle, .card:hover .card__icon polyline, .card:hover .card__icon line {\n stroke: var(--accent-color);\n}\n\n.card:hover .card__icon g {\n fill: var(--accent-color);\n}\n\n.card:hover {\n box-shadow: 0px 0px 20px -5px #000;\n}\n\n.card:hover::before {\n transform: rotate(10deg);\n box-shadow: 0px 0px 20px -5px #000;\n}\n\n/* remove svg from class =\"card__img\" and last styles below css code before use */\n.st1 {\n fill: #fff\n}\n\n.st2 {\n fill: none;\n stroke: #242c88;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-miterlimit: 10\n}\n\n.st7 {\n fill: #589fff\n}\n\n.st9 {\n fill: #bc8d66\n}\n\n.st15,.st16 {\n opacity: .4;\n fill: #242c88\n}\n\n.st16 {\n opacity: .2\n}\n\n.st18 {\n fill: #ffc408\n}\n\n.st53 {\n fill: none;\n stroke: #242c88;\n stroke-width: 1.848;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-miterlimit: 10\n}"}]}},"actionData":null,"errors":null}