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

🫠

Easy Cheesy

This cheesy, juicy ultimate comforting lunch or quick and easy dinner recipe.

\n See the recipe\n

","css":".card {\n --background: #fff;\n --cardShadow: rgba(32,33,37,.1);\n --cardShadowHover: rgba(32,33,37,.06);\n --cardShadowActive: rgba(32,33,37,.55);\n --cardBorder: #dbdce0;\n --cardBorderActive: #1a73e8;\n --textColor: #202125;\n --linkColor: #1967d2;\n --ratingColor: #faab00;\n}\n\n@media (prefers-color-scheme: dark) {\n .card {\n --background: #3c4043;\n --cardShadow: rgba(0,0,0,.28);\n --cardShadowHover: rgba(0,0,0,.16);\n --cardShadowActive: rgba(0,0,0,.55);\n --cardBorder: #202125;\n --cardBorderActive: #8ab4f8;\n --textColor: #e9eaee;\n --linkColor: #8ab4f8;\n }\n}\n\n.card {\n width: 250px;\n height: 350px;\n aspect-ratio: 2/3;\n background: var(--background);\n color: var(--textColor);\n border: 1px solid var(--cardBorder);\n padding: 25px;\n box-shadow: 8px 8px 0 var(--cardShadow);\n transition: box-shadow .5s, transform .5s;\n border-radius: 8px;\n display: inline-block;\n}\n\n.card:hover {\n transform: translate(-2px, -4px);\n box-shadow: 16px 16px 0 var(--cardShadowHover);\n}\n\n.card:active {\n transform: translate(-2px, -4px);\n border: 2px solid var(--cardBorderActive);\n box-shadow: 4px 4px 0 var(--cardShadowActive);\n}\n\n.card > .icon,\n.card > .title,\n.card > .description {\n margin-bottom: 0.7em;\n cursor: default;\n user-select: none;\n}\n\n.card > .title {\n margin-top: 1.5em;\n font-weight: bold;\n}\n\n.card > .description {\n line-height: 1.5em;\n min-height: 6em;\n}\n\n.card > .icon {\n font-size: 3em;\n margin-bottom: .2em;\n}\n\n.card > .rating {\n font-size: 1.5em;\n margin-bottom: 0.8em;\n color: var(--ratingColor);\n font-weight: bold;\n position: relative;\n width: max-content;\n}\n\n.card > .rating:before {\n content: \"☆☆☆☆☆\";\n}\n\n.card > .rating:after {\n content: \"★★★★★\";\n position: absolute;\n left: 0;\n z-index: 0;\n width: calc(var(--rating) * 1%);\n overflow: hidden;\n}\n\n.card > .link {\n margin-bottom: 1rem;\n color: var(--linkColor);\n font-size: .8em;\n font-weight: 600;\n}\n\n/* Optional ~ Link the whole card */\n.card > .link::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.card > .link:after {\n content: \"↗\";\n display: inline-block;\n margin-left: .3em;\n transition: transform .3s ease-in-out;\n}\n\n.card:hover > .link:after {\n transform: translate(.2em, -.2em);\n}\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"e8c0eb","snapshot":null,"tags":null,"title":"card by xantha01","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2756,"cssLen":2795,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n
Picture 1

\n\n

\n \n
Picture 2

\n\n

\n \n
Picture 3

\n\n

\n \n
Picture 4

","css":".container {\n position: relative;\n width: 225px;\n height: 325px;\n cursor: pointer;\n}\n\n.card {\n position: absolute;\n inset: 2.5px;\n border-radius: 10px;\n transform-origin: bottom left;\n transition: 0.3s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #f1f4f7;\n font-weight: bold;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);\n}\n\n.container:hover .card:nth-child(1) {\n animation: cardAnimation1 4s 0.5s infinite ease;\n}\n\n.container:hover .card:nth-child(2) {\n animation: cardAnimation2 4s 1s infinite ease;\n}\n\n.container:hover .card:nth-child(3) {\n animation: cardAnimation3 4s 1.5s infinite ease;\n}\n\n.container:hover .card:nth-child(4) {\n animation: cardAnimation4 4s 2s infinite ease;\n}\n\n.card:nth-child(1) {\n background: linear-gradient(0deg, #4776e6 0%, #8e54e9 100%);\n}\n\n.card:nth-child(2) {\n background: linear-gradient(0deg, #b3ffab 0%, #12fff7 100%);\n opacity: 0;\n}\n\n.card:nth-child(3) {\n background: linear-gradient(178deg, #ffb99a 0%, #ffdbc5 100%);\n opacity: 0;\n}\n\n.card:nth-child(4) {\n background: linear-gradient(178deg, #606c88 0%, #3f4c6b 100%);\n opacity: 0;\n}\n\n@keyframes cardAnimation1 {\n 0% {\n transform: rotateZ(0deg);\n opacity: 0;\n z-index: -1;\n }\n\n 25% {\n transform: rotateZ(-20deg);\n opacity: 1;\n z-index: 0;\n }\n\n 50% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(20deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation2 {\n 0% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n\n 45% {\n transform: rotateZ(-15deg);\n z-index: 0;\n opacity: 1;\n }\n\n 60% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(15deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation3 {\n 0% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n\n 45% {\n transform: rotateZ(-20deg);\n z-index: 0;\n opacity: 0;\n }\n\n 60% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 75% {\n transform: rotateZ(20deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: -1;\n opacity: 0;\n }\n}\n\n@keyframes cardAnimation4 {\n 0% {\n transform: rotateZ(0deg);\n z-index: 0;\n opacity: 0;\n }\n\n 35% {\n transform: rotateZ(-25deg);\n z-index: 0;\n opacity: 0.0;\n }\n\n 75% {\n transform: rotateZ(0deg);\n z-index: 1;\n opacity: 1;\n }\n\n 90% {\n transform: rotateZ(25deg);\n z-index: 0;\n opacity: 1;\n }\n\n 100% {\n transform: rotateZ(0deg);\n z-index: 0;\n opacity: 0;\n }\n}\n\n"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"c159c8","snapshot":null,"tags":null,"title":"card by akshat-patel28","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":822,"cssLen":1999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Title

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,\n deleniti officia. Aliquam repellendus illum pariatur nesciunt dolor et\n natus consectetur repudiandae suscipit autem distinctio commodi vel sed,\n id inventore modi.\n

\n View More\n \n

","css":".card {\n position: relative;\n width: 350px;\n height: 180px;\n box-sizing: border-box;\n background-color: #212121;\n border: 5px solid #222;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 10px;\n padding: 10px;\n box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,\n rgba(0, 0, 0, 0.23) 0px 6px 6px,\n inset rgba(0, 0, 0, 0.19) 0px 10px 20px,\n inset rgba(0, 0, 0, 0.23) 0px 6px 6px;\n transition: all ease-in-out 0.3s;\n overflow: hidden;\n}\n\n.card:hover {\n box-shadow: rgba(193, 44, 223, 0.19) 0px 10px 20px,\n rgba(193, 44, 223, 0.23) 0px 6px 6px,\n inset rgba(0, 0, 0, 0.19) 0px 10px 20px,\n inset rgba(0, 0, 0, 0.23) 0px 6px 6px;\n border: 5px solid #b671d6;\n}\n\n.card-title {\n margin: 0;\n font-size: 18px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #fff;\n cursor: default;\n}\n\n.card-des {\n margin: 0;\n font-size: 15px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #fff;\n -webkit-box-orient: vertical;\n overflow: hidden;\n display: -webkit-box;\n word-break: break-all;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n cursor: default;\n}\n\n.card-text {\n position: absolute;\n margin: 0;\n font-size: 14px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 400;\n color: #fff;\n right: 20px;\n bottom: 5px;\n display: flex;\n align-items: center;\n gap: 3px;\n opacity: 0;\n transition: all ease-in-out 0.3s;\n animation: textanimate 0.8s alternate infinite;\n cursor: pointer;\n}\n\n.card:hover > .card-text {\n opacity: 1;\n}\n\n@keyframes textanimate {\n 0% {\n right: 20px;\n }\n\n 100% {\n right: 10px;\n }\n}\n\n.arrow-icon {\n font-size: 15px;\n font-weight: 500;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d8318a","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":922,"cssLen":1163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Tarjeta 1

Contenido de la tarjeta 1...

\n\n \n

Tarjeta 2

Contenido de la tarjeta 2...

\n\n \n

Tarjeta 3

Contenido de la tarjeta 3...

\n\n \n

Tarjeta 4

Contenido de la tarjeta 4...

","css":".container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.grid{display:grid}.max-w-md{max-width:28rem}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.gap-6{gap:1.5rem}.rounded-lg{border-radius:0.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}"},{"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}"}]}},"actionData":null,"errors":null}