{"loaderData":{"0":null,"0-3":{"total":7356,"projects":[{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"0aee76","snapshot":null,"tags":null,"title":"card by gagan-gv","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4012,"cssLen":1211,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

John
Doe

\n \n \n \n

","css":".card {\n width: 190px;\n height: 254px;\n background: #f0f0f0;\n border-radius: 10px;\n text-align: center;\n transition: all 0.5s;\n}\n\n.card:hover {\n box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.623);\n background-color: #4bb8ff;\n}\n\n.card .blob {\n height: 10px;\n width: 75%;\n border-radius: 0 0 30px 30px;\n margin: 0 auto;\n background-color: #4bb8ff;\n visibility: visible;\n transition: all 0.3s;\n}\n\n.card:hover .blob {\n height: 0;\n}\n\n.card .img {\n display: flex;\n margin: 30px auto 10px auto;\n width: 70px;\n height: 70px;\n background-color: #4bb8ff;\n border-radius: 50%;\n font-size: 11px;\n justify-content: center;\n align-items: center;\n transition: all 0.5s;\n}\n\n.card:hover .img {\n width: 100%;\n height: 70%;\n border-radius: 10px 0 0;\n margin: 0 auto;\n background-color: #f0f0f0;\n z-index: 99999;\n}\n\n.card h2 {\n padding: 15px 10px;\n font-size: 25px;\n transition: all 0.1s;\n z-index: -99;\n line-height: 17px;\n}\n\n.card span {\n font-size: 18px;\n}\n\n.card:hover h2 {\n opacity: 0;\n width: 100%;\n position: absolute;\n transition: all 0.5s;\n}\n\n.card>p {\n opacity: 0;\n transition: all 0.75s;\n}\n\n.card>p>svg {\n padding: 5px;\n}\n\n.card:hover>p {\n position: absolute;\n bottom: 15px;\n left: 35px;\n opacity: 1;\n transition: all 0.1s;\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"51f340","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5103,"cssLen":2088,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t\n

\n\t

\n\t\tNimbus Formale\n\t

\n\t

\n\t\t$60.99\n\t

\n\t

\n \n \n B\n \n \n \n D\n \n \n \n \n 2E\n \n \n \n \n 4E\n \n

\n\t\n

","css":".card {\n width: 230px;\n height: 340px;\n background: #131313;\n border: 2px solid #bb6c74;\n border-radius: 40px;\n}\n\n.image {\n background-color: #1f1f1fa3;\n border-radius: 2.5em 2.5em 0em 0em;\n width: 100%;\n height: 37%;\n padding: 2px;\n}\n\n.image svg {\n width: 75%;\n margin-top: -25px;\n margin-left: 30px;\n}\n\n.productTitle {\n text-align: center;\n font-size: 22px;\n font-weight: bold;\n color: #bb6c74;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin-top: 10px;\n}\n\n.cost {\n text-align: center;\n margin-top: 10px;\n font-weight: bold;\n color: white;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.radio-inputs {\n position: relative;\n margin-top: 20px;\n margin-left: 13px;\n display: flex;\n flex-wrap: wrap;\n border-radius: 0.5rem;\n background-color: #1c1c1c;\n box-sizing: border-box;\n box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);\n padding: 0.25rem;\n width: 200px;\n font-size: 14px;\n}\n\n.radio-inputs .radio {\n flex: 1 1 auto;\n text-align: center;\n}\n\n.radio-inputs .radio input {\n display: none;\n}\n\n.radio-inputs .radio .name {\n display: flex;\n font-weight: 600;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n padding: .5rem 0;\n color: #bb6c74;\n transition: all .15s ease-in-out;\n}\n\n.radio-inputs .radio input:checked + .name {\n background-color: #000;\n color: #fff;\n font-weight: 600;\n}\n\n.addtocart {\n width: 100%;\n margin-top: 19px;\n padding: 15px;\n border: none;\n border-top: 2px solid #bb6c74;\n background-color: #131313;\n color: #bb6c74;\n font-weight: bold;\n font-size: 15px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n border-radius: 0px 0px 38px 38px;\n transition: 0.2s;\n}\n\n.addtocart:hover {\n background-color: #bb6c74;\n border-top: 2px solid transparent;\n color: #111111;\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"e264df","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1705,"cssLen":1775,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n TAILWIND\n Cheat Sheet\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

\n \n\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-bottom-24 {\n bottom: -6rem\n}\n\n.m-1 {\n margin: 0.25rem\n}\n\n.flex {\n display: flex\n}\n\n.h-72 {\n height: 18rem\n}\n\n.h-8 {\n height: 2rem\n}\n\n.w-56 {\n width: 14rem\n}\n\n.w-8 {\n width: 2rem\n}\n\n.cursor-pointer {\n cursor: pointer\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.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.bg-lime-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(163 230 53 / var(--tw-bg-opacity))\n}\n\n.fill-current {\n fill: currentColor\n}\n\n.stroke-current {\n stroke: currentColor\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\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-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity))\n}\n\n.text-lime-400 {\n --tw-text-opacity: 1;\n color: rgb(163 230 53 / var(--tw-text-opacity))\n}\n\n.text-neutral-800 {\n --tw-text-opacity: 1;\n color: rgb(38 38 38 / var(--tw-text-opacity))\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.duration-700 {\n transition-duration: 700ms\n}\n\n.hover\\:bg-lime-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(217 249 157 / var(--tw-bg-opacity))\n}\n\n.hover\\:duration-700:hover {\n transition-duration: 700ms\n}\n\n.group:hover .group-hover\\:-bottom-0 {\n bottom: -0px\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"9ccb57","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":409,"cssLen":1557,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Digital Way

Data & Infrastructure Agility

mParticle’s customer data platform empowers you to Integrate all of your data and orchestrate it across channels, partners, and systems.

","css":".container {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n position: relative;\n display: flex;\n justify-content: center;\n cursor: pointer;\n width: 22em;\n max-width: 80%;\n padding: 2em 0;\n background: #FFF;\n box-shadow: 0 0 6px 0 rgba(32, 32, 36, 0.12);\n transition: all 0.35s ease;\n}\n\n.card::before, .card::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background: orange;\n height: 4px;\n}\n\n.card::before {\n width: 0;\n opacity: 0;\n transition: opacity 0 ease, width 0 ease;\n transition-delay: 0.5s;\n}\n\n.card::after {\n width: 100%;\n background: white;\n transition: width 0.5s ease;\n}\n\n.card .content {\n width: 18em;\n max-width: 80%;\n}\n\n.card .logo {\n margin: 0 0 1em;\n width: 10.625em;\n transition: all 0.35s ease;\n}\n\n.card .h6 {\n color: #999;\n font-weight: 600;\n text-transform: uppercase;\n margin: 0;\n letter-spacing: 2px;\n}\n\n.card .hover_content {\n overflow: hidden;\n max-height: 0;\n transform: translateY(1em);\n transition: all 0.55s ease;\n}\n\n.card .hover_content p {\n margin: 1.5em 0 0;\n color: #6E6E70;\n line-height: 1.4em;\n}\n\n.card:hover {\n width: 24em;\n box-shadow: 0 10px 20px 0 rgba(32, 32, 36, 0.12);\n}\n\n.card:hover::before {\n width: 100%;\n opacity: 1;\n transition: opacity 0.5s ease, width 0.5s ease;\n transition-delay: 0;\n}\n\n.card:hover::after {\n width: 0;\n opacity: 0;\n transition: width 0 ease;\n}\n\n.card:hover .logo {\n margin-bottom: 0.5em;\n}\n\n.card:hover .hover_content {\n max-height: 10em;\n transform: none;\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"231561","snapshot":null,"tags":null,"title":"card by shadowfax29","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":79,"cssLen":1203,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 190px;\n height: 254px;\n background-color: #66D0FF;\n padding: 20px;\n border-radius: 8px;\n transition: all .3s;\n border: 3px solid #66D0FF;\n box-shadow: 0 0 10px white;\n}\n\n.cloud {\n width: 150px;\n height: 70px;\n background: #ECEFF1;\n box-shadow: 10px 10px rgba(0,0,0,0.2);\n border-radius: 70px;\n}\n\n.cloud::after, .cloud::before {\n content: \"\";\n position: relative;\n display: inline-block;\n background: inherit;\n border-radius: inherit;\n}\n\n.cloud::after {\n width: 50px;\n height: 50px;\n top: -30px;\n left: -55px;\n}\n\n.cloud::before {\n width: 70px;\n height: 70px;\n top: -20px;\n left: 60px;\n}\n\n.cloud {\n animation: float 1.8s infinite alternate;\n}\n\n@keyframes float {\n 0% {\n transform: translateY(15px);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n.shadow {\n width: 150px;\n height: 24px;\n background-color: rgba(0,0,0,0.2);\n margin-top: 100px;\n border-radius: 50%;\n filter: blur(7px);\n animation: sha 1.8s infinite alternate;\n}\n\n@keyframes sha {\n 0% {\n transform: scale(1,1);\n }\n\n 100% {\n transform: scale(.85,.85);\n }\n}\n\n.card:hover {\n width: 200px;\n height: 264px;\n transform: scale(0.9);\n padding: 20px;\n border: 5px solid black;\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"d91332","snapshot":null,"tags":null,"title":"card by mirbasit01","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":437,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Different ways to use HTML, CSS, JAVA SCRIPT, IN REACT\n

\n HTML\n CSS\n JAVA SCRIPT\n REACT \n

\n \n

\n","css":".card {\n width: 330px;\n height: 370px;\n padding: 20px;\n color: white;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%, #0a89a8, #252e31) border-box;\n border: 2px solid transparent;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: top bottom;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.card .main-content {\n flex: 1;\n}\n\n.card .header span:first-child {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card .heading {\n font-size: 24px;\n margin: 24px 0 16px;\n font-weight: 600;\n}\n\n.card .categories {\n display: flex;\n gap: 10px;\n}\n\n.card .categories span {\n background-color: #0a89a8;\n padding: 4px 8px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 12px;\n border-radius: 50em;\n}\n\n.card .footer {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card:hover {\n rotate: -6deg;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"135d49","snapshot":null,"tags":null,"title":"card by LightAndy1","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":589,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Nitro Style

\n","css":".package {\n width: 200px;\n height: 254px;\n background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);\n border-radius: 20px;\n text-align: center;\n transition: all 0.25s cubic-bezier(0, 0, 0, 1);\n}\n\n.package:hover {\n box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);\n}\n\n.package2 {\n width: 200px;\n height: 254px;\n background-color: #1d1724;\n border-radius: 10px;\n transition: all 0.25s cubic-bezier(0, 0, 0, 1);\n padding: 15px;\n cursor: pointer;\n}\n\n.package2:hover {\n transform: scale(0.98);\n border-radius: 18px;\n}\n\n.text {\n color: white;\n font-size: 17px;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"aeee33","snapshot":null,"tags":null,"title":"card by lowa2006","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4779,"cssLen":1167,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n About Me\n

\n I’m Walter, a multidisciplinary designer who focuses on telling my clients’\n stories visually, through enjoyable and meaningful experiences. I specialize\n in responsive websites and functional user interfaces.\n

\n \n \n

\n","css":".card {\n width: 17em;\n height: 22.5em;\n background: #171717;\n transition: 1s ease-in-out;\n clip-path: polygon(\n 30px 0%,\n 100% 0,\n 100% calc(100% - 30px),\n calc(100% - 30px) 100%,\n 0 100%,\n 0% 30px\n );\n border-top-right-radius: 20px;\n border-bottom-left-radius: 20px;\n display: flex;\n flex-direction: column;\n}\n\n.card span {\n font-weight: bold;\n color: white;\n text-align: center;\n display: block;\n font-size: 1em;\n}\n\n.card .info {\n font-weight: 400;\n color: white;\n display: block;\n text-align: center;\n font-size: 0.72em;\n margin: 1em;\n}\n\n.card .img {\n width: 4.8em;\n height: 4.8em;\n background: white;\n border-radius: 15px;\n margin: auto;\n}\n\n.card .share {\n margin-top: 1em;\n display: flex;\n justify-content: center;\n gap: 1em;\n}\n\n.card a {\n color: white;\n transition: 0.4s ease-in-out;\n}\n\n.card a:hover {\n color: red;\n}\n\n.card button {\n padding: 0.8em 1.7em;\n display: block;\n margin: auto;\n border-radius: 25px;\n border: none;\n font-weight: bold;\n background: #ffffff;\n color: rgb(0, 0, 0);\n transition: 0.4s ease-in-out;\n}\n\n.card button:hover {\n background: red;\n color: white;\n cursor: pointer;\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"75c982","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2117,"cssLen":5852,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

JOHN DOE
\n Fullstack dev & UX UI\n

\n \n \n \n

","css":"/* before adding the photo to the div with the \"card-photo\" class, in the css clear the styles for .card-photo and remove .card-photo::before and .card-photo::after, then set the desired styles for .card- photo. */\n\n.card {\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n width: 200px;\n height: 254px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.card-photo {\n/* clear and add new css */\n transform: scale(0.3) translate(220px, 230px);\n width: 250px;\n height: 250px;\n margin-left: -125px;\n margin-top: -125px;\n background: radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 14% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 10% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 7.5% 29%/20% 20%,radial-gradient(circle,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 50.8%) 86% 30%/11% 11%,radial-gradient(circle,#ffdab9 50%,rgba(255,218,185,0) 50.8%) 90% 30%/16% 16%,radial-gradient(circle,#8b4513 50%,rgba(139,69,19,0) 50.8%) 92.5% 29%/20% 20%,radial-gradient(circle at 50% 0,#ffdab9 29.5%,#8b4513 30%,#8b4513 35%,rgba(139,69,19,0) 35.5%) 50% 95%/40% 20%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 49%,#8b4513 49.5%,#8b4513 52%,rgba(139,69,19,0) 52.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(255,255,255,0) 35%,white 35%,white 45%,rgba(255,255,255,0) 45.5%) 50% 89%/40% 13%,linear-gradient(#8b4513,#8b4513) 37% 100%/.25em 22%,linear-gradient(#8b4513,#8b4513) 63% 100%/.25em 22%,linear-gradient(80deg,rgba(0,0,0,0) 50%,#333 50.5%) 24% 100%/1em 18%,linear-gradient(-80deg,rgba(0,0,0,0) 50%,#333 50.5%) 76% 100%/1em 18%,linear-gradient(162deg,rgba(0,0,0,0) 10%,#333 10%) 30% 100%/1.5em 21%,linear-gradient(-162deg,rgba(0,0,0,0) 10%,#333 10%) 70% 100%/1.5em 21%,radial-gradient(ellipse at 100% 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 0 100%/37% 29%,radial-gradient(ellipse at 0 100%,#556b2f 50%,rgba(85,107,47,0) 50.5%) 100% 100%/37% 29%,radial-gradient(ellipse at 50% 100%,#222 51%,rgba(0,0,0,0) 51.5%) 50% 110%/120% 40%,radial-gradient(circle at 50% 0,rgba(0,0,0,0.15) 40%,rgba(0,0,0,0) 40.5%) 50% 82%/20% 20%,linear-gradient(to right,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(to left,#8b4513 4px,rgba(139,69,19,0) 4px) 50% 80%/20% 20%,linear-gradient(#ffdab9,#ffdab9) 50% 80%/20% 20%,linear-gradient(#48240a,#48240a) 50% 100%/65% 60%,radial-gradient(circle,white 30%,rgba(255,255,255,0) 62%) 50% 50%/100% 100%;\n background-color: #ccc;\n background-repeat: no-repeat;\n border-radius: 30%;\n}\n\n/* delete */\n.card-photo::before {\n display: block;\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 160px;\n height: 200px;\n left: 50%;\n top: -10%;\n margin-left: -80px;\n background: radial-gradient(circle at 50% 0,#ffdab9 30%,#8b4513 30.5%,#8b4513 41%,rgba(139,69,19,0) 41.5%) 50% 76%/2em 2em,radial-gradient(ellipse,rgba(139,69,19,0) 25%,#5e2f0d 25.5%,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 50% 100%/100% 40%,radial-gradient(ellipse at 50% 0,#8b4513 40%,#ffdab9 40.5%,#ffdab9 58%,rgba(255,218,185,0) 59%) 50% 83%/3em 1em,linear-gradient(#5e2f0d,#5e2f0d) 50% 86%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 26% 56%/1em 1em,radial-gradient(circle,#5e2f0d 40%,rgba(139,69,19,0) 40.5%) 74% 56%/1em 1em,radial-gradient(ellipse,rgba(139,69,19,0) 52%,#8b4513 52.5%,#8b4513 55%,rgba(139,69,19,0) 55.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(0,0,0,0) 46%,rgba(0,0,0,0.15) 46.5%,rgba(0,0,0,0.15) 53%,rgba(0,0,0,0) 53%) 50% 100%/150% 80%,radial-gradient(ellipse,#ffdab9 53%,rgba(255,218,185,0) 53.5%) 50% 100%/150% 80%,radial-gradient(ellipse at 50% 100%,rgba(139,69,19,0) 35.5%,#8b4513 36%,#8b4513 38%,white 38.5%) 50% -45%/110% 60%,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 30% 26%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 40% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 50% 24.5%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 60% 25%/1em 1em,radial-gradient(circle,#444 23%,rgba(0,0,0,0) 24%) 70% 26%/1em 1em,radial-gradient(ellipse,#666 63%,#8b4513 63.5%,#8b4513 66%,rgba(139,69,19,0) 66.5%) 50% 100%/150% 80%,radial-gradient(ellipse,rgba(139,69,19,0) 40%,#5e2f0d 40.5%) 50% 0/150% 80%,linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)) 50% 50%/100% 100%;\n background-repeat: no-repeat;\n background-color: #ffdab9;\n border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;\n border: 4px solid #8b4513;\n box-shadow: inset 0 -.2em 0 .5em rgba(0,0,0,0.15),inset 0 -1.6em 0 #5e2f0d;\n}\n\n/* delete */\n.card-photo::after {\n display: block;\n content: '';\n position: absolute;\n width: 2.5em;\n height: .8em;\n left: 28.5%;\n top: 26%;\n background-color: #5e2f0d;\n border-radius: .3em;\n box-shadow: 4.2em 0 0 #5e2f0d;\n}\n\n.card-title {\n text-align: center;\n color: var(--font-color);\n font-size: 20px;\n font-weight: 400;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card-title span {\n font-size: 15px;\n color: var(--font-color-sub);\n}\n\n.card-socials {\n display: flex;\n height: 0;\n opacity: 0;\n margin-top: 20px;\n gap: 20px;\n transition: 0.5s;\n}\n\n.card-socials-btn {\n width: 25px;\n height: 25px;\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n.card-socials-btn svg {\n width: 100%;\n height: 100%;\n fill: var(--main-color);\n}\n\n.card:hover > .card-socials {\n opacity: 1;\n height: 35px;\n}\n\n.card-socials-btn:hover {\n transform: translateY(-5px);\n transition: all 0.15s;\n}\n\n.card-photo:hover {\n transition: 0.3s;\n transform: scale(0.4) translate(160px, 150px);\n}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"c378b3","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":3250,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n \n \n \n \n

\n","css":".card {\n width: 200px;\n height: 200px;\n background: transparent;\n border-radius: 50%;\n border: 20px solid transparent;\n position: relative;\n overflow: hidden;\n box-shadow: 2px 2px 2px black, inset 2px 2px 2px black,\n -1px -1px 5px rgba(0, 0, 0, 0.473), inset -1px -1px 5px rgba(0, 0, 0, 0.473);\n}\n\n.numbers {\n font-weight: bold;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n border-radius: 50%;\n padding: 20px;\n background-color: transparent;\n}\n\n.number {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: inline-block;\n width: 0.1rem;\n height: 0.9rem;\n background-color: rgb(106, 108, 117);\n}\n.number:nth-child(1) {\n transform: translate(-50%, -50%) rotateZ(calc(30deg)) translateY(-80px);\n}\n\n.number:nth-child(2) {\n transform: translate(-50%, -50%) rotateZ(calc(60deg)) translateY(-80px);\n}\n\n.number:nth-child(3) {\n transform: translate(-50%, -50%) rotateZ(calc(90deg)) translateY(-80px);\n}\n\n.number:nth-child(4) {\n transform: translate(-50%, -50%) rotateZ(calc(120deg)) translateY(-80px);\n}\n\n.number:nth-child(5) {\n transform: translate(-50%, -50%) rotateZ(calc(150deg)) translateY(-80px);\n}\n\n.number:nth-child(6) {\n transform: translate(-50%, -50%) rotateZ(calc(180deg)) translateY(-80px);\n}\n\n.number:nth-child(7) {\n transform: translate(-50%, -50%) rotateZ(calc(210deg)) translateY(-80px);\n}\n\n.number:nth-child(8) {\n transform: translate(-50%, -50%) rotateZ(calc(240deg)) translateY(-80px);\n}\n\n.number:nth-child(9) {\n transform: translate(-50%, -50%) rotateZ(calc(270deg)) translateY(-80px);\n}\n\n.number:nth-child(10) {\n transform: translate(-50%, -50%) rotateZ(calc(300deg)) translateY(-80px);\n}\n\n.number:nth-child(11) {\n transform: translate(-50%, -50%) rotateZ(calc(330deg)) translateY(-80px);\n}\n\n.number:nth-child(12) {\n transform: translate(-50%, -50%) rotateZ(calc(0deg)) translateY(-80px);\n}\n\n.number:nth-child(3),\n.number:nth-child(6),\n.number:nth-child(9),\n.number:nth-child(12) {\n width: 0.3rem;\n height: 1.5rem;\n}\n\n.needles {\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.h,\n.m,\n.s,\n.center {\n display: inline-block;\n width: 7px;\n height: 20px;\n background-color: black;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50% 50% 0 0;\n}\n\n.s {\n transform: translate(-50%, -80%);\n}\n\n.h {\n background-color: black;\n transform-origin: 50% 100%;\n animation: rotate 43200s 60s infinite linear;\n transform: translate(-50%, -100%) rotateZ(5deg);\n height: 2.5rem;\n z-index: 1;\n}\n\n.m {\n background-color: rgb(176, 176, 185);\n z-index: 2;\n height: 4rem;\n width: 5px;\n transform-origin: 50% 100%;\n transform: translate(-50%, -100%) rotateZ(60deg);\n animation: rotate 3600s 60s infinite steps(60, end);\n}\n\n.s {\n background-color: rgb(240, 31, 31);\n z-index: 3;\n height: 5rem;\n width: 3px;\n transform-origin: 50% 80%;\n animation: rotate 60s infinite steps(60, end);\n}\n\n.center {\n width: 15px;\n height: 15px;\n background-color: white;\n border: solid 4px red;\n z-index: 4;\n border-radius: 50%;\n}\n\n@keyframes rotate {\n 100% {\n transform: translate(-50%, -80%) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"2bd77c","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1999,"cssLen":2863,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n \n \n \n Explore More\n

\n Dive into curated collections, traverse user-friendly interfaces, and let\n curiosity guide your exploration.\n

\n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-left-12{left:-3rem}.-top-12{top:-3rem}.-top-24{top:-6rem}.left-12{left:3rem}.left-14{left:3.5rem}.left-56{left:14rem}.top-12{top:3rem}.top-24{top:6rem}.top-44{top:11rem}.flex{display:flex}.h-12{height:3rem}.h-24{height:6rem}.h-4{height:1rem}.h-44{height:11rem}.h-64{height:16rem}.h-full{height:100%}.w-12{width:3rem}.w-24{width:6rem}.w-4{width:1rem}.w-44{width:11rem}.w-64{width:16rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.bg-neutral-600{--tw-bg-opacity:1;background-color:rgb(82 82 82 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-3{padding:0.75rem}.p-5{padding:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.italic{font-style:italic}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212 / var(--tw-text-opacity))}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 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-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-green-800{--tw-shadow-color:#166534;--tw-shadow:var(--tw-shadow-colored)}.shadow-neutral-900{--tw-shadow-color:#171717;--tw-shadow:var(--tw-shadow-colored)}.shadow-red-800{--tw-shadow-color:#991b1b;--tw-shadow:var(--tw-shadow-colored)}.shadow-sky-500{--tw-shadow-color:#0ea5e9;--tw-shadow:var(--tw-shadow-colored)}.shadow-sky-800{--tw-shadow-color:#075985;--tw-shadow:var(--tw-shadow-colored)}.shadow-yellow-800{--tw-shadow-color:#854d0e;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-1000{transition-duration:1000ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:duration-1000:hover{transition-duration:1000ms}.group:hover .group-hover\\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;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))}.group:hover .group-hover\\:duration-1000{transition-duration:1000ms}"},{"created":"2024-01-22T17:11:30.000Z","isPrivate":0,"projectId":"182bda","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":299,"cssLen":981,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mauris risus, lobortis a neque aliquet, ornare rutrum purus. Integer hendrerit ac est non cursus. Integer quis risus tincidunt nunc mattis ultricies. Proin sed enim tellus.

","css":".page {\n position: relative;\n box-sizing: border-box;\n max-width: 300px;\n font-family: cursive;\n font-size: 20px;\n border-radius: 10px;\n background: #fff;\n background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);\n background-size: 100% 1.2rem;\n line-height: 1.2rem;\n padding: 1.4rem 0.5rem 0.3rem 4.5rem;\n}\n\n.page::before,\n.page::after {\n position: absolute;\n content: \"\";\n bottom: 10px;\n width: 40%;\n height: 10px;\n box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);\n z-index: -1;\n transition: all 0.3s ease;\n}\n\n.page::before {\n left: 15px;\n transform: skew(-5deg) rotate(-5deg);\n}\n\n.page::after {\n right: 15px;\n transform: skew(5deg) rotate(5deg);\n}\n\n.page:hover::before,\n.page:hover::after {\n box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);\n}\n\n.margin {\n position: absolute;\n border-left: 1px solid #d88;\n height: 100%;\n left: 3.3rem;\n top: 0;\n}\n\n.page p {\n margin: 0;\n text-indent: 1rem;\n padding-bottom: 1.2rem;\n color: black;\n line-height: 20px;\n}"}]}},"actionData":null,"errors":null}

JohnDoe

John
Doe