{"loaderData":{"0":null,"0-3":{"total":7264,"projects":[{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"b33dba","snapshot":null,"tags":null,"title":"card by Ykingdev","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3975,"cssLen":2148,"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\n \n \n \n

\n \n\n \n\n","css":".mt-8 {\n margin-top: 2rem;\n}\n.flex {\n display: flex;\n}\n.h-20 {\n height: 5rem;\n}\n.h-4 {\n height: 1rem;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-20 {\n width: 5rem;\n}\n.w-4 {\n width: 1rem;\n}\n.w-40 {\n width: 10rem;\n}\n.w-full {\n width: 100%;\n}\n.max-w-md {\n max-width: 28rem;\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-5 {\n padding: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.text-yellow-200 {\n --tw-text-opacity: 1;\n color: rgb(254 240 138 / var(--tw-text-opacity));\n}\n.text-yellow-400 {\n --tw-text-opacity: 1;\n color: rgb(250 204 21 / var(--tw-text-opacity));\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),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:duration-150:hover {\n transition-duration: 150ms;\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity));\n }\n .dark\\:bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity));\n }\n .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n }\n}\n"},{"created":"2024-01-22T17:11:31.000Z","isPrivate":0,"projectId":"d73d23","snapshot":null,"tags":null,"title":"card by Alireza11490","updated":"2024-01-22T17:11:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4021,"cssLen":1714,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n background-color: white;\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n}\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-left: 1em;\n padding-right: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .3s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: lightgray;\n}\n\n.currentplaying {\n display: flex;\n margin: 1em;\n}\n\n.spotify {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: limegreen;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: black;\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: black;\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"},{"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"}]}},"actionData":null,"errors":null}

JohnDoe

John
Doe