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

\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 15s infinite linear;\n}\n\n.face {\n position: absolute;\n width: 200px;\n height: 200px;\n color: rgb(21, 153, 214);\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(\n 90deg,\n rgba(14, 8, 110, 1) 0%,\n rgba(15, 15, 167, 1) 26%,\n rgba(20, 45, 255, 1) 85%\n );\n box-shadow: 0 0 100px rgba(8, 178, 245, 0.61);\n}\n\n.front {\n transform: translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(100px);\n background-color: #0093e9;\n background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);\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":"16cf4e","snapshot":null,"tags":null,"title":"card by NlghtM4re","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":555,"cssLen":1749,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Console Window

def main():\n  for i in range(100):\n    print(f\"Add to favorites {i}\")\n    if favorite = true:\n      Favorite()\n\ndef Favorite():\n  print(\"thanks\")\n\nmain()

\n\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.window {\n position: absolute;\n height: 200px;\n width: 300px;\n background-color: #fff;\n border: 2px solid #333;\n border-radius: 15px;\n overflow: hidden;\n}\n\n.window-title {\n height: 30px;\n background-color: #333;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n}\n\n.window-title p {\n color: #fff;\n font-weight: bold;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n.window-buttons {\n display: flex;\n align-items: center;\n}\n\n.window-button {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n margin: 5px;\n transition: background-color 0.2s ease;\n}\n\n.window-button.close {\n background-color: #f00;\n}\n\n.window-button.close:hover {\n background-color: rgb(182, 2, 2);\n cursor: pointer;\n}\n\n.window-button.reduce {\n background-color: #ff0;\n}\n\n.window-button.reduce:hover {\n background-color: rgb(172, 172, 4);\n cursor: pointer;\n}\n\n.window-button.fullscreen {\n background-color: #0f0;\n}\n\n.window-button.fullscreen:hover {\n background-color: rgb(7, 159, 7);\n cursor: pointer;\n}\n\n.window-button:focus {\n outline: none;\n}\n\n.console {\n width: 100%;\n height: calc(100% - 30px);\n background-color: #000;\n color: #fff;\n overflow: auto;\n}\n\n.console pre {\n margin: 0;\n padding: 5px;\n font-size: 15px;\n}\n\n.console pre code {\n color: #0f0;\n outline: none;\n}\n\n.console::-webkit-scrollbar {\n width: 8px;\n}\n\n.console::-webkit-scrollbar-track {\n background-color: #333;\n}\n\n.console::-webkit-scrollbar-thumb {\n background-color: #666;\n border-radius: 10px;\n border: 2px solid #333;\n}\n\n.console::-webkit-scrollbar-thumb:hover {\n background-color: #999;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"4d90e2","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3473,"cssLen":2234,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Main Title

\n \n \n \n

\n Title 1\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, facere.\n \n\n

\n Title 2\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et hic praesentium\n nobis cumque, dolores adipisci?\n \n

\n Title 3\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, facilis!\n \n

","css":".card {\n position: relative;\n width: 230px;\n height: 300px;\n background: linear-gradient(-45deg, rgb(0, 153, 255) 0%, cyan 100%);\n overflow: hidden;\n border: 1px solid black;\n box-shadow: rgba(141, 177, 205, 0.618) 0px 40px 30px -25px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card:hover {\n transform: scale(1.08);\n box-shadow: rgba(141, 177, 205, 0.618) 0px 30px 30px -25px;\n}\n\n.icons-container {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 1rem;\n z-index: 999;\n}\n\n.icons-container .svg {\n stroke: white;\n width: 20px;\n transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.icons-container .svg:hover {\n transform: scale(1.5);\n stroke: black;\n}\n\n.icons-container .twitter {\n fill: white;\n}\n\n.icons-container .twitter:hover {\n fill: black;\n stroke: none;\n}\n\n.logo {\n width: 50px;\n padding: 1rem;\n}\n\n.logo .svg {\n fill: white;\n}\n\n.title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n color: White;\n font-weight: bold;\n font-size: 1.1rem;\n}\n\n.box {\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: rgba(66, 66, 66, 0.349) 5px 0px 10px 0px inset;\n transition: all 0.5s ease-in-out;\n display: grid;\n place-content: center;\n padding: 2rem 2rem 3rem 2rem;\n border: 1px solid black;\n}\n\n.box .content {\n position: relative;\n transform: translateY(-100%);\n opacity: 0;\n transition: all 0.5s ease-in-out 0.3s;\n}\n\n.box .content .box-title {\n display: block;\n color: white;\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 1rem;\n}\n\n.box .content .box-text {\n color: rgba(255, 255, 255, 0.738);\n font-size: 0.8rem;\n}\n\n.box:hover {\n right: 0;\n top: 0;\n border-radius: 0;\n border: 1px solid transparent;\n box-shadow: rgba(66, 66, 66, 0) 5px 0px 10px 0px inset;\n}\n\n.box:hover .content {\n transform: translate(0, 0);\n opacity: 1;\n}\n\n.box1 {\n top: -85%;\n right: -40%;\n background: rgb(255, 112, 60);\n border-radius: 200px;\n}\n\n.box2 {\n top: -70%;\n right: -45%;\n background: rgb(255, 174, 0);\n border-radius: 200px;\n}\n\n.box3 {\n top: -62%;\n right: -30%;\n background: rgb(255, 194, 52);\n border-radius: 200px;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"0e2169","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1593,"cssLen":2018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Continue payment\n

Wait! you have NOT finished your purchase, do you want to continue?

\n \n \n

\n \n\n

","css":".absolute{position:absolute}.relative{position:relative}.right-2{right:0.5rem}.top-3{top:0.75rem}.flex{display:flex}.h-12{height:3rem}.h-80{height:20rem}.w-12{width:3rem}.w-60{width:15rem}.flex-col{flex-direction:column}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.gap-2{gap:0.5rem}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.border-2{border-width:2px}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.stroke-blue-400{stroke:#60a5fa}.p-1{padding:0.25rem}.p-4{padding:1rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165 / 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)}.shadow-sky-800{--tw-shadow-color:#075985;--tw-shadow:var(--tw-shadow-colored)}.hover\\:bg-blue-300:hover{--tw-bg-opacity:1;background-color:rgb(147 197 253 / var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}"}]}},"actionData":null,"errors":null}