{"loaderData":{"0":null,"0-2":{"total":7185,"projects":[{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"60646f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2120,"cssLen":2317,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Jr\n

Frontend Developer

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

","css":".absolute{position:absolute}.relative{position:relative}.-bottom-0{bottom:-0px}.-bottom-0\\.5{bottom:-0.125rem}.-right-20{right:-5rem}.z-10{z-index:10}.-my-2{margin-top:-0.5rem;margin-bottom:-0.5rem}.flex{display:flex}.h-48{height:12rem}.h-52{height:13rem}.h-6{height:1.5rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-72{width:18rem}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.border{border-width:1px}.border-4{border-width:4px}.border-sky-900{--tw-border-opacity:1;border-color:rgb(12 74 110 / var(--tw-border-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-800{--tw-bg-opacity:1;background-color:rgb(7 89 133 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.fill-gray-50{fill:#f9fafb}.stroke-sky-700{stroke:#0369a1}.stroke-sky-900{stroke:#0c4a6e}.p-5{padding:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-5xl{font-size:3rem;line-height:1}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-sky-800{--tw-text-opacity:1;color:rgb(7 89 133 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.\\[transform\\:rotate3d\$20_\\2c -10\\2c _1\\2c _60deg\$\\]{transform:rotate3d(20 ,-10, 1, 60deg)}.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\\:bg-sky-900:hover{--tw-bg-opacity:1;background-color:rgb(12 74 110 / var(--tw-bg-opacity))}.hover\\:text-gray-50:hover{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.group:hover .group-hover\\:scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;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))}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"34f17c","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1770,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".card {\n background-color: #131c25;\n border: 3px solid #659AD2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n font-weight: 700;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n padding: 30px 20px;\n color: #659AD2;\n border-radius: 45px;\n}\n\n.App-logo {\n pointer-events: none;\n width: 140px;\n margin-bottom: 20px;\n}\n\n.App-button {\n padding: 10px 20px;\n background-color: transparent;\n color: #659AD2;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n border: 3px solid #659AD2;\n border-radius: 5em;\n margin-top: 20px;\n transition: 0.2s;\n}\n\n.App-button:hover {\n color: #282c34;\n background-color: #659AD2;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"66817a","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":402,"cssLen":1673,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t

Free plan

\n\t\t

\n\t\t\t$\n\t\t\t0\n\t\t\t/month\n\t\t

\n\t\t

Benefits:

\n\t\t

Lorem ipsum, dolor sit amet
Lorem ipsum, dolor sit amet

\n\t

\n\t\n

","css":".card {\n --main-focus: #2d8cf0;\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 150px;\n height: 200px;\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 padding: 10px;\n display: flex;\n flex-direction: column;\n}\n\n.card-content-wrapper {\n transform: translateY(10px);\n display: flex;\n flex-direction: column;\n gap: 5px;\n transition: all 0.7s;\n}\n\n.card-title {\n letter-spacing: 3px;\n font-size: 20px;\n font-weight: 700;\n color: var(--font-color);\n}\n\n.card-price {\n letter-spacing: 2px;\n font-size: 20px;\n color: var(--font-color);\n font-weight: 700;\n}\n\n.card-price span {\n font-size: 15px;\n color: var(--font-color-sub);\n font-weight: 500;\n}\n\n.card-subtitle {\n letter-spacing: 2px;\n font-size: 17px;\n color: var(--main-focus);\n font-weight: 500;\n}\n\n.card-benefits {\n font-size: 15px;\n padding-left: 20px;\n color: var(--font-color);\n}\n\n.card-btn {\n cursor: pointer;\n width: 100px;\n padding: 5px;\n background: var(--main-focus);\n border: none;\n border-radius: 5px;\n margin: 0 auto;\n transform: translateY(30px);\n color: var(--bg-color);\n font-weight: 500;\n font-size: 12px;\n letter-spacing: 0.7px;\n opacity: 0;\n transition: all 0.7s;\n}\n\n.card:hover > .card-btn {\n opacity: 1;\n transform: translateY(17px);\n}\n\n.card-btn:hover {\n font-weight: 700;\n letter-spacing: 1px;\n}\n\n.card:hover > .card-content-wrapper {\n transform: translateY(5px);\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"927312","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":101,"cssLen":968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

New Magic Card

\n","css":".card {\n --background: linear-gradient(to left, #a5c1e7 0%, #9b59b6 100%);\n width: 200px;\n height: 270px;\n padding: 10px;\n border-radius: 1rem;\n overflow: visible;\n background: #a5c1e7;\n background: var(--background);\n position: relative;\n z-index: 1;\n}\n\n.card::after {\n position: absolute;\n content: \"\";\n top: 40px;\n left: 0;\n right: 0;\n z-index: -1;\n height: 100%;\n width: 100%;\n transform: scale(0.85);\n filter: blur(30px);\n background: #a5c1e7;\n background: var(--background);\n transition: opacity 0.5s;\n}\n\n.card-info {\n --color: #ffffff;\n background: var(--color);\n color: var(--color);\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: visible;\n border-radius: 0.6rem;\n}\n\n.card .title {\n font-weight: bold;\n letter-spacing: 0.2em;\n text-align: center;\n}\n\n/*Hover*/\n.card:hover::after {\n opacity: 0;\n}\n\n.card:hover .card-info {\n color: #a5c1e7;\n transition: color 1s;\n}\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"075ce2","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6091,"cssLen":1473,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Ethan Johnson\n

\n Hello, I am a software engineer with over 5 years of experience in web development. I specialize in building scalable, high-performance web applications using modern web technologies such as React, Angular, and Node.js.\n

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

\n","css":".flip-card {\n background-color: transparent;\n width: 245px;\n height: 270px;\n perspective: 1000px;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n}\n\n.flip-card-front, .flip-card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n padding: 5px;\n border-radius: 2em;\n backface-visibility: hidden;\n}\n\n.flip-card-front {\n background-color: #240d29;\n border: 4px solid #c143da;\n}\n\n.profile-image {\n background-color: transparent;\n border: none;\n margin-top: 15px;\n border-radius: 5em;\n width: 120px;\n height: 120px;\n margin-left: 50px;\n}\n\n.pfp {\n border-radius: 35em;\n fill: #c143da;\n}\n\n.name {\n margin-top: 15px;\n font-size: 27px;\n color: #c143da;\n font-weight: bold;\n}\n\n.flip-card-back {\n background-color: #240d29;\n border: 4px solid #c143da;\n transform: rotateY(180deg);\n padding: 11px;\n}\n\n.description {\n margin-top: 10px;\n font-size: 14px;\n letter-spacing: 1px;\n color: white\n}\n\n.socialbar {\n background-color: transparent;\n border-radius: 3em;\n width: 90%;\n padding: 14px;\n margin-top: 11px;\n margin-left: 10px;\n word-spacing: 24px;\n color: white;\n}\n\n.socialbar svg {\n transition: 0.4s;\n width: 20px;\n height: 20px;\n color: #c143da\n}\n\n.socialbar svg:hover {\n color: white;\n}\n\n.flip-card:hover .flip-card-inner {\n transform: rotateY(180deg);\n}\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"278608","snapshot":null,"tags":null,"title":"card by KhaledMatalkah","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":1249,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 254px;\n height: 300px;\n background: linear-gradient(180deg, #5b1577, #a52585);\n border-radius: 10%;\n box-shadow: -35px 35px 70px #891883, 10px -35px 70px #db26db;\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease;\n animation: shadowAnimation 5s infinite ease-in-out;\n}\n\n@keyframes shadowAnimation {\n 0% {\n box-shadow: -35px 35px 70px #ca21ae, 10px -35px 70px #ca21ae;\n }\n\n 50% {\n box-shadow: -20px 10px 50px #bd3fa2, 0 -20px 50px #b9317c;\n }\n\n 100% {\n box-shadow: -35px 35px 70px #ca27af, 10px -35px 70px #bd3fa2;\n }\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150px;\n height: 150px;\n background: radial-gradient(circle, #68057c, #a52574);\n border-radius: 50%;\n opacity: 0.6;\n transition: opacity 0.3s ease;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80px;\n height: 80px;\n background: radial-gradient(circle, #b700ff, #be268b, transparent);\n border-radius: 50%;\n opacity: 0.2;\n transition: opacity 0.3s ease;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card:hover::before,\n.card:hover::after {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"d308f6","snapshot":null,"tags":null,"title":"card by JesusRafaelNavaCruz","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":348,"cssLen":566,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Rick Sanchez\n

\n Morty Smith\n

\n Summer Smith\n

\n\n

\n Beth Smith\n

","css":".container {\n overflow: auto;\n display: flex;\n scroll-snap-type: x mandatory;\n width: 90%;\n margin: 0 auto;\n padding: 0 15px;\n}\n\n.card {\n background: rgba(255, 255, 255, 0.25);\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(7px);\n -webkit-backdrop-filter: blur(7px);\n border-radius: 10px;\n padding: 2rem;\n margin: 1rem;\n width: 100%;\n}\n\n.title {\n width: 100%;\n display: inline-block;\n word-break: break-all;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n margin: 1rem auto;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"081a48","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":256,"cssLen":1049,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n 14:34\n Mon.,21 August\n

\n \n\n

","css":".card {\n width: 164px;\n height: 276px;\n background: rgb(0, 0, 0);\n border: 3px solid rgb(17, 4, 94);\n border-radius: 15px;\n position: relative;\n padding: 5px;\n display: flex;\n flex-direction: column;\n gap: 22px;\n transition: all 1s ease;\n color: antiquewhite;\n}\n\n.card::before {\n content: \"\";\n width: 10px;\n height: 10px;\n position: absolute;\n bottom: 10px;\n right: 77px;\n border-radius: 50%;\n background-color: rgb(17, 4, 94);\n}\n\n.card__date {\n display: flex;\n flex-direction: column;\n margin-top: 30px;\n}\n\n.time {\n font-size: 2em;\n}\n\n.popup {\n background-color: #444746;\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n font-size: .8em;\n padding: 3px;\n}\n\n.popup .title {\n font-size: 9px;\n color: #9cbde2;\n}\n\n.card__date , .popup {\n opacity: 0;\n transition: all .5s ease;\n}\n\n.card:hover {\n transform: rotate3d(5, 5, 10, -45deg);\n box-shadow: -40px 0px 5px 10px #289FED, -80px 0px 10px 20px #9dd2f5, -120px 0px 20px 40px #374650;\n ;\n}\n\n.card:hover .card__date , .card:hover .popup {\n opacity: 1;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"d3e03f","snapshot":null,"tags":null,"title":"card by SouravBandyopadhyay","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1201,"cssLen":2775,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

John Doe

Web Developer

\n Contact\n Portfolio\n

\n","css":".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-16{height:4rem}.min-h-screen{min-height:100vh}.w-16{width:4rem}.w-64{width:16rem}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border-2{border-width:2px}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--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)}.hover\\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.hover\\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}@media (prefers-color-scheme: dark){.dark\\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.dark\\:bg-indigo-400{--tw-bg-opacity:1;background-color:rgb(129 140 248 / var(--tw-bg-opacity))}.dark\\:bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.dark\\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}.dark\\:text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252 / var(--tw-text-opacity))}.dark\\:text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248 / var(--tw-text-opacity))}.dark\\:hover\\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.dark\\:hover\\:bg-indigo-500:hover{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"9f8757","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1866,"cssLen":1795,"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 2 team members\n
\n
\n \n \n \n
\n 100+ components\n
\n
\n \n \n \n
\n 2 month free updates\n
\n
\n \n \n \n
\n Life time technical support\n
\n

\n \n

","css":".pack-container {\n position: relative;\n display: flex;\n max-width: 350px;\n flex-direction: column;\n border-radius: 12px;\n background-color: #212121;\n border: 1px solid #fff;\n padding: 1.6rem;\n color: #fff;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.header {\n position: relative;\n margin: 0;\n margin-bottom: 2rem;\n overflow: hidden;\n border-radius: 0;\n border-bottom: 1px solid #fff;\n background: transparent;\n padding-bottom: 1rem;\n text-align: center;\n}\n\n.title {\n display: block;\n font-family: sans-serif;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-transform: uppercase;\n color: #fff\n}\n\n.price-container {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n font-family: sans-serif;\n font-size: 4.5rem;\n line-height: 1;\n}\n\n.price-container span:first-child {\n margin-top: 10px;\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.price-container span:last-child {\n align-self: flex-end;\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.lists {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.list {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.list span {\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.24);\n background-color: rgba(255, 255, 255, 0.185);\n height: 30px;\n width: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.list span svg {\n height: 12px;\n width: 12px;\n}\n\n.list p {\n display: block;\n font-family: sans-serif;\n}\n\n.button-container {\n margin-top: 20px;\n padding: 0;\n}\n\n.button-container button {\n display: block;\n width: 100%;\n background-color: #fff;\n padding: 10px 20px;\n text-transform: uppercase;\n color: #000;\n outline: 0;\n border: 0;\n border-radius: 10px;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"aa86cf","snapshot":null,"tags":null,"title":"card by david-mohseni","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":819,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

Title

Lorem ipsum dolor sit amet, consectetur

","css":".card {\n width: 190px;\n height: 120px;\n background-color: #eee;\n text-align: center;\n border: 10px solid #eee;\n border-radius: 20px;\n box-shadow: inset 5px 5px 10px #bbb, inset -5px -5px 10px #fff;\n transition: 0.5s;\n}\n\n.card:hover {\n height: 254px;\n}\n\n.icon {\n width: 60px;\n height: 60px;\n color: red;\n font-size: 30px;\n background-color: #eee;\n margin: 20px auto;\n padding: 5px;\n border-radius: 50%;\n box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;\n}\n\n.content {\n color: #999;\n background-color: #eee;\n padding: 10px;\n margin: 5px 20px;\n border-radius: 8px;\n box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;\n transform: translateY(-80px) scale(0);\n transition: all 0.5s;\n}\n\n.card:hover .content {\n transform: translateY(0) scale(1)\n}\n\n.content h3 {\n text-shadow: 2px 2px 0px #fff;\n}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"b4728e","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5432,"cssLen":2785,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t

$249

\n\t\tSolo Version\n\t\tA single license for solo designers, developers and freelancers.\n\t\t\n\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tFree updates\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tYou will gain access to every future update.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tUse on unlimited projects\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tCreate as many projects as you want.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tAsset Hosting\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tKeep your files for easy access and management. 5GB space included. Scale when necessary.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tCommunity support\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tGet help and learn new things in our community Slack with over 5,000 contributors.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tVersion control\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tInstant rollbacks to any version\n\t\t\t\t

\n\t\t\t

\n\t\t

\n\t

","css":".price-section {\n color: #fff;\n}\n/* End basic CSS override */\n.price-table {\n background-color: #152148;\n border-radius: 16px;\n max-width: 355px;\n padding: 25px;\n display: flex;\n flex-direction: column;\n box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.15);\n position: relative;\n background-image: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(29, 123, 219, 0.1) 20%, #152148 40%, #152148 100%);\n}\n\n.price-table:after {\n content: \"\";\n display: block;\n top: -3px;\n left: -3px;\n bottom: -3px;\n right: -3px;\n z-index: -1;\n position: absolute;\n border-radius: 16px;\n background-image: linear-gradient(135deg, #4ade80, #1d7bdb 40%, #293359 60%, #152148 100%);\n}\n\n.price-table .price {\n font-size: 3rem;\n line-height: 1;\n font-weight: 700;\n display: inline-flex;\n align-self: center;\n align-items: center;\n gap: 4px;\n position: relative;\n color: #fff;\n}\n\n.price-table .price small {\n font-size: 1.25rem;\n font-weight: 400;\n position: absolute;\n left: -1.5ch;\n}\n\n.price-table .title {\n font-size: 1.25rem;\n font-weight: 600;\n line-height: 1.25;\n text-align: center;\n margin-top: 10px;\n color: #fff;\n}\n\n.price-table .description {\n font-size: 1rem;\n text-align: center;\n margin-top: 2px;\n}\n\n.features {\n margin-top: 22px;\n}\n\n.feature {\n position: relative;\n}\n\n.feature + .feature {\n margin-top: 16px;\n}\n\n.feature summary {\n display: inline-flex;\n align-items: center;\n list-style: none;\n}\n\n.feature summary::-webkit-details-marker {\n display: none;\n}\n\n.feature[open] summary:after {\n content: \"\";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: fixed;\n z-index: 50;\n}\n\n.feature[open] div {\n -webkit-animation: scale 0.15s ease;\n animation: scale 0.15s ease;\n}\n\n.feature .checkmark {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background-color: #4ade80;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 12px;\n}\n\n.feature .checkmark svg {\n width: 18px;\n height: 18px;\n color: #fff;\n}\n\n.feature .question-icon {\n display: flex;\n align-items: center;\n margin-left: 6px;\n cursor: pointer;\n}\n\n.feature .answer {\n padding: 12px;\n background-color: #111b40;\n border-radius: 6px;\n position: absolute;\n top: -12px;\n z-index: 100;\n transform: translatey(-100%) translatex(-50%);\n transform-origin: bottom center;\n width: 80%;\n left: 50%;\n border: 1px solid #293359;\n box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);\n}\n\n@-webkit-keyframes scale {\n 0% {\n transform: translatey(-100%) translatex(-50%) scale(0);\n }\n\n 100% {\n transform: translatey(-100%) translatex(-50%) scale(1);\n }\n}\n\n@keyframes scale {\n 0% {\n transform: translatey(-100%) translatex(-50%) scale(0);\n }\n\n 100% {\n transform: translatey(-100%) translatex(-50%) scale(1);\n }\n}"}]}},"actionData":null,"errors":null}