{"loaderData":{"0":null,"0-2":{"total":7187,"projects":[{"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}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"32b041","snapshot":null,"tags":null,"title":"card by mrhyddenn","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":1275,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card_box {\n width: 200px;\n height: 250px;\n border-radius: 20px;\n background: linear-gradient(170deg, rgba(58, 56, 56, 0.623) 0%, rgb(31, 31, 31) 100%);\n position: relative;\n box-shadow: 0 25px 50px rgba(0,0,0,0.55);\n cursor: pointer;\n transition: all .3s;\n}\n\n.card_box:hover {\n transform: scale(0.9);\n}\n\n.card_box span {\n position: absolute;\n overflow: hidden;\n width: 150px;\n height: 150px;\n top: -10px;\n left: -10px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card_box span::before {\n content: 'Premium';\n position: absolute;\n width: 150%;\n height: 40px;\n background-image: linear-gradient(45deg, #ff6547 0%, #ffb144 51%, #ff7053 100%);\n transform: rotate(-45deg) translateY(-20px);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n box-shadow: 0 5px 10px rgba(0,0,0,0.23);\n}\n\n.card_box span::after {\n content: '';\n position: absolute;\n width: 10px;\n bottom: 0;\n left: 0;\n height: 10px;\n z-index: -1;\n box-shadow: 140px -140px #cc3f47;\n background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"1b758f","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5119,"cssLen":1456,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Draggable\n \n

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown

Feb 24

\n \n \n \n +20\n

\n \n

","css":".task {\n position: relative;\n color: #2e2e2f;\n cursor: move;\n background-color: #fff;\n padding: 1rem;\n border-radius: 8px;\n box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;\n margin-bottom: 1rem;\n border: 3px dashed transparent;\n max-width: 350px;\n}\n\n.task:hover {\n box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;\n border-color: rgba(162, 179, 207, 0.2) !important;\n}\n\n.task p {\n font-size: 15px;\n margin: 1.2rem 0;\n}\n\n.tag {\n border-radius: 100px;\n padding: 4px 13px;\n font-size: 12px;\n color: #ffffff;\n background-color: #1389eb;\n}\n\n.tags {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.options {\n background: transparent;\n border: 0;\n color: #c4cad3;\n font-size: 17px;\n}\n\n.options svg {\n fill: #9fa4aa;\n width: 20px;\n}\n\n.stats {\n position: relative;\n width: 100%;\n color: #9fa4aa;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.stats div {\n margin-right: 1rem;\n height: 20px;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.stats svg {\n margin-right: 5px;\n height: 100%;\n stroke: #9fa4aa;\n}\n\n.viewer span {\n height: 30px;\n width: 30px;\n background-color: rgb(28, 117, 219);\n margin-right: -10px;\n border-radius: 50%;\n border: 1px solid #fff;\n display: grid;\n align-items: center;\n text-align: center;\n font-weight: bold;\n color: #fff;\n padding: 2px;\n}\n\n.viewer span svg {\n stroke: #fff;\n}\n\n\n"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"aa4283","snapshot":null,"tags":null,"title":"card by Sharkotech","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":972,"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: rgba(211, 211, 211, 0.199);\n position: absolute;\n transition: .3s ease-in-out;\n cursor: pointer;\n box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.3);\n}\n\n#c1 {\n background-color: black;\n}\n\n#c2 {\n background-color: blue;\n}\n\n#c3 {\n background-color: red;\n}\n\n#c4 {\n background-color: green;\n}\n\n.main:hover #c1 {\n transform: translateX(-100px) rotate(-40deg);\n}\n\n.main:hover #c2 {\n transform: translateX(-50px) rotate(-30deg);\n}\n\n.main:hover #c3 {\n transform: translateX(0) rotate(-20deg);\n}\n\n.main:hover #c4 {\n transform: translateX(50px) rotate(-10deg);\n}\n\n#c1:hover {\n transform: translateX(-150px) rotate(0deg) !important;\n}\n\n#c2:hover {\n transform: translateX(-100px) rotate(0deg) !important;\n}\n\n#c3:hover {\n transform: translateX(-50px) rotate(0deg) !important;\n}\n\n#c4:hover {\n transform: translateX(50px) rotate(0deg) !important;\n}\n\n.main {\n display: grid;\n height: 50vmax;\n place-items: center;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"f167f8","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3146,"cssLen":1438,"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

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(38, 38, 38);\n box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.333);\n}\n\n.imge {\n height: 70px;\n background-color: #ff5858;\n}\n\n.imge .Usericon {\n background-color: #414141;\n transform: translateX(10px) translateY(10px);\n width: 50px;\n height: 50px;\n border-radius: 10px;\n}\n\n.imge .UserName {\n background-color: #414141;\n width: 60px;\n height: 15px;\n border-width: 10px;\n border-radius: 5px;\n border-color: #262626;\n color: #262626;\n font-size: 15px;\n font-weight: bold;\n transform: translateX(70px) translateY(-35px);\n}\n\n.imge .Id {\n background-color: #414141;\n width: 100px;\n height: 15px;\n border-width: 10px;\n border-radius: 5px;\n border-color: #262626;\n color: #262626;\n font-size: 15px;\n font-weight: bold;\n transform: translateX(70px) translateY(-25px);\n}\n\n.Description {\n border-color: #141414;\n background-color: #414141;\n transform: translate(5px, 6px);\n width: 180px;\n height: 130px;\n border-radius: 5px;\n}\n\n/*______Social Media______*/\n.social-media:before {\n content: \" \";\n display: block;\n width: 100%;\n height: 2px;\n transform: translatey(10px);\n background: #414141;\n}\n\n.social-media a {\n margin-right: 15px;\n text-decoration: none;\n color: inherit;\n}\n\n.social-media a:last-child {\n margin-right: 0;\n}\n\n.social-media a svg {\n color: #ff5858;\n transform: translatex(25px) translateY(20px);\n width: 20px;\n fill: currentColor;\n}"},{"created":"2024-01-22T17:10:55.000Z","isPrivate":0,"projectId":"b85558","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:55.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":200,"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: lightgrey;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;\n}"}]}},"actionData":null,"errors":null}