{"loaderData":{"0":null,"0-2":{"total":7182,"projects":[{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"8615b4","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1192,"cssLen":4338,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Product title

Product description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

$ 123.45

\n \n

","css":"/* before adding the img to the div with the \n\"card-img\" class, remove css styles \n.card-img .img::before and .card-img .img::after,\nthen set the desired styles for .card-img. */\n.card {\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --main-color: #fefefe;\n --main-focus: #2d8cf0;\n width: 230px;\n height: 300px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 20px;\n gap: 10px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card:last-child {\n justify-content: flex-end;\n}\n\n.card-img {\n /* clear and add new css */\n transition: all 0.5s;\n display: flex;\n justify-content: center;\n}\n\n.card-img .img {\n /* delete */\n transform: scale(1);\n position: relative;\n box-sizing: border-box;\n width: 100px;\n height: 100px;\n border-top-left-radius: 80px 50px;\n border-top-right-radius: 80px 50px;\n border: 2px solid black;\n background-color: #228b22;\n background-image: linear-gradient(to top,transparent 10px,rgba(0,0,0,0.3) 10px,rgba(0,0,0,0.3) 13px,transparent 13px);\n}\n\n.card-img .img::before {\n /* delete */\n content: '';\n position: absolute;\n width: 65px;\n height: 110px;\n margin-left: -32.5px;\n left: 50%;\n bottom: -4px;\n background-repeat: no-repeat;\n background-image: radial-gradient(ellipse at center,rgba(0,0,0,0.7) 30%,transparent 30%),linear-gradient(to top,transparent 17px,rgba(0,0,0,0.3) 17px,rgba(0,0,0,0.3) 20px,transparent 20px),linear-gradient(to right,black 2px,transparent 2px),linear-gradient(to left,black 2px,transparent 2px),linear-gradient(to top,black 2px,#228b22 2px);\n background-size: 60% 10%,100% 100%,100% 65%,100% 65%,100% 50%;\n background-position: center 3px,center bottom,center bottom,center bottom,center bottom;\n border-radius: 0 0 4px 4px;\n z-index: 2;\n}\n\n.card-img .img::after {\n /* delete */\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 28px;\n height: 28px;\n margin-left: -14px;\n left: 50%;\n top: -13px;\n background-repeat: no-repeat;\n background-image: linear-gradient(80deg,#ffc0cb 45%,transparent 45%),linear-gradient(-175deg,#ffc0cb 45%,transparent 45%),linear-gradient(80deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),linear-gradient(-175deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),radial-gradient(circle at center,#ffa6b6 45%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(45deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(65deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(22deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 54%,rgba(0,0,0,0) 54%);\n background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 75%,100% 95%,100% 60%;\n background-position: center center;\n border-top-left-radius: 120px;\n border-top-right-radius: 10px;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 70px;\n border-top: 2px solid black;\n border-left: 2px solid black;\n transform: rotate(45deg);\n z-index: 1;\n}\n\n.card-title {\n font-size: 20px;\n font-weight: 500;\n text-align: center;\n color: var(--font-color);\n}\n\n.card-subtitle {\n font-size: 14px;\n font-weight: 400;\n color: var(--font-color-sub);\n}\n\n.card-divider {\n width: 100%;\n border: 1px solid var(--main-color);\n border-radius: 50px;\n}\n\n.card-footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.card-price {\n font-size: 20px;\n font-weight: 500;\n color: var(--font-color);\n}\n\n.card-price span {\n font-size: 20px;\n font-weight: 500;\n color: var(--font-color-sub);\n}\n\n.card-btn {\n height: 35px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n border-radius: 5px;\n padding: 0 15px;\n transition: all 0.3s;\n}\n\n.card-btn svg {\n width: 100%;\n height: 100%;\n fill: var(--main-color);\n transition: all 0.3s;\n}\n\n.card-img:hover {\n transform: translateY(-3px);\n}\n\n.card-btn:hover {\n border: 2px solid var(--main-focus);\n}\n\n.card-btn:hover svg {\n fill: var(--main-focus);\n}\n\n.card-btn:active {\n transform: translateY(3px);\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"3492db","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1252,"cssLen":1887,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Card title\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor.\n

\n \n See more\n \n \n\n \n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-20{bottom:-5rem}.-left-32{left:-8rem}.left-4{left:1rem}.top-4{top:1rem}.z-10{z-index:10}.flex{display:flex}.h-64{height:16rem}.h-72{height:18rem}.w-56{width:14rem}.w-64{width:16rem}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-300{--tw-bg-opacity:1;background-color:rgb(125 211 252 / var(--tw-bg-opacity))}.fill-sky-400{fill:#38bdf8}.p-3{padding:0.75rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.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-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.\\[transform\\:rotate3d\$1_\\2c -1\\2c _1\\2c _30deg\$\\]{transform:rotate3d(1 ,-1, 1, 30deg)}.hover\\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.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)}.group:hover .group-hover\\:\\[transform\\:rotate3d\$1_\\2c -1\\2c _1\\2c _0deg\$\\]{transform:rotate3d(1 ,-1, 1, 0deg)}"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"a40606","snapshot":null,"tags":null,"title":"card by htwarriors108","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":31,"cssLen":1011,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hold Me

","css":".card {\n background-color: #fff;\n width: 190px;\n height: 254px;\n box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.6);\n border-radius: 12px;\n transition: 0.5s;\n cursor: pointer;\n transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg);\n font-size: 2.2em;\n font-weight: 800;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n}\n\n.card:active {\n scale: 1.1;\n rotate: 5deg;\n}\n\n@keyframes animate {\n 0% {\n opacity: 0.3;\n }\n\n 80% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.3;\n }\n}\n\n.card:hover {\n transform: rotate(0deg);\n opacity: 1;\n}\n\n.card, .card::before {\n background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);\n}\n\n.card::before {\n content: '';\n width: 120%;\n height: 110%;\n z-index: -1;\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 15px;\n transform: translate(-50%, -50%);\n filter: blur(30px);\n animation: animate 5s linear infinite;\n}\n"},{"created":"2024-01-22T17:11:21.000Z","isPrivate":0,"projectId":"b2b65a","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5641,"cssLen":1026,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

John Doe

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

\n","css":".card {\n width: 230px;\n height: 280px;\n border-radius: 2em;\n padding: 10px;\n background-color: #191919;\n box-shadow: 5px 5px 30px rgb(4, 4, 4),\n -5px -5px 30px rgb(57, 57, 57);\n}\n\n.profileimage {\n background-color: transparent;\n border: none;\n margin-top: 20px;\n border-radius: 5em;\n width: 100px;\n height: 100px;\n}\n\n.pfp {\n border-radius: 35em;\n fill: white;\n}\n\n.Name {\n color: white;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n padding: 15px;\n font-size: 20px;\n margin-top: 10px;\n}\n\n.socialbar {\n background-color: #191919;\n border-radius: 3em;\n width: 90%;\n padding: 14px;\n margin-top: 15px;\n color: white;\n box-shadow: 3px 3px 15px rgb(0, 0, 0),\n -3px -3px 15px rgb(58, 58, 58);\n}\n\n.card a {\n transition: 0.4s;\n color: white\n}\n\n#github:hover {\n color: #c9510c;\n}\n\n#instagram:hover {\n color: #d62976;\n}\n\n#facebook:hover {\n color: #3b5998;\n}\n\n#twitter:hover {\n color: #00acee;\n}"},{"created":"2024-01-22T17:11:20.000Z","isPrivate":0,"projectId":"2176eb","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":437,"cssLen":1083,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

This is a title

This is a subtitle

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n position: relative;\n border-radius: 16px;\n background: #f5f5f5;\n transition: box-shadow .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n overflow: hidden;\n cursor: pointer;\n}\n\n.card-img {\n position: absolute;\n height: 100%;\n width: 100%;\n background-color: #6eee87;\n}\n\n.card-info {\n position: absolute;\n width: 100%;\n bottom: 0;\n padding: 1rem;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n}\n\n.card-icon {\n opacity: 0;\n transform: translateX(-20%);\n width: 2em;\n height: 2em;\n transition: all .3s ease-in-out;\n}\n\n.icon {\n --size: 20px;\n width: var(--size);\n height: var(--size);\n}\n\n/*Text*/\n.card-text p {\n line-height: 140%;\n /*Delete this line for multi-line text*/\n white-space: nowrap;\n}\n\n.text-title {\n font-weight: 900;\n font-size: 1.2rem;\n color: #222;\n}\n\n.text-subtitle {\n color: #333;\n font-weight: 500;\n font-size: 1rem;\n}\n\n/*Hover*/\n.card:hover {\n box-shadow: 0 10px 20px 4px rgba(35, 35, 35, .1);\n}\n\n.card:hover .card-icon {\n opacity: 1;\n transform: translateX(20%);\n}"},{"created":"2024-01-22T17:11:20.000Z","isPrivate":0,"projectId":"44eec7","snapshot":null,"tags":null,"title":"card by boryanakrasteva","updated":"2024-01-22T17:11:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":70,"cssLen":1325,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n hover\n

","css":".container {\n width: 190px;\n height: 254px;\n background: transparent;\n position: relative;\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.438);\n overflow: hidden;\n border-radius: 10px;\n}\n\n.card {\n cursor: default;\n width: 100%;\n height: 100%;\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 34px;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #212121;\n background-color: rgba(255, 255, 255, 0.074);\n border: 1px solid rgba(255, 255, 255, 0.222);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n border-radius: 10px;\n transition: all ease .3s;\n}\n\n.container::after,\n.container::before {\n width: 100px;\n height: 100px;\n content: '';\n position: absolute;\n border-radius: 50%;\n transition: .5s linear;\n}\n\n.container::after {\n top: -20px;\n left: -20px;\n background-color: rgba(125, 214, 66, 0.603);\n animation: animFirst 5s linear infinite;\n}\n\n.container::before {\n background-color: rgb(226, 223, 54);\n top: 70%;\n left: 70%;\n animation: animSecond 5s linear infinite;\n animation-delay: 3s;\n}\n\n.container:hover {\n box-shadow: 0px 0px 10px rgba(0, 77, 32, 0.432)\n}\n\n.container:hover::after {\n left: 80px;\n transform: scale(1.2);\n}\n\n.container:hover::before {\n left: -10px;\n transform: scale(1.2);\n}"},{"created":"2024-01-22T17:11:20.000Z","isPrivate":0,"projectId":"f8bf1d","snapshot":null,"tags":null,"title":"card by simontheonlyone","updated":"2024-01-22T17:11:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":586,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

..................

","css":".card {\n position: relative;\n width: 150px;\n height: 150px;\n background: linear-gradient(\n to bottom,\n rgb(253, 197, 107) 12%, rgb(255, 187, 78) 24%,\n rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .1) 26% 26%,\n #eee 28% 49%,\n rgba(0, 0, 0, .3) 50%,\n #eee 51% 74%,\n rgba(0, 0, 0, .3) 75%,\n #eee 76%\n );\n border: none;\n border-radius: 35px;\n box-shadow: 0 0 10px rgba(0, 0, 0, .3);\n overflow: hidden;\n}\n\n.dots {\n position: absolute;\n content: '';\n inset: 0 -3px;\n color: rgba(0, 0, 0, .3);\n font-size: 41px;\n user-select: none;\n -webkit-user-select: none;\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"c3b5e8","snapshot":null,"tags":null,"title":"card by IverMisericordiaM","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":223,"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 box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;\n background: linear-gradient(293deg, rgb(185, 185, 255) 0%, rgb(72, 225, 255) 100%);\n}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"0454fa","snapshot":null,"tags":null,"title":"card by Amine-maker","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":874,"cssLen":2154,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Project

\n \n

\n • Analytics\n • Dashboards\n

","css":".article-wrapper {\n width: 250px;\n -webkit-transition: 0.15s all ease-in-out;\n transition: 0.15s all ease-in-out;\n border-radius: 10px;\n padding: 5px;\n border: 4px solid transparent;\n cursor: pointer;\n background-color: white;\n}\n\n.article-wrapper:hover {\n -webkit-box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;\n box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;\n border-color: #0578c5;\n -webkit-transform: translate(-20px, -20px);\n -ms-transform: translate(-20px, -20px);\n transform: translate(-20px, -20px);\n}\n\n.article-wrapper:active {\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n}\n\n.types {\n gap: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n place-content: flex-start;\n}\n\n.rounded-lg {\n /* class tailwind */\n border-radius: 10px;\n}\n\n.article-wrapper:hover .project-hover {\n -webkit-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n transform: rotate(-45deg);\n background-color: #a6c2f0;\n}\n\n.project-info {\n padding-top: 20px;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 20px;\n}\n\n.project-title {\n font-size: 2em;\n margin: 0;\n font-weight: 600;\n /* depend de la font */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: black;\n}\n\n.flex-pr {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.project-type {\n background: #b2b2fd;\n color: #1a41cd;\n font-weight: bold;\n padding: 0.3em 0.7em;\n border-radius: 15px;\n font-size: 12px;\n letter-spacing: -0.6px\n}\n\n.project-hover {\n border-radius: 50%;\n width: 50px;\n height: 50px;\n padding: 9px;\n -webkit-transition: all 0.3s ease;\n transition: all 0.3s ease;\n}\n\n.container-project {\n width: 100%;\n height: 170px;\n background: gray;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"4a1d3e","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5032,"cssLen":2268,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n Image Here \n

\n\n

\n John Smith
\n Product Designer\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aperiam.

\n \n

\n\n

\n Following\n 56K\n

\n Followers\n 940\n

\n Likes\n 320\n

","css":".card {\n position: relative;\n width: 315px;\n height: 450px;\n margin: 30px auto;\n box-shadow: 0 0 100px rgba(0,0,0, .3);\n border-radius: 10px;\n}\n\n.card-header {\n position: relative;\n height: 220px;\n background-size: cover;\n background-position: top;\n}\n\n.card-header:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom, rgb(5,85,134), rgba(181,181,181, -0.20));\n border-radius: 10px;\n}\n\n.image {\n position: absolute;\n margin-top: 100px;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #222;\n font-size: 20px;\n font-weight: 400;\n}\n\n.card-header-bar {\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n width: 100%;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n clip: rect(0,0,0,0);\n border: none;\n overflow: hidden;\n}\n\n.btn-message {\n display: inline-block;\n width: 19.37px;\n height: 16.99px;\n margin-right: 10px;\n margin-top: 10px;\n float: right;\n}\n\n.btn-menu {\n display: inline-block;\n background: width: 19px;\n height: 12.16px;\n margin-left: 10px;\n margin-top: 10px;\n float: left;\n}\n\n.card-header-slanted-edge {\n position: absolute;\n bottom: -3px;\n z-index: 1;\n width: 100%;\n right: 0;\n left: 0;\n}\n\n.card-body {\n text-align: center;\n padding-left: 10px;\n}\n\n.name {\n font-size: 20px;\n font-weight: 700;\n text-transform: uppercase;\n margin: 0 auto;\n}\n\n.job-title {\n font-size: 14px;\n font-weight: 300;\n margin-top: 15px;\n color: #919191;\n}\n\n.bio {\n font-size: 14px;\n color: #7B7B7B;\n font-weight: 300;\n margin: 10px auto;\n line-height: 20px;\n}\n\n.social-accounts img {\n width: 15px;\n}\n\n.social-accounts a {\n margin-left: 10px;\n}\n\n.social-accounts a:first-child {\n margin-left: 0;\n}\n\n.card-footer {\n position: absolute;\n left: 0;\n width: 100%;\n bottom: 20px;\n}\n\n.stat {\n box-sizing: border-box;\n width: calc(100% / 3);\n float: left;\n text-align: center;\n}\n\n.stat:nth-child(2) {\n border-left: 1px solid grey;\n}\n\n.stat:nth-child(3) {\n border-left: 1px solid grey;\n}\n\n.stat .label {\n display: block;\n text-transform: uppercase;\n font-weight: 300;\n font-size: 11px;\n letter-spacing: 1px;\n color: #95989A;\n}\n\n.stat .value {\n display: block;\n font-weight: 700;\n font-size: 20px;\n margin-top: 5px;\n}"},{"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"}]}},"actionData":null,"errors":null}