{"loaderData":{"0":null,"0-3":{"total":7364,"projects":[{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"4cc5b4","snapshot":null,"tags":null,"title":"card by waleedlh10","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1783,"cssLen":1337,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

\n\n

Your product title

Description

\n\n

Add To Cart

","css":".card {\n width: 280px;\n background: white;\n border-radius: 10px;\n box-shadow: 0px 0px 14px -2px #bebebe;\n transition: 0.2s ease-in-out;\n}\n\n.card:hover {\n cursor: pointer;\n}\n\n.img {\n width: 100%;\n height: 7em;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n background: linear-gradient(#7980c5, #9198e5);\n display: flex;\n align-items: top;\n justify-content: right;\n}\n\n.save {\n transition: 0.2s ease-in-out;\n border-radius: 10px;\n margin: 20px;\n width: 30px;\n height: 30px;\n background-color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.save .svg {\n transition: 0.2s ease-in-out;\n width: 15px;\n height: 15px;\n}\n\n.save:hover .svg {\n fill: #ced8de;\n}\n\n.text {\n padding: 7px 20px;\n display: flex;\n flex-direction: column;\n align-items: space-around;\n}\n\n.text .h3 {\n font-family: system-ui;\n font-size: medium;\n font-weight: 600;\n color: black;\n text-align: center;\n}\n\n.text .p {\n font-family: system-ui;\n color: #999999;\n font-size: 13px;\n margin: 0px;\n text-align: center;\n padding: 5px;\n}\n\n.icon-box {\n margin: 10px;\n padding: 12px;\n background-color: #7980c5;\n border-radius: 10px;\n text-align: center;\n}\n\n.icon-box .span {\n font-family: system-ui;\n font-size: small;\n font-weight: 500;\n color: #fff;\n}/*# sourceMappingURL=index.css.map */"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"e80f55","snapshot":null,"tags":null,"title":"card by PapaUiiss404","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4006,"cssLen":1275,"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 \n \n \n \n \n \n

\n\n","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: .3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: .3s;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: .3s;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: .3s;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: #128C7E;\n transition-duration: .3s;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: .3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"7a0f88","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5472,"cssLen":1836,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Runaway

Smalltown Boy , Shane D

03:34

02:04

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

","css":".card {\n --main-color: #090909;\n --bg-color: #fff;\n --sub-main-color: #B9B9B9;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 360px;\n height: 478px;\n background: var(--bg-color);\n border-radius: 20px;\n padding: 30px;\n}\n\n.card__menu {\n cursor: pointer;\n}\n\n.card__img {\n height: 224px;\n width: 224px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline: auto;\n background: #e8e8e8;\n border-radius: 100%;\n}\n\n.card__img svg {\n width: 154px;\n height: 154px;\n border-radius: 100%;\n}\n\n.card__title {\n font-weight: 500;\n font-size: 28px;\n color: var(--main-color);\n text-align: center;\n margin-bottom: 10px;\n}\n\n.card__subtitle {\n font-weight: 400;\n font-size: 16px;\n color: var(--sub-main-color);\n text-align: center;\n cursor: pointer;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n margin-top: 20px;\n}\n\n.card__time {\n font-weight: 400;\n font-size: 12px;\n color: var(--main-color);\n}\n\n.card__timeline {\n width: 100%;\n height: 4px;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.card__timeline progress {\n width: 100%;\n height: 100%;\n border-radius: 100px;\n}\n\n.card__timeline progress::-webkit-progress-bar {\n background-color: #424242;\n border-radius: 100px;\n}\n\n.card__timeline progress::-webkit-progress-value {\n background-color: #fff;\n border-radius: 100px;\n}\n\n.card__btn {\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n.card__btn path {\n fill: var(--main-color);\n}\n\n.card__btn-play {\n width: 60px;\n height: 60px;\n background: #e8e8e8;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n \n\n \n "},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"d74c51","snapshot":null,"tags":null,"title":"card by Rodrypaladin","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":471,"cssLen":972,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

table

name

date

active

int

varchar

datetime

boolean

\n","css":".card {\n width: 250px;\n background: rgb(44, 44, 44);\n font-family: \"Courier New\", Courier, monospace;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n overflow: hidden;\n}\n\n.card__title {\n color: white;\n font-weight: bold;\n padding: 5px 10px;\n border-bottom: 1px solid rgb(167, 159, 159);\n font-size: 0.95rem;\n}\n\n.card__data {\n font-size: 0.8rem;\n display: flex;\n justify-content: space-between;\n border-right: 1px solid rgb(203, 203, 203);\n border-left: 1px solid rgb(203, 203, 203);\n border-bottom: 1px solid rgb(203, 203, 203);\n}\n\n.card__right {\n width: 60%;\n border-right: 1px solid rgb(203, 203, 203);\n}\n\n.card__left {\n width: 40%;\n text-align: end;\n}\n\n.item {\n padding: 3px 0;\n background-color: white;\n}\n\n.card__right .item {\n padding-left: 0.8em;\n}\n\n.card__left .item {\n padding-right: 0.8em;\n}\n\n.item:nth-child(even) {\n background: rgb(234, 235, 234);\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"b5e390","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1593,"cssLen":2021,"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 \n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-12{bottom:-3rem}.-top-12{top:-3rem}.bottom-8{bottom:2rem}.left-4{left:1rem}.flex{display:flex}.h-16{height:4rem}.h-24{height:6rem}.h-64{height:16rem}.w-16{width:4rem}.w-24{width:6rem}.w-64{width:16rem}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.border-4{border-width:4px}.border-yellow-300{--tw-border-opacity:1;border-color:rgb(253 224 71 / var(--tw-border-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21 / var(--tw-bg-opacity))}.fill-yellow-300{fill:#fde047}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-yellow-200{--tw-shadow-color:#fef08a;--tw-shadow:var(--tw-shadow-colored)}.duration-500{transition-duration:500ms}.\\[box-shadow\\:0px_-75px_55px_-30px_\\#262626\\]{box-shadow:0px -75px 55px -30px #262626}.\\[transform\\:_rotateX\$80deg\$\\]{transform:rotateX(80deg)}.group:hover .group-hover\\:-skew-x-2{--tw-skew-x:-2deg;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\\:\\[box-shadow\\:0px_-75px_95px_0px_\\#FDE047\\]{box-shadow:0px -75px 95px 0px #FDE047}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"aec37b","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":216,"cssLen":1107,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello World!

\n\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #f4f4f4;\n z-index: 1;\n border-radius: 21px;\n overflow: hidden;\n}\n\n.card__content {\n background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));\n z-index: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(20px);\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 21px;\n}\n\n.card .blob {\n position: absolute;\n z-index: -1;\n border-radius: 5em;\n width: 200px;\n height: 200px;\n}\n\n.card .blob:nth-child(2) {\n left: -50px;\n top: -90px;\n background: #08b2e3;\n}\n\n.card .blob:nth-child(3) {\n left: 110px;\n top: -20px;\n z-index: -1;\n background: #ea4769;\n}\n\n.card .blob:nth-child(4) {\n left: -40px;\n top: 100px;\n background: #fcde39;\n}\n\n.card .blob:nth-child(5) {\n left: 100px;\n top: 180px;\n background: #9b4c97;\n}\n\n.card__text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #fff;\n font-size: 20px;\n font-weight: bold;\n text-align: center;\n text-shadow: 0px 0px 10px rgba(0,0,0,0.75);\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"2f5cf7","snapshot":null,"tags":null,"title":"card by abrahamcalsin","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3130,"cssLen":2157,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

BusinessFor business services

254.99

Analysis
Consulting
Facilitate

\n \n \n START PROJECT\n \n

","css":".plan-card {\n background: #fff;\n width: 15rem;\n padding-left: 2rem;\n padding-right: 2rem;\n padding-top: 10px;\n padding-bottom: 20px;\n border-radius: 10px;\n border-bottom: 4px solid #000446;\n box-shadow: 0 6px 30px rgba(207, 212, 222, 0.3);\n font-family: \"Poppins\", sans-serif;\n}\n\n.plan-card h2 {\n margin-bottom: 15px;\n font-size: 27px;\n font-weight: 600;\n}\n\n.plan-card h2 span {\n display: block;\n margin-top: -4px;\n color: #4d4d4d;\n font-size: 12px;\n font-weight: 400;\n}\n\n.etiquet-price {\n position: relative;\n background: #fdbd4a;\n width: 14.46rem;\n margin-left: -0.65rem;\n padding: .2rem 1.2rem;\n border-radius: 5px 0 0 5px;\n}\n\n.etiquet-price p {\n margin: 0;\n padding-top: .4rem;\n display: flex;\n font-size: 1.9rem;\n font-weight: 500;\n}\n\n.etiquet-price p:before {\n content: \"$\";\n margin-right: 5px;\n font-size: 15px;\n font-weight: 300;\n}\n\n.etiquet-price p:after {\n content: \"/ handle\";\n margin-left: 5px;\n font-size: 15px;\n font-weight: 300;\n}\n\n.etiquet-price div {\n position: absolute;\n bottom: -23px;\n right: 0px;\n width: 0;\n height: 0;\n border-top: 13px solid #c58102;\n border-bottom: 10px solid transparent;\n border-right: 13px solid transparent;\n z-index: -6;\n}\n\n.benefits-list {\n margin-top: 16px;\n}\n\n.benefits-list ul {\n padding: 0;\n font-size: 14px;\n}\n\n.benefits-list ul li {\n color: #4d4d4d;\n list-style: none;\n margin-bottom: .2rem;\n display: flex;\n align-items: center;\n gap: .5rem;\n}\n\n.benefits-list ul li svg {\n width: .9rem;\n fill: currentColor;\n}\n\n.benefits-list ul li span {\n font-weight: 300;\n}\n\n.button-get-plan {\n display: flex;\n justify-content: center;\n margin-top: 1.2rem;\n}\n\n.button-get-plan a {\n display: flex;\n justify-content: center;\n align-items: center;\n background: #000446;\n color: #fff;\n padding: 10px 15px;\n border-radius: 5px;\n text-decoration: none;\n font-size: .8rem;\n letter-spacing: .05rem;\n font-weight: 500;\n transition: all 0.3s ease;\n}\n\n.button-get-plan a:hover {\n transform: translateY(-3%);\n box-shadow: 0 3px 10px rgba(207, 212, 222, 0.9);\n}\n\n.button-get-plan .svg-rocket {\n margin-right: 10px;\n width: .9rem;\n fill: currentColor;\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"a4a3e5","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":219,"cssLen":2937,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

34° 36' 30″ S; 58° 22' 16″ O

\n","css":".container {\n width: 280px;\n height: 380px;\n background-color: #151716;\n border-radius: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n filter: hue-rotate(10deg);\n color: #2fbb39;\n gap: 20px;\n}\n\n.data {\n margin-top: 25px;\n border: 2px solid;\n padding: 15px;\n border-radius: 5px;\n background: #000000;\n}\n\n.data::after {\n background: #000000;\n content: \"WIND - 54,3\";\n position: absolute;\n bottom: 5%;\n right: 5%;\n border: 2px solid;\n padding: 3px;\n border-radius: 5px;\n font-size: 0.7em;\n}\n\n.data::before {\n content: \"DEPT - 600\";\n position: absolute;\n bottom: 5%;\n left: 5%;\n border: 2px solid;\n padding: 3px;\n border-radius: 5px;\n font-size: 0.7em;\n background: #000000;\n}\n\n.card {\n width: 200px;\n height: 200px;\n background: #000000;\n border-radius: 50%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #18d322;\n overflow: hidden;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n width: 2px;\n height: 200px;\n left: 50%;\n top: 50%;\n background-color: #18d322;\n animation: rotate 3s linear infinite;\n z-index: 6;\n transform-origin: 0 0;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n width: 0px;\n height: 200px;\n left: 50%;\n top: 50%;\n transform: rotate(-4deg);\n background-color: #18d322;\n animation: rotate 3s linear infinite;\n box-shadow: 0 0 10px 10px #2fbb39, 0 0 70px 10px #2fbb39;\n z-index: 6;\n transform-origin: 0 0;\n}\n\n.circle {\n width: 100px;\n height: 100px;\n border: 2px solid #18d322;\n border-radius: 50%;\n}\n\n.circle::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid #18d322;\n border-radius: 50%;\n}\n\n.circle::after {\n content: \"\";\n position: absolute;\n width: 150px;\n height: 150px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid #18d322;\n border-radius: 50%;\n}\n\n.dot {\n width: 4px;\n height: 4px;\n top: 30%;\n background-color: #18d322;\n border-radius: 50%;\n position: absolute;\n animation: doted 1.5s ease infinite;\n}\n\n.dot2 {\n width: 4px;\n height: 4px;\n top: 80%;\n right: 30%;\n background-color: #18d322;\n border-radius: 50%;\n position: absolute;\n animation: doted 1.5s 1.2s ease infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes doted {\n 0% {\n transform: scale(0.95);\n box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),\n 0 0 10px 10px rgba(24, 211, 33, 0.3);\n }\n\n 60% {\n transform: scale(0.95);\n box-shadow: 0 0 10px 5px rgba(24, 211, 33, 0.3),\n 0 0 10px 10px rgba(24, 211, 33, 0.3);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 0 0 0 0 rgba(24, 211, 33, 0.7), 0 0 0 0 rgba(24, 211, 33, 0.5),\n 0 0 0 0 rgba(24, 211, 33, 0.3);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"8d2448","snapshot":null,"tags":null,"title":"card by MikeAndrewDesigner","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":478,"cssLen":1448,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card

This is a subtitle

\n \n

","css":".card {\n width: 240px;\n height: 354px;\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n animation: name-of-animation 2s;\n}\n\n.card-img {\n position: absolute;\n height: 100%;\n width: 100%;\n background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);\n}\n\n.card-info {\n position: absolute;\n width: 100%;\n bottom: 0;\n padding: 1.7rem;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n}\n\n.card-icon {\n opacity: 0;\n transform: translateX(-20%);\n width: 2em;\n height: 2em;\n transition: all .3s ease-in-out;\n position: relative;\n left: -0.1em;\n top: -3px;\n}\n\n.icon {\n --size: 28px;\n width: var(--size);\n height: var(--size);\n filter: invert(1);\n margin-top: 1px;\n margin-left: -5px;\n}\n\n.card-text p {\n line-height: 140%;\n white-space: nowrap;\n}\n\n.text-title {\n font-weight: 700;\n font-size: 2.1rem;\n color: rgb(255, 255, 255);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.text-subtitle {\n color: rgb(255, 255, 255);\n font-weight: 500;\n font-size: 1.2rem;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card:hover .card-icon {\n opacity: 1;\n transform: translateX(20%);\n}\n\n@keyframes name-of-animation {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"3d0bed","snapshot":null,"tags":null,"title":"card by rraushan1205","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":286,"cssLen":2101,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

II\n

","css":".face {\n position: relative;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n outline: 10px solid #333;\n background: repeating-radial-gradient(circle at 50% 50%, \n rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, \n transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, \n transparent 3%), conic-gradient(white 0%, silver 10%, \n white 35%, silver 45%, white 60%, silver 70%, \n white 80%, silver 95%, white 100%);\n box-shadow: inset 0 0 20px #0007;\n}\n\n.hour {\n position: absolute;\n width: 5px;\n height: 60px;\n background: #aaa;\n left: 87.5px;\n top: 43px;\n border-radius: 3px 3px 1px 1px;\n transform-origin: 2px 47px;\n box-shadow: 0 0 5px #0005,inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;\n z-index: 1;\n animation: watch 432s linear infinite;\n}\n\n.minute {\n position: absolute;\n width: 4px;\n height: 78px;\n background: #aaa;\n left: 88px;\n top: 25px;\n border-radius: 3px 3px 1px 1px;\n transform-origin: 2px 65px;\n box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;\n z-index: 2;\n animation: watch 36s linear infinite;\n}\n\n.second {\n position: absolute;\n width: 10px;\n height: 10px;\n background: red;\n left: 85px;\n top: 85px;\n border-radius: 50%;\n border: 1px solid #eee;\n z-index: 3;\n animation: watch .6s steps(60, end) 0s infinite;\n}\n\n.second::before {\n content: \"\";\n position: absolute;\n width: 1px;\n height: 85px;\n left: 3px;\n bottom: -10px;\n background: red;\n border-radius: 2px;\n box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2);\n}\n\n.second::after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n left: 2px;\n top: 2px;\n background: #555;\n border-radius: 50%;\n}\n\n.v-index {\n position: absolute;\n color: #333;\n font-size: 24px;\n left: 83.5px;\n top: -3px;\n text-shadow: 0 157px 0 #333;\n z-index: 1\n}\n\n.h-index {\n position: absolute;\n color: #333;\n font-size: 24px;\n top: 72px;\n left: 5px;\n transform: rotate(-90deg);\n text-shadow: 0 158px 0 #333;\n z-index: 1;\n}\n\n@keyframes watch {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"a6b41e","snapshot":null,"tags":null,"title":"card by Pradeepsaranbishnoi","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":344,"cssLen":1628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Animated card

\n \n

How's it goin Fam ?

This is Pradeep Saran, your tech mate!!! I love you all. Lets make this world a better place for all of us. Keep prospering...Keep learning!!!

","css":".cardBox {\n width: 250px;\n height: 300px;\n position: relative;\n display: grid;\n place-items: center;\n overflow: hidden;\n border-radius: 20px;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,\n rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;\n}\n\n.card {\n position: absolute;\n width: 95%;\n height: 95%;\n background: #000814;\n border-radius: 20px;\n z-index: 5;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-align: center;\n color: #ffffff;\n overflow: hidden;\n padding: 20px;\n cursor: pointer;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,\n rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;\n}\n\n.card .h4 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 20px;\n font-weight: 800;\n pointer-events: none;\n opacity: .5;\n}\n\n.card .content .h3 {\n font-size: 18px;\n font-weight: 800;\n margin-bottom: 10px;\n}\n\n.card .content p {\n font-size: 14px;\n line-height: 1.4em;\n}\n\n.card .content {\n transform: translateY(100%);\n opacity: 0;\n transition: 0.3s ease-in-out;\n}\n\n.card:hover .content {\n transform: translateY(0);\n opacity: 1;\n}\n\n.card:hover .h4 {\n opacity: 0;\n}\n\n.cardBox::before {\n content: \"\";\n position: absolute;\n width: 40%;\n height: 150%;\n background: #40E0D0;\n background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);\n background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);\n transform-origin: center;\n animation: glowing_401 5s linear infinite;\n}\n\n@keyframes glowing_401 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:12.000Z","isPrivate":0,"projectId":"1ecf74","snapshot":null,"tags":null,"title":"card by Rodrypaladin","updated":"2024-01-22T17:11:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":469,"cssLen":2717,"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: 300px;\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: #007c0d;\n background: linear-gradient(315deg, #68ffc0, #007c0d);\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(216, 255, 234);\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: #007c0d;\n background: linear-gradient(315deg, #68ffc0, #007c0d);\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}