{"html":"

\n \n\n

10% OFF

\n\n \n

Cheese Burguer

\n \n

\n","css":".foodCard {\n height: 220px;\n width: 250px;\n border-radius: 20px;\n background-color: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n justify-content: start;\n flex-direction: column;\n position: relative;\n outline: 2px solid rgb(48, 48, 48);\n user-select: none;\n box-shadow:\n rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,\n rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,\n rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n}\n\n.Discount {\n position: absolute;\n left: 0;\n font-size: 15px;\n padding: 5px 10px 5px 10px;\n font-weight: 600;\n color: rgb(189, 189, 189);\n background-color: rgb(46, 46, 46);\n border-radius: 15px 0px 15px 0px;\n width: auto;\n height: auto;\n font-style: italic;\n}\n\n.Like {\n border: none;\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n right: 0%;\n font-size: 15px;\n padding: 8px;\n color: rgb(210, 210, 210);\n background-color: rgb(48, 48, 48);\n border-radius: 0px 20px 0px 15px;\n width: 40px;\n height: 35px;\n cursor: pointer;\n}\n\n.Like > svg {\n transition: all 0.3s ease;\n}\n\n.Like:hover > svg {\n fill: rgb(190, 0, 0);\n}\n\n.Like:focus {\n outline: none;\n}\n\n.imageContainer {\n padding: 5px;\n height: 60%;\n width: 100%;\n padding-top: 35px;\n border-radius: 15px;\n display: flex;\n align-content: center;\n justify-content: center;\n}\n\n.imageContainer > img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n border-radius: 15px;\n}\n\n.foodTitle {\n color: rgb(32, 32, 32);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 200px;\n font-weight: 800;\n padding-top: 5px;\n}\n\n.priceAndButton {\n position: absolute;\n bottom: 0;\n width: 95%;\n display: flex;\n align-items: center;\n justify-content: space-around;\n margin-bottom: 15px;\n}\n\n.Price {\n font-weight: 600;\n padding-left: 5px;\n color: rgb(0, 0, 0);\n font-variant-numeric: tabular-nums;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.button {\n padding: 0px 15px;\n height: 25px;\n border: none;\n background-color: rgb(116, 219, 160);\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.4s ease;\n opacity: 100%;\n font-size: 15px;\n}\n\n.button:hover {\n box-shadow: rgb(116, 219, 160) 0px 0px 15px;\n}\n\n.button:active {\n transform: scale(0.95);\n}\n"}

great-fox-72

👁 实时预览

📝 源代码