Spaces:
Sleeping
Sleeping
File size: 2,058 Bytes
cc23e5e add9e3d 84aa492 cc23e5e 84aa492 10e9c4c cc23e5e 10e9c4c 8ac09ad 84aa492 cc23e5e 10e9c4c 8ac09ad cc23e5e 10e9c4c 8ac09ad cc23e5e 91f92dc cc23e5e 91f92dc 8ac09ad 91f92dc 10e9c4c 8ac09ad 10e9c4c cc23e5e 10e9c4c cc23e5e 10e9c4c add9e3d cc23e5e add9e3d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <div class="menu-container">
<!-- Menu Item 1 -->
<div class="menu-card">
<img src="image1.jpg" alt="Dish Image" class="menu-card-image" />
<div class="menu-card-details">
<h3>Biryani Restaurant</h3>
<p>Chinese, Biryani, South Indian</p>
</div>
<button class="add-button">Add</button>
</div>
<!-- Menu Item 2 -->
<div class="menu-card">
<img src="image2.jpg" alt="Dish Image" class="menu-card-image" />
<div class="menu-card-details">
<h3>YFC</h3>
<p>Continental, Ice Cream, Juices</p>
</div>
<button class="add-button">Add</button>
</div>
<!-- Add more menu cards as needed -->
</div>
/* Main Container Styling */
.menu-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; /* Space between items */
padding: 20px;
background-color: #f9f9f9; /* Optional: Matches the background color */
}
/* Menu Card Styling */
.menu-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
text-align: center;
}
.menu-card-details h3 {
font-size: 16px;
margin: 10px 0;
}
.menu-card-details p {
font-size: 14px;
color: #666;
}
.menu-card-image {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 8px;
}
.add-button {
background-color: #28a745;
color: white;
border: none;
padding: 8px 15px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
/* Responsive Design */
@media (max-width: 768px) {
.menu-container {
grid-template-columns: repeat(2, 1fr); /* 2 items per row on smaller screens */
}
}
@media (max-width: 480px) {
.menu-container {
grid-template-columns: 1fr; /* 1 item per row on very small screens */
}
}
|