پیشنمایش زنده
کد HTML
<div class="foodCard">
<button class="Like">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="rgb(190,190,190)"
width="25"
height="25"
>
<path
d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"
></path>
</svg>
</button>
<div class="Discount">10% OFF</div>
<picture class="imageContainer">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="Layer_1_1_"
style="enable-background:new 0 0 64 64;"
version="1.1"
viewBox="0 0 64 64"
xml:space="preserve"
>
<g>
<g>
<path
d="M55,36c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4H9c-2.209,0-4-1.791-4-4v0c0-2.209,1.791-4,4-4 H55z"
style="fill:#FC6E51;"
></path>
<path
d="M9,38h46c1.049,0,2.036-0.272,2.895-0.748C57.166,36.484,56.142,36,55,36H9 c-1.142,0-2.166,0.484-2.895,1.252C6.964,37.728,7.951,38,9,38z"
style="fill:#E9573F;"
></path>
<path
d="M9,28c-2.209,0-4,1.791-4,4v0c0,2.209,1.791,4,4,4h4h12h30c2.209,0,4-1.791,4-4v0 c0-2.209-1.791-4-4-4H9z"
style="fill:#CF9E76;"
></path>
<path
d="M9.105,30h46c1.049,0,2.036-0.272,2.895-0.748C57.271,28.484,56.247,28,55.105,28h-46 c-1.142,0-2.166,0.484-2.895,1.252C7.069,29.728,8.056,30,9.105,30z"
style="fill:#B27946;"
></path>
<path
d="M7.547,51.728C6.056,51.146,5,49.696,5,48v0c0-2.209,1.791-4,4-4h46c2.209,0,4,1.791,4,4v0 c0,1.696-1.056,3.146-2.546,3.728L55,54H9L7.547,51.728z"
style="fill:#FFEAA7;"
></path>
<path
d="M56.452,20.272C57.943,20.853,59,22.303,59,24v0c0,2.209-1.791,4-4,4H27c-1.105,0-2,0.895-2,2l0,8 c0,1.105-0.895,2-2,2h0c-1.105,0-2-0.895-2-2v-6c0-1.105-0.895-2-2-2h0c-1.105,0-2,0.895-2,2v4c0,1.105-0.895,2-2,2h0 c-1.105,0-2-0.895-2-2l0-6c0-1.105-0.895-2-2-2H9c-2.209,0-4-1.791-4-4v0c0-1.657,1.007-3.078,2.443-3.686L8,18h47L56.452,20.272z"
style="fill:#FFEAA7;"
></path>
<path
d="M5,54h54v0c0,4.418-3.582,8-8,8H13C8.582,62,5,58.418,5,54L5,54z"
style="fill:#DFB28B;"
></path>
<path
d="M59,18H5v0C5,9.163,12.163,2,21,2h22C51.837,2,59,9.163,59,18L59,18z"
style="fill:#DFB28B;"
></path>
<path
d="M58.077,21.46c-0.431-0.521-0.984-0.939-1.625-1.189L55,18H8l-0.557,2.314 c-0.597,0.253-1.113,0.652-1.521,1.145C7.129,23.57,9.399,25,12,25c1.957,0,3.729-0.807,5-2.105C18.271,24.193,20.043,25,22,25 s3.729-0.807,5-2.105C28.271,24.193,30.043,25,32,25s3.729-0.807,5-2.105C38.271,24.193,40.043,25,42,25s3.729-0.807,5-2.105 C48.271,24.193,50.043,25,52,25C54.6,25,56.87,23.571,58.077,21.46z"
style="fill:#FCD770;"
></path>
<polygon
points="35,18 49,28 50,28 54,18"
style="fill:#FFC729;"
></polygon>
<path
d="M7,18c0,2.761,2.239,5,5,5s5-2.239,5-5c0,2.761,2.239,5,5,5s5-2.239,5-5c0,2.761,2.239,5,5,5 s5-2.239,5-5c0,2.761,2.239,5,5,5s5-2.239,5-5c0,2.761,2.239,5,5,5s5-2.239,5-5H7z"
style="fill:#A0D468;"
></path>
<path
d="M57,54c0-2.761-2.239-5-5-5c-2.761,0-5,2.239-5,5c0-2.761-2.239-5-5-5c-2.761,0-5,2.239-5,5 c0-2.761-2.239-5-5-5c-2.761,0-5,2.239-5,5c0-2.761-2.239-5-5-5s-5,2.239-5,5c0-2.761-2.239-5-5-5s-5,2.239-5,5H57z"
style="fill:#A0D468;"
></path>
<path
d="M8.895,46h46c1.049,0,2.036-0.272,2.895-0.748C57.061,44.484,56.037,44,54.895,44h-46 C7.753,44,6.729,44.484,6,45.252C6.859,45.728,7.845,46,8.895,46z"
style="fill:#FCD770;"
></path>
<path
d="M17.422,52C17.154,52.613,17,53.288,17,54h10c0-0.712-0.154-1.387-0.422-2H17.422z"
style="fill:#8CC152;"
></path>
<path
d="M27.422,52C27.154,52.613,27,53.288,27,54h10c0-0.712-0.154-1.387-0.422-2H27.422z"
style="fill:#8CC152;"
></path>
<path
d="M7.422,52C7.154,52.613,7,53.288,7,54h10c0-0.712-0.154-1.387-0.422-2H7.422z"
style="fill:#8CC152;"
></path>
<path
d="M37.422,52C37.154,52.613,37,53.288,37,54h10c0-0.712-0.154-1.387-0.422-2H37.422z"
style="fill:#8CC152;"
></path>
<path
d="M47.422,52C47.154,52.613,47,53.288,47,54h10c0-0.712-0.154-1.387-0.422-2H47.422z"
style="fill:#8CC152;"
></path>
<path
d="M36.578,20C36.846,19.387,37,18.712,37,18H27c0,0.712,0.154,1.387,0.422,2H36.578z"
style="fill:#8CC152;"
></path>
<path
d="M56.578,20C56.846,19.387,57,18.712,57,18H47c0,0.712,0.154,1.387,0.422,2H56.578z"
style="fill:#8CC152;"
></path>
<path
d="M46.578,20C46.846,19.387,47,18.712,47,18H37c0,0.712,0.154,1.387,0.422,2H46.578z"
style="fill:#8CC152;"
></path>
<path
d="M16.578,20C16.846,19.387,17,18.712,17,18H7c0,0.712,0.154,1.387,0.422,2H16.578z"
style="fill:#8CC152;"
></path>
<path
d="M26.578,20C26.846,19.387,27,18.712,27,18H17c0,0.712,0.154,1.387,0.422,2H26.578z"
style="fill:#8CC152;"
></path>
</g>
<g>
<path
d="M60,19v-1c0-9.374-7.626-17-17-17H21C11.626,1,4,8.626,4,18v1h2.09c0.047,0.277,0.107,0.549,0.191,0.812 C4.876,20.723,4,22.284,4,24c0,1.641,0.806,3.088,2.031,4C4.806,28.912,4,30.359,4,32s0.806,3.088,2.031,4 C4.806,36.912,4,38.359,4,40s0.806,3.088,2.031,4C4.806,44.912,4,46.359,4,48c0,1.729,0.875,3.277,2.282,4.185 C6.198,52.449,6.137,52.722,6.09,53H4v1c0,4.962,4.038,9,9,9h38c4.962,0,9-4.038,9-9v-1h-2.09 c-0.047-0.278-0.108-0.551-0.192-0.815C59.125,51.277,60,49.729,60,48c0-1.641-0.806-3.088-2.031-4C59.194,43.088,60,41.641,60,40 s-0.806-3.088-2.031-4C59.194,35.088,60,33.641,60,32s-0.806-3.088-2.031-4C59.194,27.088,60,25.641,60,24 c0-1.729-0.875-3.277-2.282-4.185c0.084-0.264,0.145-0.537,0.192-0.815H60z M21,3h22c7.935,0,14.45,6.194,14.967,14H6.033 C6.55,9.194,13.065,3,21,3z M50.592,23.827L49.323,27l-4.919-3.513c1.059-0.466,1.962-1.22,2.596-2.174 C47.825,22.555,49.102,23.467,50.592,23.827z M42,22c-1.858,0-3.411-1.28-3.858-3h7.716C45.411,20.72,43.858,22,42,22z M35.858,19 c-0.447,1.72-2,3-3.858,3s-3.411-1.28-3.858-3H35.858z M25.858,19c-0.447,1.72-2,3-3.858,3s-3.411-1.28-3.858-3H25.858z M15.858,19c-0.447,1.72-2,3-3.858,3s-3.411-1.28-3.858-3H15.858z M6,24c0-0.964,0.462-1.843,1.211-2.4 C8.307,23.054,10.043,24,12,24c2.084,0,3.924-1.068,5-2.687C18.076,22.932,19.916,24,22,24s3.924-1.068,5-2.687 C28.076,22.932,29.916,24,32,24s3.924-1.068,5-2.687c1.014,1.526,2.711,2.55,4.648,2.664L45.88,27H27c-1.654,0-3,1.346-3,3v8 c0,0.551-0.449,1-1,1s-1-0.449-1-1v-6c0-1.654-1.346-3-3-3s-3,1.346-3,3v4c0,0.551-0.449,1-1,1s-1-0.449-1-1v-6 c0-1.654-1.346-3-3-3H9C7.346,27,6,25.654,6,24z M49.33,43c-1.466,0-2.284-1.313-3.456-3.477c-0.464-0.856-0.959-1.752-1.56-2.523 H54.34c-0.592,0.76-1.079,1.647-1.554,2.523C51.613,41.687,50.796,43,49.33,43z M44.115,40.477 c0.464,0.856,0.959,1.752,1.56,2.523H35.647c0.6-0.772,1.095-1.667,1.559-2.523C38.377,38.313,39.194,37,40.659,37 C42.125,37,42.943,38.313,44.115,40.477z M35.447,39.524C34.275,41.687,33.458,43,31.994,43c-1.465,0-2.283-1.313-3.455-3.477 c-0.474-0.875-0.961-1.763-1.553-2.523h10.018C36.405,37.772,35.911,38.667,35.447,39.524z M11.21,39.524 C10.736,38.648,10.249,37.76,9.658,37h2.526c0.414,1.161,1.514,2,2.816,2s2.402-0.839,2.816-2h1.846 c-0.591,0.761-1.075,1.653-1.547,2.524C16.944,41.687,16.127,43,14.662,43C13.198,43,12.381,41.687,11.21,39.524z M20,35h-2v-3 c0-0.551,0.449-1,1-1s1,0.449,1,1V35z M19.874,40.476c0.182-0.336,0.362-0.661,0.543-0.977C20.937,40.392,21.894,41,23,41 c1.351,0,2.482-0.903,2.857-2.132c0.322,0.503,0.626,1.058,0.924,1.608c0.464,0.857,0.959,1.752,1.559,2.524H18.315 C18.915,42.228,19.41,41.333,19.874,40.476z M6,32c0-1.654,1.346-3,3-3h2c0.551,0,1,0.449,1,1v5H9C7.346,35,6,33.654,6,32z M6,40 c0-1.052,0.547-1.976,1.368-2.511c0.8,0.623,1.426,1.775,2.083,2.987C9.915,41.333,10.41,42.228,11.01,43H9 C7.346,43,6,41.654,6,40z M51,61H13c-3.521,0-6.442-2.612-6.929-6h51.857C57.442,58.388,54.521,61,51,61z M8.142,53 c0.447-1.72,2-3,3.858-3s3.411,1.28,3.858,3H8.142z M18.142,53c0.447-1.72,2-3,3.858-3s3.411,1.28,3.858,3H18.142z M28.142,53 c0.447-1.72,2-3,3.858-3s3.411,1.28,3.858,3H28.142z M38.142,53c0.447-1.72,2-3,3.858-3s3.411,1.28,3.858,3H38.142z M48.142,53 c0.447-1.72,2-3,3.858-3s3.411,1.28,3.858,3H48.142z M58,48c0,0.971-0.459,1.847-1.209,2.403C55.695,48.947,53.958,48,52,48 c-2.084,0-3.924,1.068-5,2.687C45.924,49.068,44.084,48,42,48s-3.924,1.068-5,2.687C35.924,49.068,34.084,48,32,48 s-3.924,1.068-5,2.687C25.924,49.068,24.084,48,22,48s-3.924,1.068-5,2.687C15.924,49.068,14.084,48,12,48 c-1.958,0-3.695,0.947-4.791,2.403C6.459,49.847,6,48.971,6,48c0-1.654,1.346-3,3-3h46C56.654,45,58,46.346,58,48z M55,43h-2.016 c0.6-0.772,1.095-1.667,1.56-2.523c0.657-1.213,1.284-2.366,2.085-2.989C57.452,38.023,58,38.947,58,40C58,41.654,56.654,43,55,43 z M58,32c0,1.654-1.346,3-3,3H26v-5c0-0.551,0.449-1,1-1h21.68h1.998H55C56.654,29,58,30.346,58,32z M58,24c0,1.654-1.346,3-3,3 h-3.523l1.217-3.044c1.672-0.194,3.132-1.078,4.096-2.359C57.541,22.153,58,23.029,58,24z M52,22c-1.858,0-3.411-1.28-3.858-3 h7.716C55.411,20.72,53.858,22,52,22z"
></path>
<rect height="2" width="2" x="31" y="13"></rect>
<rect height="2" width="2" x="23" y="9"></rect>
<rect height="2" width="2" x="34" y="5"></rect>
<rect height="2" width="2" x="43" y="11"></rect>
<rect height="2" width="2" x="8" y="13"></rect>
<rect height="2" width="2" x="12" y="8"></rect>
<rect height="2" width="2" x="17" y="11"></rect>
<rect height="2" width="2" x="19" y="5"></rect>
<rect height="2" width="2" x="29" y="7"></rect>
<rect height="2" width="2" x="38" y="13"></rect>
<rect height="2" width="2" x="44" y="5"></rect>
<rect height="2" width="2" x="54" y="13"></rect>
<rect height="2" width="2" x="51" y="9"></rect>
<rect height="2" width="2" x="39" y="8"></rect>
</g>
</g>
</svg>
</picture>
<p class="foodTitle">Cheese Burguer</p>
<footer class="priceAndButton">
<p class="Price">$7.99</p>
<p style="{{">|</p>
<button class="button">Order</button>
</footer>
</div>
کد CSS
.foodCard {
height: 220px;
width: 250px;
border-radius: 20px;
background-color: rgb(255, 255, 255);
display: flex;
align-items: center;
justify-content: start;
flex-direction: column;
position: relative;
outline: 2px solid rgb(48, 48, 48);
user-select: none;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.Discount {
position: absolute;
left: 0;
font-size: 15px;
padding: 5px 10px 5px 10px;
font-weight: 600;
color: rgb(189, 189, 189);
background-color: rgb(46, 46, 46);
border-radius: 15px 0px 15px 0px;
width: auto;
height: auto;
font-style: italic;
}
.Like {
border: none;
align-items: center;
justify-content: center;
display: flex;
position: absolute;
right: 0%;
font-size: 15px;
padding: 8px;
color: rgb(210, 210, 210);
background-color: rgb(48, 48, 48);
border-radius: 0px 20px 0px 15px;
width: 40px;
height: 35px;
cursor: pointer;
}
.Like > svg {
transition: all 0.3s ease;
}
.Like:hover > svg {
fill: rgb(190, 0, 0);
}
.Like:focus {
outline: none;
}
.imageContainer {
padding: 5px;
height: 60%;
width: 100%;
padding-top: 35px;
border-radius: 15px;
display: flex;
align-content: center;
justify-content: center;
}
.imageContainer > img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 15px;
}
.foodTitle {
color: rgb(32, 32, 32);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
font-weight: 800;
padding-top: 5px;
}
.priceAndButton {
position: absolute;
bottom: 0;
width: 95%;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 15px;
}
.Price {
font-weight: 600;
padding-left: 5px;
color: rgb(0, 0, 0);
font-variant-numeric: tabular-nums;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.button {
padding: 0px 15px;
height: 25px;
border: none;
background-color: rgb(116, 219, 160);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 600;
transition: all 0.4s ease;
opacity: 100%;
font-size: 15px;
}
.button:hover {
box-shadow: rgb(116, 219, 160) 0px 0px 15px;
}
.button:active {
transform: scale(0.95);
}