TourIAm/TIAMSharedUI/Pages/RestaurantDetails.razor

81 lines
2.8 KiB
Plaintext

@page "/restaurant"
@using TIAMSharedUI.Shared
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<!--Slider here-->
<div style="position: relative; width:100%; height: 100%">
<div style="position:absolute; top: 10px; left: 10px; z-index:999;">
<h3>10% DISCOUNT COUPON</h3>
</div>
<div id="owl-restaurant" class="owl-carousel owl-theme">
<div class="item d-flex align-items-center">
<img src="_content/TIAMSharedUI/images/restaurant_1.jpg" class="my-auto" alt="The Last of us">
</div>
<div class="item d-flex align-items-center">
<img src="_content/TIAMSharedUI/images/restaurant_2.jpg" class="my-auto" alt="GTA V">
</div>
<div class="item d-flex align-items-center">
<img src="_content/TIAMSharedUI/images/restaurant_3.jpg" class="my-auto" alt="Mirror Edge">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="small mb-1">Authentic</div>
<h1 class="display-5 fw-bolder">Mandragóra Restaurant</h1>
<div class="fs-5 mb-5">
<!--span class="text-decoration-line-through">$45.00</span-->
<span>$10.00</span>
</div>
<p class="lead">A nice Hungarian restaurant that offers a delightful culinary journey with traditional dishes like goulash, stuffed peppers, and chimney cake, in a cozy, welcoming atmosphere.</p>
<div class="d-flex">
<input class="form-control text-center me-3" id="inputQuantity" type="num" value="1" style="max-width: 3rem" />
<button class="btn btn-primary flex-shrink-0" type="button">
<i class="bi-cart-fill me-1"></i>
Add to cart
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Related items section-->
<FeaturedItems ItemType="1"></FeaturedItems>
<script>
$(document).ready(function () {
$("#owl-restaurant").owlCarousel({
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsMobile: false
});
});
</script>
@code {
}