{"loaderData":{"0":null,"0-2":{"total":7180,"projects":[{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"6dbf01","snapshot":null,"tags":null,"title":"card by WrongCodeU","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":911,"cssLen":1369,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Abo

10$

\n \n

lorem-impus

\n \n

lorem-ipsum

","css":".card {\n width: 12em;\n height: 15em;\n background: white;\n border-radius: 1em;\n border-color: black;\n border-style: solid;\n border-width: 0.4em;\n box-shadow: 0.3em 0.3em black;\n}\n\n.svg-icon {\n margin-top: 0.3em;\n margin-left: 0.5em;\n width: 2em;\n height: 2.5em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: grey;\n}\n\n.svg-icon circle {\n stroke: #000;\n stroke-width: 1;\n}\n\n.Name-9999 {\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n font-size: 2em;\n margin-left: 0.5em;\n}\n\n.Price-9999 {\n margin-bottom: 0.3em;\n margin-top: -0.3em;\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n font-size: 3em;\n margin-left: 0.3em;\n}\n\n.Description-9999 {\n font-size: 1.1em;\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n position: relative;\n margin-left: 4em;\n margin-top: -2.4em;\n}\n\n.YouGet-9999 {\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\n font-weight: 900;\n position: relative;\n margin-left: 4em;\n margin-top: -2.4em;\n font-size: 1.1em;\n}\n\n.svg-icon2 {\n margin-top: 1em;\n margin-left: 0.5em;\n width: 2em;\n height: 2em;\n}\n\n.svg-icon2 path,\n.svg-icon2 polygon,\n.svg-icon2 rect {\n fill: grey;\n}\n\n.svg-icon2 circle {\n stroke: #000;\n stroke-width: 1;\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"c9b3b9","snapshot":null,"tags":null,"title":"card by Juanes200122","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":847,"cssLen":1597,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Pyhton\n\n

\n \n 80%\n \n

\n\n

\n Php\n\n

\n \n 30%\n \n

\n Java\n\n

\n \n 40%\n \n

\n C++\n\n

\n \n 60%\n \n

\n","css":".container {\n position: relative;\n max-width: 500px;\n width: 100%;\n background: #ececec;\n margin: 0 15px;\n padding: 10px 20px;\n border-radius: 7px;\n user-select: none;\n}\n\n.container .skill-box {\n width: 100%;\n margin: 25px 0;\n}\n\n.skill-box .title {\n display: block;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.skill-box .skill-bar {\n height: 8px;\n width: 100%;\n border-radius: 6px;\n margin-top: 6px;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.skill-bar .skill-per {\n position: relative;\n display: block;\n height: 100%;\n width: 90%;\n border-radius: 6px;\n background: #000000;\n animation: progress 0.4s ease-in-out forwards;\n opacity: 0;\n}\n\n.skill-per.html {\n /*progreso de las diferentes lenguajes*/\n width: 80%;\n animation-delay: 0.1s;\n}\n\n.skill-per.css {\n /*progreso de las diferentes lenguajes*/\n width: 30%;\n animation-delay: 0.1s;\n}\n\n.skill-per.javascript {\n /*progreso de las diferentes lenguajes*/\n width: 40%;\n animation-delay: 0.2s;\n}\n\n.skill-per.nodejs {\n /*progreso de las diferentes lenguajes*/\n width: 70%;\n animation-delay: 0.3s;\n}\n\n@keyframes progress {\n 0% {\n width: 0;\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.skill-per .tooltip {\n position: absolute;\n right: -14px;\n top: -28px;\n font-size: 9px;\n font-weight: 500;\n color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n background: #000000;\n\n z-index: 1;\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n left: 50%;\n bottom: -2px;\n height: 10px;\n width: 10px;\n z-index: -1;\n background: #000000;\n transform: translateX(-50%) rotate(45deg);\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"33bd46","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":773,"cssLen":1192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Push notifications

\n \n

Allow push notifications so you will get latest updates

\n \n \n

","css":".notificationCard {\n width: 220px;\n height: 280px;\n background: rgb(245, 245, 245);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px 35px;\n gap: 10px;\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.123);\n border-radius: 20px;\n}\n\n.bellIcon {\n width: 50px;\n margin: 20px 0px;\n}\n\n.bellIcon path {\n fill: rgb(168, 131, 255);\n}\n\n.notificationHeading {\n color: black;\n font-weight: 600;\n font-size: 0.8em;\n}\n\n.notificationPara {\n color: rgb(133, 133, 133);\n font-size: 0.6em;\n font-weight: 600;\n text-align: center;\n}\n\n.buttonContainer {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.AllowBtn {\n width: 120px;\n height: 25px;\n background-color: rgb(168, 131, 255);\n color: white;\n border: none;\n border-radius: 20px;\n font-size: 0.7em;\n font-weight: 600;\n cursor: pointer;\n}\n\n.NotnowBtn {\n width: 120px;\n height: 25px;\n color: rgb(168, 131, 255);\n border: none;\n background-color: transparent;\n font-weight: 600;\n font-size: 0.7em;\n cursor: pointer;\n border-radius: 20px;\n}\n\n.NotnowBtn:hover {\n background-color: rgb(239, 227, 255);\n}\n\n.AllowBtn:hover {\n background-color: rgb(153, 110, 255);\n}\n"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"ba8a04","snapshot":null,"tags":null,"title":"card by saidbl1","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":20196,"cssLen":447,"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 ","css":".frame {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 230px;\n height: 300px;\n background-color: #f2b67b;\n border-radius: 5px;\n}\n\n.frame svg {\n border: 2px solid black;\n max-width: 100%;\n max-height: 100%;\n border-radius: 3px;\n scale: 0.87;\n transition: transform 0.3s;\n transition-timing-function: cubic-bezier(0.4, 1.55, 0.74, 0.55);\n}\n\n.frame:hover svg {\n transform: scale(1.11);\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"713384","snapshot":null,"tags":null,"title":"card by Shoh2008","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":711,"cssLen":1779,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

Lorem ipsum

Soluta dolor praesentium at quod autem omnis, amet earum nesciunt porro.

","css":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 350px;\n background: #444;\n border-radius: 10px;\n}\n\n.card {\n position: relative;\n background: #333;\n width: 250px;\n height: 350px;\n border-radius: 10px;\n padding: 2rem;\n color: #aaa;\n box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),\n 0 0 1rem rgba(0,0,0,0.2);\n overflow: hidden;\n}\n\n.card__image-container {\n margin: -2rem -2rem 1rem -2rem;\n}\n\n.card__line {\n opacity: 0;\n animation: LineFadeIn .8s .8s forwards ease-in;\n}\n\n.card__image {\n opacity: 0;\n animation: ImageFadeIn .8s 1.4s forwards;\n}\n\n.card__title {\n color: white;\n margin-top: 35px;\n margin-bottom: 10px;\n font-weight: 800;\n letter-spacing: 0.01em;\n}\n\n.card__content {\n margin-top: -1rem;\n opacity: 0;\n animation: ContentFadeIn .8s 1.6s forwards;\n}\n\n.card__svg {\n position: absolute;\n left: 0;\n top: 115px;\n}\n\n@keyframes LineFadeIn {\n 0% {\n opacity: 0;\n d: path(\"M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 \");\n stroke: #fff;\n }\n\n 50% {\n opacity: 1;\n d: path(\"M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300\");\n stroke: #888BFF;\n }\n\n 100% {\n opacity: 1;\n d: path(\"M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400\");\n stroke: #545581;\n }\n}\n\n@keyframes ContentFadeIn {\n 0% {\n transform: translateY(-1rem);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes ImageFadeIn {\n 0% {\n transform: translate(-.5rem, -.5rem) scale(1.05);\n opacity: 0;\n filter: blur(2px);\n }\n\n 50% {\n opacity: 1;\n filter: blur(2px);\n }\n\n 100% {\n transform: translateY(0) scale(1.0);\n opacity: 1;\n filter: blur(0);\n }\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"f4d9c7","snapshot":null,"tags":null,"title":"card by EddyBel","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1479,"cssLen":7242,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Preview

\n \n

10:19

The Backwards Brain Bicycle - Smarter Every Day 133\" by Destin Sandlin

SmarterEveryDay

519.7K Views

3 months ago

","css":"/* In this section you start by assigning a shape to the letter and an assigned size. */\n.card {\n --rounded: 20px;\n --size: 270px;\n width: var(--size);\n height: calc(var(--size) - 10px);\n border-radius: var(--rounded);\n background: #fff;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n}\n\n/* With the before property assigns the gradient that will be used as background for the chart. */\n.card::before {\n --size: 100%;\n --blur: 20px;\n content: \"\";\n position: absolute;\n width: var(--size);\n height: var(--size);\n filter: blur(var(--blur));\n background-color: #faff99;\n background-image: radial-gradient(at 33% 82%, hsla(254,71%,69%,1) 0px, transparent 50%),\n radial-gradient(at 28% 4%, hsla(289,96%,63%,1) 0px, transparent 50%),\n radial-gradient(at 69% 49%, hsla(309,91%,71%,1) 0px, transparent 50%),\n radial-gradient(at 94% 14%, hsla(232,66%,62%,1) 0px, transparent 50%),\n radial-gradient(at 19% 93%, hsla(51,98%,74%,1) 0px, transparent 50%),\n radial-gradient(at 15% 80%, hsla(194,87%,63%,1) 0px, transparent 50%),\n radial-gradient(at 56% 52%, hsla(109,71%,61%,1) 0px, transparent 50%);\n}\n\n/* Cover the chart with a light white tone, this helps the gradient colors to be less aggressive. */\n.card::after {\n --size: 100%;\n content: \"\";\n position: absolute;\n width: var(--size);\n height: var(--size);\n background: rgba(255, 255, 255, 0.5);\n}\n\n/* \nIn this section you define where the video cover will be displayed.\nModify the background-image with the address of the cover to use. */\n.card__view {\n position: absolute;\n height: 55%;\n left: 0;\n top: 0;\n right: 0;\n margin: auto;\n z-index: 1;\n background-image: linear-gradient(to right bottom, #fff, #e2e2e2);\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n/* When hovering over the element you can see the video preview. */\n/* Place in the HTML an \"iframe\" tag with the address of the youtube video to show as preview. \n The iframe tag must be a child of the div with the class \"card__view\".\n Also place a class with name \"preview__video\". */\n.card:hover .preview__video {\n opacity: 100;\n}\n\n.preview__video {\n transition: opacity 300ms;\n opacity: 0;\n}\n\n\n/* In this section you define the size and position of the section that will contain the video content. */\n.card__content {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 40%;\n left: 0;\n right: 0;\n bottom: 0;\n padding-left: 9px;\n padding-right: 9px;\n color: #000;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.channel__video__name {\n font-size: 0.8em;\n margin-bottom: 10px;\n max-height: 50%;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: bold;\n color: #000;\n}\n\n.channel__data {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 10px;\n margin-bottom: 8px;\n}\n\n/* In this section you assign the image of the channel that owns the video, modify the parameter \"background-image\" by the address of the channel cover. */\n.channel__img {\n --size-channel: 35px;\n --rounded: 50%;\n --duration: 300ms;\n min-width: var(--size-channel);\n min-height: var(--size-channel);\n border-radius: var(--rounded);\n transition: transform var(--duration);\n background-repeat: no-repeat;\n background-size: cover;\n background-color: #99cfff;\n background-image: radial-gradient(at 6% 14%, hsla(234,90%,72%,1) 0px, transparent 50%),\n radial-gradient(at 9% 73%, hsla(298,79%,64%,1) 0px, transparent 50%),\n radial-gradient(at 50% 38%, hsla(196,72%,75%,1) 0px, transparent 50%),\n radial-gradient(at 61% 82%, hsla(288,92%,79%,1) 0px, transparent 50%),\n radial-gradient(at 91% 67%, hsla(170,86%,66%,1) 0px, transparent 50%),\n radial-gradient(at 83% 29%, hsla(289,73%,63%,1) 0px, transparent 50%),\n radial-gradient(at 93% 34%, hsla(191,88%,75%,1) 0px, transparent 50%);\n}\n\n.channel__img:hover {\n transform: scale(1.08);\n}\n\n.channel__data__text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n width: 100%;\n}\n\n.channel__subdata {\n display: flex;\n gap: 10px;\n}\n\n.channel__name {\n font-size: 0.8em;\n transition: color 400ms;\n}\n\n.channel__views, .channel__date {\n font-size: 0.6em;\n}\n\n.card__view__data {\n position: absolute;\n bottom: 0;\n width: 100%;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding: 8px;\n box-sizing: border-box;\n pointer-events: none;\n}\n\n.card__lenght, .card__play__icon, .card__view__preview {\n background: rgba(0, 0, 0, 0.5);\n padding: 5px;\n border-radius: 6px;\n font-size: 0.6em;\n font-weight: bold;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.card__play__icon {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 30px;\n}\n\n.card__view__preview {\n opacity: 0;\n transform: translateY(-10px);\n transition: opacity 900ms, transform 900ms;\n}\n\n.card:hover .card__view__preview {\n opacity: 100;\n transform: translateY(0px);\n}\n\n/* List of other colors you can use */\n.card:nth-child(2n)::before {\n background-color: #ffd399;\n background-image: radial-gradient(at 15% 65%, hsla(249,84%,60%,1) 0px, transparent 50%),\n radial-gradient(at 38% 24%, hsla(197,80%,66%,1) 0px, transparent 50%),\n radial-gradient(at 65% 93%, hsla(228,83%,60%,1) 0px, transparent 50%),\n radial-gradient(at 16% 58%, hsla(314,83%,72%,1) 0px, transparent 50%),\n radial-gradient(at 77% 57%, hsla(298,90%,78%,1) 0px, transparent 50%),\n radial-gradient(at 76% 95%, hsla(178,64%,76%,1) 0px, transparent 50%),\n radial-gradient(at 15% 61%, hsla(248,75%,64%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(3n)::before {\n background-color: #99b3ff;\n background-image: radial-gradient(at 93% 72%, hsla(293,71%,70%,1) 0px, transparent 50%),\n radial-gradient(at 28% 37%, hsla(252,81%,71%,1) 0px, transparent 50%),\n radial-gradient(at 25% 59%, hsla(158,67%,62%,1) 0px, transparent 50%),\n radial-gradient(at 48% 16%, hsla(197,69%,63%,1) 0px, transparent 50%),\n radial-gradient(at 70% 56%, hsla(171,69%,70%,1) 0px, transparent 50%),\n radial-gradient(at 7% 33%, hsla(65,65%,79%,1) 0px, transparent 50%),\n radial-gradient(at 89% 22%, hsla(286,64%,72%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(4n)::before {\n background-color: #e2ff99;\n background-image: radial-gradient(at 22% 80%, hsla(265,77%,67%,1) 0px, transparent 50%),\n radial-gradient(at 91% 77%, hsla(292,60%,78%,1) 0px, transparent 50%),\n radial-gradient(at 66% 7%, hsla(46,95%,76%,1) 0px, transparent 50%),\n radial-gradient(at 16% 32%, hsla(275,90%,75%,1) 0px, transparent 50%),\n radial-gradient(at 26% 23%, hsla(283,60%,69%,1) 0px, transparent 50%),\n radial-gradient(at 2% 64%, hsla(208,62%,62%,1) 0px, transparent 50%),\n radial-gradient(at 62% 77%, hsla(112,88%,75%,1) 0px, transparent 50%);\n}\n\n.card:nth-child(5n)::before {\n background-color: #99d1ff;\n background-image: radial-gradient(at 21% 94%, hsla(270,95%,76%,1) 0px, transparent 50%),\n radial-gradient(at 56% 5%, hsla(252,65%,79%,1) 0px, transparent 50%),\n radial-gradient(at 67% 94%, hsla(194,81%,67%,1) 0px, transparent 50%),\n radial-gradient(at 15% 72%, hsla(304,97%,77%,1) 0px, transparent 50%),\n radial-gradient(at 63% 56%, hsla(38,98%,63%,1) 0px, transparent 50%),\n radial-gradient(at 41% 67%, hsla(321,61%,77%,1) 0px, transparent 50%),\n radial-gradient(at 68% 68%, hsla(263,67%,69%,1) 0px, transparent 50%);\n}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"0b511b","snapshot":null,"tags":null,"title":"card by Darlley","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25504,"cssLen":1969,"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

\n\n","css":".absolute{position:absolute}.relative{position:relative}.-bottom-4{bottom:-1rem}.-left-0{left:-0px}.-left-4{left:-1rem}.-right-0{right:-0px}.-right-4{right:-1rem}.-top-\\[4px\\]{top:-4px}.bottom-8{bottom:2rem}.left-\\[45px\\]{left:45px}.right-\\[40\\%\\]{right:40%}.right-\\[45px\\]{right:45px}.top-20{top:5rem}.z-0{z-index:0}.z-\\[2\\]{z-index:2}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-20{height:5rem}.h-\\[200px\\]{height:200px}.h-\\[40px\\]{height:40px}.h-full{height:100%}.w-20{width:5rem}.w-\\[200px\\]{width:200px}.w-\\[40px\\]{width:40px}.w-full{width:100%}.border-spacing-4{--tw-border-spacing-x:1rem;--tw-border-spacing-y:1rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-gray-400\\/50{border-color:rgb(156 163 175 / 0.5)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-cover{background-size:cover}.object-cover{object-fit:cover}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-\\[2px\\]{padding:2px}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.hover\\:scale-95:hover{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-gray-400\\/50:hover{border-color:rgb(156 163 175 / 0.5)}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}"},{"created":"2024-01-22T17:11:27.000Z","isPrivate":0,"projectId":"b266ab","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:11:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":722,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

YOUR
CONTENT
HERE

\n","css":".card {\n --bg: #f1f1f1;\n --contrast: #f9f9f9;\n --grey: #d9d9d9;\n position: relative;\n padding: 12px;\n background-color: var(--bg);\n border-radius: 20px;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -10px;\n}\n\n.card-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: repeating-linear-gradient(45deg, var(--bg), var(--grey) 20px);\n filter: opacity(15%);\n}\n\n.card-inner {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: 180px;\n height: 240px;\n background-color: var(--contrast);\n border-radius: 25px;\n /* Content style */\n font-size: 26px;\n font-weight: 700;\n color: #555;\n text-align: center;\n font-family: Arial, sans-serif;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"2edbed","snapshot":null,"tags":null,"title":"card by Jarol20cb","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":795,"cssLen":826,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n // Código de ejemplo\n function example()\n {\n let message = \"Hello, World!\";\n console.log(message);\n }\n

\n","css":".card {\n width: 200px;\n height: 200px;\n background-color: #f9f9f9;\n border-radius: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n position: relative;\n}\n\n.code-container {\n background-color: #222;\n border-radius: 8px;\n padding: 16px;\n}\n\n.line {\n display: block;\n color: #fff;\n font-size: 14px;\n line-height: 1.5;\n margin: 4px 0;\n position: relative;\n}\n\n.code-comment {\n color: #5c6370;\n}\n\n.code-keyword {\n color: #c678dd;\n}\n\n.code-function {\n color: #61afef;\n}\n\n.code-variable {\n color: #dcdcaa;\n}\n\n.code-string {\n color: #98c379;\n}\n\n.indent {\n padding-left: 20px;\n}\n\n/* Animación */\n@keyframes float {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n.float-animation {\n animation: float 2s ease-in-out infinite;\n}\n"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"d6052d","snapshot":null,"tags":null,"title":"card by eduardo-amaro-maciel","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":946,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Hello\n

\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n

\n Hover\n

","css":".container {\n margin: 0 auto;\n}\n\n.card {\n position: relative;\n width: 200px;\n height: 300px;\n margin: 0 auto;\n background: #000;\n border-radius: 15px;\n box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);\n}\n\n.face {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.face.back {\n box-sizing: border-box;\n padding: 20px;\n}\n\n.face.back b {\n margin: 0;\n padding: 0;\n}\n\n.face.back .desc {\n background-color: #eee;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.face.front {\n transition: 0.5s;\n}\n\n.face.front b {\n margin: 0;\n padding: 0;\n font-size: 5.1em;\n color: #fff;\n transition: 0.5s;\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n z-index: 10;\n}\n\n.card:hover .face.front {\n height: 60px;\n}\n\n.card:hover .face.front b {\n font-size: 2em;\n}\n\n.face.front {\n background-color: #0cbaba;\n border-radius: 15px;\n}"},{"created":"2024-01-22T17:11:25.000Z","isPrivate":0,"projectId":"6721c3","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":330,"cssLen":548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n In this article\n

Try it

Syntax

Formal definition

Formal syntax

Examples