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

Hover Me

\n","css":".card::before {\n border-radius: 50%;\n width: 7rem;\n height: 7rem;\n top: 20%;\n}\n\n.card::before,\n.card::after {\n content: \"\";\n background-color: #7090fa4b;\n position: absolute;\n filter: blur(10px);\n}\n\n.cards {\n display: flex;\n gap: 40px;\n}\n\n.cards .red,\n.cards .blue,\n.cards .green {\n width: 200px;\n height: 180px;\n font-family: \"CustomFont\", Arial, Helvetica, sans-serif;\n font-size: 24px;\n font-weight: 600;\n backdrop-filter: blur(30px);\n background-color: rgba(65, 65, 65, 0.11);\n border: 1px solid rgba(144, 161, 255, 0.171);\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-radius: 10px;\n color: rgb(0, 0, 0);\n cursor: pointer;\n transition: 400ms;\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, 1.1);\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(5px);\n transform: scale(0.9, 0.9);\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"652d08","snapshot":null,"tags":null,"title":"card by Gaurav-WebDev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":772,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

","css":".card {\n width: 190px;\n height: 254px;\n background: lightgray;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2em;\n color: #333;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n border-radius: 40px;\n cursor: pointer;\n position: relative;\n transition: all 0.7s ease-in-out;\n overflow: hidden;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n height: 40%;\n width: 100%;\n background-color: #088080;\n bottom: 0;\n right: 0;\n transform: translatey(70px);\n border-radius: 100%;\n transition: all 0.7s ease-in-out;\n}\n\n.c-txt {\n z-index: 2;\n}\n\n.card:hover::before {\n transform: scale(7) translate(-20px);\n}\n\n.card:hover {\n box-shadow: 1px -10px 500px 500px #9fe4e44a;\n color: #f3f3f3;\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"7c6831","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2349,"cssLen":2296,"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 \n\n

\n Stance and Aim\n

Visualize the trajectory and mentally aim for your desired spot.

\n Challenge\n

\n","css":".card {\n width: 370px;\n height: 270px;\n background: linear-gradient(120deg, rgba(255,237,57,1) 0%, rgba(247,253,45,1) 100%);\n ;\n position: relative;\n display: flex;\n justify-content: center;\n padding: 20px;\n border-radius: 15px;\n transition: all 0.5s ease;\n}\n\n.card::before {\n content: 'Dart';\n position: absolute;\n width: 0px;\n height: 60px;\n border-left: 30px solid #3A486F;\n border-right: 30px solid #3A486F;\n border-bottom: 10px solid transparent;\n top: -10px;\n left: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 8px;\n text-transform: uppercase;\n transition: all 0.5s ease;\n}\n\n.svg-icon {\n width: 5em;\n height: 5em;\n fill: #3A486F;\n}\n\n.svgContainer {\n height: 100px;\n width: 100px;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svgContainer svg {\n position: absolute;\n overflow: visible;\n}\n\n.dartboard {\n width: 2em;\n height: 2em;\n padding: 6px;\n border: 3px solid #3A486F;\n border-radius: 50%;\n transition: all 0.5s ease;\n transform: scale(2) rotate(34deg);\n}\n\n.eyehole {\n transform: scale(1.2) rotate(-270deg);\n transition: all 0.5s ease;\n}\n\n.batman {\n transition: all .4s ease-in;\n transform: rotate(55deg) translate(240px, -45px) scale(1.2);\n}\n\n.svg-fill-primary {\n fill: #242424;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n justify-content: end;\n text-align: center;\n gap: 10px;\n align-items: center;\n}\n\n.card span {\n font-size: 20px;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.card-info p {\n color: #3A486F;\n font-weight: 600;\n}\n\n.card-info .challengeButton {\n text-decoration: none;\n background-color: #343434;\n color: white;\n padding: 5px 15px;\n border-radius: 10px;\n box-sizing: border-box;\n transition: all 0.5s ease;\n}\n\n.card:hover {\n box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.83);\n}\n\n.card:hover .batman {\n transform: rotate(-50deg) translate(12px, 2px);\n}\n\n.card:hover .eyehole {\n transform: scale(1);\n}\n\n.card:hover .dartboard {\n transform: scale(1) rotate(0deg) translate(0, 0);\n}\n\n.challengeButton:hover {\n background-color: #3A486F;\n}\n\n.card:hover::before {\n border-left: 30px solid #182445;\n border-right: 30px solid #182445;\n border-bottom: 10px solid transparent;\n top: -15px;\n}"},{"created":"2024-01-22T17:11:23.000Z","isPrivate":0,"projectId":"d70631","snapshot":null,"tags":null,"title":"card by MohamedSSuhail","updated":"2024-01-22T17:11:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9046,"cssLen":1901,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Web Design templates Selection

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

\n 135 Works /\n 45%\n

\n","css":".card {\n --main-color: #000;\n --bg-color: #64ccc5;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n 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: #dafffb;\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"},{"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"}]}},"actionData":null,"errors":null}