{"loaderData":{"0":null,"0-3":{"total":7264,"projects":[{"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}"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"3d8755","snapshot":null,"tags":null,"title":"card by Bastiennnn","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":882,"cssLen":1053,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n.card {\n  width: 300px;\n  height: 400px;\n  margin: 0 auto;\n  background-color: #24233b;\n  border-radius: 8px;\n  z-index: 1;\n  box-shadow: 0px 10px 10px rgb(73, 70, 92);\n  transition: 0.5s;\n}\n\n.card:hover {\n  transform: translateY(-7px);\n  box-shadow: 0px 10px 10px black;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  padding-left: 10px;\n}</textarea\n    >\n  </div>\n</div>\n","css":".card {\n  width: 300px;\n  height: 400px;\n  margin: 0 auto;\n  background-color: #d1d1d1;\n  border-radius: 8px;\n  z-index: 1;\n  box-shadow: 0px 10px 10px rgb(121, 121, 121);\n  transition: 0.5s;\n}\n\n.card:hover {\n  transform: translateY(-7px);\n  box-shadow: 0px 10px 10px rgb(94, 93, 93);\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  padding-left: 10px;\n}\n\n.circle {\n  padding: 0 4px;\n}\n\n.circle2 {\n  display: inline-block;\n  align-items: center;\n  width: 10px;\n  height: 10px;\n  padding: 1px;\n  border-radius: 5px;\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\n.header {\n  margin: 5px;\n  margin-top: 5px;\n  border-radius: 5px;\n}\n\n#title2 {\n  color: rgb(0, 0, 0);\n  padding-left: 50px;\n  font-size: 15px;\n}\n\n.code-container {\n  text-align: center;\n}\n#code {\n  width: 270px;\n  height: 350px;\n  resize: none;\n  background-color: rgb(235, 235, 235);\n  border-radius: 5px;\n  border: none;\n  color: rgb(0, 0, 0);\n  padding: 10px;\n}\n#code:focus {\n  outline: none !important;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"660876","snapshot":null,"tags":null,"title":"card by sabbircoder07","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1022,"cssLen":1070,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"advice-container\">\n      <p class=\"paragraph\">A D V I S E # 140</p>\n      <div class=\"advice-details\">“If your hair is thinning, try dying your hair a similar tone to your scalp.”</div>\n<div class=\"pattern-divider\">\n<svg width=\"295\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#4F5D74\" d=\"M0 8h122v1H0zM173 8h122v1H173z\"></path><g transform=\"translate(138)\" fill=\"#CEE3E9\"><rect width=\"6\" height=\"16\" rx=\"3\"></rect><rect x=\"14\" width=\"6\" height=\"16\" rx=\"3\"></rect></g></g></svg>\n</div>\n<button>\n        <svg class=\"icon-dice\" width=\"24\" height=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0H4a4.005 4.005 0 0 0-4 4v16a4.005 4.005 0 0 0 4 4h16a4.005 4.005 0 0 0 4-4V4a4.005 4.005 0 0 0-4-4ZM7.5 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z\" fill=\"#202733\"></path></svg>\n</button>\n</div>","css":".advice-container {\n  font-family: \"Manrope\", sans-serif;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 320px;\n  height: auto;\n  background-color: hsl(217, 19%, 24%);\n  border-radius: 10px;\n  padding: 30px 16px 0 16px;\n}\n\n.paragraph {\n  font-size: 17px;\n  background-image: linear-gradient(to right, hsl(150, 100%, 66%),#C031B5);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  text-transform: uppercase;\n  font-weight: 500;\n  letter-spacing: 1px;\n  /*Reason: there are some contrast issues*/\n}\n\n.advice-details {\n  color: hsl(193, 38%, 86%);\n  font-size: 20px;\n  font-weight: 500;\n  margin: 30px 0;\n  line-height: 25px;\n  text-wrap: balance;\n  letter-spacing: 1px;\n}\n\n.pattern-divider path {\n  fill: hsl(217, 19%, 38%);\n}\n\nbutton {\n  height: 55px;\n  width: 55px;\n  border-radius: 50%;\n  border: none;\n  background: #00e673;\n  margin-top: 20px;\n  margin-bottom: -25px;\n  cursor: pointer;\n  transition: 0.3s all\n}\n\nbutton:hover {\n  box-shadow: 0rem 0rem 10px 10px rgba(82, 255, 168, 0.5);\n}\n\n\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"e06870","snapshot":null,"tags":null,"title":"card by satyamchaudharydev","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1344,"cssLen":3183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"card\">\n    <div class=\"card-top\">\n        <p class=\"card__title\">Rick And Morty</p>\n        <div class=\"rating\">\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\">\n                <path d=\"M8.51948 1.625C9.1214 1.625 10.0427 4.16625 10.4636 5.43013C10.6014 5.8437 10.9837 6.13054 11.4192 6.14904C12.7373 6.20505 15.375 6.39722 15.375 7.0384C15.375 7.66696 13.5161 9.17543 12.5322 9.92976C12.1816 10.1986 12.0365 10.6604 12.1687 11.082C12.5631 12.34 13.2755 14.8755 12.7573 15.3009C12.2506 15.717 10.2147 14.2326 9.15246 13.4009C8.77021 13.1016 8.22949 13.1012 7.84719 13.4004C6.78473 14.2321 4.75246 15.717 4.28166 15.3009C3.79912 14.8745 4.47615 12.3275 4.84741 11.0727C4.97086 10.6555 4.82425 10.2029 4.47885 9.93826C3.49798 9.18681 1.625 7.66933 1.625 7.0384C1.625 6.3962 4.2711 6.20444 5.5871 6.14878C6.0197 6.13048 6.3998 5.84769 6.53973 5.43793C6.97041 4.17673 7.91633 1.625 8.51948 1.625Z\" fill=\"#00B9AE\" stroke=\"#00B9AE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n        </div>\n    </div>\n    <div class=\"card__info\">\n        <p class=\"episode__num\">46Ep</p>\n        <p class=\"episode__type\">Fantasy</p>\n    </div>\n    <div class=\"card__btns\">\n        <button class=\"add-btn\">+</button>\n        <button class=\"watch-btn\">watch</button>\n    </div>\n</div>","css":".card {\n  --width: 190px;\n  --height: 210px;\n  --primary: #00b9ae;\n  --text: #f9f9f9b2;\n  --secondary: #f9f9f933;\n  --radius: 20px;\n  color: #fff;\n  font-family: Arial, Helvetica, sans-serif;\n  width: var(--width);\n  height: var(--height);\n  background: linear-gradient(\n      180deg,\n      rgba(22, 24, 30, 0) 0%,\n      rgba(22, 24, 30, 0.7) 65.28%\n    ),\n    linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));\n  background-size: cover;\n  border-radius: var(--radius);\n  display: flex;\n  flex-direction: column;\n  gap: 0.7rem;\n  padding: 1em;\n  padding-top: 1.4em;\n}\n\n\n/*  */\n\n.card .card__title {\n  margin: 0;\n  font-size: 1.2rem;\n  font-weight: bold;\n  margin-top: 0.2rem;\n}\n\n.rating {\n  margin-top: 0.5em;\n  width: 85px;\n  height: 16px;\n  background-image: url(\"data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n  background-repeat: space;\n}\n\n.card .card__info {\n  display: flex;\n  margin-top: auto;\n  font-size: 0.8rem;\n  color: var(--text);\n  font-weight: 400;\n  justify-content: space-between;\n}\n\n.card .card__btns {\n  display: flex;\n  gap: 0.6rem;\n}\n\n.card button {\n  border: none;\n  background: none;\n  cursor: pointer;\n  background: var(--primary);\n  color: #fff;\n  border-radius: var(--radius);\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n  font-weight: bold;\n  transition: 0.2s;\n}\n\n.card button:hover {\n  opacity: 0.8;\n  transform: scale(0.9);\n}\n\n.card .add-btn {\n  color: #fff;\n  padding: 0.5em 0.8em;\n  background: rgba(249, 249, 249, 0.2);\n  border-radius: 14px;\n}\n\n.card .watch-btn {\n  flex: 1;\n}\n"},{"created":"2024-01-22T17:11:19.000Z","isPrivate":0,"projectId":"aa975d","snapshot":null,"tags":null,"title":"card by brunoguyy12","updated":"2024-01-22T17:11:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":1099,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"card\">\n  <p class=\"heading\">Popular this month</p>\n  <p>Powered By</p>\n  <p>Uiverse</p>\n</div>\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  z-index: 1;\n}\n"}]}},"actionData":null,"errors":null}</article></body></html>