web_php/hotel_booking/dining.php

593 lines
No EOL
24 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dining & Bar | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.dining-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(images/dining.jpg);
width: 100%;
display: flex;
flex-direction: column;
}
.frame{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 50px;
}
.frame1{
width: 60px;
height: 80px;
border: 1px solid black;
}
.frame2{
width: 40px;
height: 60px;
border: 1px solid black;
margin-top: 10px;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.frame-title{
text-transform: uppercase;
letter-spacing: 5px;
font-size: 12px;
}
.frame-subtilte{
width: 50%;
font-size: 50px;
font-weight: 500;
margin-bottom: 100px;
text-align: center;
}
.dining-container{
display: none;
}
.dining-img{
width:90%;
height: 650px;
object-fit: cover;"
}
.dining-video{
width: 100%;
height: 100%;
margin-top: 50px;
}
.dining-title{
margin-top: 50px;
font-size: 16px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
color: #74512D;
text-shadow: 2px 2px 1px #AF8F6F;
}
.dining-subtitle{
font-size: 26px;
text-transform: uppercase;
}
.card-flip-container{
width: 70%;
display: flex;
}
.card-flip{
margin: 20px auto;
cursor: pointer;
perspective: 1000px;
width: 350px;
height: 450px;
padding: 5px;
}
.card-flip-flipper{
transition: 0.3s ease;
transform-style: preserve-3d;
position: relative;
}
.card-flip-content{
width: 100%;
backface-visibility: hidden;
position: absolute;
overflow: hidden;
}
.fancy-hover-image{
display: block;
width: 100%;
height: 450px;
object-fit: cover;
transition: filter 0.15s linear 0.15s;
}
.fancy-hover-fancy{
position: absolute;
top: 0;
background-color: rgba(55, 66, 78, 0);
width: 100%;
height: 100%;
}
.fancy-hover-fancy:after{
content: '';
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
right: 50%;
transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
}
.fancy-hover-text{
width: 100%;
text-align: center;
color: white;
}
.fancy-hover-element{
width: 100%;
position: absolute;
padding: 16px;
}
.fancy-hover-element-title{
background: rgba(0, 0, 0, 0.5);
bottom: 0;
font-size: 20px;
font-weight: 100;
text-transform: uppercase;
font-family: sans-serif;
transition: bottom 0.15s ease-in-out 0.15s, linear 0.15s;
}
.fancy-hover-element-subtitle{
top: 100%;
font-family: sans-serif;
transition: top 0.15s ease-out;
}
.fancy-hover:hover .fancy-hover-image{
filter: blur(2px);
transition-delay: 0s;
}
.fancy-hover:hover .fancy-hover-fancy{
background: rgba(0, 0, 0, 0.5);
transition-delay: 0s;
}
.fancy-hover:hover .fancy-hover-fancy:after{
left: 20%;
right: 20%;
transition-delay: 0.15s;
}
.fancy-hover:hover .fancy-hover-element-title{
bottom: 50%;
background: rgba(0, 0, 0, 0);
transition-delay: 0s;
}
.fancy-hover:hover .fancy-hover-element-subtitle{
top: 50%;
transition: top .15s ease-in 0.15s;
}
.card-flip-content-front{
transform: rotateY(0deg);
z-index: 2;
}
.card-flip-content-back {
background: rgb(44, 44, 44);
font-family: sans-serif;
color: white;
text-align: center;
padding: 16px;
height: 450px;
transform: rotateY(180deg);
}
.card-flip.clicked .card-flip-flipper{
transform: rotateY(180deg);
}
.border-item{
width: 40%;
position: relative;
border: 3px solid #AF8F6F;
margin: 50px 10px 50px;
border-radius: 15px;
}
.border-head{
position: absolute;
top: 0;
left: 50%;
padding: 0 20px;
transform: translateX(-50%) translateY(-15px);
font-size: 16px;
line-height: 24px;
font-weight: 500;
text-transform: uppercase;
text-shadow: 2px 2px 1px #AF8F6F;
color: #74512D;
background: #EDD8D8;
}
.border-body{
padding: 10px;
}
.border-title{
text-align: center;
font-size: 16px;
line-height: 18px;
font-weight: 500;
}
.border-wrapper{
display: flex;
justify-content: space-between;
margin: 50px 0px 20px;
gap: 5px;
}
.border-subtitle{
text-align: center;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 0px;
margin-top: 10px;
}
.border-content{
width: 100%;
border: 2px dotted #74512D;
border-radius: 5px;
background-color: #F3EEEA;
}
/*===== responsive =====*/
@media (max-width:1200px){
.card-flip-container{
width: 80%;
}
.border-item{
width: 80%;
}
}
@media (max-width:990px){
.frame1{
width: 40px;
height: 60px;
}
.frame2{
width: 20px;
height: 40px;
font-size: 16px;
}
.frame-subtilte{
width: 90%;
}
.dining-container{
display: block;
}
.dining-container1{
display: none;
}
.dining-img{
width: 100%;
height: 650px;
}
.dining-video{
margin-top: 20px;
}
.dining-title, .dining-subtitle{
margin-top: 30px;
text-align: center;
}
.dining-text{
text-align: center
}
.card-flip-container{
width: 90%;
}
}
@media (max-width:768px) {
.frame-subtilte{
font-size: 40px;
margin-bottom: 50px;
}
.dining-img{
height: 500px;
}
.card-flip-container{
width: 100%;
flex-direction: column;
}
.card-flip {
padding: 0px;
}
.border-item{
width: 95%;
margin: 20px 0px 50px;
}
}
@media (max-width:450px) {
.dining-hero{
height: 80vh;
}
.frame-subtilte{
font-size: 30px;
}
.dining-img{
height: 450px;
}
.border-wrapper{
flex-direction: column;
}
.border-wrapper{
gap: 0px;
border: 2px dotted #74512D;
border-radius: 5px
}
.border-content{
border: none;
}
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="dining-hero">
<div class="load"></div>
<?php require('./components/header.php') ?>
<div class="hero-content">
<div class="hero-head">
<h1 class="hero-title">Dining & Bar</h1>
<p class="hero-subtitle">Midtown dining, where quality meets ambiance for a culinary & bar journey like no other</p>
</div>
</div>
</div>
<!--pre section -->
<div class="panel" data-color="white">
<img src="./images/logo.png" class="pre-header-img" style="width: 100px; margin-bottom: 40px;"/>
<h1 class="pre-header">Our dining offers more than just a place to ingest; it provides an opportunity for you to discover a wide range of flavors</h1>
<p class="pre-header " style="font-size: 16px;">Come and savor the delectable dishes crafted by our chef using fresh, seasonal ingredients sourced from local producers, growers, and breeders</p>
</div>
<!--dining section -->
<div class="panel" data-color="cream">
<div class="frame">
<div class="frame1">
<div class="frame2">I</div>
</div>
<p class="frame-title">Dining</p>
</div>
<p class="frame-subtilte">Genuine restaurant serves variety foods</p>
<div class="container" style="margin-bottom: 50px;">
<div class="dining-container">
<p class="dining-title">Explore your palate</p>
<p class="dining-subtitle">"Premium taste experiences"</p>
<p class="dining-text">Come and savor the delectable dishes crafted by our chef using fresh, seasonal ingredients sourced from local producers, growers, and breeders.
Experience a delightful blend of national and international cuisines that will tantalize your taste buds</p>
</div>
<div class="row">
<div class="col-lg-8">
<img src="./images/dining3.jpg" class="dining-img"/>
</div>
<div class="col-lg-4">
<div>
<video autoplay muted loop class="dining-video">
<source src="./images/dining-video.mp4" type="video/mp4">
</video>
<div class="dining-container1">
<p class="dining-title">Explore your palate</p>
<p class="dining-subtitle">"Premium taste experiences"</p>
<p class="dining-text">Come and savor the delectable dishes crafted by our chef using fresh, seasonal ingredients sourced from local producers, growers, and breeders.
Experience a delightful blend of national and international cuisines that will tantalize your taste buds</p>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px; text-align: center;">
<p class="dining-title">Tasteful Journey</p>
<p class="dining-subtitle" style="font-size: 20px; padding: 10px;">"Discover an exceptional dining experience <br/>that fits perfectly within your budget"</p>
</div>
<div class="card-flip-container" style="margin-bottom: 50px;">
<div class="card-flip fancy-hover">
<div class="card-flip-flipper">
<div class="card-flip-content card-flip-content-front">
<img class="fancy-hover-image" src="./images/dining-breakfast.jpg">
<div class="fancy-hover-fancy"></div>
<div class="fancy-hover-element fancy-hover-element-title">
<p class="fancy-hover-text">Breakfast</p>
</div>
<div class="fancy-hover-element fancy-hover-element-subtitle">
<p class="fancy-hover-text"> 6:30am - 10:00am<br><span style="font-size: 12px;">Click to see menu</span></p>
</div>
</div>
<div class="card-flip-content card-flip-content-back">
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Breakfast &bull;</p>
<div style="font-size: 12px;">
<p>Danish Pastries</p>
<p>Muffins (Berries, Chocolate Chip)</p>
<p>Pancakes</p>
<p>Oatmeal with Toppings</p>
<p>Granola with Greek Yogurt</p>
<p>Classic Omelettes</p>
<p>Scrambled Eggs (Bacon or Sausage)</p>
<p>Eggs Benedict</p>
</div>
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Beverages &bull;</p>
<div style="font-size: 12px;">
<p>Coffee (Regular, Decaf, Espresso) || Selection of Teas || Juices (Orange, Apple, Grapefruit) || Milk (Regular, Almond, Soy)</p>
</div>
</div>
</div>
</div>
<div class="card-flip fancy-hover">
<div class="card-flip-flipper">
<div class="card-flip-content card-flip-content-front">
<img class="fancy-hover-image" src="./images/dining-lunch.jpg">
<div class="fancy-hover-fancy"></div>
<div class="fancy-hover-element fancy-hover-element-title">
<p class="fancy-hover-text">Lunch</p>
</div>
<div class="fancy-hover-element fancy-hover-element-subtitle">
<p class="fancy-hover-text"> 11:30am - 3:00pm<br><span style="font-size: 12px;">Click to see menu</span></p>
</div>
</div>
<div class="card-flip-content card-flip-content-back">
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Lunch &bull;</p>
<div style="font-size: 12px;">
<p>Caesar Salad</p>
<p>Grilled Salmon</p>
<p>Beef Tenderloin with Red Wine Reduction</p>
<p>Classic Club Sandwich</p>
</div>
<p style="text-transform: uppercase; font-size: 12px; font-weight:600;">&bull; Desserts &bull;</p>
<div style="font-size: 12px;">
<p>New York Cheesecake with Berry Compote</p>
<p>Fruit Platter with Seasonal Selections</p>
</div>
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Beverages &bull;</p>
<div style="font-size: 12px;">
<p>Soft Drinks || Selection of Teas || Brewed Coffee || Juice</p>
</div>
</div>
</div>
</div>
<div class="card-flip fancy-hover">
<div class="card-flip-flipper">
<div class="card-flip-content card-flip-content-front">
<img class="fancy-hover-image" src="./images/dining-dinner.jpg">
<div class="fancy-hover-fancy"></div>
<div class="fancy-hover-element fancy-hover-element-title">
<p class="fancy-hover-text">Dinner</p>
</div>
<div class="fancy-hover-element fancy-hover-element-subtitle">
<p class="fancy-hover-text"> 5:30pm - 9:00pm<br><span style="font-size: 12px;">Click to see menu</span></p>
</div>
</div>
<div class="card-flip-content card-flip-content-back">
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Dinner &bull;</p>
<div style="font-size: 12px;">
<p>3 course meal </br>(Appetizer, Main course, and Dessert)</p>
<p>4 course meal </br>(An hors d'oeuvre, Appetizer, Main course, and Dessert)</p>
<p>5 course meal </br>(An hors d'oeuvre, Appetizer, Salad, Main course, and Dessert)</p>
<p>6 course meal </br>(An hors d'oeuvre, Soup, Appetizer, Salad, Main course, and Dessert)</p>
<p>9 course meal </br>(An hors d'oeuvre, Soup, Appetizer, Salad, Fish, Main course, Palate cleanser, Dessert, and Mignardise)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--bar section -->
<div class="panel" data-color="pink">
<div class="frame" style="margin-top:100px;">
<div class="frame1">
<div class="frame2">II</div>
</div>
<p class="frame-title">Bar</p>
</div>
<p class="frame-subtilte">A good atmosphere is a wise selection</p>
<div class="container" style="margin-bottom: 50px;">
<div class="dining-container">
<p class="dining-title">Set the scene</p>
<p class="dining-subtitle">"Professional gaterings"</p>
<p class="dining-text">Our bartenders are prepared to assist you in selecting from an extensive selection of premium whiskeys, exclusive rums, and crafted cocktails</p>
</div>
<div class="row">
<div class="col-lg-6">
<div>
<div class="dining-container1">
<p class="dining-title">Set the scene</p>
<p class="dining-subtitle">"Professional gaterings"</p>
<p class="dining-text">Our bartenders are prepared to assist you in selecting from an extensive selection of premium whiskeys, exclusive rums, and crafted cocktails</p>
</div>
<img src="./images/dining1.jpg" style="width: 100%; height: 100%; margin-bottom: 20px;"/>
</div>
</div>
<div class="col-lg-6">
<video autoplay muted loop class="dining-img">
<source src="./images/bar-video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="border-item">
<div class="border-head">Happy Hour</div>
<p style="text-align: center; font-size: 12px; margin-top: 20px;">($2 off per glass)</p>
<div class="border-body">
<p class="border-title">4pm-6pm Monday-Friday </br>& </br>All day sunday</p>
<div class="border-wrapper">
<div class="border-content">
<div>
<p class="border-subtitle">&bull; Wines &bull;</p>
<div style="text-align: center; font-size: 12px;">
<p style="text-transform: uppercase; margin-bottom:0px; font-weight: 600;">Red</p>
<p style="margin-bottom:4px;">Cabernet Sauvignon</p>
<p style="margin-bottom:4px;">Pinot Noir 2008</p>
<p>Syrah "La Violette"</p>
</div>
<div style="text-align: center; font-size: 12px;">
<p style=" text-transform: uppercase; margin-bottom:0px; font-weight: 600;">White</p>
<p style="margin-bottom:4px;">Bourgogne Blanc, Laforet</p>
<p style="margin-bottom:4px;">Pinot Gris</p>
<p>Viognier</p>
</div>
</div>
<div>
<p class="border-subtitle">&bull; Tequila &bull;</p>
<div style="text-align: center; font-size: 12px;">
<p style="margin-bottom:4px;">Jose Cuervo Gold</p>
<p style="margin-bottom:4px;">El Tesoro Reposado</p>
<p>Fortaleza Blanco</p>
</div>
</div>
</div>
<div class="border-content">
<div>
<p class="border-subtitle">&bull; Cocktails &bull;</p>
<div style="text-align: center; font-size: 12px;">
<p style="margin-bottom:4px;">Classic Mojito</p>
<p style="margin-bottom:4px;">Dry Fruit Mojito</p>
<p style="margin-bottom:4px;">Classic Margarita</p>
<p style="margin-bottom:4px;">Retro Margarita</p>
<p>Daiquiri</p>
</div>
</div>
<div>
<p class="border-subtitle">&bull; Straight rye whiskey &bull;</p>
<div style="text-align: center; font-size: 12px;">
<p style="margin-bottom:4px;">Woodford Reserve Straight</p>
<p style="margin-bottom:4px;">Redemption Rye</p>
<p>Knob Creek</p>
</div>
</div>
<p style="text-align: center; font-size: 12px; margin-top: 50px;">
<span style="color: red;">**</span>
Happy Hour Specials are available in the 10th Floor Bar and Lounge Areas Only
<span style="color: red;">**</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
<script>
$(document).ready(function() {
var classClicked = 'clicked';
$('.card-flip').click(function() {
if($(this).hasClass(classClicked)) {
$(this).removeClass(classClicked);
}
else {
$(this).addClass(classClicked);
}
}).mouseleave(function() {
$(this).removeClass(classClicked);
});
})
</script>
</body>
</html>