{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"7aa111","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":609,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 200px;\n height: 250px;\n border: none;\n border-radius: 10px;\n background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);\n background-blend-mode: normal, normal, screen, overlay, normal;\n box-shadow: 0px 0px 10px 1px #000000;\n}\n\n\n\n"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"75a44a","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":165,"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 border-radius: 30px;\n background: #e0e0e0;\n box-shadow: 15px 15px 30px #bebebe,\n -15px -15px 30px #ffffff;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"deda6c","snapshot":null,"tags":null,"title":"card by Samalander0","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1321,"cssLen":1168,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 01.\n

Lightning.

Hover Me?

\n \n

","css":".card {\n width: 320px;\n background: #fff480;\n color: black;\n position: relative;\n border-radius: 2.5em;\n padding: 2em;\n transition: transform 0.4s ease;\n}\n\n.card .card-content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5em;\n height: 100%;\n transition: transform 0.4s ease;\n}\n\n.card .card-top, .card .card-bottom {\n display: flex;\n justify-content: space-between;\n}\n\n.card .card-top p, .card .card-top .card-title, .card .card-bottom p, .card .card-bottom .card-title {\n margin: 0;\n}\n\n.card .card-title {\n font-weight: bold;\n}\n\n.card .card-top p, .card .card-bottom p {\n font-weight: 600;\n}\n\n.card .card-bottom {\n align-items: flex-end;\n}\n\n.card .card-image {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: grid;\n place-items: center;\n pointer-events: none;\n}\n\n.card .card-image svg {\n width: 4em;\n height: 4em;\n transition: transform 0.4s ease;\n}\n\n.card:hover {\n cursor: pointer;\n transform: scale(0.97);\n}\n\n.card:hover .card-content {\n transform: scale(0.96);\n}\n\n.card:hover .card-image svg {\n transform: scale(1.05);\n}\n\n.card:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"82b4bb","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5798,"cssLen":2389,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

MASTERCARD

\n \n \n \n

9759 2484 5269 6576

VALID THRU

1 2 / 2 4

BRUCE WAYNE

***

","css":".flip-card {\n background-color: transparent;\n width: 240px;\n height: 154px;\n perspective: 1000px;\n color: white;\n}\n\n.heading_8264 {\n position: absolute;\n letter-spacing: .2em;\n font-size: 0.5em;\n top: 2em;\n left: 18.6em;\n}\n\n.logo {\n position: absolute;\n top: 6.8em;\n left: 11.7em;\n}\n\n.chip {\n position: absolute;\n top: 2.3em;\n left: 1.5em;\n}\n\n.contactless {\n position: absolute;\n top: 3.5em;\n left: 12.4em;\n}\n\n.number {\n position: absolute;\n font-weight: bold;\n font-size: .6em;\n top: 8.3em;\n left: 1.6em;\n}\n\n.valid_thru {\n position: absolute;\n font-weight: bold;\n top: 635.8em;\n font-size: .01em;\n left: 140.3em;\n}\n\n.date_8264 {\n position: absolute;\n font-weight: bold;\n font-size: 0.5em;\n top: 13.6em;\n left: 3.2em;\n}\n\n.name {\n position: absolute;\n font-weight: bold;\n font-size: 0.5em;\n top: 16.1em;\n left: 2em;\n}\n\n.strip {\n position: absolute;\n background-color: black;\n width: 15em;\n height: 1.5em;\n top: 2.4em;\n background: repeating-linear-gradient(\n 45deg,\n #303030,\n #303030 10px,\n #202020 10px,\n #202020 20px\n );\n}\n\n.mstrip {\n position: absolute;\n background-color: rgb(255, 255, 255);\n width: 8em;\n height: 0.8em;\n top: 5em;\n left: .8em;\n border-radius: 2.5px;\n}\n\n.sstrip {\n position: absolute;\n background-color: rgb(255, 255, 255);\n width: 4.1em;\n height: 0.8em;\n top: 5em;\n left: 10em;\n border-radius: 2.5px;\n}\n\n.code {\n font-weight: bold;\n text-align: center;\n margin: .2em;\n color: black;\n}\n\n.flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.flip-card:hover .flip-card-inner {\n transform: rotateY(180deg);\n}\n\n.flip-card-front, .flip-card-back {\n box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: 1rem;\n}\n\n.flip-card-front {\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;\n background-color: #171717;\n}\n\n.flip-card-back {\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;\n background-color: #171717;\n transform: rotateY(180deg);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"8708e4","snapshot":null,"tags":null,"title":"card by eslam-hany","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":1388,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello

Hover Me

","css":".book {\n position: relative;\n border-radius: 10px;\n width: 220px;\n height: 300px;\n background-color: whitesmoke;\n -webkit-box-shadow: 1px 1px 12px #000;\n box-shadow: 1px 1px 12px #000;\n -webkit-transform: preserve-3d;\n -ms-transform: preserve-3d;\n transform: preserve-3d;\n -webkit-perspective: 2000px;\n perspective: 2000px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n color: #000;\n}\n\n.cover {\n top: 0;\n position: absolute;\n background-color: lightgray;\n width: 100%;\n height: 100%;\n border-radius: 10px;\n cursor: pointer;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n -webkit-transform-origin: 0;\n -ms-transform-origin: 0;\n transform-origin: 0;\n -webkit-box-shadow: 1px 1px 12px #000;\n box-shadow: 1px 1px 12px #000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.book:hover .cover {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n -webkit-transform: rotatey(-80deg);\n -ms-transform: rotatey(-80deg);\n transform: rotatey(-80deg);\n}\n\np {\n font-size: 20px;\n font-weight: bolder;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"4d7ec7","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6666,"cssLen":1898,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Web Design templates\n Selection

Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod.

135 Works / 45%

","css":".card {\n --main-color: #000;\n --bg-color: #EBD18D;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 300px;\n padding: 25px;\n background: var(--bg-color);\n border-radius: 20px;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.card___wrapper-acounts {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n z-index: 1;\n cursor: pointer;\n}\n\n.card___wrapper-acounts > div:nth-child(2) {\n position: absolute;\n left: 25px;\n z-index: -1;\n}\n\n.card___wrapper-acounts > div:nth-child(3) {\n position: absolute;\n left: 50px;\n z-index: -2;\n}\n\n.card__score {\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background: var(--main-color);\n}\n\n.card__acounts {\n width: 42px;\n height: 42px;\n}\n\n.card__acounts svg {\n width: 100%;\n height: 100%;\n}\n\n.card__menu {\n width: 40px;\n height: 40px;\n background: #F6DB96;\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.card__title {\n margin-top: 50px;\n font-weight: 900;\n font-size: 25px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 15px;\n font-weight: 400;\n font-size: 15px;\n color: var(--main-color);\n}\n\n.card__indicator {\n margin-top: 50px;\n font-weight: 500;\n font-size: 14px;\n color: var(--main-color);\n}\n\n.card__progress progress {\n width: 100%;\n height: 4px;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-bar {\n background-color: #00000030;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-value {\n background-color: var(--main-color);\n border-radius: 100px;\n}\n\n"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"f94b57","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2077,"cssLen":1623,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Download Now!\n Download our mobile application.\n Download Lorem mobile banking app for IOS & Android to manage your online money.\n

\n \n \n

\n Get it on\n Google Play\n

\n \n \n \n

\n Download from\n App Store\n

\n \n

","css":".card {\n max-width: 350px;\n background-color: rgb(7 16 45);\n background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));\n background: -webkit-linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));\n display: flex;\n flex-direction: column;\n padding: 20px;\n border-radius: 20px;\n border: 1px solid rgb(84 90 106);\n}\n\n.small-text, .title,.desc {\n font-weight: 600;\n}\n\n.title,.desc {\n margin: 8px 0;\n}\n\n.small-text {\n color: #488aec;\n font-size: 14px;\n}\n\n.title {\n color: #fff;\n font-size: 26px;\n line-height: 26px;\n}\n\n.desc {\n color: rgb(151 153 167);\n font-size: 13px;\n}\n\n.buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n margin-top: 10px;\n}\n\n.button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 10px;\n padding: 6px;\n text-decoration: none;\n}\n\n.button:first-child {\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n background-color: #488aec;\n}\n\n.button:last-child {\n box-shadow: 0 4px 6px -1px #0b162531, 0 2px 4px -1px #0e192b17;\n background-color: #fff;\n}\n\n.icon {\n height: 25px;\n width: 25px;\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n}\n\n.icon svg:last-child {\n fill: #000\n}\n\n.button-text {\n display: flex;\n flex-direction: column;\n margin-left: 8px;\n}\n\n.button-text span:first-child {\n font-size: 12px;\n font-weight: 600;\n}\n\n.google span:first-child {\n color: rgb(219 206 253);\n}\n\n.apple span:first-child {\n color: rgb(81 87 108);\n}\n\n.google span:last-child {\n color: #fff;\n font-weight: 800;\n}\n\n.apple span:last-child {\n color: #000;\n font-weight: 800;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"d33502","snapshot":null,"tags":null,"title":"card by Codewithvinay","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":162,"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 border-radius: 50px;\n background: #e0e0e0;\n box-shadow: 20px 20px 60px #bebebe,\n -20px -20px 60px #ffffff;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"1370af","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2302,"cssLen":1381,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Steve Jobs

CEO & Co-Founder

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n background: #f5f5f5;\n padding: 2rem 1.5rem;\n transition: box-shadow .3s ease, transform .2s ease;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: transform .2s ease, opacity .2s ease;\n}\n\n/*Image*/\n.card-avatar {\n --size: 60px;\n background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n transition: transform .2s ease;\n margin-bottom: 1rem;\n}\n\n\n/*Card footer*/\n.card-social {\n transform: translateY(200%);\n display: flex;\n justify-content: space-around;\n width: 100%;\n opacity: 0;\n transition: transform .2s ease, opacity .2s ease;\n}\n\n.card-social__item {\n list-style: none;\n}\n\n.card-social__item svg {\n display: block;\n height: 18px;\n width: 18px;\n fill: #515F65;\n cursor: pointer;\n transition: fill 0.2s ease ,transform 0.2s ease;\n}\n\n/*Text*/\n.card-title {\n color: #333;\n font-size: 1.5em;\n font-weight: 600;\n line-height: 2rem;\n}\n\n.card-subtitle {\n color: #859ba8;\n font-size: 0.8em;\n}\n\n/*Hover*/\n.card:hover {\n box-shadow: 0 8px 50px #23232333;\n}\n\n.card:hover .card-info {\n transform: translateY(-5%);\n}\n\n.card:hover .card-social {\n transform: translateY(100%);\n opacity: 1;\n}\n\n.card-social__item svg:hover {\n fill: #232323;\n transform: scale(1.1);\n}\n\n.card-avatar:hover {\n transform: scale(1.1);\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"e39e39","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1510,"cssLen":1802,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t$49 / m\n\t\t\t\t\n\t\t\t\n\t\t\t

Professional

\n\t\t\t

This plan is for those who have a team already and running a large business.

\n\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\t20 team members\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\tPlan team meetings\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\tFile sharing\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t\tChoose plan\n\t\t\t\n\t\t\t

\n\t\t

\n\t

","css":".plan {\n border-radius: 16px;\n box-shadow: 0 30px 30px -25px rgba(0, 38, 255, 0.205);\n padding: 10px;\n background-color: #fff;\n color: #697e91;\n max-width: 300px;\n}\n\n.plan strong {\n font-weight: 600;\n color: #425275;\n}\n\n.plan .inner {\n align-items: center;\n padding: 20px;\n padding-top: 40px;\n background-color: #ecf0ff;\n border-radius: 12px;\n position: relative;\n}\n\n.plan .pricing {\n position: absolute;\n top: 0;\n right: 0;\n background-color: #bed6fb;\n border-radius: 99em 0 0 99em;\n display: flex;\n align-items: center;\n padding: 0.625em 0.75em;\n font-size: 1.25rem;\n font-weight: 600;\n color: #425475;\n}\n\n.plan .pricing small {\n color: #707a91;\n font-size: 0.75em;\n margin-left: 0.25em;\n}\n\n.plan .title {\n font-weight: 600;\n font-size: 1.25rem;\n color: #425675;\n}\n\n.plan .title + * {\n margin-top: 0.75rem;\n}\n\n.plan .info + * {\n margin-top: 1rem;\n}\n\n.plan .features {\n display: flex;\n flex-direction: column;\n}\n\n.plan .features li {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.plan .features li + * {\n margin-top: 0.75rem;\n}\n\n.plan .features .icon {\n background-color: #1FCAC5;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n}\n\n.plan .features .icon svg {\n width: 14px;\n height: 14px;\n}\n\n.plan .features + * {\n margin-top: 1.25rem;\n}\n\n.plan .action {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: end;\n}\n\n.plan .button {\n background-color: #6558d3;\n border-radius: 6px;\n color: #fff;\n font-weight: 500;\n font-size: 1.125rem;\n text-align: center;\n border: 0;\n outline: 0;\n width: 100%;\n padding: 0.625em 0.75em;\n text-decoration: none;\n}\n\n.plan .button:hover, .plan .button:focus {\n background-color: #4133B7;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"7e6a23","snapshot":null,"tags":null,"title":"card by satyamchaudharydev","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1326,"cssLen":1075,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Instagram\n \n

\n Get UI elements that help you stand out.\n

\n Follow us\n

","css":".card {\n --bg: #f7f7f8;\n --hover-bg: #FFE5F4;\n --hover-text: #E50087;\n max-width: 23ch;\n text-align: center;\n background: var(--bg);\n padding: 1.5em;\n padding-block: 1.8em;\n border-radius: 5px;\n position: relative;\n overflow: hidden;\n transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1em;\n}\n\n.card__body {\n color: #464853;\n line-height: 1.5em;\n font-size: 1em;\n}\n\n.card > :not(span) {\n transition: .3s cubic-bezier(.6,.4,0,1);\n}\n\n.card > strong {\n display: block;\n font-size: 1.4rem;\n letter-spacing: -.035em;\n}\n\n.card span {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--hover-text);\n border-radius: 5px;\n font-weight: bold;\n top: 100%;\n transition: all .3s cubic-bezier(.6,.4,0,1);\n}\n\n.card:hover span {\n top: 0;\n font-size: 1.2em;\n}\n\n.card:hover {\n background: var(--hover-bg);\n}\n\n.card:hover>div,.card:hover>strong {\n opacity: 0;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"1a63e5","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1541,"cssLen":1141,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n          .code-editor  {
\n\n          \n            max-width:\n            300px;\n          
\n          \n            background-color:\n            #1d1e22;\n          
\n          \n             box-shadow:\n            0px 4px 30px  rgba(0, 0, 0, 0.5);\n          
\n          \n            border-radius:\n            8px;\n          
\n          }\n

","css":".code-editor {\n max-width: 300px;\n background-color: #1d1e22;\n box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);\n border-radius: 8px;\n padding: 2px;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 10px;\n}\n\n.title {\n font-family: Lato, sans-serif;\n font-weight: 900;\n font-size: 14px;\n letter-spacing: 1.57px;\n color: rgb(212 212 212);\n}\n\n.icon {\n width: 20px;\n transition: .2s ease;\n}\n\n.icon:hover {\n cursor: pointer;\n border-radius: 50px;\n background-color: #6e7281;\n}\n\n.editor-content {\n margin: 0 10px 10px;\n color: white;\n}\n\n.property {\n margin-left: 30px;\n}\n\n.property:hover {\n cursor: text;\n}\n\n.editor-content .color-0 {\n color: rgb(86 156 214);\n}\n\n.editor-content .color-1 {\n color: rgb(182 206 168);\n}\n\n.editor-content .color-2 {\n color: rgb(156 220 254);\n}\n\n.editor-content .color-3 {\n color: rgb(207 146 120);\n}\n\n.color-preview-1,.color-preview-2 {\n height: 8px;\n width: 8px;\n border: 1px solid #fff;\n display: inline-block;\n margin-right: 3px;\n}\n\n.color-preview-1 {\n background-color: #1d1e22;\n}\n\n.color-preview-1 {\n background-color: rgba(0, 0, 0, 0.5);\n}"}]}},"actionData":null,"errors":null}