red-heart

{"loaderData":{"0":null,"0-2":{"total":7182,"projects":[{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"8d08ee","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":484,"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 backdrop-filter: blur(7px);\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 26px;\n box-shadow: 35px 35px 68px 0px rgba(157, 177, 255, 0.2), inset -8px -8px 16px 0px rgba(157, 177, 255, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);\n transition: all 0.3s;\n cursor: pointer;\n}\n\n.card:hover {\n box-shadow: 35px 35px 68px 0px rgba(157, 177, 255, 0.5);\n}\n\n.card:active {\n transform: scale(0.95);\n border: 1px solid blue;\n}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"87e6dc","snapshot":null,"tags":null,"title":"card by MuhammadHasann","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":707,"cssLen":2661,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Pro\n

$8 / month

\n Everything on Basic plus:\n

✓ Feature
✓ Feature
✓ Feature
✓ Feature
✓ Feature

\n \n \n

\n","css":".card {\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 1rem;\n width: 14rem;\n height: auto;\n background-color: rgb(122, 48, 143);\n background-image: radial-gradient(\n circle at 0% 0%,\n rgb(37, 7, 44) 15%,\n rgba(0, 0, 0, 0) 75%\n ),\n radial-gradient(\n circle at 100% 100%,\n rgb(25, 2, 31, 0.9) 15%,\n rgba(0, 0, 0, 0) 150%\n ),\n linear-gradient(\n 135deg,\n rgba(24, 8, 28, 0) 0%,\n rgb(122, 48, 143) 50%,\n rgba(24, 8, 28, 0) 100%\n );\n border-radius: 0.5rem;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: 1rem;\n right: 1rem;\n width: 2rem;\n height: 2rem;\n background-color: rgb(122, 48, 143);\n background-image: linear-gradient(\n 0deg,\n rgba(118, 42, 180, 1) 0%,\n rgb(199, 95, 228) 75%\n );\n border-radius: 9999px;\n box-shadow: 0 1px 5px 3px rgb(199, 95, 228), 0 0 30px 5px rgb(199, 95, 228);\n}\n\n.card .title {\n font-size: 1rem;\n color: white;\n font-weight: 600;\n}\n\n.card .pricing {\n font-size: 1.5rem;\n color: white;\n font-weight: 600;\n}\n\n.card .pricing .pricing-time,\n.card .sub-title {\n font-size: 0.75rem;\n color: rgb(184, 132, 199);\n font-weight: 500;\n}\n\n.card .list {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n font-size: 0.75rem;\n color: white;\n font-weight: 500;\n list-style: none;\n}\n\n.card .list .list-item .check {\n margin-right: 0.25rem;\n font-size: 1rem;\n color: rgb(199, 95, 228);\n font-weight: 900;\n}\n\n.card .button {\n overflow: hidden;\n cursor: pointer;\n position: relative;\n margin-top: 0.5rem;\n padding: 0.5rem 0.75rem;\n width: 100%;\n height: fit-content;\n background-color: rgb(122, 48, 143);\n font-size: 0.75rem;\n color: white;\n border: none;\n border-radius: 0.5rem;\n box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);\n transition: all 0.3s cubic-bezier(1, 0, 0, 1);\n}\n\n.card .button .text-button {\n position: relative;\n z-index: 10;\n}\n\n.card .button::before,\n.card .button::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n transition: all 0.3s ease-in-out;\n}\n.card .button::before {\n left: 0;\n background-image: radial-gradient(\n circle at 0% 45%,\n rgba(16, 5, 36, 1) 19%,\n rgba(16, 5, 36, 0.26) 46%,\n rgba(16, 5, 36, 0) 100%\n );\n}\n.card .button::after {\n right: 0;\n background-image: radial-gradient(\n circle at 100% 45%,\n rgba(16, 5, 36, 1) 19%,\n rgba(16, 5, 36, 0.26) 46%,\n rgba(16, 5, 36, 0) 100%\n );\n}\n\n.card .button:hover {\n box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);\n}\n\n.card .button:hover::before,\n.card .button:hover::after {\n width: 0;\n opacity: 0;\n}\n"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"b09f38","snapshot":null,"tags":null,"title":"card by ElektroRaks","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":296,"cssLen":1186,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n CSS Clip-Path \n

\n ELEKTRO RAKS\n

Custom card

","css":".card {\n width: 11.875em;\n height: 15.875em;\n background: linear-gradient(135deg, #1afbf0, #da00ff);\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n}\n\n.box {\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.074);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n height: 100%;\n padding: 10px;\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n clip-path: polygon(54% 27%, 100% 50%, 100% 100%, 51% 74%, 0 50%, 0% 0%);\n transition: 0.5s;\n line-height: 1.2;\n}\n\n.card-title {\n width: 100%;\n font-weight: bold;\n color: white;\n display: block;\n padding-top: 6.3em;\n font-size: 1.2em;\n transform: rotate(34deg);\n transition: 0.5s;\n margin-left: 25%;\n}\n\n.text {\n color: white;\n opacity: 0;\n transition: 0.5s;\n}\n\n.card:hover .content {\n clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);\n}\n\n.card:hover .card-title {\n padding-top: 1em;\n margin-left: 0%;\n transform: rotate(0deg);\n}\n\n.card:hover .text {\n opacity: 1;\n}"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"f11596","snapshot":null,"tags":null,"title":"card by nanda248","updated":"2024-01-22T17:11:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1608,"cssLen":2587,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n A\n \n

\n\n

\n \n

\n\n

\n A\n \n

\n\n

\n","css":".main {\n position: relative;\n}\n\n/* card styles */\n.card {\n position: relative;\n overflow: hidden;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 1fr 1fr 1fr;\n grid-auto-flow: row;\n grid-template-areas:\n \"i1 . .\"\n \". center .\"\n \". . i2\";\n width: 12em;\n height: 18em;\n border-radius: 4px;\n background: #ffd700;\n transition: 0.5s;\n z-index: 20;\n}\n\n.bg-card-1 {\n background-color: #daa520;\n position: absolute;\n top: 0;\n width: 12em;\n height: 18em;\n border-radius: 4px;\n transition: 0.5s;\n z-index: 8;\n}\n\n.bg-card-2 {\n background-color: #b8860b;\n position: absolute;\n top: 0;\n width: 12em;\n height: 18em;\n border-radius: 4px;\n transition: 0.5s;\n z-index: 4;\n}\n\n/* glider animation */\n.card:before {\n content: \"\";\n position: absolute;\n height: 130%;\n width: 0.6em;\n background-color: aliceblue;\n opacity: 0.3;\n animation: glider 1.8s infinite linear;\n animation-delay: 0.05s;\n}\n\n.card:after {\n content: \"\";\n position: absolute;\n height: 130%;\n width: 0.4em;\n background-color: aliceblue;\n opacity: 0.2;\n animation: glider 1.8s infinite linear;\n}\n\n@keyframes glider {\n 0% {\n transform: rotate(45deg) translate(-140px, -140px);\n }\n\n 100% {\n transform: rotate(45deg) translate(220px, -40px);\n }\n}\n\n/* icon styles */\n.i1,\n.i2 svg {\n width: 1.5em;\n fill: #ff3131;\n}\n\n.i1 {\n grid-area: i1;\n justify-self: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin: 0.2em 0.4em;\n}\n\n.i2 {\n grid-area: i2;\n justify-self: flex-end;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin: 0.2em 0.4em;\n transform: rotate(180deg);\n}\n\n.corner-text {\n color: #ff3131;\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.center-shape {\n grid-area: center;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.center-shape svg {\n width: 4em;\n fill: #ff3131;\n}\n\n/* hover effects */\n.card:hover {\n box-shadow: #ffd700 0px 7px 29px 0px;\n cursor: pointer;\n}\n\n.card:hover:after,\n.card:hover:before {\n visibility: hidden;\n}\n\n.card:hover svg,\n.card:hover span {\n animation: color-change 1s ease-in-out;\n animation-fill-mode: forwards;\n}\n\n@keyframes color-change {\n from {\n fill: #ff3131;\n color: #ff3131;\n }\n\n to {\n fill: #e34234;\n color: #e34234;\n }\n}\n\n/* hover fan out effects */\n.card:active {\n transform: rotate(10deg);\n transform-origin: bottom left;\n box-shadow: none;\n}\n\n.card:active + .bg-card-1 {\n transform: rotate(5deg);\n transform-origin: bottom left;\n}\n"},{"created":"2024-01-22T17:11:16.000Z","isPrivate":0,"projectId":"5c0416","snapshot":null,"tags":null,"title":"card by sabbircoder07","updated":"2024-01-22T17:11:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4882,"cssLen":7447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Your Result

of 100

excellent

\n You scored higher than 65% of the people who have taken these tests.\n

Summary

\n \n Reaction\n

82 / 100

\n \n Memory\n

94 / 100

\n \n Verbal\n

66 / 100

\n \n Visual\n

72 / 100

\n \n

","css":".results-summary-container {\n font-family: \"Hanken Grotesk\", sans-serif;\n display: flex;\n flex-direction: column;\n width: 350px;\n gap: 10px;\n border-radius: 10px;\n box-shadow: 10px 10px 30px rgba(120, 87, 255, 0.8);\n backface-visibility: hidden;\n}\n\n.heading-primary,\n.heading-secondary,\n.heading-tertiary {\n color: #ffffff;\n text-transform: capitalize;\n margin-bottom: 15px;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.heading-primary {\n font-size: 36px;\n font-weight: 700;\n background-image: linear-gradient(to right, #f7bb97, #dd5e89);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transform: scale(1.4);\n}\n\n.heading-secondary {\n font-size: 24px;\n font-weight: 700;\n margin-top: 15px;\n letter-spacing: 1px;\n}\n\n.heading-secondary--blue {\n color: hsl(224, 30%, 27%);\n}\n\n.heading-tertiary {\n font-size: 20px;\n font-weight: 500;\n margin-bottom: 20px;\n color: hsl(221, 100%, 96%);\n}\n\n.paragraph {\n font-size: 17px;\n line-height: 1.6;\n color: hsl(221, 100%, 96%);\n}\n\n.paragraph-text-box {\n width: 100%;\n}\n\n.text-center {\n text-align: center;\n}\n\n.margin-1 {\n margin-bottom: 10px;\n}\n\n.results-summary-container__result {\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n justify-content: center;\n padding: 20px 10px;\n border-radius: 10px 10px 0 0;\n background-image: linear-gradient(to bottom, #aa076b, #61045f);\n .result-box {\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background-image: linear-gradient(-45deg, #ef629f, #42275a);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.result {\n margin-top: -12px;\n font-size: 14px;\n font-weight: 400;\n color: hsl(241, 100%, 89%);\n}\n}\n\n.results-summary-container__options {\n padding: 0 16px;\n}\n\n.summary-result-options {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.result-option {\n width: 100%;\n height: 40px;\n background-color: hsl(0, 100%, 97%);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.result-option-memory {\n background-color: hsl(39, 100%, 97%);\n}\n\n.result-option-verbal {\n background-color: hsl(166, 100%, 97%);\n}\n\n.result-option-Visual {\n background-color: hsl(234, 85%, 97%);\n}\n\n.icon-box {\n display: flex;\n font-size: 16px;\n align-items: center;\n gap: 2px;\n}\n\n.reaction-icon-text {\n color: hsl(0, 100%, 67%);\n}\n\n.memory-icon-text {\n color: hsl(39, 100%, 56%);\n}\n\n.verbal-icon-text {\n color: hsl(166, 100%, 37%);\n}\n\n.visual-icon-text {\n color: hsl(234, 85%, 45%);\n}\n\n.result-box {\n font-size: 14px;\n color: hsl(241, 100%, 89%);\n font-weight: 700;\n}\n\n.result-box span {\n font-size: 14px;\n color: hsl(224, 30%, 27%);\n}\n\n.btn {\n width: 100%;\n padding: 10px;\n color: #ffffff;\n background-image: linear-gradient(to right, #aa076b, #61045f);\n border: none;\n border-radius: 3px;\n font-size: 17px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: 500;\n cursor: pointer;\n margin: 15px 0 30px 0;\n transition: all 0.3s;\n}\n\n.btn:hover {\n transform: translateY(5px);\n background-image: linear-gradient(to left, #aa076b, #61045f);\n}\n\n.icon {\n cursor: pointer;\n filter: grayscale(1);\n transition: 0.3s linear;\n}\n\n.icon:hover {\n filter: grayscale(0);\n}\n\n@keyframes background {\n 0% {\n background-image: linear-gradient(to right, #aa076b, #61045f);\n }\n\n 50% {\n background-image: linear-gradient(to right, #aa076b, #61045f);\n }\n\n 100% {\n background-image: linear-gradient(to right, #ef629f, #42275a);\n }\n}\n\n@keyframes gradient {\n 0% {\n background-position: 0% 50%;\n background-image: linear-gradient(-45deg, #ef629f, #42275a);\n }\n\n 50% {\n background-position: 100% 50%;\n background-image: linear-gradient(to bottom, #aa076b, #61045f);\n }\n\n 100% {\n background-position: 0% 50%;\n background-image: linear-gradient(to top, #ef629f, #42275a);\n }\n}\n\n.confetti {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 360px;\n height: 50%;\n overflow: hidden;\n z-index: 1000;\n}\n\n.confetti-piece {\n position: absolute;\n width: 10px;\n height: 20px;\n background-color: hsl(39, 100%, 56%);\n top: 0;\n opacity: 0;\n animation: makeItRain 3000ms infinite ease-in-out;\n}\n\n.confetti-piece:nth-child(1) {\n left: 7%;\n transform: rotate(-10deg);\n animation-delay: 182ms;\n animation-duration: 2000ms;\n}\n\n.confetti-piece:nth-child(2) {\n left: 14%;\n transform: rotate(20deg);\n animation-delay: 161ms;\n animation-duration: 2076ms;\n}\n\n.confetti-piece:nth-child(3) {\n left: 21%;\n transform: rotate(-51deg);\n animation-delay: 481ms;\n animation-duration: 2103ms;\n}\n\n.confetti-piece:nth-child(4) {\n left: 28%;\n transform: rotate(61deg);\n animation-delay: 334ms;\n animation-duration: 1008ms;\n}\n\n.confetti-piece:nth-child(5) {\n left: 35%;\n transform: rotate(-52deg);\n animation-delay: 302ms;\n animation-duration: 1776ms;\n}\n\n.confetti-piece:nth-child(6) {\n left: 42%;\n transform: rotate(38deg);\n animation-delay: 180ms;\n animation-duration: 1168ms;\n}\n\n.confetti-piece:nth-child(7) {\n left: 49%;\n transform: rotate(11deg);\n animation-delay: 395ms;\n animation-duration: 1200ms;\n}\n\n.confetti-piece:nth-child(8) {\n left: 56%;\n transform: rotate(49deg);\n animation-delay: 14ms;\n animation-duration: 1887ms;\n}\n\n.confetti-piece:nth-child(9) {\n left: 63%;\n transform: rotate(-72deg);\n animation-delay: 149ms;\n animation-duration: 1805ms;\n}\n\n.confetti-piece:nth-child(10) {\n left: 70%;\n transform: rotate(10deg);\n animation-delay: 351ms;\n animation-duration: 2059ms;\n}\n\n.confetti-piece:nth-child(11) {\n left: 77%;\n transform: rotate(4deg);\n animation-delay: 307ms;\n animation-duration: 1132ms;\n}\n\n.confetti-piece:nth-child(12) {\n left: 84%;\n transform: rotate(42deg);\n animation-delay: 464ms;\n animation-duration: 1776ms;\n}\n\n.confetti-piece:nth-child(13) {\n left: 91%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 1818ms;\n}\n\n.confetti-piece:nth-child(14) {\n left: 94%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 818ms;\n}\n\n.confetti-piece:nth-child(15) {\n left: 96%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(16) {\n left: 98%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(17) {\n left: 50%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(18) {\n left: 60%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 1818ms;\n}\n\n.confetti-piece:nth-child(odd) {\n background-color: hsl(0, 100%, 67%);\n}\n\n.confetti-piece:nth-child(even) {\n z-index: 1;\n}\n\n.confetti-piece:nth-child(4n) {\n width: 6px;\n height: 14px;\n animation-duration: 4000ms;\n background-color: #c33764;\n}\n\n.confetti-piece:nth-child(5n) {\n width: 3px;\n height: 10px;\n animation-duration: 4000ms;\n background-color: #b06ab3;\n}\n\n.confetti-piece:nth-child(3n) {\n width: 4px;\n height: 12px;\n animation-duration: 2500ms;\n animation-delay: 3000ms;\n background-color: #dd2476;\n}\n\n.confetti-piece:nth-child(3n-7) {\n background-color: hsl(166, 100%, 37%);\n}\n\n@keyframes makeItRain {\n from {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n transform: translateY(200px);\n }\n}\n\n"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"b7ae46","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1297,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".success {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #84D65A;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.success__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.success__icon path {\n fill: #393A37;\n}\n\n.success__title {\n font-weight: 500;\n font-size: 14px;\n color: #393A37;\n}\n\n.success__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.success__close path {\n fill: #393A37;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"0cdcc6","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":3255,"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 \n

\n","css":".card {\n width: 200px;\n height: 200px;\n background: transparent;\n border-radius: 50%;\n border: 20px solid transparent;\n position: relative;\n overflow: hidden;\n box-shadow: 2px 2px 2px black, inset 2px 2px 2px black,\n -1px -1px 5px rgba(0, 0, 0, 0.473), inset -1px -1px 5px rgba(0, 0, 0, 0.473);\n}\n\n.numbers {\n font-weight: bold;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n border-radius: 50%;\n padding: 20px;\n background-color: rgb(234, 221, 247);\n}\n\n.number {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: inline-block;\n width: 0.1rem;\n height: 0.9rem;\n background-color: rgb(12, 26, 109);\n}\n.number:nth-child(1) {\n transform: translate(-50%, -50%) rotateZ(calc(30deg)) translateY(-80px);\n}\n\n.number:nth-child(2) {\n transform: translate(-50%, -50%) rotateZ(calc(60deg)) translateY(-80px);\n}\n\n.number:nth-child(3) {\n transform: translate(-50%, -50%) rotateZ(calc(90deg)) translateY(-80px);\n}\n\n.number:nth-child(4) {\n transform: translate(-50%, -50%) rotateZ(calc(120deg)) translateY(-80px);\n}\n\n.number:nth-child(5) {\n transform: translate(-50%, -50%) rotateZ(calc(150deg)) translateY(-80px);\n}\n\n.number:nth-child(6) {\n transform: translate(-50%, -50%) rotateZ(calc(180deg)) translateY(-80px);\n}\n\n.number:nth-child(7) {\n transform: translate(-50%, -50%) rotateZ(calc(210deg)) translateY(-80px);\n}\n\n.number:nth-child(8) {\n transform: translate(-50%, -50%) rotateZ(calc(240deg)) translateY(-80px);\n}\n\n.number:nth-child(9) {\n transform: translate(-50%, -50%) rotateZ(calc(270deg)) translateY(-80px);\n}\n\n.number:nth-child(10) {\n transform: translate(-50%, -50%) rotateZ(calc(300deg)) translateY(-80px);\n}\n\n.number:nth-child(11) {\n transform: translate(-50%, -50%) rotateZ(calc(330deg)) translateY(-80px);\n}\n\n.number:nth-child(12) {\n transform: translate(-50%, -50%) rotateZ(calc(0deg)) translateY(-80px);\n}\n\n.number:nth-child(3),\n.number:nth-child(6),\n.number:nth-child(9),\n.number:nth-child(12) {\n width: 0.3rem;\n height: 1.5rem;\n}\n\n.needles {\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.h,\n.m,\n.s,\n.center {\n display: inline-block;\n width: 7px;\n height: 20px;\n background-color: black;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50% 50% 0 0;\n}\n\n.s {\n transform: translate(-50%, -80%);\n}\n\n.h {\n background-color: black;\n transform-origin: 50% 100%;\n animation: rotate 43200s 60s infinite linear;\n transform: translate(-50%, -100%) rotateZ(5deg);\n height: 2.5rem;\n z-index: 1;\n}\n\n.m {\n background-color: rgb(176, 176, 185);\n z-index: 2;\n height: 4rem;\n width: 5px;\n transform-origin: 50% 100%;\n transform: translate(-50%, -100%) rotateZ(60deg);\n animation: rotate 3600s 60s infinite steps(60, end);\n}\n\n.s {\n background-color: rgb(240, 31, 31);\n z-index: 3;\n height: 5rem;\n width: 3px;\n transform-origin: 50% 80%;\n animation: rotate 60s infinite steps(60, end);\n}\n\n.center {\n width: 15px;\n height: 15px;\n background-color: white;\n border: solid 4px red;\n z-index: 4;\n border-radius: 50%;\n}\n\n@keyframes rotate {\n 100% {\n transform: translate(-50%, -80%) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"4b77ff","snapshot":null,"tags":null,"title":"card by bhaveshxrawat","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":327,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n background: linear-gradient(145deg, #2B86C5 0%, #FF3CAC 100%);\n border-radius: 5px;\n box-shadow: 10px 10px 9px #c5c5c5,\n -10px -10px 9px #ffffff;\n transition: box-shadow 0.7s ease;\n}\n\n.card:hover {\n box-shadow: 10px 10px 15px #c5c5c5,\n -10px -10px 15px #ffffff;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"eacc12","snapshot":null,"tags":null,"title":"card by MijailVillegas","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4016,"cssLen":4774,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n TITLE\n

\n \n

\n Some extra Information\n

","css":".container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n display: flex;\n margin: auto;\n aspect-ratio: 16/9;\n align-items: center;\n justify-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n}\n\n.card-container {\n filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);\n animation: blinkShadowsFilter 8s ease-in infinite;\n}\n\n.card-content {\n display: grid;\n align-content: center;\n justify-items: center;\n align-items: center;\n text-align: center;\n padding: 1em;\n grid-template-rows: 0.1fr 0.7fr 0.25fr;\n background-color: hsl(296, 59%, 10%);\n width: 10em;\n aspect-ratio: 9/16;\n -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n}\n\n.card-content::before {\n content: \"\";\n position: absolute;\n width: 250%;\n aspect-ratio: 1/1;\n transform-origin: center;\n background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent);\n animation: rotate 5s infinite linear;\n}\n\n.card-content::after {\n content: \"\";\n position: absolute;\n top: 1%;\n left: 1%;\n width: 98%;\n height: 98%;\n background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);\n box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%);\n -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);\n animation: backglitch 94ms linear infinite;\n}\n\n.card-title {\n z-index: 80;\n -webkit-clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);\n clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);\n background: linear-gradient(90deg, rgba(255, 254, 250, 0) 0%, rgba(102, 224, 255, 0.3) 27%, rgba(102, 224, 255, 0.3) 63%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(102, 224, 255, 0.3) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 96%, rgba(102, 224, 255, 0.3) 100%);\n width: 98%;\n font-size: 1.2em;\n}\n\n.title {\n width: 100%;\n height: 100%;\n text-align: right;\n position: relative;\n z-index: 2;\n color: hsl(192, 100%, 88%);\n font-size: 1em;\n transition: all ease-in-out 2s linear;\n}\n\n.card-body {\n padding-block: 1.5em;\n padding-inline: 1em;\n z-index: 80;\n display: flex;\n gap: 1.5em;\n flex-wrap: wrap;\n justify-content: space-around;\n align-items: center;\n align-content: center;\n}\n\n.svg-card {\n text-decoration: none;\n color: hsl(192, 100%, 88%);\n background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);\n fill: currentColor;\n width: 2em;\n aspect-ratio: 1/1;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.5s;\n}\n\n.svg-card .face {\n width: 0.7em;\n}\n\n.svg-card .twit {\n width: 1em;\n}\n\n.svg-card .insta {\n width: 1em;\n}\n\n.svg-card .whats {\n width: 1.1em;\n}\n\n.svg-card:hover {\n cursor: pointer;\n color: hsl(192, 100%, 100%);\n}\n\n.card-footer {\n padding-inline: 1em;\n}\n\n@keyframes backglitch {\n 0% {\n box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);\n }\n\n 50% {\n box-shadow: inset 0px -20px 30px 40px hsl(296, 59%, 10.2%);\n }\n\n to {\n box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) translate(-50%, 20%);\n }\n\n 50% {\n transform: rotate(180deg) translate(40%, 10%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, 20%);\n }\n}\n\n@keyframes blinkShadowsFilter {\n 0% {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);\n }\n\n 25% {\n filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);\n }\n\n 50% {\n filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));\n }\n\n 75% {\n filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));\n }\n\n to {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);\n }\n}/*# sourceMappingURL=style.css.map */"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"0bfeed","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":703,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".papper {\n position: relative;\n box-sizing: border-box;\n width: 200px;\n height: 200px;\n background: #ffffff;\n background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem);\n background-size: 100% 1.2rem;\n border-radius: 10px;\n cursor: move;\n}\n\n.papper::before,\n.papper::after {\n position: absolute;\n content: \"\";\n bottom: 10px;\n width: 40%;\n height: 10px;\n box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);\n z-index: -1;\n transition: all 0.3s ease;\n}\n\n.papper::before {\n left: 15px;\n transform: skew(-5deg) rotate(-5deg);\n}\n\n.papper::after {\n right: 15px;\n transform: skew(5deg) rotate(5deg);\n}\n\n.papper:hover::before,\n.papper:hover::after {\n box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"ff4f29","snapshot":null,"tags":null,"title":"card by roroland","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1808,"cssLen":4808,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Profile Card

\n \n \n \n

Bio description with some interesting data about yourself...

\n \n Social networks\n \n \n

\n LinkedIn\n
\n Twitter\n
\n Facebook\n

","css":".card {\n --cardbg: 245, 245, 245;\n --cardBase: 235, 16, 206;\n --cardText: 100, 100, 100;\n --cardTextBtn: 106, 16, 88;\n --cardsquares: 156, 113, 227;\n display: flex;\n flex-flow: column nowrap;\n place-items: center;\n text-align: center;\n border: 1px solid #ccc;\n box-shadow: 0 0 3em rgba(var(--cardBase), .25),\n inset 0 -.25em 1px rgba(var(--cardBase), .125);\n border-radius: 4px;\n background: rgba(var(--cardbg), 1);\n position: relative;\n width: 220px;\n height: 310px;\n perspective: 1000px;\n z-index: 0;\n transition: all 1s ease-out;\n}\n\n.card:hover {\n filter: grayscale(0%);\n scale: 1.025;\n box-shadow: 0 0 5em rgba(var(--cardBase), .5);\n}\n\n.card::after,\n.card::before {\n content: '';\n width: 200px;\n height: 50%;\n display: block;\n background-color: rgba(var(--cardsquares), .5);\n filter: blur(10px);\n position: absolute;\n transition: all 5s ease-out;\n opacity: .1;\n z-index: 0;\n}\n\n.card:hover::after,\n.card:hover::before {\n opacity: .5;\n rotate: 60deg;\n}\n\n.card:hover::after {\n translate: 100% 0;\n}\n\n.card:hover::before {\n translate: -100% 0;\n}\n\n.card .card-title {\n color: rgba(var(--cardText), .75);\n font-size: 1.1em;\n font-weight: 600;\n margin: .5em;\n position: relative;\n transition: all .3s ease-out;\n z-index: 100;\n text-shadow: 0px 0px 0px rgba(var(--cardText), .25);\n}\n\n.card:hover h3 {\n color: rgba(var(--cardText), 1);\n text-shadow: 0px 8px 5px rgba(var(--cardText), .35);\n}\n\n.card:hover span {\n filter: grayscale(0%);\n}\n\n/* Inner card */\n.card-info::after {\n left: -6rem;\n bottom: 0;\n}\n\n.card-info::before {\n right: -6rem;\n top: 1rem;\n}\n\n/* Avatar container */\n.card-info span {\n color: rgba(var(--cardBase), 1);\n display: flex;\n place-items: center;\n text-align: center;\n border-radius: 50%;\n overflow: hidden;\n background-color: rgba(var(--cardBase), .5);\n height: 80px;\n width: 50%;\n box-shadow: inset 0px 2px 4px rgba(var(--cardBase), .95),\n inset 0px 2px 40px rgba(var(--cardbg), .95);\n position: relative;\n transition: all .3s ease-out .1s;\n filter: grayscale(75%);\n z-index: 0;\n}\n\n.card-info span:hover .avatar {\n scale: 1.5;\n}\n\n.avatar {\n transition: all .3s ease-out;\n position: relative;\n}\n\n/* Inner card container and UI */\n.card-info {\n --angle: 0deg;\n display: flex;\n flex-flow: column nowrap;\n place-items: center;\n padding: 1em;\n margin: 0 .75em;\n color: rgba(var(--cardText), 1);\n background-color: rgba(250, 246, 246, 1);\n transition: all .5s ease-out;\n animation: animateBorder 10s linear infinite reverse;\n border: .15em solid;\n position: relative;\n z-index: 10;\n border-image: linear-gradient(var(--angle), rgba(var(--cardbg), 1), rgba(var(--cardBase), .5), rgba(var(--cardbg), 1)) 1;\n}\n\n.card-info p {\n color: rgba(var(--cardText), 1);\n line-height: 1.25em;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 3;\n font-size: 1em;\n margin: 1em 0;\n transition: all .3s ease-out .3s;\n}\n\n.card-info .btn {\n display: block;\n padding: 8px 16px;\n background-color: rgba(var(--cardBase), .35);\n color: rgba(var(--cardTextBtn), .75);\n text-decoration: none;\n border-radius: 4px;\n font-size: .85em;\n transition: all 0.3s ease-in-out;\n}\n\n.card-info .btn:hover {\n cursor: pointer;\n background-color: rgba(var(--cardsquares), .35);\n}\n\n.card-info .btn:active {\n box-shadow: inset 0px -2px 3px rgba(var(--cardBase), .25);\n}\n\n/* Card links container */\n.card-links {\n transition: all .3s linear;\n opacity: 0;\n display: flex;\n flex-flow: row wrap;\n gap: 1em;\n position: relative;\n top: -2rem;\n list-style: none;\n color: rgba(var(--cardText), 1);\n font-size: .75em\n}\n\n.card-links a {\n transition: color .3s ease-out;\n}\n\n.card-links a:hover {\n color: rgba(var(--cardBase), .75);\n}\n\n/* Card chckbox active state */\n.card input[type=\"checkbox\"] {\n visibility: hidden;\n}\n\n.card:hover:has(#toggle:checked) .card-title {\n text-shadow: 0px 2px 5px rgba(var(--cardText), .35);\n}\n\n.card:has(#toggle:checked) {\n border-radius: 10px;\n height: 295px;\n}\n\n.card:has(#toggle:checked) .card-info > *:not(.btn):not(span) {\n opacity: 0;\n}\n\n.card:has(#toggle:checked) .card-info {\n translate: 0 -20%;\n border-width: 1px;\n border: none;\n box-shadow: inset 0 0 5px rgba(var(--cardBase), .5),\n inset 0px 0px 2px rgba(var(--cardText), .25),\n inset 0px 30px 40px rgba(var(--cardBase), .25);\n border-radius: 10px;\n}\n\n.card:has(#toggle:checked) .card-info span {\n translate: 0 75%;\n}\n\n.card:has(#toggle:checked) .card-info p {\n transition: all .1s ease-out;\n}\n\n.card:has(#toggle:checked) .card-links {\n opacity: 1;\n top: -2rem;\n}\n\n.card #toggle {\n visibility: hidden;\n}\n\n@keyframes animateBorder {\n to {\n --angle: 360deg;\n }\n}\n\n@property --angle {\n syntax: '';\n initial-value: 0deg;\n inherits: false;\n}"},{"created":"2024-01-22T17:11:15.000Z","isPrivate":0,"projectId":"191f75","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1537,"cssLen":2684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Corporate\n

Grow steadily and pizza.

\n \n $35\n \n /mo \n

\n \n Get started\n \n

","css":".mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-6 {\n margin-top: 1.5rem\n}\n\n.flex {\n display: flex\n}\n\n.grid {\n display: grid\n}\n\n.w-full {\n width: 100%\n}\n\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr))\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-3xl {\n border-radius: 1.5rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem\n}\n\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem\n}\n\n.pb-8 {\n padding-bottom: 2rem\n}\n\n.text-left {\n text-align: left\n}\n\n.text-center {\n text-align: center\n}\n\n.text-5xl {\n font-size: 3rem;\n line-height: 1\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-light {\n font-weight: 300\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.tracking-tight {\n letter-spacing: -0.025em\n}\n\n.tracking-tighter {\n letter-spacing: -0.05em\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.text-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(243 244 246 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:border-white:hover {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity))\n}\n\n.hover\\:bg-transparent:hover {\n background-color: transparent\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus-visible\\:outline-white:focus-visible {\n outline-color: #fff\n}\n\n.focus-visible\\:ring-white:focus-visible {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))\n}\n\n@media (min-width: 640px) {\n .sm\\:p-10 {\n padding: 2.5rem\n }\n\n .sm\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem\n }\n\n .sm\\:pb-6 {\n padding-bottom: 1.5rem\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n }\n}"}]}},"actionData":null,"errors":null}