{"loaderData":{"0":null,"0-3":{"total":7398,"projects":[{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"01a57d","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":513,"cssLen":879,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae\n dolores, possimus pariatur animi temporibus nesciunt praesentium \n

","css":".card {\n max-width: 300px;\n border-radius: 0.5rem;\n background-color: #fff;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n border: 1px solid transparent;\n}\n\n.card a {\n text-decoration: none\n}\n\n.content {\n padding: 1.1rem;\n}\n\n.image {\n object-fit: cover;\n width: 100%;\n height: 150px;\n background-color: rgb(239, 205, 255);\n}\n\n.title {\n color: #111827;\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 600;\n}\n\n.desc {\n margin-top: 0.5rem;\n color: #6B7280;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.action {\n display: inline-flex;\n margin-top: 1rem;\n color: #ffffff;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n align-items: center;\n gap: 0.25rem;\n background-color: #2563EB;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.action span {\n transition: .3s ease;\n}\n\n.action:hover span {\n transform: translateX(4px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"046a1e","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":774,"cssLen":1092,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

\n","css":".card {\n position: relative;\n width: 300px;\n height: 200px;\n background-color: #f2f2f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n box-shadow: 0 0 0 5px #ffffff80;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card svg {\n width: 48px;\n fill: #333;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);\n}\n\n.card__content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #f2f2f2;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n font-size: 24px;\n color: #333;\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 0;\n font-size: 14px;\n color: #777;\n line-height: 1.4;\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"0c2dfc","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4752,"cssLen":2733,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n uiverse.io\n

\n universe of ui\n

","css":".card {\n width: 300px;\n height: 200px;\n background: #243137;\n position: relative;\n display: grid;\n place-content: center;\n border-radius: 10px;\n overflow: hidden;\n transition: all 0.5s ease-in-out;\n}\n\n#logo-main, #logo-second {\n height: 100%;\n}\n\n#logo-main {\n fill: #bd9f67;\n}\n\n#logo-second {\n padding-bottom: 10px;\n fill: none;\n stroke: #bd9f67;\n stroke-width: 1px;\n}\n\n.border {\n position: absolute;\n inset: 0px;\n border: 2px solid #bd9f67;\n opacity: 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n}\n\n.bottom-text {\n position: absolute;\n left: 50%;\n bottom: 13px;\n transform: translateX(-50%);\n font-size: 6px;\n text-transform: uppercase;\n padding: 0px 5px 0px 8px;\n color: #bd9f67;\n background: #243137;\n opacity: 0;\n letter-spacing: 7px;\n transition: all 0.5s ease-in-out;\n}\n\n.content {\n transition: all 0.5s ease-in-out;\n}\n\n.content .logo {\n height: 35px;\n position: relative;\n width: 33px;\n overflow: hidden;\n transition: all 1s ease-in-out;\n}\n\n.content .logo .logo1 {\n height: 33px;\n position: absolute;\n left: 0;\n}\n\n.content .logo .logo2 {\n height: 33px;\n position: absolute;\n left: 33px;\n}\n\n.content .logo .trail {\n position: absolute;\n right: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n}\n\n.content .logo-bottom-text {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n margin-top: 30px;\n color: #bd9f67;\n padding-left: 8px;\n font-size: 11px;\n opacity: 0;\n letter-spacing: none;\n transition: all 0.5s ease-in-out 0.5s;\n}\n\n.card:hover {\n border-radius: 0;\n transform: scale(1.1);\n}\n\n.card:hover .logo {\n width: 134px;\n animation: opacity 1s ease-in-out;\n}\n\n.card:hover .border {\n inset: 15px;\n opacity: 1;\n transform: rotate(0);\n}\n\n.card:hover .bottom-text {\n letter-spacing: 3px;\n opacity: 1;\n transform: translateX(-50%);\n}\n\n.card:hover .content .logo-bottom-text {\n opacity: 1;\n letter-spacing: 9.5px;\n}\n\n.card:hover .trail {\n animation: trail 1s ease-in-out;\n}\n\n@keyframes opacity {\n 0% {\n border-right: 1px solid transparent;\n }\n\n 10% {\n border-right: 1px solid #bd9f67;\n }\n\n 80% {\n border-right: 1px solid #bd9f67;\n }\n\n 100% {\n border-right: 1px solid transparent;\n }\n}\n\n@keyframes trail {\n 0% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);\n opacity: 0;\n }\n\n 30% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);\n opacity: 1;\n }\n\n 70% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);\n opacity: 1;\n }\n\n 95% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"ffddc9","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":419,"cssLen":1485,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cookie-card {\n max-width: 320px;\n padding: 1rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);\n}\n\n.title {\n font-weight: 600;\n color: rgb(31 41 55);\n}\n\n.description {\n margin-top: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgb(75 85 99);\n}\n\n.description a {\n --tw-text-opacity: 1;\n color: rgb(59 130 246);\n}\n\n.description a:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 1rem;\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n flex-shrink: 0;\n}\n\n.pref {\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(31 41 55 );\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);\n border: none;\n background-color: transparent;\n}\n\n.pref:hover {\n color: rgb(156 163 175);\n}\n\n.pref:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.accept {\n font-size: 0.75rem;\n line-height: 1rem;\n background-color: rgb(17 24 39);\n font-weight: 500;\n border-radius: 0.5rem;\n color: #fff;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n border: none;\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.accept:hover {\n background-color: rgb(55 65 81);\n}\n\n.accept:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"d5e0a7","snapshot":null,"tags":null,"title":"card by vk-uiux","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1274,"cssLen":1528,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Favourites

Check all your favourites in one place.

","css":".card {\n width: 100%;\n max-width: 300px;\n min-width: 200px;\n height: 250px;\n background-color: #292929;\n margin: 10px;\n border-radius: 10px;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);\n border: 2px solid rgba(7, 7, 7, 0.12);\n font-size: 16px;\n transition: all 0.3s ease;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n cursor: pointer;\n font-family: 'Poppins', sans-serif;\n}\n\n.icon {\n margin: 0 auto;\n width: 100%;\n height: 80px;\n max-width: 80px;\n background: linear-gradient(90deg, #7eaaff 0%, #ff48fb 40%, rgba(0, 0, 0, 0.28) 60%);\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.8s ease;\n background-position: 0px;\n background-size: 200px;\n}\n\n.icon svg {\n fill: white;\n}\n\n.card .title {\n width: 100%;\n margin: 0;\n text-align: center;\n margin-top: 30px;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 4px;\n}\n\n.card .text {\n width: 80%;\n margin: 0 auto;\n font-size: 13px;\n text-align: center;\n margin-top: 20px;\n color: white;\n font-weight: 200;\n letter-spacing: 2px;\n opacity: 0;\n max-height: 0;\n transition: all 0.3s ease;\n}\n\n.card:hover {\n height: 270px;\n}\n\n.card:hover .text {\n transition: all 0.3s ease;\n opacity: 1;\n max-height: 40px;\n}\n\n.card:hover .icon {\n background-position: -120px;\n transition: all 0.3s ease;\n}\n\n.card:hover .icon svg path {\n fill: url('#gradientColor');\n transition: all 0.3s ease;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"b4cfb6","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5479,"cssLen":1544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

PINK CITY

PARTILY CLOUDY

\n \n \n \n

32°

Min

30°

Max

32°

\n","css":".cardContainer {\n width: fit-content;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n position: relative;\n width: 220px;\n height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 20px 10px;\n border-radius: 10px;\n backdrop-filter: blur(30px);\n background-color: rgba(65, 65, 65, 0.308);\n border: 1px solid rgba(255, 255, 255, 0.089);\n cursor: pointer;\n}\n\n.city {\n font-weight: 700;\n font-size: 0.9em;\n letter-spacing: 1.2px;\n color: white;\n}\n\n.weather {\n font-weight: 500;\n font-size: 0.7em;\n letter-spacing: 1.2px;\n color: rgb(197, 197, 197);\n}\n\n.temp {\n font-size: 1.8em;\n color: white;\n}\n\n.minmaxContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.min,\n.max {\n width: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n padding: 0px 20px;\n gap: 4px;\n}\n\n.max {\n align-items: flex-start;\n border-left: 2px solid white;\n}\n\n.maxHeading,\n.minHeading {\n font-size: 0.7em;\n font-weight: 600;\n color: white;\n}\n\n.maxTemp,\n.minTemp {\n font-size: 0.6em;\n font-weight: 500;\n color: rgb(197, 197, 197);\n}\n\n.cardContainer::before {\n width: 100px;\n height: 100px;\n content: \"\";\n position: absolute;\n background-color: rgb(144, 161, 255);\n z-index: -1;\n border-radius: 50%;\n left: 100px;\n top: 50px;\n transition: all 1s;\n}\n\n.cardContainer:hover::before {\n transform: translate(-50px, 50px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"5dccad","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":973,"cssLen":817,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

Your password isn't strong enough\n

Password must be at least !8 characters
Password must include Elon's baby name

","css":".notifications-container {\n width: 320px;\n height: auto;\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.error-alert {\n border-radius: 0.375rem;\n padding: 1rem;\n background-color: rgb(254 242 242);\n}\n\n.error-svg {\n color: #F87171;\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.error-prompt-heading {\n color: #991B1B;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: bold;\n}\n\n.error-prompt-container {\n display: flex;\n flex-direction: column;\n margin-left: 1.25rem;\n}\n\n.error-prompt-wrap {\n margin-top: 0.5rem;\n color: #B91C1C;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.error-prompt-list {\n padding-left: 1.25rem;\n margin-top: 0.25rem;\n list-style-type: disc;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"8bf264","snapshot":null,"tags":null,"title":"card by dylanharriscameron","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":78,"cssLen":1175,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n position: relative;\n width: 200px;\n height: 250px;\n border-radius: 14px;\n z-index: 1111;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;\n ;\n}\n\n.bg {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 190px;\n height: 240px;\n z-index: 2;\n background: rgba(255, 255, 255, .95);\n backdrop-filter: blur(24px);\n border-radius: 10px;\n overflow: hidden;\n outline: 2px solid white;\n}\n\n.blob {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background-color: #ff0000;\n opacity: 1;\n filter: blur(12px);\n animation: blob-bounce 5s infinite ease;\n}\n\n@keyframes blob-bounce {\n 0% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: translate(-100%, -100%) translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translate(-100%, -100%) translate3d(100%, 100%, 0);\n }\n\n 75% {\n transform: translate(-100%, -100%) translate3d(0, 100%, 0);\n }\n\n 100% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"77dd77","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1111,"cssLen":2276,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Starter\n \n

Suitable to grow steadily.

\n \n $25\n \n /mo \n

\n \n Get started\n \n

\n","css":".mt-2{margin-top:0.5rem}.mt-6{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.w-full{width:100%}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-8{padding-bottom:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-medium{font-weight:500}.tracking-tight{letter-spacing:-0.025em}.tracking-tighter{letter-spacing:-0.05em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.hover\\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.hover\\:bg-transparent:hover{background-color:transparent}.hover\\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-black:focus-visible{outline-color:#000}.focus-visible\\:ring-black:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\\:p-10{padding:2.5rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:pb-6{padding-bottom:1.5rem}}@media (min-width: 1024px){.lg\\:text-3xl{font-size:1.875rem;line-height:2.25rem}}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"48fe98","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":418,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(223, 225, 235);\n border-radius: 50px;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"1996a6","snapshot":null,"tags":null,"title":"card by satyamchaudharydev","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":823,"cssLen":1199,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Title\n

Lorem ipsum dolor sit amet consectetur adipisicing elit.

\n April 15, 2022\n

\n \n

","css":"/* this card is inspired form this - https://georgefrancis.dev/ */\n\n.card {\n --border-radius: 0.75rem;\n --primary-color: #7257fa;\n --secondary-color: #3c3852;\n width: 210px;\n font-family: \"Arial\";\n padding: 1rem;\n cursor: pointer;\n border-radius: var(--border-radius);\n background: #f1f1f3;\n box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);\n position: relative;\n}\n\n.card > * + * {\n margin-top: 1.1em;\n}\n\n.card .card__content {\n color: var(--secondary-color);\n font-size: 0.86rem;\n}\n\n.card .card__title {\n padding: 0;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n.card .card__date {\n color: #6e6b80;\n font-size: 0.8rem;\n}\n\n.card .card__arrow {\n position: absolute;\n background: var(--primary-color);\n padding: 0.4rem;\n border-top-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n bottom: 0;\n right: 0;\n transition: 0.2s;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card svg {\n transition: 0.2s;\n}\n\n/* hover */\n.card:hover .card__title {\n color: var(--primary-color);\n text-decoration: underline;\n}\n\n.card:hover .card__arrow {\n background: #111;\n}\n\n.card:hover .card__arrow svg {\n transform: translateX(3px);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"34b7f3","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1161,"cssLen":698,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".info {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #509AF8;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.info__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.info__icon path {\n fill: #fff;\n}\n\n.info__title {\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n}\n\n.info__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.info__close path {\n fill: #fff;\n}"}]}},"actionData":null,"errors":null}