{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"0ab12b","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1130,"cssLen":742,"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":".error {\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: #FCE8DB;\n border-radius: 8px;\n border: 1px solid #EF665B;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.error__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.error__icon path {\n fill: #EF665B;\n}\n\n.error__title {\n font-weight: 500;\n font-size: 14px;\n color: #71192F;\n}\n\n.error__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.error__close path {\n fill: #71192F;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"54b263","snapshot":null,"tags":null,"title":"card by 00Kubi","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":797,"cssLen":2428,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

00Kubi@admin: ~

\n 00Kubi@admin:\n ~\n $\n \n

Welcome to Terminal

\n \n

\n","css":".container {\n width: 400px;\n height: 300px;\n background: #1e1e1e;\n font-family: Menlo, Consolas, monospace;\n font-size: 14px;\n color: #e6e6e6;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.terminal_toolbar {\n display: flex;\n height: 30px;\n align-items: center;\n padding: 0 8px;\n box-sizing: border-box;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: #212121;\n justify-content: space-between;\n}\n\n.butt {\n display: flex;\n align-items: center;\n}\n\n.btn {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n margin-right: 5px;\n font-size: 8px;\n height: 12px;\n width: 12px;\n box-sizing: border-box;\n border: none;\n border-radius: 100%;\n background: linear-gradient(#7d7871 0%, #595953 100%);\n text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);\n box-shadow: 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642;\n}\n\n.btn-color {\n background: #ee411a;\n}\n\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:focus {\n outline: none;\n}\n\n.butt--exit {\n background: linear-gradient(#f37458 0%, #de4c12 100%);\n}\n\n.add_tab {\n border: 1px solid #fff;\n color: #fff;\n padding: 0 6px;\n border-radius: 4px 4px 0 0;\n border-bottom: none;\n cursor: pointer;\n}\n\n.user {\n color: #d5d0ce;\n margin-left: 6px;\n font-size: 14px;\n line-height: 15px;\n}\n\n.terminal_body {\n background: rgba(0, 0, 0, 0.6);\n height: calc(100% - 30px);\n padding-top: 2px;\n margin-top: -1px;\n font-size: 12px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.terminal_prompt {\n display: flex;\n align-items: center;\n padding: 4px;\n}\n\n.terminal_prompt span {\n margin-left: 4px;\n}\n\n.terminal_user {\n color: #1eff8e;\n}\n\n.terminal_location {\n color: #4878c0;\n}\n\n.terminal_bling {\n color: #dddddd;\n}\n\n.terminal_cursor {\n display: block;\n height: 14px;\n width: 5px;\n margin-left: 10px;\n animation: curbl 1200ms linear infinite;\n}\n\n.terminal_output {\n padding: 4px;\n flex-grow: 1;\n overflow-y: auto;\n}\n\n.output_text {\n margin: 0;\n}\n\n.terminal_input {\n padding: 4px;\n}\n\n.input_text {\n width: 100%;\n padding: 6px;\n background: transparent;\n border: none;\n color: #e6e6e6;\n caret-color: #1eff8e;\n}\n\n@keyframes curbl {\n 0% {\n background: #ffffff;\n }\n\n 49% {\n background: #ffffff;\n }\n\n 60% {\n background: transparent;\n }\n\n 99% {\n background: transparent;\n }\n\n 100% {\n background: #ffffff;\n }\n}\n"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"82616f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1295,"cssLen":3290,"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 Text title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat\n felis nec rutrum vulputate. Morbi ut lobortis enim. Nam nec elit nibh.\n

\n \n See more\n \n

\n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-24{bottom:-6rem}.-top-12{top:-3rem}.bottom-12{bottom:3rem}.right-1{right:0.25rem}.right-12{right:3rem}.z-10{z-index:10}.flex{display:flex}.h-12{height:3rem}.h-24{height:6rem}.h-36{height:9rem}.h-64{height:16rem}.h-72{height:18rem}.h-full{height:100%}.w-12{width:3rem}.w-24{width:6rem}.w-36{width:9rem}.w-72{width:18rem}.w-96{width:24rem}.w-full{width:100%}.flex-col{flex-direction:column}.justify-evenly{justify-content:space-evenly}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.bg-indigo-700{--tw-bg-opacity:1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}.bg-indigo-800{--tw-bg-opacity:1;background-color:rgb(55 48 163 / var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.bg-sky-700{--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.bg-sky-900{--tw-bg-opacity:1;background-color:rgb(12 74 110 / var(--tw-bg-opacity))}.p-3{padding:0.75rem}.p-4{padding:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity))}.blur{--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)}.duration-500{transition-duration:500ms}.hover\\:bg-neutral-200:hover{--tw-bg-opacity:1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}.group:hover .group-hover\\:-translate-x-12{--tw-translate-x:-3rem;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\\:-translate-y-12{--tw-translate-y:-3rem;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\\:translate-x-12{--tw-translate-x:3rem;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\\:translate-y-12{--tw-translate-y:3rem;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\\:translate-y-2{--tw-translate-y:0.5rem;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\\:blur-none{--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)}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"6caacd","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":659,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

lorem ipsum dolor sit amet

","css":".warning {\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: #FEF7D1;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.warning__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.warning__icon path {\n fill: #F7C752;\n}\n\n.warning__title {\n font-weight: 500;\n font-size: 14px;\n color: #755118;\n}\n\n.warning__close {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n}\n\n.warning__close path {\n fill: #755118;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"c919c0","snapshot":null,"tags":null,"title":"card by joe-watson-sbf","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":958,"cssLen":1264,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

\n Lorem ipsum dolor sit tali amet, consectus uy\n adipiscing it amet it...\n

\n\n Read More...\n

","css":".card {\n width: 190px;\n height: 120px;\n transition: all .5s;\n box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),\n -15px -15px 30px rgba(60, 60, 60, 0.082);\n text-align: center;\n overflow: hidden;\n}\n\n.card:hover {\n height: 260px;\n background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);\n}\n\n.card .header {\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: #212121;\n margin-bottom: 16px;\n}\n\n.card .header .img-box {\n width: 50px;\n}\n\n.card .header .title {\n font-size: 1em;\n letter-spacing: .1em;\n font-weight: 900;\n text-transform: uppercase;\n padding: 4px 0 14px 0;\n transition: all .5s;\n color: #edededc5;\n}\n\n.card:hover .header {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);\n}\n\n.card:hover .card .header .title {\n padding: 0;\n}\n\n.card .content {\n display: block;\n text-align: left;\n color: #212121;\n margin: 0 18px;\n}\n\n.card .content p {\n transition: all .5s;\n font-size: .8em;\n margin-bottom: 8px;\n}\n\n.card .content a {\n color: #1d8122;\n cursor: pointer;\n transition: all .5s;\n font-size: .7rem;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.card .content .btn-link:hover {\n border-bottom: 1px solid #1d8122;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"1ae29b","snapshot":null,"tags":null,"title":"card by Kemboi-Dun","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":648,"cssLen":431,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n

","css":".card {\n width: 300px;\n height: 300px;\n background: #e4e3e3da;\n border-radius: 1em;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n gap: 0.4em;\n align-items: flex-start;\n padding: 1em 1.5em;\n transition: all 0.5s ease;\n box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n}\n\n.card:hover {\n background: #f1f1f1;\n}\n\n.card-icon svg {\n height: 4rem;\n width: 4rem;\n}\n\n.card-body {\n text-align: justify;\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"bace58","snapshot":null,"tags":null,"title":"card by tsd29142","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":382,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n height: 250px;\n width: 190px;\n background-image: linear-gradient(to top, #210c93, #0d117a, #011160, #010e47, #07052e);\n box-shadow: rgba(0, 0, 0, 0.24) -20px 30px 10px;\n transform-style: preserve-3d;\n transform: perspective(400px)\n rotateX(60deg)\n rotateZ(-30deg);\n border-radius: 10px;\n transition: transform 2s;\n}\n\n.card:hover {\n transform: rotateY(19deg);\n}"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"7df3a4","snapshot":null,"tags":null,"title":"card by zebra76966","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5808,"cssLen":774,"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","css":".card {\n width: 290px;\n height: 64px;\n background: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n border-radius: 20px;\n position: relative;\n border: 2px solid transparent;\n transition: all 0.5s ease-in-out;\n}\n\n.card:focus-within {\n background-color: rgba(17, 17, 17, 0.5);\n backdrop-filter: blur(10px);\n border: 2px solid rgb(27, 27, 27);\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n}\n\n.card button {\n font-size: 34px;\n background-color: transparent;\n width: 50px;\n padding: 7px;\n height: 50px;\n border-radius: 100%;\n transition: all 0.2s ease-in;\n border: 0;\n cursor: pointer;\n}\n\n.card button:focus {\n background-color: rgb(255, 255, 255);\n margin-bottom: 50%;\n}\n\n.card::hover {\n}\n\n"},{"created":"2024-01-22T17:11:33.000Z","isPrivate":0,"projectId":"e0a5ec","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":338,"cssLen":1350,"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 left: 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:32.000Z","isPrivate":0,"projectId":"103a65","snapshot":null,"tags":null,"title":"card by Sashank02","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":347,"cssLen":725,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card title

\n Nullam ac tristique nulla, at convallis quam. Integer consectetur mi nec magna tristique, non lobortis.\n

\n \n

","css":".card {\n padding: 20px;\n width: 330px;\n min-height: 370px;\n border-radius: 20px;\n background: #e8e8e8;\n box-shadow: 5px 5px 6px #dadada,\n -5px -5px 6px #f6f6f6;\n transition: 0.4s;\n}\n\n.card:hover {\n translate: 0 -10px;\n}\n\n.card-title {\n font-size: 18px;\n font-weight: 600;\n color: #2e54a7;\n margin: 15px 0 0 10px;\n}\n\n.card-image {\n min-height: 170px;\n background-color: #c9c9c9;\n border-radius: 15px;\n box-shadow: inset 8px 8px 10px #c3c3c3,\n inset -8px -8px 10px #cfcfcf;\n}\n\n.card-body {\n margin: 13px 0 0 10px;\n color: rgb(31, 31, 31);\n font-size: 15px;\n}\n\n.footer {\n float: right;\n margin: 28px 0 0 18px;\n font-size: 13px;\n color: #636363;\n}\n\n.by-name {\n font-weight: 700;\n}"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"0c6bbc","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":210,"cssLen":1636,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card hover effect

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n

\n","css":".card {\n width: 300px;\n height: 200px;\n background-color: #4158d0;\n background-image: linear-gradient(\n 43deg,\n #4158d0 0%,\n #c850c0 46%,\n #ffcc70 100%\n );\n border-radius: 8px;\n color: white;\n overflow: hidden;\n position: relative;\n transform-style: preserve-3d;\n perspective: 1000px;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n cursor: pointer;\n transform: translate3d(7%, -2%, 0px) scale3d(0.9, 0.8, 1) rotateX(15deg)\n rotateY(-9deg) rotateZ(32deg);\n}\n\n.card-content {\n padding: 20px;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 10px;\n color: white;\n align-items: center;\n justify-content: center;\n text-align: center;\n height: 100%;\n}\n\n.card-content .card-title {\n font-size: 24px;\n font-weight: 700;\n color: inherit;\n text-transform: uppercase;\n}\n\n.card-content .card-para {\n color: inherit;\n opacity: 0.8;\n font-size: 14px;\n}\n\n.card:hover {\n transform: rotateY(0) rotateX(0) scale(1);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n}\n\n.card:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 1;\n}\n\n.card:hover:before {\n transform: translateX(-100%);\n}\n\n.card:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 1;\n}\n\n.card:hover:after {\n transform: translateX(100%);\n}\n"},{"created":"2024-01-22T17:11:32.000Z","isPrivate":0,"projectId":"f4aaeb","snapshot":null,"tags":null,"title":"card by itsavicreation","updated":"2024-01-22T17:11:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9907,"cssLen":1546,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Vikash Deep Yadav

Web Development

\n \n \n

\n","css":".card {\n --main-color: #000;\n --submain-color: #78858f;\n --bg-color: #fff;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n position: relative;\n width: 300px;\n height: 384px;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 20px;\n background: var(--bg-color);\n}\n\n.card__img {\n height: 192px;\n width: 100%;\n}\n\n.card__img svg {\n height: 100%;\n border-radius: 20px 20px 0 0;\n}\n\n.card__avatar {\n position: absolute;\n width: 114px;\n height: 114px;\n background: var(--bg-color);\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: calc(50% - 57px);\n}\n\n.card__avatar svg {\n width: 100px;\n height: 100px;\n}\n\n.card__title {\n margin-top: 60px;\n font-weight: 500;\n font-size: 18px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 10px;\n font-weight: 400;\n font-size: 15px;\n color: var(--submain-color);\n}\n\n.card__btn {\n margin-top: 15px;\n width: 76px;\n height: 31px;\n border: 2px solid var(--main-color);\n border-radius: 4px;\n font-weight: 700;\n font-size: 11px;\n color: var(--main-color);\n background: var(--bg-color);\n text-transform: uppercase;\n transition: all 0.3s;\n}\n\n.card__btn-solid {\n background: var(--main-color);\n color: var(--bg-color);\n}\n\n.card__btn:hover {\n background: var(--main-color);\n color: var(--bg-color);\n}\n\n.card__btn-solid:hover {\n background: var(--bg-color);\n color: var(--main-color);\n}\n"}]}},"actionData":null,"errors":null}