muayjtp/web_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated dining page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-11 15:13:32 -05:00
parent f30a8b04cd
commit 382088f921
3 changed files with 187 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
hotel_booking/components/header.php
View file

@ -62,7 +62,7 @@
<a href="../services.php" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="../dining.php" class="nav-link">Dining</a>
<a href="../dining.php" class="nav-link">Dining & Bar</a>
</li>
<li class="nav-item">
<a href="../about.php" class="nav-link">About</a>

204
hotel_booking/dining.php
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dining | Midtown Hotel</title>
<title>Dining & Bar | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.dining-hero{
@ -84,7 +84,7 @@
margin: 20px auto;
cursor: pointer;
perspective: 1000px;
width: 300px;
width: 350px;
height: 450px;
padding: 5px;
}
@ -186,7 +186,64 @@
.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;
@ -233,8 +290,6 @@
.dining-img{
height: 500px;
}
}
@media (max-width:650px) {
.card-flip-container{
width: 100%;
flex-direction: column;
@ -242,6 +297,10 @@
.card-flip {
padding: 0px;
}
.border-item{
width: 95%;
margin: 20px 0px 50px;
}
}
@media (max-width:450px) {
.dining-hero{
@ -252,6 +311,17 @@
}
.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>
@ -327,20 +397,20 @@
</div>
</div>
<div class="card-flip-content card-flip-content-back">
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Breakfast</p>
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Breakfast &bull;</p>
<div style="font-size: 12px;">
<p>Danish Pastries (Cheese, Fruit-filled)</p>
<p>Danish Pastries</p>
<p>Muffins (Berries, Chocolate Chip)</p>
<p>Pancakes (with Maple Syrup and Butter)</p>
<p>Pancakes</p>
<p>Oatmeal with Toppings</p>
<p>Granola with Greek Yogurt</p>
<p>Omelettes (Cheese, Ham, Spinach, Mushrooms, Peppers)</p>
<p>Scrambled Eggs (with Bacon or Sausage)</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>
<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 || Juice (Orange, Apple, Grapefruit) || Milk (Regular, Almond, Soy)</p>
<p>Coffee (Regular, Decaf, Espresso) || Selection of Teas || Juices (Orange, Apple, Grapefruit) || Milk (Regular, Almond, Soy)</p>
</div>
</div>
</div>
@ -359,20 +429,19 @@
</div>
</div>
<div class="card-flip-content card-flip-content-back">
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Lunch</p>
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">&bull; Lunch &bull;</p>
<div style="font-size: 12px;">
<p>Caesar Salad with (Grilled Chicken or Fresh Mozzarella, Tomatoes, and Basil)</p>
<p>Grilled Salmon with Lemon Butter Sauce</p>
<p>Caesar Salad</p>
<p>Grilled Salmon</p>
<p>Beef Tenderloin with Red Wine Reduction</p>
<p>Classic Club Sandwich with Fries</p>
<p>Soup of the Day</p>
<p>Classic Club Sandwich</p>
</div>
<p style="text-transform: uppercase; font-size: 12px; font-weight:600;">Desserts</p>
<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;">Beverages</p>
<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>
@ -393,7 +462,7 @@
</div>
</div>
<div class="card-flip-content card-flip-content-back">
<p style="text-transform: uppercase; font-size: 14px; font-weight:600;">Dinner</p>
<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>
@ -406,8 +475,99 @@
</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-->

5
hotel_booking/services.php
View file

@ -175,7 +175,7 @@
}
.accordion-container{
background-color: white;
width: 90%;
width: 80%;
height: 100%;
margin-bottom: 50px;
}
@ -240,6 +240,9 @@
}
/*----- Responsive -----*/
@media (max-width: 1200px) {
.accordion-container{
width: 90%;
}
.accordion {
height: 500px;
}