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

monobank

PAVLO MATVIIENKO

XXXX XXXX XXXX XXXX

XX/XX

XXX

your-photo

debit

\n MONOBANK.UA | 0 800 205 205 | \n АТ \"УНІВЕРСАЛ БАНК\". ЛІЦЕНЗІЯ \n НБУ №92 ВІД 20.01.1994 | \n PCE PC100650 WORLD DEBIT\n

","css":".flex__1 {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n}\n\n.flex__2 {\n width: 100%;\n height: 50%;\n display: flex;\n flex-direction: row;\n}\n\n.card {\n height: 50mm;\n width: 84mm;\n position: relative;\n perspective: 800px;\n}\n\n.card__side {\n width: 100%;\n height: 100%;\n border-radius: 3.18mm;\n position: absolute;\n top: 0;\n left: 0;\n backface-visibility: hidden;\n transition: transform 0.7s ease-out;\n cursor: pointer;\n padding: 10px;\n}\n\n.card__side__photo {\n width: 1.4cm;\n height: 1.4cm;\n position: absolute;\n left: 12px;\n bottom: 15px;\n background: grey;\n border-radius: 8%;\n}\n\n.card__side_front {\n background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #242424 100%);\n transform: rotateY(0deg);\n}\n\n.card__side_back {\n background: linear-gradient(-90deg, rgb(0, 0, 0) 0%, #242424 100%);\n transform: rotateY(-180deg);\n color: #eeeeee;\n}\n\n.card__side__name-bank {\n font-family: Inter, sans-serif;\n font-weight: 500;\n position: relative;\n font-size: 22px;\n margin-left: 8px;\n color: white;\n}\n\n.card__side__name-bank::after {\n content: \"Universal Bank\";\n position: absolute;\n font-size: 6px;\n top: 105%;\n left: 21%;\n color: #635c77;\n}\n\n.card__side__name-bank::before {\n content: \"₴\";\n position: absolute;\n top: 0;\n right: 0;\n color: #635c77;\n}\n\n.card__side__chip {\n width: 1.3cm;\n height: 1cm;\n margin-left: 22px;\n margin-top: -35px;\n background: rgb(226, 175, 35);\n border-radius: 8px;\n}\n\n.card__side__chip:after {\n content: \"\";\n display: block;\n position: absolute;\n height: 24px;\n width: 24px;\n top: 80px;\n right: 15px;\n transform: scale(1.3);\n}\n\n.card__side__name-person {\n text-transform: uppercase;\n font-family: Roboto Mono, sans-serif;\n font-size: 14px;\n margin-bottom: 10px;\n margin-left: 20px;\n position: relative;\n display: block;\n color: white;\n}\n\n.card__side__name-person::before {\n content: \"\";\n display: block;\n position: absolute;\n width: 45px;\n aspect-ratio: 1 / 1;\n background: red;\n bottom: -10px;\n right: 0px;\n border-radius: 50%;\n}\n\n.card__side__name-person::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 45px;\n aspect-ratio: 1 / 1;\n background: orange;\n bottom: -10px;\n right: 23px;\n border-radius: 50%;\n}\n\n.card__side__black {\n background: black;\n width: 100%;\n height: 50px;\n border-radius: 3.18mm 3.18mm 0 0;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.card__side__number {\n font-size: 18px;\n font-family: Roboto Mono, sans-serif;\n color: #eeeeee;\n margin: 45px 0px 15px 10px;\n}\n\n.card__side__other-numbers {\n font-family: Roboto Mono, sans-serif;\n color: #eeeeee;\n display: block;\n margin-left: 10px;\n font-size: 12px;\n backface-visibility: hidden;\n position: relative;\n}\n\n.card__side__other-numbers::after {\n color: #635c77;\n position: absolute;\n font-size: 8px;\n left: 0;\n bottom: 60px;\n}\n\n.card__side__other-numbers_1::after {\n content: \"СТРОК\";\n}\n\n.card__side__other-numbers_2::after {\n content: \"КОД\";\n}\n\n.card__side__other-info {\n color: #635c77;\n font-size: 4px;\n text-align: center;\n font-family: Roboto Mono, sans-serif;\n position: absolute;\n bottom: 10px;\n left: 38px;\n backface-visibility: hidden;\n}\n\n.card__side__debit {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 1.8cm;\n height: 1cm;\n border-radius: 1cm;\n background: #c0c0c0;\n position: absolute;\n right: 12px;\n bottom: 25px;\n font-family: Inter;\n color: #666666;\n}\n\n.card__side__debit::after {\n content: \"\";\n display: block;\n position: absolute;\n background: rgba(166, 163, 163, 0.7);\n width: 30px;\n height: 30px;\n border-radius: 50%;\n right: 0;\n}\n\n.card:hover .card__side_front {\n transform: rotateY(180deg);\n}\n\n.card:hover .card__side_back {\n transform: rotateY(0deg);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"c05bc6","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":428,"cssLen":1419,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover me

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 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.card {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.card .front-content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)\n}\n\n.card .front-content p {\n font-size: 32px;\n font-weight: 700;\n opacity: 1;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\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 align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n color: #e8e8e8;\n padding: 20px;\n line-height: 1.5;\n border-radius: 5px;\n pointer-events: none;\n transform: translatex(96%);\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 transform: translateY(0);\n}\n\n.card:hover .front-content {\n transform: translateX(20%);\n}\n\n.card:hover .front-content p {\n opacity: 0;\n}\n\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"8c7932","snapshot":null,"tags":null,"title":"card by milegelu","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9915,"cssLen":2640,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n A film – also called a movie, motion picture, moving picture, picture,\n photoplay or (slang) flick – is a work of visual art that simulates\n experiences and otherwise communicates ideas, stories, perceptions,\n feelings, beauty, or atmosphere through the use of moving images.\n These images are generally accompanied by sound and, more rarely,\n other sensory stimulations.[1] The word \"cinema\", short for\n cinematography, is often used to refer to filmmaking and the film\n industry, and the art form that is the result of it.\n

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

Film

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

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

\n\n

2024.1.11

xxx

type

\n","css":".card {\n --card-width: 20em;\n --primer-color: hsl(241, 100%, 70%);\n --text-color: hsl(0, 0%, 100%);\n --text-color-L2: hsl(0, 0%, 60%);\n --transition: all 0.2s cubic-bezier(0.13, 0.78, 0.3, 0.99);\n background: hsl(0, 0%, 10%);\n\n font-size: 12px;\n line-height: 2;\n\n border-radius: 1em;\n padding-bottom: 0.5em;\n z-index: 20;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n transition: all 0.2s ease-in;\n}\n.detial {\n width: var(--card-width);\n padding: 01em 1em;\n color: var(--text-color);\n transition: all 0.2s ease-in;\n\n z-index: 1;\n}\n.name {\n font-size: 2em;\n font-weight: bold;\n}\n\n.title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5em 0;\n}\n\n.content {\n color: var(--text-color);\n width: var(--card-width);\n position: absolute;\n transform: rotate3D(0.4, 1, 0.4, 0deg) scale(0.4);\n padding: 2em;\n opacity: 0;\n height: 20em;\n overflow: hidden;\n}\n\n.thumb {\n width: var(--card-width);\n height: 20em;\n overflow: hidden;\n transition: var(--transition);\n\n z-index: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.thumb svg {\n transform: scale(7);\n color: hsla(0, 0%, 100%, 0.2);\n}\n\n.card:hover {\n background-color: hsl(0, 0%, 15%);\n box-shadow: 0px 20px 40px hsl(40, 60%, 0%, 0.4),\n inset 1px 2px 4px rgba(255, 255, 255, 0.1);\n transform: scale(1.1);\n}\n.card:hover .detial {\n padding: 1em 2em;\n}\n\n.card:hover .thumb {\n opacity: 0.2;\n filter: blur(20px);\n transform: scale(1.5);\n}\n.card:hover .content {\n transform: none;\n opacity: 1;\n transition: var(--transition);\n}\n\n.infomation {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.propertion {\n font-size: 0.8em;\n color: var(--text-color-L2);\n}\n\n.action {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 3em;\n padding: 0 0.5em;\n border-radius: 1em;\n border: 1px solid transparent;\n transition: var(--transition);\n}\n.action:hover {\n box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.6),\n inset 0.5px 1px 2px rgba(255, 255, 255, 0.1);\n background: hsla(0, 0%, 50%, 0.1);\n}\n\n.mode {\n color: var(--text-color-L2);\n padding: 0.4em;\n width: 2em;\n height: 2em;\n border-radius: 0.5em;\n transition: var(--transition);\n}\n.mode:hover {\n color: var(--text-color);\n background: hsla(0, 0%, 50%, 0.15);\n transform: scale(1.2);\n box-shadow: 2px 4px 16px hsla(0, 0%, 100%, 0.1);\n}\n.mode:active {\n background: hsla(0, 0%, 50%, 0.3);\n transform: scale(1);\n}\n.mode.hide {\n opacity: 0;\n transition: var(--transition);\n}\n.action:hover .mode.hide {\n opacity: 1;\n}\n\n.level {\n color: rgb(230, 204, 89);\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"ee4cc8","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1467,"cssLen":974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".card {\n background-color: #191e24;\n border: 3px solid #387EB8;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n font-weight: 700;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n padding: 25px 5px;\n color: white;\n border-radius: 45px;\n}\n\n.App-logo {\n pointer-events: none;\n margin-top: -40px;\n margin-bottom: -40px;\n width: 250px;\n}\n\n.App-button {\n padding: 10px 20px;\n background-color: transparent;\n color: #FFE052;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n border: 3px solid #FFE052;\n border-radius: 5em;\n margin-top: 20px;\n transition: 0.2s;\n}\n\n.App-button:hover {\n color: #191e24;\n background-color: #FFE052;\n}\n\n.welcometo {\n color: #387EB8;\n}\n\n.python {\n color: #FFE052;\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"8fdb1e","snapshot":null,"tags":null,"title":"card by e-coders","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":188,"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(135deg, #ebadb6 0%, #aceae1 100%);\n border-radius: 7px;\n box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"a6f72f","snapshot":null,"tags":null,"title":"card by Yaseen549","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":352,"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 background: transparent;\n border: 2px solid #07ff07;\n box-shadow: 2px 2px 15px #000000 inset;\n text-align: center;\n color: #e8e8e8;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Pacifico';\n}\n\n.card:hover {\n color: #07ff07;\n box-shadow: 2px 2px 15px #07ff07 inset;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"12c2d5","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2885,"cssLen":849,"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 adipisicing elit. Deserunt\n voluptatem alias ut provident sapiente repellendus.\n

","css":".card {\n background-color: rgba(243, 244, 246, 1);\n padding: 2rem;\n max-width: 320px;\n border-radius: 10px;\n box-shadow: 0 20px 30px -20px rgba(5, 5, 5, 0.24);\n}\n\n.header {\n display: flex;\n align-items: center;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.header .image {\n height: 4rem;\n width: 4rem;\n border-radius: 9999px;\n object-fit: cover;\n background-color: royalblue;\n}\n\n.stars {\n display: flex;\n justify-content: center;\n grid-gap: 0.125rem;\n gap: 0.125rem;\n color: rgba(34, 197, 94, 1);\n}\n\n.stars svg {\n height: 1rem;\n width: 1rem;\n}\n\n.name {\n margin-top: 0.25rem;\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 600;\n --tw-text-opacity: 1;\n color: rgba(55, 65, 81, 1);\n}\n\n.message {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n margin-top: 1rem;\n color: rgba(107, 114, 128, 1);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"98804a","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":703,"cssLen":1432,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n \n Hover me!\n

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

\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-16{bottom:-4rem}.left-0{left:0px}.-z-10{z-index:-10}.h-28{height:7rem}.h-60{height:15rem}.h-80{height:20rem}.w-56{width:14rem}.w-64{width:16rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.opacity-0{opacity:0}.duration-500{transition-duration:500ms}.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\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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\\:bg-blue-900{--tw-bg-opacity:1;background-color:rgb(30 58 138 / var(--tw-bg-opacity))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:opacity-50{opacity:0.5}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"9cdbdd","snapshot":null,"tags":null,"title":"card by mykill1","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":586,"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 border-radius: 10px;\n background: #ae3737;\n overflow: hidden;\n box-shadow: inset 27px 27px 54px #7a2727, inset -27px -27px 54px #e24848;\n}\n\n.content {\n width: 160px;\n height: 220px;\n position: relative;\n margin-top: 16px;\n margin-left: 15px;\n border: none;\n border-radius: 10px;\n background: #ae3737;\n background: linear-gradient(45deg, #9d3232, #ba3b3b);\n box-shadow: 27px -27px 54px #7a2727,\n -27px 27px 54px #e24848;\n}\n\ncontent :hover {\n border: 1px solid #7a2727;\n}\n\n.card :hover {\n border: 1px solid #7a2727;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"006ac7","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1008,"cssLen":968,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

10:12

\n","css":".card {\n width: 260px;\n height: 170px;\n background-color: #ffb3b3;\n border-radius: 15px;\n border: 1px solid rgb(156, 151, 151);\n position: relative;\n transition: all .3s ease;\n}\n\n.card__icons {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding-right: 10px;\n padding-top: 10px;\n gap: 10px;\n opacity: 0;\n transition: all .3s ease;\n cursor: pointer;\n}\n\n.card__time {\n position: absolute;\n right: 10px;\n bottom: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1em;\n font-weight: lighter;\n border-radius: 5px;\n text-align: center;\n padding: 2px 8px;\n color: whitesmoke;\n background-color: rgb(77, 67, 67);\n}\n\n.svg-icon {\n background-color: rgb(77, 67, 67);\n fill: #ece6e6;\n width: 35px;\n height: 35px;\n border-radius: 5px;\n padding: 2px;\n transition: all .5s ease-in-out;\n}\n\n.card:hover {\n opacity: 0.8;\n animation: video 5s ease;\n}\n\n.card:hover .card__icons {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"d66453","snapshot":null,"tags":null,"title":"card by abhusha08","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":1283,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n \n

\n","css":".card {\n display: flex;\n flex-direction: column;\n background: lightgrey;\n}\n\n.red-btn {\n width: 300px;\n height: 150px;\n margin: 15px;\n background: rgb(255, 0, 0);\n background: rgb(131, 58, 180);\n background: linear-gradient(\n 90deg,\n rgba(131, 58, 180, 1) 0%,\n rgba(253, 29, 29, 1) 50%,\n rgba(252, 176, 69, 1) 100%\n );\n color: white;\n border: none;\n border-radius: 0.625em;\n font-size: 20px;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n.blue-btn {\n width: 300px;\n height: 150px;\n margin: 15px;\n background: rgb(0, 8, 144);\n background: linear-gradient(\n 90deg,\n rgba(0, 8, 144, 1) 0%,\n rgba(16, 0, 255, 1) 22%,\n rgba(86, 255, 247, 1) 100%\n );\n color: white;\n border: none;\n border-radius: 0.625em;\n font-size: 20px;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n\nbutton:hover {\n color: rgb(0, 0, 0);\n}\n\nbutton:after {\n content: \"\";\n background: white;\n position: absolute;\n z-index: -1;\n left: -20%;\n right: -20%;\n top: 0;\n bottom: 0;\n transform: skewX(-45deg) scale(0, 1);\n transition: all 0.5s;\n}\n\nbutton:hover:after {\n transform: skewX(-45deg) scale(1, 1);\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"de5467","snapshot":null,"tags":null,"title":"card by G4b413l","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":142,"cssLen":301,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n display: flex;\n gap: 10px;\n}\n\n.card {\n background-color: #fff;\n height: 100px;\n width: 100px;\n flex: 1;\n border-radius: 16px;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card:hover {\n flex: 2;\n background-color: #b8b8b8;\n}"}]}},"actionData":null,"errors":null}