{"html":"

Product title

Product description and details

\n $499.49\n

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n padding: .8em;\n background: #f5f5f5;\n position: relative;\n overflow: visible;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.card-img {\n background-color: #ffcaa6;\n height: 40%;\n width: 100%;\n border-radius: .5rem;\n transition: .3s ease;\n}\n\n.card-info {\n padding-top: 10%;\n}\n\nsvg {\n width: 20px;\n height: 20px;\n}\n\n.card-footer {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 10px;\n border-top: 1px solid #ddd;\n}\n\n/*Text*/\n.text-title {\n font-weight: 900;\n font-size: 1.2em;\n line-height: 1.5;\n}\n\n.text-body {\n font-size: .9em;\n padding-bottom: 10px;\n}\n\n/*Button*/\n.card-button {\n border: 1px solid #252525;\n display: flex;\n padding: .3em;\n cursor: pointer;\n border-radius: 50px;\n transition: .3s ease-in-out;\n}\n\n/*Hover*/\n.card-img:hover {\n transform: translateY(-25%);\n box-shadow: rgba(226, 196, 63, 0.25) 0px 13px 47px -5px, rgba(180, 71, 71, 0.3) 0px 8px 16px -8px;\n}\n\n.card-button:hover {\n border: 1px solid #ffcaa6;\n background-color: #ffcaa6;\n}\n"}

moody-goose-93

👁 实时预览

📝 源代码