updated header, about page, and dining page
This commit is contained in:
parent
8c5417abaa
commit
2eb7ad2222
4 changed files with 207 additions and 96 deletions
|
|
@ -17,39 +17,40 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
.about-container{
|
||||
width: 90%;
|
||||
height: 95vh;
|
||||
margin: auto;
|
||||
display: none;
|
||||
}
|
||||
.about-container1{
|
||||
display: block;
|
||||
}
|
||||
.about-img{
|
||||
width:90%;
|
||||
height: 650px;
|
||||
object-fit: cover;"
|
||||
}
|
||||
.about-img2{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.about-title{
|
||||
margin-top: 50px;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
color: #B0A695;
|
||||
text-shadow: 2px 2px 1px #EAD8C0;
|
||||
color: #74512D;
|
||||
text-shadow: 2px 2px 1px #AF8F6F;
|
||||
}
|
||||
.about-subtitle{
|
||||
font-size: 26px;
|
||||
text-transform: uppercase;
|
||||
width: 500px;
|
||||
}
|
||||
.about-wrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.about-wrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.about-container-title{
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -60,17 +61,6 @@
|
|||
text-align: center;
|
||||
margin-top: 50px;"
|
||||
}
|
||||
.about-wrapper-img{
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
border: 1px solid #B0A695;
|
||||
padding: 10px;
|
||||
}
|
||||
.about-img{
|
||||
width: 60%;
|
||||
height: 40%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.about-text{
|
||||
max-width: 650px;
|
||||
text-align: center;
|
||||
|
|
@ -177,14 +167,25 @@
|
|||
box-shadow:0 0 0 3px rgba(195,175,145,1);
|
||||
}
|
||||
@media (max-width:1200px){
|
||||
.about-wrapper-img{
|
||||
height: 80%;
|
||||
}
|
||||
.timeline{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
@media (max-width:980px){
|
||||
@media (max-width:990px){
|
||||
.about-container{
|
||||
display: block;
|
||||
}
|
||||
.about-img{
|
||||
width: 100%;
|
||||
height: 650px;
|
||||
}
|
||||
.about-img2{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.about-title, .about-subtitle{
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.about-pre-title{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -196,34 +197,13 @@
|
|||
text-shadow: 2px 2px 1px #EAD8C0;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.about-wrap{
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
flex-direction: row;
|
||||
}
|
||||
.about-wrapper{
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.about-wrapper-img{
|
||||
height: 60%;
|
||||
}
|
||||
.about-img{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.about-container-title{;
|
||||
margin-top: -80px;"
|
||||
.about-container1{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width:760px) {
|
||||
.about-subtitle{
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
.about-img{
|
||||
width: 350px;
|
||||
height: 500px;
|
||||
}
|
||||
.timeline{
|
||||
width:100%;
|
||||
|
|
@ -256,27 +236,20 @@
|
|||
right:inherit;
|
||||
}
|
||||
}
|
||||
@media (max-width:580px) {
|
||||
.about-img{
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:450px) {
|
||||
.about-img{
|
||||
height: 450px;
|
||||
}
|
||||
.about-pre-title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.about-hero{
|
||||
height: 80vh;
|
||||
}
|
||||
.about-wrapper-img{
|
||||
height: 100%;
|
||||
}
|
||||
.about-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
.about-img{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -293,16 +266,22 @@
|
|||
</div>
|
||||
<!--pre section-->
|
||||
<div class="panel" data-color="white">
|
||||
<div class="about-container">
|
||||
<div class="about-wrapper">
|
||||
<div class="about-wrapper-img">
|
||||
<img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/>
|
||||
<div class="container" style="margin-bottom: 50px; margin-top: 50px;">
|
||||
<div class="about-container">
|
||||
<p class="about-title">Our vision</p>
|
||||
<p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<img src="./images/about.jpg" class="about-img"/>
|
||||
</div>
|
||||
<div class="about-wrap">
|
||||
<img src="./images/home4.jpg" class="about-img"/>
|
||||
<div style="margin-top: 20px;">
|
||||
<p class="about-title">Our vision</p>
|
||||
<p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
|
||||
<div class="col-lg-4">
|
||||
<div>
|
||||
<img src="./images/home4.jpg" class="about-img2"/>
|
||||
<div class="about-container1">
|
||||
<p class="about-title">Our vision</p>
|
||||
<p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,7 @@
|
|||
<a class="nav-link" href="../services.php">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../dining.php">Dining</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">News</a>
|
||||
<a class="nav-link" href="../dining.php">Dining & Bar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -30,12 +27,13 @@
|
|||
<li class="nav-item">
|
||||
<a class="nav-link" href="../contact.php">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a>
|
||||
</li>
|
||||
<div class="dropdown">
|
||||
<a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join us</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
|
||||
<li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
|
||||
<li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,109 @@
|
|||
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: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@media (max-width:980px){
|
||||
.frame1{
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
}
|
||||
.frame2{
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.frame-subtilte{
|
||||
width: 90%;
|
||||
}
|
||||
.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
|
||||
}
|
||||
}
|
||||
@media (max-width:768px) {
|
||||
.frame-subtilte{
|
||||
font-size: 40px;
|
||||
}
|
||||
.dining-img{
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
@media (max-width:450px) {
|
||||
.dining-hero{
|
||||
height: 80vh;
|
||||
}
|
||||
.frame-subtilte{
|
||||
font-size: 30px;
|
||||
}
|
||||
.dining-img{
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -31,8 +129,44 @@
|
|||
<?php require('./components/header.php') ?>
|
||||
<div class="hero-content">
|
||||
<div class="hero-head">
|
||||
<h1 class="hero-title">Midtown dining</h1>
|
||||
<p class="hero-subtitle">Midtown dining, where quality meets ambiance for a culinary journey like no other</p>
|
||||
<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; margin-top: 50px;">
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -417,7 +417,7 @@
|
|||
<div class="panel" data-color="cream" style="margin-top: 100px;">
|
||||
<div class="service-frame" style="margin-top: 100px;">
|
||||
<div class="service-frame1">
|
||||
<div class="service-frame2">III</div>
|
||||
<div class="service-frame2">II</div>
|
||||
</div>
|
||||
<p class="service-title">Massage</p>
|
||||
</div>
|
||||
|
|
@ -459,7 +459,7 @@
|
|||
<div class="panel" data-color="pink" style="margin-top: 100px;">
|
||||
<div class="service-frame" style="margin-top: 100px;">
|
||||
<div class="service-frame1">
|
||||
<div class="service-frame2">II</div>
|
||||
<div class="service-frame2">III</div>
|
||||
</div>
|
||||
<p class="service-title">Sauna</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue