{"html":"

\n Project\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque blanditiis nemo fugit autem possimus, magnam consequatur sint esse.\n

\n \n Preview\n

\n \n Code\n

","css":".card {\n --font-color: #323232;\n --bg-color: #e0e0e0;\n width: 250px;\n height: 350px;\n border-radius: 20px;\n background: var(--bg-color);\n box-shadow: -9px 9px 18px #5a5a5a,\n 9px -9px 18px #ffffff;\n display: flex;\n flex-direction: column;\n transition: .4s;\n position: relative;\n}\n\n.card:hover {\n transform: scale(1.02);\n box-shadow: 0px 0px 10px 2px #5a5a5a;\n}\n\n.card__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 20px 20px 0 0;\n background-color: blueviolet;\n}\n\n.card__descr-wrapper {\n padding: 15px;\n display: grid;\n}\n\n.card__title {\n color: var(--font-color);\n text-align: center;\n margin-bottom: 15px;\n font-weight: 900;\n font-size: 16px;\n}\n\n.card__descr {\n color: var(--font-color);\n}\n\n.svg {\n width: 25px;\n height: 25px;\n transform: translateY(25%);\n fill: var(--font-color);\n}\n\n.card__links {\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n align-self: flex-end;\n}\n\n.card__links .link {\n color: var(--font-color);\n font-weight: 600;\n font-size: 15px;\n text-decoration: none;\n}\n\n.card__links .link:hover {\n text-decoration: underline;\n}\n"}

stupid-liger-18

👁 实时预览

📝 源代码