Spaces:
Sleeping
Sleeping
Update templates/menu.html
Browse files- templates/menu.html +66 -0
templates/menu.html
CHANGED
|
@@ -480,7 +480,73 @@ form-check-input addon-option{
|
|
| 480 |
{% endif %}
|
| 481 |
|
| 482 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 483 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 484 |
<!-- View Cart Button -->
|
| 485 |
<div class="view-cart-container">
|
| 486 |
<a href="/cart" class="view-cart-button">
|
|
|
|
| 480 |
{% endif %}
|
| 481 |
|
| 482 |
</div>
|
| 483 |
+
<meta charset="UTF-8">
|
| 484 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 485 |
+
<title>Hover Effect for Chicken Biryani Video</title>
|
| 486 |
+
<style>
|
| 487 |
+
/* Container for the video */
|
| 488 |
+
.menu-item {
|
| 489 |
+
width: 320px;
|
| 490 |
+
height: 180px;
|
| 491 |
+
position: relative;
|
| 492 |
+
overflow: hidden;
|
| 493 |
+
border-radius: 15px; /* Rounded corners */
|
| 494 |
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
| 495 |
+
cursor: pointer;
|
| 496 |
+
}
|
| 497 |
|
| 498 |
+
/* The video element */
|
| 499 |
+
.menu-item video {
|
| 500 |
+
width: 100%;
|
| 501 |
+
height: 100%;
|
| 502 |
+
object-fit: cover;
|
| 503 |
+
transition: opacity 0.5s ease-in-out;
|
| 504 |
+
}
|
| 505 |
+
|
| 506 |
+
/* Description overlay */
|
| 507 |
+
.menu-item .description {
|
| 508 |
+
position: absolute;
|
| 509 |
+
bottom: 20px;
|
| 510 |
+
left: 20px;
|
| 511 |
+
background: rgba(0, 0, 0, 0.6);
|
| 512 |
+
color: white;
|
| 513 |
+
padding: 10px;
|
| 514 |
+
font-size: 16px;
|
| 515 |
+
font-weight: bold;
|
| 516 |
+
border-radius: 5px;
|
| 517 |
+
opacity: 0;
|
| 518 |
+
transition: opacity 0.3s ease-in-out;
|
| 519 |
+
}
|
| 520 |
+
|
| 521 |
+
/* When hovering over the menu item, the video plays and the description becomes visible */
|
| 522 |
+
.menu-item:hover video {
|
| 523 |
+
opacity: 1;
|
| 524 |
+
}
|
| 525 |
+
|
| 526 |
+
.menu-item:hover .description {
|
| 527 |
+
opacity: 1;
|
| 528 |
+
}
|
| 529 |
+
|
| 530 |
+
/* Optional: Hover effect when the user hovers over the menu */
|
| 531 |
+
.menu-item:hover {
|
| 532 |
+
transform: scale(1.05);
|
| 533 |
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
| 534 |
+
}
|
| 535 |
+
</style>
|
| 536 |
+
</head>
|
| 537 |
+
<body>
|
| 538 |
+
|
| 539 |
+
<div class="menu-item">
|
| 540 |
+
<!-- Chicken Biryani Video -->
|
| 541 |
+
<video id="biryani-video" muted preload="auto" loop>
|
| 542 |
+
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
|
| 543 |
+
Your browser does not support the video tag.
|
| 544 |
+
</video>
|
| 545 |
+
<!-- Description that will appear on hover -->
|
| 546 |
+
<div class="description">Chicken Biryani - Delicious & Flavorful</div>
|
| 547 |
+
</div>
|
| 548 |
+
|
| 549 |
+
|
| 550 |
<!-- View Cart Button -->
|
| 551 |
<div class="view-cart-container">
|
| 552 |
<a href="/cart" class="view-cart-button">
|