{"html":"

Project

\n \n

\n • Analytics\n • Dashboards\n

","css":".article-wrapper {\n width: 250px;\n -webkit-transition: 0.15s all ease-in-out;\n transition: 0.15s all ease-in-out;\n border-radius: 10px;\n padding: 5px;\n border: 4px solid transparent;\n cursor: pointer;\n background-color: white;\n}\n\n.article-wrapper:hover {\n -webkit-box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;\n box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;\n border-color: #0578c5;\n -webkit-transform: translate(-20px, -20px);\n -ms-transform: translate(-20px, -20px);\n transform: translate(-20px, -20px);\n}\n\n.article-wrapper:active {\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n}\n\n.types {\n gap: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n place-content: flex-start;\n}\n\n.rounded-lg {\n /* class tailwind */\n border-radius: 10px;\n}\n\n.article-wrapper:hover .project-hover {\n -webkit-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n transform: rotate(-45deg);\n background-color: #a6c2f0;\n}\n\n.project-info {\n padding-top: 20px;\n padding: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 20px;\n}\n\n.project-title {\n font-size: 2em;\n margin: 0;\n font-weight: 600;\n /* depend de la font */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: black;\n}\n\n.flex-pr {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.project-type {\n background: #b2b2fd;\n color: #1a41cd;\n font-weight: bold;\n padding: 0.3em 0.7em;\n border-radius: 15px;\n font-size: 12px;\n letter-spacing: -0.6px\n}\n\n.project-hover {\n border-radius: 50%;\n width: 50px;\n height: 50px;\n padding: 9px;\n -webkit-transition: all 0.3s ease;\n transition: all 0.3s ease;\n}\n\n.container-project {\n width: 100%;\n height: 170px;\n background: gray;\n}\n"}

friendly-pig-12

👁 实时预览

📝 源代码