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

\n \n

Discount

Up to

\n 70%\n \n

*Variable prices

","css":".absolute{position:absolute}.relative{position:relative}.-bottom-12{bottom:-3rem}.-right-12{right:-3rem}.z-10{z-index:10}.-mt-1{margin-top:-0.25rem}.mb-1{margin-bottom:0.25rem}.mb-5{margin-bottom:1.25rem}.inline-block{display:inline-block}.flex{display:flex}.h-40{height:10rem}.h-64{height:16rem}.w-40{width:10rem}.w-56{width:14rem}.-rotate-12{--tw-rotate:-12deg;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))}.-skew-x-12{--tw-skew-x:-12deg;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))}.-skew-y-12{--tw-skew-y:-12deg;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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-400{--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.stroke-current{stroke:currentColor}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-7xl{font-size:4.5rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-extrabold{font-weight:800}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248 / var(--tw-text-opacity))}.opacity-30{opacity:0.3}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:top-1\\/2::before{content:var(--tw-content);top:50%}.before\\:-ml-14::before{content:var(--tw-content);margin-left:-3.5rem}.before\\:h-0::before{content:var(--tw-content);height:0px}.before\\:h-0\\.5::before{content:var(--tw-content);height:0.125rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:bg-sky-200::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(186 230 253 / var(--tw-bg-opacity))}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:top-1\\/2::after{content:var(--tw-content);top:50%}.after\\:ml-2::after{content:var(--tw-content);margin-left:0.5rem}.after\\:h-0::after{content:var(--tw-content);height:0px}.after\\:h-0\\.5::after{content:var(--tw-content);height:0.125rem}.after\\:w-12::after{content:var(--tw-content);width:3rem}.after\\:bg-sky-200::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(186 230 253 / var(--tw-bg-opacity))}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.hover\\:bg-sky-300:hover{--tw-bg-opacity:1;background-color:rgb(125 211 252 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"18fb2e","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":891,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

YOUR
CONTENT
HERE

","css":".card {\n --bg: #555;\n --contrast: #999;\n --grey: #93a1a1;\n position: relative;\n padding: 9px;\n background-color: var(--bg);\n border-radius: 35px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n}\n\n.card-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: repeating-conic-gradient(var(--bg) 0.0000001%, var(--grey) 0.000104%) 60% 60%/600% 600%;\n filter: opacity(10%) contrast(105%);\n}\n\n.card-inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: 190px;\n height: 254px;\n background-color: var(--contrast);\n border-radius: 30px;\n /* Content style */\n font-size: 30px;\n font-weight: 900;\n color: #c7c4c4;\n text-align: center;\n font-family: monospace;\n}"},{"created":"2024-01-22T17:11:03.000Z","isPrivate":0,"projectId":"7b9d77","snapshot":null,"tags":null,"title":"card by SmookyDev","updated":"2024-01-22T17:11:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1053,"cssLen":1776,"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 WEBSITE SEO\n

\n Website ravida surna eveti semen the conse tusio anivite dianne one nivam\n acestion vue artin dictum.\n

\n \n 09\n

\n\n","css":".flex {\n display: flex;\n}\n.h-12 {\n height: 3rem;\n}\n.w-12 {\n width: 3rem;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.snap-start {\n scroll-snap-align: start;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-start {\n align-items: flex-start;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.self-end {\n align-self: flex-end;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.stroke-gray-800 {\n stroke: #1f2937;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-5xl {\n font-size: 3rem;\n line-height: 1;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-black\\/80 {\n color: rgb(0 0 0 / 0.8);\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.hover\\:bg-\\[\\#202127\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(32 33 39 / var(--tw-bg-opacity));\n}\n.group:hover .group-hover\\:stroke-gray-400 {\n stroke: #9ca3af;\n}\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n"},{"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"}]}},"actionData":null,"errors":null}