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

Card Title

Card Details

\n More info\n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 20px;\n background: #f5f5f5;\n position: relative;\n padding: 1.8rem;\n border: 2px solid #c3c6ce;\n -webkit-transition: 0.5s ease-out;\n transition: 0.5s ease-out;\n overflow: visible;\n}\n\n.card-details {\n color: rgb(162, 0, 255);\n height: 100%;\n gap: .5em;\n display: grid;\n place-content: center;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.card-button {\n text-decoration: none;\n text-align: center;\n -webkit-transform: translate(-50%, 125%);\n -ms-transform: translate(-50%, 125%);\n transform: translate(-50%, 125%);\n width: 70%;\n border-radius: 1rem;\n border: none;\n background-color: #6c00f8;\n color: #fff;\n font-size: 1rem;\n padding: .5rem 1rem;\n position: absolute;\n left: 50%;\n bottom: 0;\n opacity: 0;\n -webkit-transition: 0.3s ease-out;\n transition: 0.3s ease-out;\n cursor: pointer;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.text-body {\n color: rgb(134, 134, 134);\n}\n\n/*Text*/\n.text-title {\n font-size: 1.5em;\n font-weight: bold;\n}\n\n/*Hover*/\n.card:hover {\n border-color: #6c00f8;\n -webkit-box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877);\n box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877);\n}\n\n.card:hover .card-button {\n -webkit-transform: translate(-50%, 50%);\n -ms-transform: translate(-50%, 50%);\n transform: translate(-50%, 50%);\n opacity: 1;\n}"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"123f4a","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":227,"cssLen":2756,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n Text Here\n

","css":".card {\n width: 200px;\n height: 290px;\n background: white;\n border-radius: 10px;\n transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n display: flex;\n flex-direction: column;\n}\n\n.shadow {\n box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),\n 0 0 0 2px rgb(190, 190, 190),\n 0.3em 0.3em 1em rgba(0,0,0,0.3);\n}\n\n.ribbon {\n width: 230px;\n position: absolute;\n margin-top: 229px;\n margin-left: -20px;\n text-align: center;\n font-size: 20px !important;\n background: #D64B4B;\n background: -webkit-gradient(linear, left top, left bottom, from(#D64B4B), to(#AB2C2C));\n background: -webkit-linear-gradient(top, #D64B4B, #AB2C2C);\n background: -moz-linear-gradient(top, #D64B4B, #AB2C2C);\n background: -ms-linear-gradient(top, #D64B4B, #AB2C2C);\n background: -o-linear-gradient(top, #D64B4B, #AB2C2C);\n background-image: -ms-linear-gradient(top, #D64B4B 0%, #AB2C2C 100%);\n -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 1px;\n -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 1px;\n box-shadow: rgba(0,0,0,0.3) 0 1px 1px;\n font-family: 'Helvetica Neue',Helvetica, sans-serif;\n}\n\n.ribbon span {\n font-size: 35px !important;\n color: #801111;\n text-shadow: #D65C5C 0 1px 0;\n margin: 0px;\n padding: 19px 10px;\n}\n\n.ribbon:before, .ribbon:after {\n content: '';\n position: absolute;\n display: block;\n bottom: -1em;\n border: 1.5em solid #C23A3A;\n z-index: -1;\n}\n\n.ribbon:before {\n left: -2em;\n border-right-width: 1.5em;\n border-left-color: transparent;\n -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;\n -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;\n box-shadow: rgba(0,0,0,0.4) 1px 1px 1px;\n}\n\n.ribbon:after {\n right: -2em;\n border-left-width: 1.5em;\n border-right-color: transparent;\n -webkit-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;\n -moz-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;\n box-shadow: rgba(0,0,0,0.4) -1px 1px 1px;\n}\n\n.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {\n border-color: #871616 transparent transparent transparent;\n position: absolute;\n display: block;\n border-style: solid;\n bottom: -1em;\n content: '';\n}\n\n.ribbon .ribbon-content:before {\n left: 0;\n border-width: 1em 0 0 1em;\n}\n\n.ribbon .ribbon-content:after {\n right: 0;\n border-width: 1em 1em 0 0;\n}\n\n.ribbon-stitches-top {\n margin-top: 2px;\n border-top: 1px dashed rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);\n -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);\n box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);\n}\n\n.ribbon-stitches-bottom {\n margin-bottom: 2px;\n border-top: 1px dashed rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);\n -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);\n box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);\n}\n"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"5b0903","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":183,"cssLen":963,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 250px;\n height: 90px;\n background: #262626;\n}\n\n.smallIcon {\n width: 100%;\n height: 100%;\n background-color: #ff5858;\n}\n\n.smallIcon div {\n background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 \n 40%, #e5e5e5 48%);\n margin-top: 10px;\n background-size: 200% 100%;\n background-position: 100% 0;\n animation: load89234 2s infinite;\n color: #262626;\n font-weight: bold;\n font-size: 15px;\n}\n\n.Icon {\n margin: 10px;\n width: 70px;\n height: 70px;\n float: left;\n border-radius: 5px;\n}\n\n.Name {\n width: 90px;\n height: 20px;\n float: left;\n transform: translate(10px ,0px);\n border-radius: 5px;\n}\n\n.Roles {\n width: 40px;\n height: 20px;\n float: left;\n transform: translate(20px ,0px);\n border-radius: 5px;\n}\n\n.Descripion {\n margin: 10px;\n width: 140px;\n height: 45px;\n float: left;\n transform: translate(0px ,-5px);\n border-radius: 5px;\n}\n\n@keyframes load89234 {\n 100% {\n background-position: -100% 0;\n }\n}"},{"created":"2024-01-22T17:11:02.000Z","isPrivate":0,"projectId":"3808f0","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":189,"cssLen":1621,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n George Johnson\n

Support Specialist

\n Folow\n

","css":".card {\n width: 350px;\n height: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 10px;\n background-color: #fffffe;\n border-radius: 15px;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n\n.card::before {\n content: \"\";\n width: 350px;\n height: 100px;\n position: absolute;\n top: 0;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n border-bottom: 3px solid #fefefe;\n background: linear-gradient(40deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);\n transition: all 0.3s ease;\n}\n\n.card * {\n z-index: 1;\n}\n\n.image {\n width: 90px;\n height: 90px;\n background-color: #1468BF;\n border-radius: 50%;\n border: 4px solid #fefefe;\n margin-top: 30px;\n transition: all 0.5s ease;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n transition: all 0.5s ease;\n}\n\n.card-info span {\n font-weight: 600;\n font-size: 24px;\n color: #161A42;\n margin-top: 15px;\n line-height: 5px;\n}\n\n.card-info p {\n color: rgba(0, 0, 0, 0.5);\n}\n\n.button {\n text-decoration: none;\n background-color: #1468BF;\n color: white;\n padding: 5px 20px;\n border-radius: 5px;\n border: 1px solid white;\n transition: all 0.5s ease;\n}\n\n.card:hover {\n width: 300px;\n border-radius: 250px;\n}\n\n.card:hover::before {\n width: 300px;\n height: 300px;\n border-radius: 50%;\n border-bottom: none;\n transform: scale(0.95);\n}\n\n.card:hover .card-info {\n transform: translate(0%,-15%);\n}\n\n.button:hover {\n background-color: #FF6844;\n transform: scale(1.1);\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"b52f80","snapshot":null,"tags":null,"title":"card by D3OXY","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":892,"cssLen":1343,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

\n \n \n

\n","css":".card {\n position: relative;\n width: 350px;\n aspect-ratio: 16/9;\n background-color: #f2f2f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n box-shadow: 0 0 0 5px #ffffff80;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card svg {\n width: 48px;\n fill: #333;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card__image {\n width: 100%;\n height: 100%;\n}\n\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);\n}\n\n.card__content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #f2f2f2;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n font-size: 20px;\n color: #333;\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 10px;\n font-size: 12px;\n color: #777;\n line-height: 1.4;\n}\n\n.card__button {\n padding: 15px;\n border-radius: 8px;\n background: #777;\n border: none;\n color: white;\n}\n\n.secondary {\n background: transparent;\n color: #777;\n border: 1px solid #777;\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"26ee74","snapshot":null,"tags":null,"title":"card by IWhat1","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5164,"cssLen":1421,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Profile

\n \n \n

Front Card

Follow me for more...\n

Follow Me

\n \n \n\n

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

\n","css":".container {\n height: 294px;\n width: 240px;\n color: red;\n perspective: 800px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card {\n width: 100%;\n height: 100%;\n background: black;\n border-radius: 2rem;\n position: relative;\n transition: transform 1500ms;\n transform-style: preserve-3d;\n}\n\n.card-top {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 10%;\n position: absolute;\n width: 50%;\n background-color: transparent;\n border: 2px solid black;\n top: 0;\n border-top: none;\n border-radius: 0 0 1rem 1rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);\n}\n\n.card-top-para {\n font-size: 16px;\n font-weight: bold;\n}\n\n.container:hover > .card {\n cursor: pointer;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.front,\n.back {\n height: 100%;\n width: 100%;\n border-radius: 2rem;\n box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);\n position: absolute;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.back {\n background-color: black;\n transform: rotateX(180deg) rotateZ(-180deg);\n}\n\n.heading {\n font-size: 22px;\n font-weight: bold;\n}\n\n.follow {\n font-size: 16px;\n font-weight: 500;\n}\n\n.icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-top: 20px;\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"f068ad","snapshot":null,"tags":null,"title":"card by SharpTH","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":301,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n cursor: pointer;\n width: 190px;\n height: 254px;\n background: rgb(255, 255, 255);\n border-radius: 5px;\n border: 1px solid rgba(0, 0, 255, .2);\n transition: all .2s;\n box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);\n}\n\n.card:hover {\n box-shadow: -12px 12px 2px -1px rgba(0, 0, 255, .2);\n}\n\n\n\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"afc252","snapshot":null,"tags":null,"title":"card by zanina-yassine","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":221,"cssLen":2136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Loading users\n

\n \n

\n","css":".card {\n width: 400px;\n max-width: 450px;\n height: fit-content;\n\n display: grid;\n grid-template-rows: auto 4px auto;\n\n padding-bottom: 20px;\n\n border-radius: 11px;\n\n background: #ffffff;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),\n 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),\n 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.card_title {\n display: block;\n\n padding: 12px 15px;\n\n color: rgb(70, 70, 76);\n font-size: 0.875rem;\n font-weight: 600;\n text-align: center;\n}\n\n.loader {\n height: 3px;\n width: 100%;\n\n position: relative;\n\n background-color: #e2e4e8;\n animation: retract 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite;\n}\n\n.card:has(.load-more:hover) .loader {\n height: 2px;\n}\n\n.loader::before {\n content: \"\";\n\n height: 100%;\n\n position: absolute;\n\n left: 0;\n\n background: linear-gradient(#4480ff 0%, #115dfc 50%, #0550ed 100%);\n animation: slide 5s cubic-bezier(0.15, 0.83, 0.66, 1) 2s forwards infinite;\n}\n\n.card_content {\n width: 100%;\n height: 150px;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n}\n\n.load-more {\n width: fit-content;\n height: 36px;\n\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n padding: 0 15px;\n\n border-radius: 5px;\n border: 0;\n\n background: linear-gradient(180deg, #4480ff 0%, #115dfc 50%, #0550ed 100%);\n font-style: normal;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n color: #ffffff;\n\n box-shadow: 0px 0.5px 0.5px #efefef, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n cursor: pointer;\n}\n\n.load-more:hover {\n transform: translateY(-1px);\n box-shadow: 0 10px 20px 0#054eed6b;\n}\n\n@keyframes slide {\n 0% {\n width: 0%;\n }\n 30% {\n width: 20%;\n }\n 50% {\n width: 30%;\n }\n 70% {\n width: 80%;\n }\n 90% {\n width: 100%;\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes retract {\n 0% {\n height: 3px;\n }\n 95% {\n height: 3px;\n }\n 100% {\n height: 1px;\n }\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"e560ba","snapshot":null,"tags":null,"title":"card by Ans453","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":965,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n First\n

\nSecond\n

\n\n\n

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(45, 45, 45);\n transition: all 0.4s;\n border-radius: 10px;\n box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);\n font-size: 30px;\n font-weight: 900;\n}\n\n.card:hover {\n border-radius: 15px;\n cursor: pointer;\n transform: scale(1.2);\n box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);\n background: rgb(0, 0, 0);\n}\n\n.first-content {\n height: 100%;\n width: 100%;\n transition: all 0.4s;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n border-radius: 15px;\n}\n\n.card:hover .first-content {\n height: 0px;\n opacity: 0;\n}\n\n.second-content {\n height: 0%;\n width: 100%;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 15px;\n transition: all 0.4s;\n font-size: 0px;\n transform: rotate(90deg) scale(-1);\n}\n\n.card:hover .second-content {\n opacity: 1;\n height: 100%;\n font-size: 1.8rem;\n transform: rotate(0deg);\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"f4810d","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4795,"cssLen":1590,"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 \n \n \n \n

\n \n

\n","css":".gender-card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: flex-start;\n padding: 30px;\n border-radius: 20px;\n font-family: Arial, Helvetica, sans-serif;\n gap: 25px;\n}\n.large-svg-container {\n width: auto;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: rotate(45deg);\n}\n.largemalesvg {\n transform: rotate(180deg);\n}\n.heading {\n color: #1d1d1d;\n font-weight: 600;\n font-size: 25px;\n text-align: center;\n}\n.gender-radio-buttons {\n display: none;\n}\n.smallsvg {\n width: 10px;\n}\n.other-gender {\n width: 15px;\n}\n.malesmallsvg {\n transform: rotate(225deg);\n}\n.genderlabel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n background-color: rgb(46, 46, 46);\n border-radius: 5px;\n padding: 8px 16px;\n gap: 8px;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease-out;\n}\n\n.radio-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n margin-top: 25px;\n}\n.femalebutton:hover {\n background-color: rgb(245, 185, 195);\n}\n.malebutton:hover {\n background-color: #569fcf;\n}\n.otherbutton:hover {\n background-color: #4d227a;\n}\n#female:checked + .femalebutton {\n background-color: rgb(245, 185, 195);\n transform: scale(1.1);\n}\n#male:checked + .malebutton {\n background-color: #569fcf;\n transform: scale(1.1);\n}\n#other:checked + .otherbutton {\n background-color: #4d227a;\n transform: scale(1.2);\n}\n"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"283374","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1087,"cssLen":1492,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Dad Jokes Delivered!

\n Why did the dad cross the road? To get to the dad-joke convention!\n 😂\n

\n \n \n

\n","css":".notifications-container {\n width: 320px;\n height: auto;\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.success {\n padding: 1rem;\n border-radius: 0.375rem;\n background-color: rgb(240 253 244);\n}\n\n.succes-svg {\n color: rgb(74 222 128);\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.success-prompt-wrap {\n margin-left: 0.75rem;\n}\n\n.success-prompt-heading {\n font-weight: bold;\n color: rgb(22 101 52);\n}\n\n.success-prompt-prompt {\n margin-top: 0.5rem;\n color: rgb(21 128 61);\n}\n\n.success-button-container {\n display: flex;\n margin-top: 0.875rem;\n margin-bottom: -0.375rem;\n margin-left: -0.5rem;\n margin-right: -0.5rem;\n}\n\n.success-button-main {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n background-color: #ECFDF5;\n color: rgb(22 101 52);\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: bold;\n border-radius: 0.375rem;\n border: none\n}\n\n.success-button-main:hover {\n background-color: #D1FAE5;\n}\n\n.success-button-secondary {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n margin-left: 0.75rem;\n background-color: #ECFDF5;\n color: #065F46;\n font-size: 0.875rem;\n line-height: 1.25rem;\n border-radius: 0.375rem;\n border: none;\n}\n\n.success-button-secondary:hover {\n background-color: #D1FAE5;\n color: rgb(22 101 52);\n}"},{"created":"2024-01-22T17:11:01.000Z","isPrivate":0,"projectId":"594a6c","snapshot":null,"tags":null,"title":"card by AnasKhraim20","updated":"2024-01-22T17:11:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":78,"cssLen":1172,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n position: relative;\n width: 200px;\n height: 250px;\n border-radius: 14px;\n z-index: 1111;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;\n}\n\n.bg {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 190px;\n height: 240px;\n z-index: 2;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(24px);\n border-radius: 10px;\n overflow: hidden;\n outline: 2px solid white;\n}\n\n.blob {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background-color: #ff0000;\n opacity: 1;\n filter: blur(12px);\n animation: blob-bounce 0s infinite ease;\n}\n\n@keyframes blob-bounce {\n 0% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: translate(-100%, -100%) translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translate(-100%, -100%) translate3d(100%, 100%, 0);\n }\n\n 75% {\n transform: translate(-100%, -100%) translate3d(0, 100%, 0);\n }\n\n 100% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n}\n"}]}},"actionData":null,"errors":null}