{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"3fac8f","snapshot":null,"tags":null,"title":"card by eduardo-amaro-maciel","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":858,"cssLen":1392,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Hello\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n Hello\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n Hello\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

","css":".scroll-1::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.scroll-1::-webkit-scrollbar-thumb {\n border-radius: 20px;\n background: #888;\n}\n\n.container * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n color: #fff;\n}\n\n.container {\n display: flex;\n overflow-x: scroll;\n padding: 24px;\n width: 300px;\n scroll-snap-type: x mandatory;\n scroll-padding-top: 24px;\n border-radius: 8px;\n gap: 20px;\n}\n\n.container .card {\n flex: 0 0 100%;\n overflow: hidden;\n border-radius: 8px;\n background-color: #141414;\n scroll-snap-align: start;\n}\n\n.card .card__image {\n flex: 1;\n height: 140px;\n}\n\n.card:nth-child(1) .card__image {\n background-image: linear-gradient(\n to right top,\n #051937, \n #004d7a, \n #008793, \n #00bf72, \n #a8eb12\n );\n}\n\n.card:nth-child(2) .card__image {\n background-image: linear-gradient(\n to right top, \n #dc09a5, \n #ce00b4, \n #ba00c5, \n #9c00d8, \n #6f12eb\n );\n}\n\n.card:nth-child(3) .card__image {\n background-image: linear-gradient(\n to right top, \n #dc1009, \n #e55f00, \n #e49200, \n #dac000, \n #c7eb12\n );\n}\n\n.card .card__content {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 20px;\n}\n\n.card .card__content .card__title {\n font-size: 32px;\n color: #fff;\n text-transform: capitalize;\n}\n\n.card .card__content .card__describe {\n color: #fff;\n font-size: 16px;\n}"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"50a5de","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:31.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: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"}]}},"actionData":null,"errors":null}

JohnDoe

John
Doe