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

\n \n

\n","css":".container {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container .glass {\n position: relative;\n width: 180px;\n height: 200px;\n background: linear-gradient(#fff2, transparent);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.5s;\n border-radius: 10px;\n margin: 0 -45px;\n backdrop-filter: blur(10px);\n transform: rotate(calc(var(--r) * 1deg));\n}\n\n.container:hover .glass {\n transform: rotate(0deg);\n margin: 0 10px;\n}\n\n.container .glass::before {\n content: attr(data-text);\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 40px;\n background: rgba(255, 255, 255, 0.05);\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n}\n.container .glass svg {\n font-size: 2.5em;\n fill: #fff;\n}\n"},{"created":"2024-01-22T17:11:14.000Z","isPrivate":0,"projectId":"406ccf","snapshot":null,"tags":null,"title":"card by aboalsim114","updated":"2024-01-22T17:11:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50017,"cssLen":1033,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n\n\n

","css":".card {\n position: relative;\n padding: 10px;\n font: 500 15px / 15px Almohtarif;\n vertical-align: baseline;\n box-sizing: border-box;\n background: #fff;\n border-radius: 8px;\n width: 200px;\n height: 250px;\n z-index: 1;\n transition: all 500ms ease-in-out;\n}\n\n.card::after {\n content: '2022';\n width: 200px;\n height: 35%;\n background-color: blue;\n position: absolute;\n z-index: -1;\n left: 0;\n top: 0;\n display: flex;\n font-size: 30px;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #fff;\n}\n\n.card::before {\n content: 'france';\n color: #fff;\n text-transform: uppercase;\n width: 200px;\n height: 35%;\n background-color: red;\n position: absolute;\n z-index: -1;\n right: 0;\n bottom: 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card svg {\n width: 100px;\n align-items: center;\n display: flex;\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n}\n"},{"created":"2024-01-22T17:11:14.000Z","isPrivate":0,"projectId":"474c49","snapshot":null,"tags":null,"title":"card by mayurd8862","updated":"2024-01-22T17:11:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

HOVER

","css":".card {\n position: relative;\n width: 220px;\n height: 320px;\n background: rgb(209, 72, 122);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 25px;\n font-weight: bold;\n border-radius: 15px;\n cursor: pointer;\n}\n\n.card::before,\n.card::after {\n position: absolute;\n content: \"\";\n width: 20%;\n height: 20%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 25px;\n font-weight: bold;\n background-color: rgb(230, 173, 203);\n transition: all 0.5s;\n}\n\n.card::before {\n top: 0;\n right: 0;\n border-radius: 0 15px 0 100%;\n}\n\n.card::after {\n bottom: 0;\n left: 0;\n border-radius: 0 100% 0 15px;\n}\n\n.card:hover::before,\n.card:hover:after {\n width: 100%;\n height: 100%;\n border-radius: 15px;\n transition: all 0.5s;\n}\n\n.card:hover:after {\n content: \"HELLO\";\n}"},{"created":"2024-01-22T17:11:14.000Z","isPrivate":0,"projectId":"bf2d75","snapshot":null,"tags":null,"title":"card by AmaruPaillan","updated":"2024-01-22T17:11:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":533,"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 border-radius: 1rem;\n background-color: #4158d0;\n background-image: linear-gradient(\n 43deg,\n #4158d0 0%,\n #1888b4 46%,\n #0f31ca 100%\n );\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,\n rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,\n rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,\n rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,\n rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n}\n"},{"created":"2024-01-22T17:11:14.000Z","isPrivate":0,"projectId":"c2f944","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4042,"cssLen":1607,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Name

Web Dev

","css":".card {\n width: 190px;\n height: 254px;\n position: relative;\n background: #f5f5f5;\n color: #252525;\n border-radius: 4px;\n overflow: hidden;\n line-height: 150%;\n box-shadow: 0px 10px 20px rgba(80, 80, 80, 0.2);\n transition: box-shadow .3s ease-in-out;\n}\n\n.card-info {\n position: absolute;\n bottom: 1em;\n width: 100%;\n text-align: center;\n}\n\n/* Image */\n.card-img {\n background: #00ff88;\n background: linear-gradient(to top, #00ff88, #61efff);\n height: 100%;\n width: 100%;\n position: absolute;\n transition: transform .3s ease-in-out;\n z-index: 2;\n}\n\n/* Buttons */\n.social-media {\n position: absolute;\n bottom: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding: 0 1rem;\n transform: translateY(-6em);\n z-index: 3;\n}\n\n.social-media li {\n background: #f5f5f5;\n display: inline-flex;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n opacity: 0;\n transition: all .3s ease-in;\n}\n/* Icons */\n.social-media li svg {\n --size: 24px;\n width: var(--size);\n height: var(--size);\n fill: #252525;\n}\n\n/* Texts */\n.title {\n font-size: 1.5em;\n font-weight: bold;\n}\n\n.subtitle {\n letter-spacing: 1px;\n font-size: 0.9em;\n}\n\n\n/* Hovers */\n.card:hover {\n box-shadow: 0px 15px 30px rgba(80, 80, 80, 0.3);\n}\n\n.card:hover .card-img {\n transform: translateY(-5em);\n}\n\n.card:hover .social-media li {\n transform: translateY(-5%);\n opacity: 1;\n}\n\n.card:hover .social-media li:nth-child(1) {\n transition-delay: 0s;\n}\n\n.card:hover .social-media li:nth-child(2) {\n transition-delay: .1s;\n}\n\n.card:hover .social-media li:nth-child(3) {\n transition-delay: .2s;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"f54060","snapshot":null,"tags":null,"title":"card by StealthWorm","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":736,"cssLen":5077,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n viper viper viper viper\n viper viper viper viper\n viper viper viper viper\n

\n \n

\n\t

\n\t\t

\n\t

\n\tLorem ipsum\n\tLorem ipsum\n

","css":".card-border {\n z-index: 0;\n position: relative;\n padding: 1rem;\n width: 300px;\n height: 350px;\n box-sizing: border-box;\n background: transparent;\n backdrop-filter: blur(40px);\n border-radius: 0px 2rem;\n background-image: radial-gradient(#2121218a, #212121cc), linear-gradient(35deg,#124926 62%,#57ff94 100%);\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 1px 1px 3rem #57ff95;\n transition: all 0.5s;\n animation: pulse_3011 3s infinite;\n}\n\n.card-bg {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: 0px 0.8rem;\n background: linear-gradient(346.80deg, #124926 30%, #165c30 30%, rgba(255, 70, 84, 0) 30%, rgba(255, 70, 84, 0) 32%, #124926 32%, #124926 35%, transparent 35%);\n}\n\nstrong {\n display: flex;\n height: 100%;\n width: 100%;\n text-transform: uppercase;\n font-family: 'Open Sans Pro', sans-serif;\n font-size: 1.6rem;\n font-weight: 900;\n align-items: center;\n letter-spacing: 0.5rem;\n}\n\n#text-border {\n position: absolute;\n top: 15.35rem;\n left: 1.5rem;\n width: 100%;\n height: fit-content;\n color: transparent;\n -webkit-text-stroke-width: 1px;\n -webkit-text-stroke-color: rgb(255, 255, 255);\n background: linear-gradient(90deg, transparent 100%, #ffffff 65%);\n background-size: cover;\n background-clip: text;\n -webkit-background-clip: text;\n}\n\n#text-ext {\n z-index: -1;\n display: flex;\n position: absolute;\n inset: 1rem;\n -webkit-text-stroke-width: 1px;\n -webkit-text-stroke-color: #ffffff;\n background: linear-gradient(346.80deg, rgb(255, 255, 255) 30%, #ffffff 30%, #ffffff 30%, rgb(255, 255, 255) 32%, rgb(255, 255, 255) 32%, rgb(255, 255, 255) 35%);\n background-size: cover;\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n padding: 9rem 0 0 0.5rem;\n}\n\n.marquee {\n top: 0;\n z-index: -5;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n --offset: 2rem;\n --move-initial: calc(-20% + var(--offset));\n --move-final: calc(-85% + var(--offset));\n border-radius: 0px 1rem;\n filter: opacity(0.3);\n}\n\n.marquee__inner {\n width: fit-content;\n display: flex;\n position: relative;\n transform: translate3d(var(--move-initial), 0, 0);\n animation: slide 60s linear infinite;\n border-radius: 0px 1rem;\n}\n\n.marquee__inner {\n animation-play-state: running;\n}\n\n#blur-area {\n display: block;\n position: absolute;\n z-index: -1;\n inset: 0;\n /* border: 1px solid rgb(12, 255, 65); */\n border-radius: 0 1rem;\n backdrop-filter: blur(3px);\n background: linear-gradient(90deg, transparent 0%, #00000044 100%);\n}\n\n.viper {\n display: flex;\n text-transform: uppercase;\n font-family: 'Open Sans Pro', sans-serif;\n font-size: 8rem;\n font-weight: 900;\n align-items: center;\n line-height: 0.9em;\n color: transparent;\n -webkit-text-stroke-width: 2px;\n -webkit-text-stroke-color: rgb(255, 255, 255);\n}\n\n.container-logo {\n display: flex;\n position: absolute;\n width: 3.5rem;\n height: 3em;\n top: 1rem;\n left: 1rem;\n align-items: center;\n justify-content: center;\n clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n}\n\n.logo {\n position: absolute;\n width: 200%;\n height: 200%;\n background: conic-gradient(#228647 0%, #fff 10%, #7bffac 25%, #0d381c 50%, #1ccc5d 70%, #69b384 90%);\n animation: spin 5s linear infinite;\n}\n\n.logo-inside {\n display: flex;\n width: 85%;\n height: 85%;\n align-items: center;\n justify-content: center;\n clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n background-color: #212121;\n}\n\n.first, .second {\n position: absolute;\n width: 30px;\n height: 30px;\n background-color: #57ff95;\n}\n\n.first {\n clip-path: polygon(0 10%, 70% 90%, 35% 90%, 0 50%);\n}\n\n.second {\n clip-path: polygon(100% 10%, 100% 50%, 88% 65%, 55% 65%);\n}\n\n.mist-container {\n position: absolute;\n width: 450px;\n height: 150px;\n overflow: hidden;\n filter: blur(1rem);\n top: 60%;\n left: 0;\n}\n\n.mist {\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(131, 255, 158, 0.63) 10%, rgba(255, 255, 255, 0) 50%);\n animation: mist 10s infinite both;\n}\n\nsvg {\n position: absolute;\n top: 0%;\n width: 18rem;\n height: 100%;\n z-index: -2;\n}\n\n.card-border:hover {\n transform: rotateY(20deg);\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes mist {\n 0% {\n transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(0deg);\n opacity: 0.3;\n }\n\n 50% {\n transform: translateX(0%) translateY(50%) scaleY(-10.3) rotate(20deg);\n opacity: 0.5;\n }\n\n 100% {\n transform: translateX(-50%) translateY(0%) scaleY(0.7) rotate(-20deg);\n opacity: 0.3;\n }\n}\n\n@keyframes pulse_3011 {\n 0% {\n box-shadow: 0 0 1rem #57ff95;\n }\n\n 70% {\n box-shadow: 0 0 2rem #57ff95;\n }\n\n 100% {\n box-shadow: 0 0 1rem #57ff95;\n }\n}\n\n@keyframes slide {\n 0% {\n transform: translate3d(var(--move-initial), 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--move-final), 0, 0);\n }\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"3bc575","snapshot":null,"tags":null,"title":"card by prashantj510","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":56,"cssLen":419,"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-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n border-radius: 20px;\n transition: all .3s;\n}\n\n.card2 {\n width: 190px;\n height: 254px;\n background-color: #1a1a1a;\n border-radius: 10px;\n transition: all .2s;\n}\n\n.card2:hover {\n transform: scale(0.98);\n border-radius: 20px;\n}\n\n.card:hover {\n box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"93e7d4","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":692,"cssLen":2881,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

GeForce RTX 4090

RTX

size :

\n S\n M\n L\n

color :

\n pink\n blue\n green\n

\n \n

\n","css":".product-container {\n position: relative;\n}\n\n.card {\n font-family: Lato, sans-serif;\n position: relative;\n width: 290px;\n height: 400px;\n background: #232323;\n border-radius: 20px;\n overflow: hidden;\n}\n\n.card:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--product-color);\n clip-path: circle(150px at 80% 20%);\n transition: .5s ease-in-out;\n}\n\n.card:hover:before {\n clip-path: circle(300px at 80% -20%);\n}\n\n.title {\n position: relative;\n font-weight: 600;\n letter-spacing: 1px;\n color: #fff;\n margin-top: 12px;\n}\n\n.bg-title {\n font-size: 10em;\n font-weight: 900;\n font-style: italic;\n color: rgba(255,255,255,.04);\n position: absolute;\n max-width: 120%;\n top: -150%;\n transition: .6s;\n}\n\n.card:hover .bg-title {\n transform: translateY(60%);\n}\n\n.photo {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 100%;\n height: 220px;\n transition: .5s;\n}\n\n.card:hover .photo {\n top: 0%;\n transform: translateY(0%);\n}\n\n.photo img {\n position: absolute;\n width: 220px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-25deg);\n transition: .5s;\n}\n\n.card:hover .photo img {\n width: 260px;\n top: 56%;\n}\n\n.content {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 100px;\n text-align: center;\n transition: 1s;\n z-index: 5;\n}\n\n.card:hover .content {\n height: 190px;\n}\n\n.feature {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 20px;\n transition: .5s;\n visibility: hidden;\n opacity: 0;\n}\n\n.card:hover .feature {\n visibility: visible;\n opacity: 1;\n transition-delay: .5s;\n}\n\n.feature div {\n color: #fff;\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-right: 10px;\n}\n\n.feature span {\n min-width: 20px;\n padding: 0 4px;\n height: 26px;\n text-align: center;\n line-height: 26px;\n font-size: 14px;\n display: inline-block;\n color: #111;\n background: #fff;\n margin: 0 5px;\n transition: .4s;\n border-radius: 4px;\n cursor: pointer\n}\n\n.feature span:hover {\n color: #000;\n background: var(--product-color);\n}\n\n.btn-buy {\n display: inline-block;\n padding: 10px 20px;\n background: #fff;\n border: none;\n border-radius: 4px;\n margin-top: 10px;\n text-decoration: none;\n font-weight: 600;\n color: #111;\n opacity: 0;\n transform: translateY(50px);\n transition: 0.5s;\n cursor: pointer;\n outline: none;\n}\n\n.card:hover .btn-buy {\n opacity: 1;\n transform: translateY(0px);\n transition: 0.5s;\n transition-delay: 0.5s;\n}\n\n.card:hover .btn-buy:hover {\n background: var(--product-color);\n transition-delay: 0;\n transition: 0.05s;\n}\n\n.product-1 {\n --product-color: #EB6CA4;\n}\n\n.size span {\n cursor: pointer;\n z-index: 50;\n}\n\n.feature .tt:hover {\n background: #038dff;\n}\n\n.feature .ttt:hover {\n background: #09ff0d;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"ca91d0","snapshot":null,"tags":null,"title":"card by 1osm","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2149,"cssLen":1362,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n 5/5\n This is Descripion of The Game\n

\n\n \n Game Name\n

","css":".card {\n width: 200px;\n height: 250px;\n background: #262626;\n}\n\n.GameIcon {\n transform: translate(-80px,-50px);\n position: absolute;\n width: 200px;\n height: 200px;\n transition: 0.3s;\n}\n\n.GameImg {\n width: 100%;\n height: 100%;\n}\n\n.Gfooter {\n width: 100%;\n height: 0%;\n background-color: #262626;\n border-radius: 10px;\n transition: all 0.3s;\n}\n\n.Name {\n transform: translate(10px,200px);\n position: absolute;\n background-color: transparent;\n font-weight: bold;\n font-size: 18px;\n transition: 0.3s;\n color: #ff5858;\n}\n\n.SmallIcon {\n width: 0px;\n height: 0px;\n transform: translate(10px,10px);\n border-radius: 10px;\n background-color: #ff5858;\n transition: 0.2s;\n}\n\n.Descripion {\n padding: 10px;\n position: absolute;\n transform: translate(0px,20px);\n opacity: 0%;\n color: #ff5858;\n font-weight: bold;\n font-size: 15px;\n}\n\n.StarIcon {\n transform: translate(-0px,25px);\n width: 20px;\n fill: #ebd300;\n}\n\n.Stars {\n position: absolute;\n color: white;\n font-size: 15px;\n font-weight: bold;\n transform: translate(80px,-70px);\n}\n\n.GameImg:hover .Descripion {\n opacity: 100%;\n}\n\n.GameImg:hover .Gfooter {\n width: 100%;\n height: 100%;\n}\n\n.GameImg:hover .SmallIcon {\n width: 60px;\n height: 60px;\n}\n\n.GameImg:hover .Name {\n transform: translate(75px,-235px);\n}\n\n.GameImg:hover .GameIcon {\n transform: translate(100px,-160px);\n}\n"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"bb231b","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":857,"cssLen":1316,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 5em;\n font-weight: 900;\n color: #e10600;\n position: relative;\n transition: all 1s ease;\n text-align: center;\n}\n\n.container__star {\n transition: all .7s ease-in-out;\n}\n\n.first {\n position: absolute;\n top: 20px;\n left: 50px;\n transition: all .7s ease-in-out;\n}\n\n.svg-icon {\n position: absolute;\n fill: #e94822;\n z-index: 1;\n}\n\n.star-eight {\n background: #efd510;\n width: 150px;\n height: 150px;\n position: relative;\n text-align: center;\n animation: rot 3s infinite;\n}\n\n.star-eight::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 150px;\n width: 150px;\n background: #efd510;\n transform: rotate(135deg);\n}\n\n.container:hover .container__star {\n transform: rotateX(70deg) translateY(250px);\n box-shadow: 0px 0px 120px -100px #e4e727;\n}\n\n.container:hover .svg-icon {\n animation: grow 1s linear infinite;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(340deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes grow {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-5deg);\n }\n\n 75% {\n transform: rotate(5deg);\n }\n\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"3fac45","snapshot":null,"tags":null,"title":"card by reshades","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1105,"cssLen":1286,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

script.py

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

\n \n import os, sys \n os.system(\"title test script\") \n print(\"Hello UIVERSE.io!\") \n sys.exit() \n #this is a comment.\n\n

","css":".card {\n width: 250px;\n height: 254px;\n background: #121212;\n border-radius: 10px;\n border: 1px #212121 solid;\n}\n\n.card hr {\n color: #313131;\n margin-top: -3.5px\n}\n\n.content {\n color: #8e8e8e;\n margin-left: 0.3em;\n}\n\n.c1 {\n color: rgb(55, 91, 158)\n}\n\n.c2 {\n color: rgb(55, 158, 150)\n}\n\n.c3 {\n color: rgb(158, 151, 55)\n}\n\n.c4 {\n color: rgb(88, 158, 55)\n}\n\n.comment {\n opacity: 50%\n}\n\n.title {\n color: #e8e8e8;\n font-size: small;\n float: left;\n margin-left: 0.6em;\n margin-top: 0.6em;\n}\n\n.top {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 21px;\n font-weight: 450;\n background-color: #121212;\n width: 100%;\n text-align: right;\n border-radius: 10px\n}\n\n.topfix {\n background-color: #121212;\n width: 100%;\n height: 1em;\n margin-top: -1em;\n}\n\nbutton {\n width: 40px;\n height: 35px;\n margin-left: -5px;\n border: 0;\n outline: 0;\n background: transparent;\n transition: 0.2s;\n}\n\nbutton svg path, \nbutton svg rect, \nbutton svg polygon {\n fill: #ffffff;\n}\n\nbutton svg {\n width: 10px;\n height: 10px;\n}\n\n.close:hover {\n background-color: #ffffff10;\n}\n\n.maximize:hover {\n background-color: #ffffff10;\n}\n\n.minimize:hover {\n background-color: #ffffff10;\n}"},{"created":"2024-01-22T17:11:13.000Z","isPrivate":0,"projectId":"102bf5","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:11:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5648,"cssLen":1106,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".social-buttons {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f2f2f2;\n box-shadow: 0px 0px 15px #00000027;\n padding: 15px 10px;\n border-radius: 5em;\n}\n\n.social-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin: 0 10px;\n background-color: #fff;\n box-shadow: 0px 0px 4px #00000027;\n transition: 0.3s;\n}\n\n.social-button:hover {\n background-color: #f2f2f2;\n box-shadow: 0px 0px 6px 3px #00000027;\n}\n\n.social-buttons svg {\n transition: 0.3s;\n height: 20px;\n}\n\n.facebook {\n background-color: #3b5998;\n}\n\n.facebook svg {\n fill: #f2f2f2;\n}\n\n.facebook:hover svg {\n fill: #3b5998;\n}\n\n.github {\n background-color: #333;\n}\n\n.github svg {\n width: 25px;\n height: 25px;\n fill: #f2f2f2;\n}\n\n.github:hover svg {\n fill: #333;\n}\n\n.linkedin {\n background-color: #0077b5;\n}\n\n.linkedin svg {\n fill: #f2f2f2;\n}\n\n.linkedin:hover svg {\n fill: #0077b5;\n}\n\n.instagram {\n background-color: #c13584;\n}\n\n.instagram svg {\n fill: #f2f2f2;\n}\n\n.instagram:hover svg {\n fill: #c13584;\n}\n"}]}},"actionData":null,"errors":null}