{"loaderData":{"0":null,"0-2":{"total":7187,"projects":[{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"96d2cd","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":10670,"cssLen":5156,"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 \n

CSS Theme Switch

Praashoo7

\n 22\n

\n 12\n

\n 332\n

","css":"/* CodePen Card */\n\n.card {\n width: 15em;\n height: 10em;\n background-color: #252525;\n border-radius: 7px;\n cursor: pointer;\n}\n\n.fl {\n display: flex;\n justify-content: flex-end;\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.fl:hover .fullscreen {\n scale: 1.2;\n}\n\n.fl:hover .fullscreen_svg {\n fill: white;\n}\n\n.fullscreen {\n width: 1.5em;\n height: 1.5em;\n border-radius: 5px;\n background-color: #727890;\n margin: 1em;\n margin-right: 0.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .2s ease-in-out;\n box-shadow: 2px 2px 6px rgba(0,0,0,.4);\n}\n\n.fullscreen_svg {\n width: 15px;\n height: 15px;\n fill: rgb(177, 176, 176);\n transition: .2s ease-in-out;\n}\n\n.card_back {\n position: absolute;\n width: 15em;\n height: 13em;\n background-color: rgba(30, 31, 38, 0.575);\n border-radius: 7px;\n margin-top: -5em;\n margin-left: 0.7em;\n transition: .2s ease-in-out;\n z-index: -1;\n}\n\n.main:hover .card_back {\n margin-top: -6.25em;\n margin-left: 0em;\n scale: 1.1;\n height: 15.25em;\n cursor: pointer;\n}\n\n.main:hover .fl {\n opacity: 1;\n cursor: pointer;\n margin-right: 0.5em;\n}\n\n.data {\n display: flex;\n flex-direction: row;\n margin-top: 1em;\n}\n\n.img {\n width: 2.25em;\n height: 2.25em;\n background-color: #252525;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 0.5em;\n font-family: Montserrat;\n color: white;\n}\n\n.text_m {\n font-weight: bold;\n font-size: 0.9em;\n}\n\n.text_s {\n font-size: 0.7em;\n}\n\n.btns {\n display: flex;\n gap: 0.5em;\n transition: .2s ease-in-out;\n}\n\n.likes {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .2s ease-in-out;\n}\n\n.likes_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n}\n\n.likes_svg {\n width: 12px;\n height: 12px;\n fill: white;\n}\n\n.likes:hover {\n background-color: #5A5F73;\n cursor: pointer;\n}\n\n.comments {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .24s ease-in-out;\n}\n\n.comments_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n}\n\n.comments_svg {\n width: 12px;\n height: 12px;\n fill: white;\n}\n\n.comments:hover {\n background-color: #5A5F73;\n cursor: pointer;\n}\n\n.views {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .28s ease-in-out;\n}\n\n.views_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n}\n\n.views_svg {\n width: 12px;\n height: 12px;\n fill: white;\n}\n\n.views:hover {\n background-color: #5A5F73;\n cursor: pointer;\n}\n\n.main:hover .likes {\n margin-top: 0.5em;\n opacity: 1;\n}\n\n.main:hover .comments {\n margin-top: 0.5em;\n opacity: 1;\n}\n\n.main:hover .views {\n margin-top: 0.5em;\n opacity: 1;\n}\n\n\n\n/* The Main Switch */\n\n.card_content {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* The switch - the box around the slider */\n.switch_738 {\n font-size: 13px;\n position: relative;\n display: inline-block;\n width: 1.2em;\n height: 3.3em;\n}\n\n/* Hide default HTML checkbox */\n.switch_738 .chk_738 {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider_738 {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n border-radius: 5px;\n}\n\n.slider_738:before {\n position: absolute;\n content: \"\";\n height: .5em;\n width: 2.4em;\n border-radius: 5px;\n left: -0.6em;\n top: 0.2em;\n background-color: white;\n box-shadow: 0 6px 7px rgba(0,0,0,0.3);\n transition: .4s;\n}\n\n.slider_738:before, .slider_738:after {\n content: \"\";\n display: block;\n}\n\n.slider_738:after {\n background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,\n\t\trepeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%,\n\t\tradial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%);\n background-repeat: no-repeat;\n border: 0.25em solid transparent;\n border-left: 0.4em solid #ffffff;\n border-right: 0 solid transparent;\n transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;\n transform: translateX(-22.5%) rotate(90deg);\n transform-origin: 25% 50%;\n position: relative;\n top: 0.5em;\n left: 0.55em;\n width: 2em;\n height: 1em;\n box-sizing: border-box;\n}\n\n.chk_738:checked + .slider_738 {\n background-color: limegreen;\n}\n\n.chk_738:focus + .slider_738 {\n box-shadow: 0 0 1px limegreen;\n}\n\n.chk_738:checked + .slider_738:before {\n transform: translateY(2.3em);\n}\n\n.chk_738:checked + .slider_738:after {\n transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"fa88ef","snapshot":null,"tags":null,"title":"card by G4b413l","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5889,"cssLen":1911,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Social\n \n \n \n \n

","css":".card svg {\n height: 25px;\n}\n\n.card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #e7e7e7;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n overflow: hidden;\n height: 50px;\n width: 200px;\n}\n\n.card::before, .card::after {\n position: absolute;\n display: flex;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: 0.25s linear;\n z-index: 1;\n}\n\n.card::before {\n content: \"\";\n left: 0;\n justify-content: flex-end;\n background-color: #4d60b6;\n}\n\n.card::after {\n content: \"\";\n right: 0;\n justify-content: flex-start;\n background-color: #4453a6;\n}\n\n.card:hover {\n box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n}\n\n.card:hover span {\n opacity: 0;\n z-index: -3;\n}\n\n.card:hover::before {\n opacity: 0.5;\n transform: translateY(-100%);\n}\n\n.card:hover::after {\n opacity: 0.5;\n transform: translateY(100%);\n}\n\n.card span {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: whitesmoke;\n font-family: 'Fira Mono', monospace;\n font-size: 24px;\n font-weight: 700;\n opacity: 1;\n transition: opacity 0.25s;\n z-index: 2;\n}\n\n.card .social-link {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25%;\n height: 100%;\n color: whitesmoke;\n font-size: 24px;\n text-decoration: none;\n transition: 0.25s;\n}\n\n.card .social-link svg {\n text-shadow: 1px 1px rgba(31, 74, 121, 0.7);\n transform: scale(1);\n}\n\n.card .social-link:hover {\n background-color: rgba(249, 244, 255, 0.774);\n animation: bounce_613 0.4s linear;\n}\n\n@keyframes bounce_613 {\n 40% {\n transform: scale(1.4);\n }\n\n 60% {\n transform: scale(0.8);\n }\n\n 80% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"a671ae","snapshot":null,"tags":null,"title":"card by Bastiennnn","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":882,"cssLen":1023,"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: #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}\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: white;\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(73, 70, 92);\n  border-radius: 5px;\n  border: none;\n  color: white;\n  padding: 10px;\n}\n#code:focus {\n  outline: none !important;\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"bb41ab","snapshot":null,"tags":null,"title":"card by kennyotsu-monochromia","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":965,"cssLen":1697,"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=\"title\">\n    <p class=\"heading\">MONOCHROMIA</p>\n    <p class=\"desc\">palette reference</p>\n  </div>\n  <div class=\"wrapper\">\n    <div class=\"color black\">\n      black\n      <span class=\"hex\">#000000</span>\n    </div>\n    <div class=\"color eerie-black\">\n      eerie-black\n      <span class=\"hex\">#1b1b1b</span>\n    </div>\n    <div class=\"color chinese-black\">\n      chinese-black\n      <span class=\"hex\">#141414</span>\n    </div>\n     <div class=\"color night-rider\">\n      night rider\n      <span class=\"hex\">#2e2e2e</span>\n    </div>\n    <div class=\"color chinese-white\">\n      chinese-white\n      <span class=\"hex\">#e1e1e1</span>\n    </div>\n    <div class=\"color anti-flash-white\">\n      anti-flash-white\n      <span class=\"hex\">#f3f3f3</span>\n    </div>\n    <div class=\"color white\">\n      white\n      <span class=\"hex\">#ffffff</span>\n    </div>\n  <div class=\"border\">common border radius <span>5px | 8px</span></div>\n  </div>\n</div>","css":".card {\n  width: 400px;\n  height: 350px;\n  --black: #000000;\n  --ch-black: #141414;\n  --eer-black: #1b1b1b;\n  --night-rider: #2e2e2e;\n  --white: #ffffff;\n  --af-white: #f3f3f3;\n  --ch-white: #e1e1e1;\n  font-family: Helvetica, sans-serif;\n}\n\n.wrapper {\n  margin: 2rem auto;\n  width: 250px;\n  font-size: small;\n}\n\n.title {\n  text-align: center;\n  color: #1b1b1b;\n}\n\n.heading {\n  font-weight: bold;\n  letter-spacing: 7px;\n  font-size: 1.5rem;\n  position: relative;\n  margin-bottom: 6px;\n}\n\n.heading::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: #e8e8e8;\n  z-index: -1;\n  filter: blur(50px);\n  height: 50px;\n}\n\n.color {\n  padding: 10px 20px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n.hex {\n  text-align: end;\n  font-family: monospace;\n  text-transform: uppercase;\n}\n\n.black {\n  background: var(--black);\n  color: var(--ch-white);\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n\n.eerie-black {\n  background: var(--ch-black);\n  color: var(--ch-white);\n}\n\n.chinese-black {\n  background: var(--eer-black);\n  color: var(--ch-white);\n}\n\n.night-rider {\n  background: var(--night-rider);\n  color: var(--ch-white);\n}\n\n.chinese-white {\n  background: var(--ch-white);\n  color: var(--night-rider);\n}\n\n.anti-flash-white {\n  background: var(--af-white);\n  color: var(--night-rider);\n}\n\n.white {\n  background: var(--white);\n  color: var(--night-rider);\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px;\n}\n\n.border {\n  color: var(--night-rider);\n  padding: 10px 10px;\n  text-align: center;\n}\n\n.border span {\n  border-radius: 5px;\n  color: var(--ch-white);\n  padding: 2px 4px;\n  background-color: var(--night-rider);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"370087","snapshot":null,"tags":null,"title":"card by Li-Deheng","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4596,"cssLen":9906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"like-dislike-container\">\n\t<div class=\"tool-box\">\n\t\t<button class=\"btn-close\">×</button>\n\t</div>\n\t<p class=\"text-content\">What did you think<br>of this post?</p>\t\t\t\t\n\t<div class=\"icons-box\">\n\t\t<div class=\"icons\">\n\t\t\t<label class=\"btn-label\" for=\"like-checkbox\">\n\t\t\t\t<span class=\"like-text-content\">123</span>\n\t\t\t\t<input class=\"input-box\" id=\"like-checkbox\" type=\"checkbox\">\n\t\t\t\t<svg class=\"svgs\" id=\"icon-like-solid\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z\"></path></svg>\n\t\t\t\t<svg class=\"svgs\" id=\"icon-like-regular\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z\"></path></svg>\n\t\t\t\t<div class=\"fireworks\">\n\t\t\t\t\t<div class=\"checked-like-fx\"></div>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</div>\n\t\t<div class=\"icons\">\n\t\t\t<label class=\"btn-label\" for=\"dislike-checkbox\">\n\t\t\t\t<input class=\"input-box\" id=\"dislike-checkbox\" type=\"checkbox\">\n\t\t\t\t<div class=\"fireworks\">\n\t\t\t\t\t<div class=\"checked-dislike-fx\"></div>\n\t\t\t\t</div>\n\t\t\t\t<svg class=\"svgs\" id=\"icon-dislike-solid\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z\"></path></svg>\n\t\t\t\t<svg class=\"svgs\" id=\"icon-dislike-regular\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z\"></path></svg>\n\t\t\t\t<span class=\"dislike-text-content\">4</span>\n\t\t\t</label>\n\t\t</div>\n\t</div>\n</div>","css":".like-dislike-container {\n  --dark-grey: #353535;\n  --middle-grey: #767676;\n  --lightest-grey: linear-gradient(#fafafa,#ebebeb);\n  --shadow: 0 5px 15px 0 #00000026;\n  --shadow-active: 0 5px 5px 0 #00000026;\n  --border-radius-main: 10px;\n  --border-radius-icon: 50px;\n  position: relative;\n  display: flex;\n  text-align: center;\n  flex-direction: column;\n  align-items: center;\n  cursor: default;\n  color: var(--dark-grey);\n  opacity: .9;\n  margin: auto;\n  padding: 1.5rem;\n  font-weight: 600;\n  background: var(--lightest-grey);\n  max-width: max-content;\n  border-radius: var(--border-radius-main);\n  box-shadow: var(--shadow);\n  transition: .2s ease all;\n}\n\n.like-dislike-container:hover {\n  box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .tool-box {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  top: 0;\n  right: 0;\n  border-radius: var(--border-radius-main);\n}\n\n.like-dislike-container .btn-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  width: .8rem;\n  height: .8rem;\n  color: transparent;\n  font-size: 0;\n  cursor: pointer;\n  background-color: #ff000080;\n  border: none;\n  border-radius: var(--border-radius-main);\n  transition: .2s ease all;\n}\n\n.like-dislike-container .btn-close:hover {\n  width: 1rem;\n  height: 1rem;\n  font-size: 1rem;\n  color: #ffffff;\n  background-color: #ff0000cc;\n  box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .btn-close:active {\n  width: .9rem;\n  height: .9rem;\n  font-size: .9rem;\n  color: #ffffffde;\n  --shadow-btn-close: 0 3px 3px 0 #00000026;\n  box-shadow: var(--shadow-btn-close);\n}\n\n.like-dislike-container .text-content {\n  margin-bottom: 1rem;\n  font-size: 18px;\n  line-height: 1.6;\n  cursor: default;\n}\n\n.like-dislike-container .icons-box {\n  display: flex;\n}\n\n.like-dislike-container .icons {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  opacity: .6;\n  margin: 0 0.5rem;\n  cursor: pointer;\n  user-select: none;\n  border: 1px solid var(--middle-grey);\n  border-radius: var(--border-radius-icon);\n  transition: .2s ease all;\n}\n\n.like-dislike-container .icons:hover {\n  opacity: .9;\n  box-shadow: var(--shadow);\n}\n\n.like-dislike-container .icons:active {\n  opacity: .9;\n  box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .icons .btn-label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0 0.5rem;\n  cursor: pointer;\n  position: relative;\n}\n\n.like-dislike-container .like-text-content {\n  border-right: 0.1rem solid var(--dark-grey);\n  padding: 0 0.6rem 0 0.5rem;\n  pointer-events: none;\n}\n\n.like-dislike-container .dislike-text-content {\n  border-left: 0.1rem solid var(--dark-grey);\n  padding: 0 0.5rem 0 0.6rem;\n  pointer-events: none;\n}\n\n.like-dislike-container .icons .svgs {\n  width: 1.3rem;\n  fill: #000000;\n  box-sizing: content-box;\n  padding: 10px 10px;\n  transition: .2s ease all;\n}\n\n/* Hide the default checkbox */\n.like-dislike-container .icons .input-box {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.like-dislike-container .icons #icon-like-regular {\n  display: block;\n}\n\n.like-dislike-container .icons #icon-like-solid {\n  display: none;\n}\n\n.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {\n  animation: rotate-icon-like 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {\n  display: none;\n  animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {\n  display: block;\n  animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #icon-dislike-regular {\n  display: block;\n  transform: rotate(180deg);\n}\n\n.like-dislike-container .icons #icon-dislike-solid {\n  display: none;\n  transform: rotate(180deg);\n}\n\n.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {\n  animation: rotate-icon-dislike 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {\n  display: none;\n  animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {\n  display: block;\n  animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons .fireworks {\n  transform: scale(0.4);\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  right: 40px;\n  border-radius: 50%;\n  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n  animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  left: 40px;\n  border-radius: 50%;\n  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n  animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n/* Shake Animation */\n@keyframes rotate-icon-like {\n  0% {\n    transform: rotate(0deg) translate3d(0, 0, 0);\n  }\n\n  25% {\n    transform: rotate(3deg) translate3d(0, 0, 0);\n  }\n\n  50% {\n    transform: rotate(-3deg) translate3d(0, 0, 0);\n  }\n\n  75% {\n    transform: rotate(1deg) translate3d(0, 0, 0);\n  }\n\n  100% {\n    transform: rotate(0deg) translate3d(0, 0, 0);\n  }\n}\n\n@keyframes rotate-icon-dislike {\n  0% {\n    transform: rotate(180deg) translate3d(0, 0, 0);\n  }\n\n  25% {\n    transform: rotate(183deg) translate3d(0, 0, 0);\n  }\n\n  50% {\n    transform: rotate(177deg) translate3d(0, 0, 0);\n  }\n\n  75% {\n    transform: rotate(181deg) translate3d(0, 0, 0);\n  }\n\n  100% {\n    transform: rotate(180deg) translate3d(0, 0, 0);\n  }\n}\n\n/* Checked Animation */\n@keyframes checked-icon-like {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n\n  50% {\n    transform: scale(1.2) rotate(-10deg);\n  }\n}\n\n@keyframes checked-icon-dislike {\n  0% {\n    transform: scale(0) rotate(180deg);\n    opacity: 0;\n  }\n\n  50% {\n    transform: scale(1.2) rotate(170deg);\n  }\n}\n\n/* Fireworks Animation */\n@keyframes fireworks-position {\n  0%, 19.9% {\n    margin-top: 10%;\n    margin-left: 40%;\n  }\n\n  20%, 39.9% {\n    margin-top: 40%;\n    margin-left: 30%;\n  }\n\n  40%, 59.9% {\n    margin-top: 20%;\n    margin-left: 70%;\n  }\n\n  60%, 79.9% {\n    margin-top: 30%;\n    margin-left: 20%;\n  }\n\n  80%, 99.9% {\n    margin-top: 30%;\n    margin-left: 80%;\n  }\n}\n\n@keyframes fireworks-gravity {\n  to {\n    transform: translateY(200px);\n    opacity: 0;\n  }\n}\n\n@keyframes fireworks-bang {\n  to {\n    box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;\n  }\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"829fb8","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7132,"cssLen":2648,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"modal\">\n\t<article class=\"modal-container\">\n\t\t<header class=\"modal-container-header\">\n\t\t\t<span class=\"modal-container-title\">\n\t\t\t\t<svg aria-hidden=\"true\" height=\"24\" width=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n\t\t\t\t\t<path d=\"M14 9V4H5v16h6.056c.328.417.724.785 1.18 1.085l1.39.915H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8v1h-7zm-2 2h9v5.949c0 .99-.501 1.916-1.336 2.465L16.5 21.498l-3.164-2.084A2.953 2.953 0 0 1 12 16.95V11zm2 5.949c0 .316.162.614.436.795l2.064 1.36 2.064-1.36a.954.954 0 0 0 .436-.795V13h-5v3.949z\" fill=\"currentColor\"></path>\n\t\t\t\t</svg>\n\t\t\t\tTerms and Services\n\t\t\t</span>\n\t\t\t<button class=\"icon-button\">\n\t\t\t\t<svg height=\"24\" width=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n\t\t\t\t\t<path d=\"M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z\" fill=\"currentColor\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</header>\n\t\t<section class=\"modal-container-body rtf\">\n\t\t\t<span>Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.</span>\n\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Hoc est non modo cor non habere, sed ne palatum quidem. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Duo Reges: constructio interrete. </p>\n\n\t\t\t<span>Ut proverbia non nulla veriora sint quam vestra dogmata.</span>\n\n\t\t\t<p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Tria genera cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec necessariae. Sin aliud quid voles, postea. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; </p>\n\n\t\t\t<p>Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Primum in nostrane potestate est, quid meminerimus? Eam tum adesse, cum dolor omnis absit; Quodsi ipsam honestatem undique pertectam atque absolutam. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Nec enim, cum tua causa cui commodes, beneficium illud habendum est, sed faeneratio, nec gratia deberi videtur ei, qui sua causa commodaverit. Universa enim illorum ratione cum tota vestra confligendum puto. Sed residamus, inquit, si placet. Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ita enim se Athenis collocavit, ut sit paene unus ex Atticis, ut id etiam cognomen videatur habiturus. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. </p>\n\n\t\t\t<span>An hoc usque quaque, aliter in vita?</span>\n\t\t\t<ol>\n\t\t\t\t<li>Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.</li>\n\t\t\t\t<li>Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.</li>\n\t\t\t\t<li>Certe nihil nisi quod possit ipsum propter se iure laudari.</li>\n\t\t\t\t<li>Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur.</li>\n\t\t\t</ol>\n\n\t\t\t<p>Utilitatis causa amicitia est quaesita. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Totum autem id externum est, et quod externum, id in casu est. Non autem hoc: igitur ne illud quidem. Simul atque natum animal est, gaudet voluptate et eam appetit ut bonum, aspernatur dolorem ut malum. Quamquam tu hanc copiosiorem etiam soles dicere. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Videsne quam sit magna dissensio? </p>\n\n\t\t\t<span>Claudii libidini, qui tum erat summo ne imperio, dederetur.</span>\n\n\t\t\t<p>Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Cum audissem Antiochum, Brute, ut solebam, cum M. An obliviscimur, quantopere in audiendo in legendoque moveamur, cum pie, cum amice, cum magno animo aliquid factum cognoscimus? Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Haec mirabilia videri intellego, sed cum certe superiora firma ac vera sint, his autem ea consentanea et consequentia, ne de horum quidem est veritate dubitandum. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae, disserendi altera, vivendi tertia. Nemo enim est, qui aliter dixerit quin omnium naturarum simile esset id, ad quod omnia referrentur, quod est ultimum rerum appetendarum. Quid est, quod ab ea absolvi et perfici debeat? Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Quod iam a me expectare noli. Quod totum contra est. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. </p>\n\n\t\t\t<span>Sed nimis multa.</span>\n\n\t\t\t<p>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Negat enim summo bono afferre incrementum diem. Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Nulla profecto est, quin suam vim retineat a primo ad extremum. Sed ad illum redeo. Quem quidem vos, cum improbis poenam proponitis, inpetibilem facitis, cum sapientem semper boni plus habere vultis, tolerabilem. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. </p>\n\n\t\t</section>\n\t\t<footer class=\"modal-container-footer\">\n\t\t\t<button class=\"button is-ghost\">Decline</button>\n\t\t\t<button class=\"button is-primary\">Accept</button>\n\t\t</footer>\n\t</article>\n</div>","css":".button,\n.input,\n.select,\n.textarea {\n  font: inherit;\n}\n\na {\n  color: inherit;\n}\n\n.modal-container {\n  max-height: 400px;\n  max-width: 500px;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: #fff;\n  border-radius: 16px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);\n}\n\n@media (max-width: 600px) {\n  .modal-container {\n    width: 90%;\n  }\n}\n\n.modal-container-header {\n  padding: 16px 32px;\n  border-bottom: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.modal-container-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  line-height: 1;\n  font-weight: 700;\n  font-size: 1.125;\n}\n\n.modal-container-title svg {\n  width: 32px;\n  height: 32px;\n  color: #750550;\n}\n\n.modal-container-body {\n  padding: 24px 32px 51px;\n  overflow-y: auto;\n}\n\n.rtf h1,\n.rtf h2,\n.rtf h3,\n.rtf h4,\n.rtf h5,\n.rtf h6 {\n  font-weight: 700;\n}\n\n.rtf h1 {\n  font-size: 1.5rem;\n  line-height: 1.125;\n}\n\n.rtf h2 {\n  font-size: 1.25rem;\n  line-height: 1.25;\n}\n\n.rtf h3 {\n  font-size: 1rem;\n  line-height: 1.5;\n}\n\n.rtf > * + * {\n  margin-top: 1em;\n}\n\n.rtf > * + :is(h1, h2, h3) {\n  margin-top: 2em;\n}\n\n.rtf > :is(h1, h2, h3) + * {\n  margin-top: 0.75em;\n}\n\n.rtf ul,\n.rtf ol {\n  margin-left: 20px;\n  list-style-position: inside;\n}\n\n.rtf ol {\n  list-style: numeric;\n}\n\n.rtf ul {\n  list-style: disc;\n}\n\n.modal-container-footer {\n  padding: 20px 32px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  border-top: 1px solid #ddd;\n  gap: 12px;\n  position: relative;\n}\n\n.modal-container-footer:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -51px;\n  left: 24px;\n  right: 24px;\n  height: 50px;\n  flex-shrink: 0;\n  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);\n  pointer-events: none;\n}\n\n.button {\n  padding: 12px 20px;\n  border-radius: 8px;\n  background-color: transparent;\n  border: 0;\n  font-weight: 600;\n  cursor: pointer;\n  transition: 0.15s ease;\n}\n\n.button.is-ghost:hover, .button.is-ghost:focus {\n  background-color: #dfdad7;\n}\n\n.button.is-primary {\n  background-color: #750550;\n  color: #fff;\n}\n\n.button.is-primary:hover, .button.is-primary:focus {\n  background-color: #4a0433;\n}\n\n.icon-button {\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: 8px;\n  transition: 0.15s ease;\n}\n\n.icon-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n.icon-button:hover, .icon-button:focus {\n  background-color: #dfdad7;\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"d15840","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4997,"cssLen":2573,"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=\"top-section\">\n    <div class=\"border\"></div>\n    <div class=\"icons\">\n      <div class=\"logo\">\n        <svg class=\"svg\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z\" fill=\"white\"></path>\n          <path d=\"M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z\" fill=\"white\"></path>\n          <path d=\"M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z\" fill=\"white\"></path>\n        </svg>\n      </div>\n      <div class=\"social-media\">\n        <svg class=\"svg\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z\"></path>\n        </svg>\n        <svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" class=\"svg\">\n          <path d=\"M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z\"></path>\n        </svg>\n        <svg viewBox=\"0 0 640 512\" xmlns=\"http://www.w3.org/2000/svg\" class=\"svg\">\n          <path d=\"M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z\"></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n  <div class=\"bottom-section\">\n    <span class=\"title\">UNIVERSE OF UI</span>\n    <div class=\"row row1\">\n      <div class=\"item\">\n        <span class=\"big-text\">2626</span>\n        <span class=\"regular-text\">UI elements</span>\n      </div>\n      <div class=\"item\">\n        <span class=\"big-text\">100%</span>\n        <span class=\"regular-text\">Free for use</span>\n      </div>\n      <div class=\"item\">\n        <span class=\"big-text\">38,631</span>\n        <span class=\"regular-text\">Contributers</span>\n      </div>\n    </div>\n  </div>\n</div>","css":".card {\n  width: 230px;\n  border-radius: 20px;\n  background: #1b233d;\n  padding: 5px;\n  overflow: hidden;\n  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;\n  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover {\n  transform: scale(1.05);\n}\n\n.card .top-section {\n  height: 150px;\n  border-radius: 15px;\n  display: flex;\n  flex-direction: column;\n  background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);\n  position: relative;\n}\n\n.card .top-section .border {\n  border-bottom-right-radius: 10px;\n  height: 30px;\n  width: 130px;\n  background: white;\n  background: #1b233d;\n  position: relative;\n  transform: skew(-40deg);\n  box-shadow: -10px -10px 0 0 #1b233d;\n}\n\n.card .top-section .border::before {\n  content: \"\";\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  top: 0;\n  right: -15px;\n  background: rgba(255, 255, 255, 0);\n  border-top-left-radius: 10px;\n  box-shadow: -5px -5px 0 2px #1b233d;\n}\n\n.card .top-section::before {\n  content: \"\";\n  position: absolute;\n  top: 30px;\n  left: 0;\n  background: rgba(255, 255, 255, 0);\n  height: 15px;\n  width: 15px;\n  border-top-left-radius: 15px;\n  box-shadow: -5px -5px 0 2px #1b233d;\n}\n\n.card .top-section .icons {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 30px;\n  display: flex;\n  justify-content: space-between;\n}\n\n.card .top-section .icons .logo {\n  height: 100%;\n  aspect-ratio: 1;\n  padding: 7px 0 7px 15px;\n}\n\n.card .top-section .icons .logo .top-section {\n  height: 100%;\n}\n\n.card .top-section .icons .social-media {\n  height: 100%;\n  padding: 8px 15px;\n  display: flex;\n  gap: 7px;\n}\n\n.card .top-section .icons .social-media .svg {\n  height: 100%;\n  fill: #1b233d;\n}\n\n.card .top-section .icons .social-media .svg:hover {\n  fill: white;\n}\n\n.card .bottom-section {\n  margin-top: 15px;\n  padding: 10px 5px;\n}\n\n.card .bottom-section .title {\n  display: block;\n  font-size: 17px;\n  font-weight: bolder;\n  color: white;\n  text-align: center;\n  letter-spacing: 2px;\n}\n\n.card .bottom-section .row {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 20px;\n}\n\n.card .bottom-section .row .item {\n  flex: 30%;\n  text-align: center;\n  padding: 5px;\n  color: rgba(170, 222, 243, 0.721);\n}\n\n.card .bottom-section .row .item .big-text {\n  font-size: 12px;\n  display: block;\n  color: white;\n  font-weight: 700;\n}\n\n.card .bottom-section .row .item .regular-text {\n  font-size: 9px;\n}\n\n.card .bottom-section .row .item:nth-child(2) {\n  border-left: 1px solid rgba(255, 255, 255, 0.126);\n  border-right: 1px solid rgba(255, 255, 255, 0.126);\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"0b3fcf","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":953,"cssLen":4183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"container\">\n <div class=\"left-side\">\n  <div class=\"card\">\n   <div class=\"card-line\"></div>\n   <div class=\"buttons\"></div>\n  </div>\n  <div class=\"post\">\n   <div class=\"post-line\"></div>\n   <div class=\"screen\">\n    <div class=\"dollar\">$</div>\n   </div>\n   <div class=\"numbers\"></div>\n   <div class=\"numbers-line2\"></div>\n  </div>\n </div>\n <div class=\"right-side\">\n  <div class=\"new\">New Transaction</div>\n  \n   <svg viewBox=\"0 0 451.846 451.847\" height=\"512\" width=\"512\" xmlns=\"http://www.w3.org/2000/svg\" class=\"arrow\"><path fill=\"#cfcfcf\" data-old_color=\"#000000\" class=\"active-path\" data-original=\"#000000\" d=\"M345.441 248.292L151.154 442.573c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744L278.318 225.92 106.409 54.017c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.287 194.284c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373z\"></path></svg>\n \n </div>\n</div>","css":".container {\n  background-color: #ffffff;\n  display: flex;\n  width: 460px;\n  height: 120px;\n  position: relative;\n  border-radius: 6px;\n  transition: 0.3s ease-in-out;\n}\n\n.container:hover {\n  transform: scale(1.03);\n  width: 220px;\n}\n\n.container:hover .left-side {\n  width: 100%;\n}\n\n.left-side {\n  background-color: #5de2a3;\n  width: 130px;\n  height: 120px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  transition: 0.3s;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.right-side {\n  width: calc(100% - 130px);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  justify-content: space-between;\n  white-space: nowrap;\n  transition: 0.3s;\n}\n\n.right-side:hover {\n  background-color: #f9f7f9;\n}\n\n.arrow {\n  width: 20px;\n  height: 20px;\n  margin-right: 20px;\n}\n\n.new {\n  font-size: 23px;\n  font-family: \"Lexend Deca\", sans-serif;\n  margin-left: 20px;\n}\n\n.card {\n  width: 70px;\n  height: 46px;\n  background-color: #c7ffbc;\n  border-radius: 6px;\n  position: absolute;\n  display: flex;\n  z-index: 10;\n  flex-direction: column;\n  align-items: center;\n  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n  -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n}\n\n.card-line {\n  width: 65px;\n  height: 13px;\n  background-color: #80ea69;\n  border-radius: 2px;\n  margin-top: 7px;\n}\n\n@media only screen and (max-width: 480px) {\n  .container {\n    transform: scale(0.7);\n  }\n\n  .container:hover {\n    transform: scale(0.74);\n  }\n\n  .new {\n    font-size: 18px;\n  }\n}\n\n.buttons {\n  width: 8px;\n  height: 8px;\n  background-color: #379e1f;\n  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;\n  border-radius: 50%;\n  margin-top: 5px;\n  transform: rotate(90deg);\n  margin: 10px 0 0 -30px;\n}\n\n.container:hover .card {\n  animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n.container:hover .post {\n  animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;\n}\n\n@keyframes slide-top {\n  0% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n  }\n\n  50% {\n    -webkit-transform: translateY(-70px) rotate(90deg);\n    transform: translateY(-70px) rotate(90deg);\n  }\n\n  60% {\n    -webkit-transform: translateY(-70px) rotate(90deg);\n    transform: translateY(-70px) rotate(90deg);\n  }\n\n  100% {\n    -webkit-transform: translateY(-8px) rotate(90deg);\n    transform: translateY(-8px) rotate(90deg);\n  }\n}\n\n.post {\n  width: 63px;\n  height: 75px;\n  background-color: #dddde0;\n  position: absolute;\n  z-index: 11;\n  bottom: 10px;\n  top: 120px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.post-line {\n  width: 47px;\n  height: 9px;\n  background-color: #545354;\n  position: absolute;\n  border-radius: 0px 0px 3px 3px;\n  right: 8px;\n  top: 8px;\n}\n\n.post-line:before {\n  content: \"\";\n  position: absolute;\n  width: 47px;\n  height: 9px;\n  background-color: #757375;\n  top: -8px;\n}\n\n.screen {\n  width: 47px;\n  height: 23px;\n  background-color: #ffffff;\n  position: absolute;\n  top: 22px;\n  right: 8px;\n  border-radius: 3px;\n}\n\n.numbers {\n  width: 12px;\n  height: 12px;\n  background-color: #838183;\n  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;\n  border-radius: 2px;\n  position: absolute;\n  transform: rotate(90deg);\n  left: 25px;\n  top: 52px;\n}\n\n.numbers-line2 {\n  width: 12px;\n  height: 12px;\n  background-color: #aaa9ab;\n  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;\n  border-radius: 2px;\n  position: absolute;\n  transform: rotate(90deg);\n  left: 25px;\n  top: 68px;\n}\n\n@keyframes slide-post {\n  50% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n  }\n\n  100% {\n    -webkit-transform: translateY(-70px);\n    transform: translateY(-70px);\n  }\n}\n\n.dollar {\n  position: absolute;\n  font-size: 16px;\n  font-family: \"Lexend Deca\", sans-serif;\n  width: 100%;\n  left: 0;\n  top: 0;\n  color: #4b953b;\n  text-align: center;\n}\n\n.container:hover .dollar {\n  animation: fade-in-fwd 0.3s 1s backwards;\n}\n\n@keyframes fade-in-fwd {\n  0% {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"82ebac","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":447,"cssLen":2357,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"parent\">\n  <div class=\"card\">\n      <div class=\"content-box\">\n          <span class=\"card-title\">3D Card</span>\n          <p class=\"card-content\">\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. \n          </p>\n          <span class=\"see-more\">See More</span>\n      </div>\n      <div class=\"date-box\">\n          <span class=\"month\">JUNE</span>\n          <span class=\"date\">29</span>\n      </div>\n  </div>\n</div>","css":".parent {\n  width: 300px;\n  padding: 20px;\n  perspective: 1000px;\n}\n\n.card {\n  padding-top: 50px;\n  /* border-radius: 10px; */\n  border: 3px solid rgb(255, 255, 255);\n  transform-style: preserve-3d;\n  background: linear-gradient(135deg,#0000 18.75%,#f3f3f3 0 31.25%,#0000 0),\n      repeating-linear-gradient(45deg,#f3f3f3 -6.25% 6.25%,#ffffff 0 18.75%);\n  background-size: 60px 60px;\n  background-position: 0 0, 0 0;\n  background-color: #f0f0f0;\n  width: 100%;\n  box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px;\n  transition: all 0.5s ease-in-out;\n}\n\n.card:hover {\n  background-position: -100px 100px, -100px 100px;\n  transform: rotate3d(0.5, 1, 0, 30deg);\n}\n\n.content-box {\n  background: rgba(4, 193, 250, 0.732);\n  /* border-radius: 10px 100px 10px 10px; */\n  transition: all 0.5s ease-in-out;\n  padding: 60px 25px 25px 25px;\n  transform-style: preserve-3d;\n}\n\n.content-box .card-title {\n  display: inline-block;\n  color: white;\n  font-size: 25px;\n  font-weight: 900;\n  transition: all 0.5s ease-in-out;\n  transform: translate3d(0px, 0px, 50px);\n}\n\n.content-box .card-title:hover {\n  transform: translate3d(0px, 0px, 60px);\n}\n\n.content-box .card-content {\n  margin-top: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #f2f2f2;\n  transition: all 0.5s ease-in-out;\n  transform: translate3d(0px, 0px, 30px);\n}\n\n.content-box .card-content:hover {\n  transform: translate3d(0px, 0px, 60px);\n}\n\n.content-box .see-more {\n  cursor: pointer;\n  margin-top: 1rem;\n  display: inline-block;\n  font-weight: 900;\n  font-size: 9px;\n  text-transform: uppercase;\n  color: rgb(7, 185, 255);\n  /* border-radius: 5px; */\n  background: white;\n  padding: 0.5rem 0.7rem;\n  transition: all 0.5s ease-in-out;\n  transform: translate3d(0px, 0px, 20px);\n}\n\n.content-box .see-more:hover {\n  transform: translate3d(0px, 0px, 60px);\n}\n\n.date-box {\n  position: absolute;\n  top: 30px;\n  right: 30px;\n  height: 60px;\n  width: 60px;\n  background: white;\n  border: 1px solid rgb(7, 185, 255);\n  /* border-radius: 10px; */\n  padding: 10px;\n  transform: translate3d(0px, 0px, 80px);\n  box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;\n}\n\n.date-box span {\n  display: block;\n  text-align: center;\n}\n\n.date-box .month {\n  color: rgb(4, 193, 250);\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.date-box .date {\n  font-size: 20px;\n  font-weight: 900;\n  color: rgb(4, 193, 250);\n}\n "},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"10192f","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":962,"cssLen":2117,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"card\"> \n  <button class=\"dismiss\" type=\"button\">×</button> \n  <div class=\"header\"> \n    <div class=\"image\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M20 7L9.00004 18L3.99994 13\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\n      </div> \n      <div class=\"content\">\n         <span class=\"title\">Order validated</span> \n         <p class=\"message\">Thank you for your purchase. you package will be delivered within 2 days of your purchase</p> \n         </div> \n         <div class=\"actions\">\n            <button class=\"history\" type=\"button\">History</button> \n            <button class=\"track\" type=\"button\">Track my package</button> \n            </div> \n            </div> \n            </div>","css":".card {\n  overflow: hidden;\n  position: relative;\n  text-align: left;\n  border-radius: 0.5rem;\n  max-width: 290px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  background-color: #fff;\n}\n\n.dismiss {\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 1rem;\n  background-color: #fff;\n  color: black;\n  border: 2px solid #D1D5DB;\n  font-size: 1rem;\n  font-weight: 300;\n  width: 30px;\n  height: 30px;\n  border-radius: 7px;\n  transition: .3s ease;\n}\n\n.dismiss:hover {\n  background-color: #ee0d0d;\n  border: 2px solid #ee0d0d;\n  color: #fff;\n}\n\n.header {\n  padding: 1.25rem 1rem 1rem 1rem;\n}\n\n.image {\n  display: flex;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: #e2feee;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 9999px;\n  animation: animate .6s linear alternate-reverse infinite;\n  transition: .6s ease;\n}\n\n.image svg {\n  color: #0afa2a;\n  width: 2rem;\n  height: 2rem;\n}\n\n.content {\n  margin-top: 0.75rem;\n  text-align: center;\n}\n\n.title {\n  color: #066e29;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n}\n\n.message {\n  margin-top: 0.5rem;\n  color: #595b5f;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.actions {\n  margin: 0.75rem 1rem;\n}\n\n.history {\n  display: inline-flex;\n  padding: 0.5rem 1rem;\n  background-color: #1aa06d;\n  color: #ffffff;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 500;\n  justify-content: center;\n  width: 100%;\n  border-radius: 0.375rem;\n  border: none;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.track {\n  display: inline-flex;\n  margin-top: 0.75rem;\n  padding: 0.5rem 1rem;\n  color: #242525;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 500;\n  justify-content: center;\n  width: 100%;\n  border-radius: 0.375rem;\n  border: 1px solid #D1D5DB;\n  background-color: #fff;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n@keyframes animate {\n  from {\n    transform: scale(1);\n  }\n\n  to {\n    transform: scale(1.09);\n  }\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"c6638f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1867,"cssLen":1224,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t<div class=\"card\">\n\t\t<div class=\"text\">\n\t\t\t<span>Lorem ipsum dolor sit amet</span>\n\t\t\t<p class=\"subtitle\">Vivamus nisi purus</p>\n\t\t</div>\n\t\t<div class=\"icons\">\n\t\t\t<a class=\"btn\" href=\"#\">\n\t\t\t\t<svg y=\"0\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" width=\"100\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\" height=\"100\" class=\"svg-icon\">\n\t\t\t\t\t<path stroke-width=\"8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill=\"none\" d=\"M31.8,64.5a14.5,14.5,0,0,1-3.2-28.7,17.5,17.5,0,0,1-.4-4,18.2,18.2,0,0,1,36-3.6h.3a18.2,18.2,0,0,1,3.7,36M39.1,75.4,50,86.3m0,0L60.9,75.4M50,86.3V42.7\">\n\t\t\t\t\t</path>\n\t\t\t\t</svg>\n\t\t\t</a>\n\t\t\t<a class=\"btn\" href=\"#\">\n\t\t\t<svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t<path d=\"M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411\"></path>\n\t\t\t</svg>\n\t\t\t</a>\n\t\t\t<a class=\"btn\" href=\"#\">\n\t\t\t<svg y=\"0\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" width=\"100\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\" height=\"100\" class=\"svg-icon\">\n\t\t\t\t<path stroke-width=\"8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill=\"none\" d=\"M21.9,50h0M50,50h0m28.1,0h0M25.9,50a4,4,0,1,1-4-4A4,4,0,0,1,25.9,50ZM54,50a4,4,0,1,1-4-4A4,4,0,0,1,54,50Zm28.1,0a4,4,0,1,1-4-4A4,4,0,0,1,82.1,50Z\">\n\t\t\t\t</path>\n\t\t\t</svg>\n\t\t\t</a>\n\t\t</div>\n\t</div>","css":".card {\n  width: 250px;\n  height: 200px;\n  border-radius: 15px;\n  background: rgba(105, 13, 197, 0.103);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n}\n\n.card::before {\n  content: \"\";\n  height: 100px;\n  width: 100px;\n  position: absolute;\n  top: -40%;\n  left: -20%;\n  border-radius: 50%;\n  border: 35px solid rgba(255, 255, 255, 0.102);\n  transition: all .8s ease;\n  filter: blur(.5rem);\n}\n\n.text {\n  flex-grow: 1;\n  padding: 15px;\n  display: flex;\n  flex-direction: column;\n  color: aliceblue;\n  font-weight: 900;\n  font-size: 1.2em;\n}\n\n.subtitle {\n  font-size: .6em;\n  font-weight: 300;\n  color: rgba(240, 248, 255, 0.691);\n}\n\n.icons {\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  width: 250px;\n  border-radius: 0px 0px 15px 15px;\n  overflow: hidden;\n}\n\n.btn {\n  border: none;\n  width: 84px;\n  height: 35px;\n  background-color: rgba(247, 234, 234, 0.589);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.svg-icon {\n  width: 25px;\n  height: 25px;\n  stroke: rgb(38, 59, 126);\n}\n\n.btn:hover {\n  background-color: rgb(247, 234, 234);\n}\n\n.card:hover::before {\n  width: 140px;\n  height: 140px;\n  top: -30%;\n  left: 50%;\n  filter: blur(0rem);\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"0598ea","snapshot":null,"tags":null,"title":"card by JohnnyCSilva","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1351,"cssLen":1037,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"card\">\n  <svg class=\"img\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" width=\"100%\" height=\"100%\" version=\"1.1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 784.37 1277.39\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g id=\"Layer_x0020_1\">\n  <metadata id=\"CorelCorpID_0Corel-Layer\"></metadata>\n  <g id=\"_1421394342400\">\n   <g>\n    <polygon fill=\"#343434\" fill-rule=\"nonzero\" points=\"392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54\"></polygon>\n    <polygon fill=\"#8C8C8C\" fill-rule=\"nonzero\" points=\"392.07,0 -0,650.54 392.07,882.29 392.07,472.33\"></polygon>\n    <polygon fill=\"#3C3C3B\" fill-rule=\"nonzero\" points=\"392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89\"></polygon>\n    <polygon fill=\"#8C8C8C\" fill-rule=\"nonzero\" points=\"392.07,1277.38 392.07,956.52 -0,724.89\"></polygon>\n    <polygon fill=\"#141414\" fill-rule=\"nonzero\" points=\"392.07,882.29 784.13,650.54 392.07,472.33\"></polygon>\n    <polygon fill=\"#393939\" fill-rule=\"nonzero\" points=\"0,650.54 392.07,882.29 392.07,472.33\"></polygon>\n   </g>\n  </g>\n </g>\n</svg>\n  <div class=\"textBox\">\n    <p class=\"text head\">Ethereum</p>\n    <span>Cryptocurrency</span>\n    <p class=\"text price\">1.654,34€</p>\n  </div>\n</div>\n","css":".card {\n  width: 195px;\n  height: 285px;\n  background: #313131;\n  border-radius: 20px;\n  ;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  transition: 0.2s ease-in-out;\n}\n\n.img {\n  height: 30%;\n  position: absolute;\n  transition: 0.2s ease-in-out;\n  z-index: 1;\n}\n\n.textBox {\n  opacity: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 15px;\n  transition: 0.2s ease-in-out;\n  z-index: 2;\n}\n\n.textBox > .text {\n  font-weight: bold;\n}\n\n.textBox > .head {\n  font-size: 20px;\n}\n\n.textBox > .price {\n  font-size: 17px;\n}\n\n.textBox > span {\n  font-size: 12px;\n  color: lightgrey;\n}\n\n.card:hover > .textBox {\n  opacity: 1;\n}\n\n.card:hover > .img {\n  height: 65%;\n  filter: blur(7px);\n  animation: anim 3s infinite;\n}\n\n@keyframes anim {\n  0% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(-20px);\n  }\n\n  100% {\n    transform: translateY(0);\n  }\n}\n\n.card:hover {\n  transform: scale(1.04) rotate(-1deg);\n}\n\n"}]}},"actionData":null,"errors":null}</article></body></html>