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

\n \n

\n Good news Mac users!\n

This software is now available for download.

\n Try it free\n

\n Not now\n

\n \n

\n","css":".card {\n max-width: 320px;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n border-radius: 0.5rem;\n background: #606c88;\n background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);\n background: linear-gradient(to right top, #3f4c6b, #606c88);\n padding: 1rem;\n color: rgb(107, 114, 128);\n box-shadow: 0px 87px 78px -39px rgba(0, 0, 0, 0.4);\n}\n\n.icon {\n height: 2rem;\n width: 2rem;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n background-color: #153586;\n color: rgb(59, 130, 246);\n}\n\n.icon svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\n.content {\n margin-left: 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n}\n\n.title {\n margin-bottom: 0.25rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n color: rgb(255, 255, 255);\n cursor: default;\n}\n\n.desc {\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n color: rgb(202, 200, 200);\n cursor: default;\n}\n\n.actions {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-gap: 0.5rem;\n gap: 0.5rem;\n}\n\n.download,\n.notnow {\n width: 100%;\n display: inline-flex;\n justify-content: center;\n border-radius: 0.5rem;\n padding: 0.375rem 0.5rem;\n text-align: center;\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(255, 255, 255);\n outline: 2px solid transparent;\n border: 1px solid rgba(253, 253, 253, 0.363);\n}\n\n.download {\n background-color: #284385;\n font-weight: 600;\n text-decoration: none;\n transition: all 0.25s cubic-bezier(0.18, 0.69, 0.18, 0.94);\n}\n\n.download:hover {\n background-color: #153586;\n}\n\n.notnow {\n background-color: #606c88;\n font-weight: 500;\n text-decoration: none;\n transition: all 0.25s cubic-bezier(0.18, 0.69, 0.18, 0.94);\n}\n\n.notnow:hover {\n background-color: #3f4c6b;\n}\n\n.close {\n margin: -0.375rem -0.375rem -0.375rem auto;\n height: 2rem;\n width: 2rem;\n display: inline-flex;\n border-radius: 0.5rem;\n background-color: #606c88;\n padding: 0.375rem;\n color: rgba(255, 255, 255, 1);\n border: none;\n transition: all 0.25s cubic-bezier(0.18, 0.69, 0.18, 0.94);\n cursor: pointer;\n}\n\n.close svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\n.close:hover {\n background-color: rgb(58, 69, 83);\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a90974","snapshot":null,"tags":null,"title":"card by Saad3092003","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":748,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello There

\n","css":".one-div {\n position: relative;\n height: 250px;\n width: 200px;\n background-color: rgb(15, 15, 15);\n transform-style: preserve-3d;\n animation: rot 2s infinite ease;\n border-radius: 20px;\n box-shadow: 0 0 50px 0px, inset 0 0 90px 0px;\n color: white;\n transition: 1s;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.one-div .text {\n opacity: 0;\n transition: all 0.5s;\n}\n\n.one-div:hover.one-div .text {\n scale: 1.2;\n opacity: 0.7;\n}\n\n.one-div:hover {\n box-shadow: 0 0 50px 0px, inset 5px 5px 20px 0px black;\n}\n\n@keyframes rot {\n 0% {\n transform: rotateX(-15deg) translateY(0px);\n }\n\n 50% {\n transform: rotateX(-15deg) translateY(-10px);\n }\n\n 100% {\n transform: rotateX(-15deg) translateY(0px);\n }\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"9f04c9","snapshot":null,"tags":null,"title":"card by qhns3","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":1085,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Popular this month

Uiverse

\n","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"f978b5","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":338,"cssLen":1351,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card Hover Effect\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi\n laboriosam at voluptas minus culpa deserunt delectus sapiente\n inventore pariatur\n

\n \n

","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 320px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n padding: 32px;\n overflow: hidden;\n border-radius: 10px;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n color: #e8e8e8;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content .heading {\n font-weight: 700;\n font-size: 32px;\n}\n\n.content .para {\n line-height: 1.5;\n}\n\n.content .btn {\n color: #e8e8e8;\n text-decoration: none;\n padding: 10px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n border-radius: 5px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n right: 0;\n bottom: 0;\n width: 5px;\n height: 100%;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n z-index: -1;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card:hover::before {\n width: 100%;\n}\n\n.card:hover {\n box-shadow: none;\n}\n\n.card:hover .btn {\n color: #212121;\n background: #e8e8e8;\n}\n\n.content .btn:hover {\n outline: 2px solid #e8e8e8;\n background: transparent;\n color: #e8e8e8;\n}\n\n.content .btn:active {\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a79b42","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":143,"cssLen":606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".YoutubeVideo {\n width: 250px;\n height: 220px;\n background: transparent;\n}\n\n.Image {\n width: 250px;\n height: 154px;\n border-radius: 10px;\n background: #3a3a3a;\n}\n\n.Icon {\n width: 40px;\n height: 40px;\n border-radius: 100px;\n float: right;\n background-color: #3a3a3a;\n transform: translate(0px,10px);\n}\n\n.Title {\n width: 180px;\n height: 15px;\n border-radius: 2px;\n float: right;\n background-color: #3a3a3a;\n transform: translate(-15px,10px);\n}\n\n.Name {\n width: 100px;\n height: 15px;\n border-radius: 2px;\n float: right;\n background-color: #3a3a3a;\n transform: translate(-15px,20px);\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"a12f03","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":471,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #555;\n border-radius: 8px;\n z-index: 1;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n}\n\n.circle {\n padding: 0 4px;\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:03.000Z","isPrivate":0,"projectId":"40497d","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2092,"cssLen":1903,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n\n\n

Education

\n\n\n

","css":".education {\n --bg-color: #ffd861;\n --bg-color-light: #ffeeba;\n --text-color-hover: #4C5656;\n --box-shadow-color: rgba(255, 215, 97, 0.48);\n}\n\n.card {\n width: 220px;\n height: 321px;\n background: #fff;\n border-top-right-radius: 10px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0 14px 26px rgba(0,0,0,0.04);\n transition: all 0.3s ease-out;\n text-decoration: none;\n}\n\n.card:hover {\n transform: translateY(-5px) scale(1.005) translateZ(0);\n box-shadow: 0 24px 36px rgba(0,0,0,0.11),\n 0 24px 46px var(--box-shadow-color);\n}\n\n.card:hover .overlay {\n transform: scale(4) translateZ(0);\n}\n\n.card:hover .circle {\n border-color: var(--bg-color-light);\n background: var(--bg-color);\n}\n\n.card:hover .circle:after {\n background: var(--bg-color-light);\n}\n\n.card:hover p {\n color: var(--text-color-hover);\n}\n\n.card:active {\n transform: scale(1) translateZ(0);\n box-shadow: 0 15px 24px rgba(0,0,0,0.11),\n 0 15px 24px var(--box-shadow-color);\n}\n\n.card p {\n font-size: 17px;\n color: #4C5656;\n margin-top: 30px;\n z-index: 1000;\n transition: color 0.3s ease-out;\n}\n\n.circle {\n width: 131px;\n height: 131px;\n border-radius: 50%;\n background: #fff;\n border: 3px solid var(--bg-color);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n transition: all 0.3s ease-out;\n}\n\n.circle:after {\n content: \"\";\n width: 118px;\n height: 118px;\n display: block;\n position: absolute;\n background: var(--bg-color);\n border-radius: 50%;\n transition: opacity 0.3s ease-out;\n}\n\n.circle svg {\n z-index: 10000;\n transform: translateZ(0);\n}\n\n.overlay {\n width: 118px;\n position: absolute;\n height: 118px;\n border-radius: 50%;\n background: var(--bg-color);\n top: 70px;\n left: 50px;\n z-index: 0;\n transition: transform 0.3s ease-out;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"f73589","snapshot":null,"tags":null,"title":"card by sabbircoder07","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4887,"cssLen":7610,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Your Result

of 100

Great

\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

\n \n\n","css":".results-summary-container {\n font-family: \"Hanken Grotesk\", sans-serif;\n display: flex;\n width: 550px;\n gap: 10px;\n border-radius: 30px;\n box-shadow: 10px 10px 30px rgba(120, 87, 255, 0.3);\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 margin-top: 20px;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.heading-primary {\n font-size: 46px;\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: 20px;\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 margin-bottom: 15px;\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 width: 50%;\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n justify-content: center;\n padding: 10px 5px;\n border-radius: 30px 10px;\n background-image: linear-gradient(to bottom, #aa076b, #61045f);\n animation: gradient 10s linear infinite;\n .result-box {\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background-position: 100% 50%;\n background-image: linear-gradient(to bottom, #aa076b, #61045f);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n animation: gradient 10s linear infinite;\n}\n\n.result {\n margin-top: -18px;\n font-size: 14px;\n font-weight: 400;\n color: hsl(241, 100%, 89%);\n}\n}\n\n.results-summary-container__options {\n padding: 10px;\n}\n\n.summary-result-options {\n display: flex;\n flex-direction: column;\n gap: 25px;\n}\n\n.result-option {\n width: 210px;\n height: 36px;\n background-color: hsl(0, 100%, 95%);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.result-option-memory {\n background-color: hsl(39, 100%, 95%);\n}\n\n.result-option-verbal {\n background-color: hsl(166, 100%, 95%);\n}\n\n.result-option-Visual {\n background-color: hsl(234, 85%, 95%);\n}\n\n.icon-box {\n display: flex;\n font-size: 14px;\n align-items: center;\n gap: 1px;\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: 5px;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s;\n animation: background 10s linear infinite;\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: 240px;\n height: 100%;\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 linear;\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(250px);\n }\n}\n"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"32e4d8","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1383,"cssLen":1441,"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, #fc00ff 0%, #00dbde 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, #fc00ff 0%, #00dbde 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: #212121;\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 justify-content: center;\n gap: 10px;\n color: #e8e8e8;\n padding: 20px 24px;\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:03.000Z","isPrivate":0,"projectId":"070adc","snapshot":null,"tags":null,"title":"card by kamehame-ha","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":277,"cssLen":490,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Scroll On Me

","css":".red {\n background-color: #f43f5e;\n}\n\n.blue {\n background-color: #3b82f6;\n}\n\n.green {\n background-color: #22c55e;\n}\n\n.scroll-snap-card {\n height: 150px;\n width: 250px;\n scroll-snap-type: y mandatory;\n overflow: auto;\n border-radius: 10px;\n}\n\n.scroll-snap-card .slide {\n width: 100%;\n height: 100%;\n scroll-snap-align: start;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.scroll-snap-card .slide p {\n font-size: 1em;\n color: white;\n font-weight: 700;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"002cd1","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1846,"cssLen":3157,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\t

\n\t\t

\n\t\t\t

\n\t\t\t\tGet Your Document\n\t\t\t\t

Access your document instantly, simply click the download link.

\n\t\t\t

\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t

\n\t\t

\n\t

","css":".relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-48{height:12rem}.h-6{height:1.5rem}.h-full{height:100%}.w-6{width:1.5rem}.w-64{width:16rem}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:0.75rem}.bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-cyan-800{--tw-gradient-from:#155e75 var(--tw-gradient-from-position);--tw-gradient-to:rgb(21 94 117 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-cyan-700{--tw-gradient-to:rgb(14 116 144 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0e7490 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.stroke-cyan-800{stroke:#155e75}.p-3{padding:0.75rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-left-4::before{content:var(--tw-content);left:-1rem}.before\\:-top-12::before{content:var(--tw-content);top:-3rem}.before\\:h-28::before{content:var(--tw-content);height:7rem}.before\\:w-28::before{content:var(--tw-content);width:7rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:border-8::before{content:var(--tw-content);border-width:8px}.before\\:bg-transparent::before{content:var(--tw-content);background-color:transparent}.before\\:opacity-50::before{content:var(--tw-content);opacity:0.5}.before\\:blur-none::before{content:var(--tw-content);--tw-blur:blur(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\\:duration-700::before{content:var(--tw-content);transition-duration:700ms}.hover\\:opacity-90:hover{opacity:0.9}.group:hover .group-hover\\:before\\:left-44::before{content:var(--tw-content);left:11rem}.group:hover .group-hover\\:before\\:top-28::before{content:var(--tw-content);top:7rem}.group:hover .group-hover\\:before\\:scale-125::before{content:var(--tw-content);--tw-scale-x:1.25;--tw-scale-y:1.25;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\\:before\\:blur::before{content:var(--tw-content);--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"eae6e5","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3763,"cssLen":1908,"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

Credentialing

\n\n\n\n\n

","css":".credentialing {\n --bg-color: #B8F9D3;\n --bg-color-light: #e2fced;\n --text-color-hover: #4C5656;\n --box-shadow-color: rgba(184, 249, 211, 0.48);\n}\n\n.card {\n width: 220px;\n height: 321px;\n background: #fff;\n border-top-right-radius: 10px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0 14px 26px rgba(0,0,0,0.04);\n transition: all 0.3s ease-out;\n text-decoration: none;\n}\n\n.card:hover {\n transform: translateY(-5px) scale(1.005) translateZ(0);\n box-shadow: 0 24px 36px rgba(0,0,0,0.11),\n 0 24px 46px var(--box-shadow-color);\n}\n\n.card:hover .overlay {\n transform: scale(4) translateZ(0);\n}\n\n.card:hover .circle {\n border-color: var(--bg-color-light);\n background: var(--bg-color);\n}\n\n.card:hover .circle:after {\n background: var(--bg-color-light);\n}\n\n.card:hover p {\n color: var(--text-color-hover);\n}\n\n.card:active {\n transform: scale(1) translateZ(0);\n box-shadow: 0 15px 24px rgba(0,0,0,0.11),\n 0 15px 24px var(--box-shadow-color);\n}\n\n.card p {\n font-size: 17px;\n color: #4C5656;\n margin-top: 30px;\n z-index: 1000;\n transition: color 0.3s ease-out;\n}\n\n.circle {\n width: 131px;\n height: 131px;\n border-radius: 50%;\n background: #fff;\n border: 3px solid var(--bg-color);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n transition: all 0.3s ease-out;\n}\n\n.circle:after {\n content: \"\";\n width: 118px;\n height: 118px;\n display: block;\n position: absolute;\n background: var(--bg-color);\n border-radius: 50%;\n transition: opacity 0.3s ease-out;\n}\n\n.circle svg {\n z-index: 10000;\n transform: translateZ(0);\n}\n\n.overlay {\n width: 118px;\n position: absolute;\n height: 118px;\n border-radius: 50%;\n background: var(--bg-color);\n top: 70px;\n left: 50px;\n z-index: 0;\n transition: transform 0.3s ease-out;\n}"}]}},"actionData":null,"errors":null}