{"loaderData":{"0":null,"0-2":{"total":7180,"projects":[{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"0d5ee6","snapshot":null,"tags":null,"title":"card by Gaurav-WebDev","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":942,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

","css":".cards {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.cards .red {\n background-color: #f43f5e;\n}\n\n.cards .blue {\n background-color: #3b82f6;\n}\n\n.cards .green {\n background-color: #22c55e;\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n height: 100px;\n width: 250px;\n border-radius: 10px;\n color: white;\n cursor: pointer;\n transition: 400ms transform, 400ms box-shadow, 400ms background-color;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n}\n\n.cards .card p.tip {\n font-size: 1em;\n font-weight: 700;\n}\n\n.cards .card p.second-text {\n font-size: 0.7em;\n}\n\n.cards .card:hover {\n transform: scale(1.1);\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);\n background-color: rgba(255, 255, 255, 0.1);\n color: #333;\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(10px);\n transform: scale(0.9);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"54c546","snapshot":null,"tags":null,"title":"card by Sashank02","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":347,"cssLen":747,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card title

\n Nullam ac tristique nulla, at convallis quam. Integer consectetur mi nec magna tristique, non lobortis.\n

\n \n

","css":".card {\n padding: 20px;\n width: 330px;\n min-height: 370px;\n border-radius: 20px;\n background: #212121;\n box-shadow: 5px 5px 8px #1b1b1b,\n -5px -5px 8px #272727;\n transition: 0.4s;\n}\n\n.card:hover {\n translate: 0 -10px;\n}\n\n.card-title {\n font-size: 18px;\n font-weight: 600;\n color: #b2eccf;\n margin: 15px 0 0 10px;\n}\n\n.card-image {\n min-height: 170px;\n background-color: #313131;\n border-radius: 15px;\n background: #313131;\n box-shadow: inset 5px 5px 3px #2f2f2f,\n inset -5px -5px 3px #333333;\n}\n\n.card-body {\n margin: 13px 0 0 10px;\n color: rgb(184, 184, 184);\n font-size: 15px;\n}\n\n.footer {\n float: right;\n margin: 28px 0 0 18px;\n font-size: 13px;\n color: #b3b3b3;\n}\n\n.by-name {\n font-weight: 700;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"ccf57d","snapshot":null,"tags":null,"title":"card by martinval9","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":300,"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: rgb(40,40,55);\n background: linear-gradient(344deg, rgba(40,40,55,1) 0%, rgba(16,16,18,1) 50%);\n box-shadow: 4px 6px 14px #00000036;\n border-radius: 3px;\n color: #F9F9F9;\n padding: 16px;\n transition: all .3s;\n}\n\n.card:hover {\n margin-top: -30px;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"756470","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1383,"cssLen":1481,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

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}\n\n.card-container::before {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.card {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n}\n\n.card .img-content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n transition: scale 0.6s, rotate 0.6s, filter 1s;\n}\n\n.card .img-content svg {\n width: 50px;\n height: 50px;\n fill: #e8e8e8;\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 color: #e8e8e8;\n padding: 20px;\n line-height: 1.5;\n border-radius: 5px;\n opacity: 0;\n pointer-events: none;\n transform: translateY(50px);\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 opacity: 1;\n transform: translateY(0);\n}\n\n.card:hover .img-content {\n scale: 2.5;\n rotate: 30deg;\n filter: blur(7px);\n}\n\n.card:hover .img-content svg {\n fill: transparent;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"390161","snapshot":null,"tags":null,"title":"card by javierBarroso","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":482,"cssLen":954,"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 adipisicing elit. Possimus pariatur animi praesentium\n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #f4f4f3;\n border-radius: 8px;\n z-index: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.card::after {\n position: absolute;\n content: '';\n background-color: #454a50;\n width: 50px;\n height: 100px;\n z-index: -1;\n border-radius: 8px;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n border-radius: 8px;\n background: #454a50;\n margin-top: -2px;\n}\n\n.circle {\n padding: 0 4px;\n}\n\n.card__content {\n height: 100%;\n margin: 0px;\n border-radius: 8px;\n background: #f4f4f3;\n padding: 10px;\n}\n\n.title {\n font-size: 20px;\n}\n\n.content {\n margin-top: 10px;\n font-size: 14px;\n}\n\n.box {\n display: inline-block;\n align-items: center;\n width: 10px;\n height: 10px;\n padding: 1px;\n border-radius: 50%;\n}\n\n.red {\n background-color: #ff605c;\n}\n\n.yellow {\n background-color: #ffbd44;\n}\n\n.green {\n background-color: #00ca4e;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"b56564","snapshot":null,"tags":null,"title":"card by VashonG","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2021,"cssLen":3609,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

TITLE

\n \n \n \n

\n","css":".card {\n position: relative;\n height: 300px;\n width: 230px;\n}\n.card:nth-child(2) {\n filter: hue-rotate(300deg) brightness(1.3);\n}\n.card:nth-child(3) {\n filter: hue-rotate(200deg) brightness(1.5);\n}\n.card:nth-child(4) {\n filter: hue-rotate(60deg) brightness(3);\n}\n.card .boxshadow {\n position: absolute;\n height: 100%;\n width: 100%;\n border: 1px solid rgb(0, 217, 255);\n transform: scale(0.8);\n box-shadow: rgb(0, 217, 255) 0px 30px 70px 0px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main {\n width: 230px;\n height: 300px;\n overflow: hidden;\n background: rgb(0, 255, 149);\n background: linear-gradient(\n 0deg,\n #3e0000 0%,\n rgb(0, 247, 255) 60%,\n #3e0000 100%\n );\n position: relative;\n clip-path: polygon(\n 0 0,\n 100% 0,\n 100% 40px,\n 100% calc(100% - 40px),\n calc(100% - 40px) 100%,\n 40px 100%,\n 0 calc(100% - 40px)\n );\n box-shadow: rgb(0, 132, 255) 0px 7px 29px 0px;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .top {\n position: absolute;\n top: 0px;\n left: 0;\n width: 0px;\n height: 0px;\n z-index: 2;\n border-top: 115px solid black;\n border-left: 115px solid transparent;\n border-right: 115px solid transparent;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .side {\n position: absolute;\n width: 100%;\n top: 0;\n transform: translateX(-50%);\n height: 101%;\n background: black;\n clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;\n}\n.card .main .left {\n left: 0;\n}\n.card .main .right {\n right: 0;\n transform: translateX(50%) scale(-1, 1);\n}\n.card .main .title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 90px;\n font-weight: bold;\n font-size: 25px;\n opacity: 0;\n z-index: -1;\n transition: all 0.2s ease-out 0s;\n}\n.card .main .button-container {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n}\n.card .main .button-container .button {\n position: absolute;\n transform: translateX(-50%);\n padding: 5px 10px;\n clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);\n background: black;\n border: none;\n color: white;\n display: grid;\n place-content: center;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .button-container .button .svg {\n width: 15px;\n transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.card .main .button-container .button:nth-child(1) {\n bottom: 300px;\n transition-delay: 0.4s;\n}\n.card .main .button-container .button:nth-child(2) {\n bottom: 300px;\n transition-delay: 0.6s;\n}\n.card .main .button-container .button:nth-child(3) {\n bottom: 300px;\n transition-delay: 0.8s;\n}\n.card .main .button-container .button:hover .svg {\n transform: scale(1.2);\n}\n.card .main .button-container .button:active .svg {\n transform: scale(0.7);\n}\n.card:hover .main {\n transform: scale(1.1);\n}\n.card:hover .main .top {\n top: -50px;\n}\n.card:hover .main .left {\n left: -50px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;\n}\n.card:hover .main .right {\n right: -50px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;\n}\n.card:hover .main .title {\n opacity: 1;\n transition: all 0.2s ease-out 1.3s;\n}\n.card:hover .main .button-container .button:nth-child(1) {\n bottom: 80px;\n transition-delay: 0.8s;\n}\n.card:hover .main .button-container .button:nth-child(2) {\n bottom: 40px;\n transition-delay: 0.6s;\n}\n.card:hover .main .button-container .button:nth-child(3) {\n bottom: 0;\n transition-delay: 0.4s;\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"78d2d2","snapshot":null,"tags":null,"title":"card by uctteam","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4300,"cssLen":2838,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

2000

lorem

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

\n \n

1999

lorem

\n\n \n \n \n \n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.right-\\[10\\%\\]{right:10%}.top-\\[50\\%\\]{top:50%}.grid{display:grid}.w-\\[700px\\]{width:700px}.w-full{width:100%}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%;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))}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.gap-2{gap:0.5rem}.rounded-lg{border-radius:0.5rem}.bg-\\[\\#673ab7\\]{--tw-bg-opacity:1;background-color:rgb(103 58 183 / var(--tw-bg-opacity))}.bg-\\[rgb\$41\\2c 49\\2c 79\$\\]{--tw-bg-opacity:1;background-color:rgb(41 49 79 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-20{opacity:0.2}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\\:translate-y-\\[3px\\]:hover{--tw-translate-y:3px;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\\:shadow-\\[0_-8px_0px_0px_\\#2196f3\\]:hover{--tw-shadow:0 -8px 0px 0px #2196f3;--tw-shadow-colored:0 -8px 0px 0px 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\\:shadow-\\[0_-8px_0px_0px_rgb\$244\\2c 67\\2c 54\$\\]:hover{--tw-shadow:0 -8px 0px 0px rgb(244,67,54);--tw-shadow-colored:0 -8px 0px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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))}.group:hover .group-hover\\:opacity-100{opacity:1}@media (max-width: 500px){.max-\\[500px\\]\\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"b9cbc3","snapshot":null,"tags":null,"title":"card by Rodrypaladin","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":469,"cssLen":2732,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Category\n

This is the article title

Lorem ipsum dolor sit amet consectetur adipiscing elit, donec suspendisse vulputate dictumst enim per mus imperdiet, platea non massa dictum tempus sapien.

\n \n

","css":".card {\n width: 275px;\n position: relative;\n background: rgb(255, 255, 255);\n padding: 20px;\n}\n\n.card::after {\n z-index: -1;\n content: \"\";\n position: absolute;\n width: 50%;\n height: 10px;\n bottom: 15px;\n right: 0;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);\n transform: rotate(5deg);\n transition: all 0.1s ease-in;\n}\n\n.card::before {\n z-index: -1;\n content: \"\";\n position: absolute;\n width: 50%;\n height: 10px;\n bottom: 15px;\n left: 0;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);\n transform: rotate(-5deg);\n transition: all 0.1s ease-in;\n}\n\n.card:hover:before, .card:hover:after {\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.6);\n}\n\n.card:hover:before {\n transform: rotate(-8deg);\n}\n\n.card:hover:after {\n transform: rotate(8deg);\n}\n\n.card__img {\n position: relative;\n background: #FFFFFF;\n background: linear-gradient(315deg, #68aeff, #0032a6);\n width: 100%;\n height: 175px;\n}\n\n.card__span {\n cursor: pointer;\n font-size: 11px;\n position: absolute;\n background-color: white;\n top: 10px;\n left: 10px;\n padding: 3px 7px;\n box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);\n transition: transform 0.1s ease-in;\n user-select: none;\n}\n\n.card__span:hover {\n transform: translateX(5px);\n}\n\n.card-int {\n padding: 20px 0 0 0;\n}\n\n.card-int__title {\n font-weight: bold;\n font-size: 1.2rem;\n font-family: Arial, Helvetica, sans-serif;\n margin-bottom: 10px;\n}\n\n.card-int__button {\n cursor: pointer;\n margin: 20px 0 0 0;\n padding: 7px 20px;\n width: 100%;\n background-color: rgb(238, 246, 255);\n border: none;\n color: black;\n position: relative;\n overflow: hidden;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);\n transition: box-shadow 0.1s ease-in;\n user-select: none;\n}\n\n.card-int__button:active {\n box-shadow: 0px 0px 15px rgba(0, 119, 255, 0.5);\n}\n\n.card-int__button:hover::before {\n animation: effect_two 0.4s 1;\n}\n\n.card-int__button::before {\n content: 'More for this article';\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n background: rgb(0,133,255);\n background: linear-gradient(146deg, #0032a6 0%, #68aeff 100%);\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform: translateX(-99%);\n z-index: 1;\n animation: effect_one 10s infinite;\n}\n\n.card-int__button:hover::before {\n transform: translateX(0%);\n}\n\n.excerpt {\n font-size: 14px;\n}\n\n@keyframes effect_one {\n 0% {\n transform: translateX(-99%);\n }\n\n 25% {\n transform: translateX(-90%);\n }\n\n 50% {\n transform: translateX(-80%);\n }\n\n 75% {\n transform: translateX(-95%);\n }\n\n 100% {\n transform: translateX(-99%);\n }\n}\n\n@keyframes effect_two {\n to {\n transform: translateX(-1%);\n }\n\n from {\n transform: translateX(-99%);\n }\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"b908c5","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4704,"cssLen":1395,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".social-card {\n height: fit-content;\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n background: rgb(255, 255, 255);\n padding: 20px 25px;\n border-radius: 14px;\n}\n.Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n z-index: 2;\n}\n\n.BG {\n position: absolute;\n width: 100%;\n height: 100%;\n background: #181818;\n z-index: 1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n font-size: 0px;\n}\n.github .BG {\n background: #181818;\n}\n.linkdin .BG {\n background: #0077b5;\n}\n.whatsapp .BG {\n background: #075e54;\n}\n.discord .BG {\n background: #7289da;\n}\n.Btn:hover .BG {\n transform: scale(1.5);\n /* transform-origin: bottom; */\n font-size: 20px;\n color: white;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(216, 216, 216, 0.466);\n background-color: rgba(209, 209, 209, 0.466);\n backdrop-filter: blur(4px);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"8759bc","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":707,"cssLen":1483,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n $\"\"$ \n

\n Card title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non\n dolor augue. Nunc dictum erat sit amet iaculis interdum. Ut neque\n tellus, congue vel lectus aliquam, dignissim porttitor velit.\n

\n \n See more\n \n\n","css":".line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.flex {\n display: flex;\n}\n.h-24 {\n height: 6rem;\n}\n.h-40 {\n height: 10rem;\n}\n.w-24 {\n width: 6rem;\n}\n.w-72 {\n width: 18rem;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-col {\n flex-direction: column;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.bg-indigo-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(99 102 241 / var(--tw-bg-opacity));\n}\n.bg-neutral-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(250 250 250 / var(--tw-bg-opacity));\n}\n.bg-purple-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(233 213 255 / var(--tw-bg-opacity));\n}\n.p-2 {\n padding: 0.5rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.italic {\n font-style: italic;\n}\n.text-indigo-500 {\n --tw-text-opacity: 1;\n color: rgb(99 102 241 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),\n 0 1px 2px -1px 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.hover\\:bg-purple-300:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(216 180 254 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"6a2779","snapshot":null,"tags":null,"title":"card by stlyash","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":844,"cssLen":1588,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea quo unde\n vel adipisci blanditiis voluptates eum. Nam, cum minima?\n

\n\n

\n Take a Look \n\n Mark as Read \n

\n","css":".card {\n max-width: 320px;\n border-width: 1px;\n border-color: rgba(219, 234, 254, 1);\n border-radius: 1rem;\n background-color: rgba(255, 255, 255, 1);\n padding: 1rem;\n}\n\n.header {\n display: flex;\n align-items: center;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background-color: rgba(96, 165, 250, 1);\n padding: 0.5rem;\n color: rgba(255, 255, 255, 1);\n}\n.closeButton {\n border: none;\n margin-left: 23%;\n border-radius: 0.6rem;\n font-size: 1rem;\n height: 2rem;\n width: 2rem;\n display: grid;\n place-items: center;\n transition: background-color ease 0.25s;\n}\n.closeButton:hover {\n background-color: rgba(230, 25, 25, 1);\n color: white;\n}\n.icon svg {\n height: 1rem;\n width: 1rem;\n}\n\n.alert {\n font-weight: 600;\n color: rgba(107, 114, 128, 1);\n}\n\n.message {\n margin-top: 1rem;\n color: rgba(107, 114, 128, 1);\n}\n\n.actions {\n margin-top: 1.5rem;\n}\n\n.actions a {\n text-decoration: none;\n}\n\n.mark-as-read,\n.read {\n display: inline-block;\n border-radius: 0.5rem;\n width: 100%;\n padding: 0.75rem 1.25rem;\n text-align: center;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n}\n\n.read {\n background-color: rgba(59, 130, 246, 1);\n color: rgba(255, 255, 255, 1);\n}\n.read:hover {\n background-color: rgba(17, 104, 245, 1);\n}\n\n.mark-as-read {\n margin-top: 0.5rem;\n background-color: rgba(249, 250, 251, 1);\n color: rgba(107, 114, 128, 1);\n transition: all 0.15s ease;\n}\n\n.mark-as-read:hover {\n background-color: rgb(230, 231, 233);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"7d2d25","snapshot":null,"tags":null,"title":"card by Valeron-T","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5627,"cssLen":1729,"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 display: flex;\n height: 70px;\n width: 350px;\n}\n\n.card svg {\n position: absolute;\n display: flex;\n width: 60%;\n height: 100%;\n font-size: 24px;\n font-weight: 700;\n opacity: 1;\n transition: opacity 0.25s;\n z-index: 2;\n padding: 0.25rem;\n cursor: pointer;\n}\n\n.card .social-link1,.card .social-link2,.card .social-link3,.card .social-link4,.card .social-link5 {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25%;\n color: whitesmoke;\n font-size: 24px;\n text-decoration: none;\n transition: 0.25s;\n border-radius: 50px;\n}\n\n.card svg {\n transform: scale(1);\n}\n\n.card .social-link1:hover {\n background: #f09433;\n background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\n background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link2:hover {\n background-color: #242c34;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link3:hover {\n background-color: #5865f2;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link4:hover {\n background-color: #0a66c2;\n animation: bounce_613 0.4s linear;\n}\n\n.card .social-link5:hover {\n background-color: #ff8000;\n animation: bounce_613 0.4s linear;\n}\n\n@keyframes bounce_613 {\n 40% {\n transform: scale(1.4);\n }\n\n 60% {\n transform: scale(0.8);\n }\n\n 80% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"}]}},"actionData":null,"errors":null}