updated dining page
This commit is contained in:
parent
2eb7ad2222
commit
f30a8b04cd
1 changed files with 256 additions and 13 deletions
|
|
@ -47,9 +47,12 @@
|
|||
width: 50%;
|
||||
font-size: 50px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.dining-container{
|
||||
display: none;
|
||||
}
|
||||
.dining-img{
|
||||
width:90%;
|
||||
height: 650px;
|
||||
|
|
@ -73,7 +76,118 @@
|
|||
font-size: 26px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media (max-width:980px){
|
||||
.card-flip-container{
|
||||
width: 70%;
|
||||
display: flex;
|
||||
}
|
||||
.card-flip{
|
||||
margin: 20px auto;
|
||||
cursor: pointer;
|
||||
perspective: 1000px;
|
||||
width: 300px;
|
||||
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);
|
||||
}
|
||||
|
||||
@media (max-width:990px){
|
||||
.frame1{
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
|
|
@ -86,6 +200,12 @@
|
|||
.frame-subtilte{
|
||||
width: 90%;
|
||||
}
|
||||
.dining-container{
|
||||
display: block;
|
||||
}
|
||||
.dining-container1{
|
||||
display: none;
|
||||
}
|
||||
.dining-img{
|
||||
width: 100%;
|
||||
height: 650px;
|
||||
|
|
@ -100,15 +220,29 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
@media (max-width:650px) {
|
||||
.card-flip-container{
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card-flip {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
@media (max-width:450px) {
|
||||
.dining-hero{
|
||||
height: 80vh;
|
||||
|
|
@ -149,7 +283,13 @@
|
|||
<p class="frame-title">Dining</p>
|
||||
</div>
|
||||
<p class="frame-subtilte">Genuine restaurant serves variety foods</p>
|
||||
<div class="container" style="margin-bottom: 50px; margin-top: 50px;">
|
||||
<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"/>
|
||||
|
|
@ -159,7 +299,7 @@
|
|||
<video autoplay muted loop class="dining-video">
|
||||
<source src="./images/dining-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div>
|
||||
<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.
|
||||
|
|
@ -169,15 +309,103 @@
|
|||
</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 (Cheese, Fruit-filled)</p>
|
||||
<p>Muffins (Berries, Chocolate Chip)</p>
|
||||
<p>Pancakes (with Maple Syrup and Butter)</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>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 || Juice (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 with (Grilled Chicken or Fresh Mozzarella, Tomatoes, and Basil)</p>
|
||||
<p>Grilled Salmon with Lemon Butter Sauce</p>
|
||||
<p>Beef Tenderloin with Red Wine Reduction</p>
|
||||
<p>Classic Club Sandwich with Fries</p>
|
||||
<p>Soup of the Day</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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -186,5 +414,20 @@
|
|||
<?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>
|
||||
Loading…
Add table
Reference in a new issue