{"html":"

\n Honey\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit

\n \n

","css":".card {\n width: 300px;\n height: 300px;\n background: #003566;\n color: white;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n box-sizing: border-box;\n border: 2px solid #001d3d;\n}\n\n.card::before {\n content: \"10%\";\n position: absolute;\n width: 100px;\n height: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n top: -20px;\n left: -20px;\n background-color: red;\n color: white;\n font-weight: 900;\n font-size: 2em;\n clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);\n transform: rotate(40deg);\n}\n\n.card__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n text-align: center;\n}\n\n.card__content span {\n font-size: 1.5em;\n font-weight: 900;\n}\n\n.cart {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 5px;\n padding: 10px 0px;\n border: none;\n background: #ffd60a;\n color: #003566;\n font-weight: 800;\n transition: all .5s ease;\n cursor: pointer;\n}\n\n.svg-icon {\n fill: #ffd60a;\n transition: all .7s ease;\n}\n\n.cart .svg-icon {\n fill: blue;\n width: 15px;\n}\n\n.cart:hover {\n background: white;\n color: black;\n}\n\n.card:hover .card__content svg {\n transform: scale(1.5) rotate(-25deg);\n}\n"}

modern-dragon-29

👁 实时预览

📝 源代码