593 lines
No EOL
24 KiB
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;">• Breakfast •</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;">• Beverages •</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;">• Lunch •</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;">• Desserts •</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;">• Beverages •</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;">• Dinner •</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">• Wines •</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">• Tequila •</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">• Cocktails •</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">• Straight rye whiskey •</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>
|