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

added about page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-06 14:14:30 -05:00
parent 2c99c13d5b
commit e26efa2e8e
8 changed files with 202 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
hotel_booking/about.php Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midtown Hotel | About the hotel</title>
<?php require('./components/link.php') ?>
<style>
.about-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(images/about.jpg);
width: 100%;
display: flex;
flex-direction: column;
}
.about-container{
width: 90%;
height: 95vh;
}
.about-pre-title{
display: none;
}
.about-title{
font-size: 24px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
color: #B0A695;
text-shadow: 2px 2px 1px #EAD8C0;
}
.about-subtitle{
font-size: 26px;
}
.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-img{
width: 60%;
height: 40%;
object-fit: cover;
}
@media (max-width:980px){
.about-container{
width: 90%;
height: 100vh;
}
.about-pre-title{
display: flex;
justify-content: center;
font-size: 24px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
color: #B0A695;
text-shadow: 2px 2px 1px #EAD8C0;
margin-top: 50px;
}
.about-title{
display: none;
}
.about-wrapper{
flex-direction: column;
gap: 20px;
}
.about-wrap{
justify-content: start;
}
.about-img{
width: 100%;
height: 50%;
}
}
@media (max-width:450px) {
.about-pre-title{
margin-top: 30px;
}
.about-hero{
height: 80vh;
}
.about-subtitle{
font-size: 20px;
}
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="about-hero">
<?php require('./components/header.php') ?>
<div class="hero-content">
<div class="hero-head">
<h1 class="hero-title">About the Hotel</h1>
<p class="hero-subtitle">Midtown Hotel, where quality and great atmosphere unite</p>
</div>
</div>
</div>
<!--pre section-->
<div class="panel" data-color="white">
<div class="about-container">
<p class="about-pre-title">Our vision</p>
<div class="about-wrapper">
<div style="width: 100%; height: 90%; border: 1px solid #B0A695; padding: 10px;">
<img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/>
</div>
<div class="about-wrap">
<img src="./images/home4.jpg" class="about-img"/>
<div style="margin-top: 20px; width: 350px;">
<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>
</div>
<div class="panel" data-color="cream">
<div class="about-container">
</div>
</div>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
</body>
</html>

6
hotel_booking/components/header.php
View file

@ -25,7 +25,7 @@
<div class="col-5 text-center rounded-pill"> <div class="col-5 text-center rounded-pill">
<ul class="d-flex list-unstyled justify-content-center m-0"> <ul class="d-flex list-unstyled justify-content-center m-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">About</a> <a class="nav-link" href="../about.php">About</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Contact</a> <a class="nav-link" href="#">Contact</a>
@ -55,7 +55,7 @@
<div class="burger-links"> <div class="burger-links">
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Home</a> <a href="../index.php" class="nav-link">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Rooms</a> <a href="#" class="nav-link">Rooms</a>
@ -67,7 +67,7 @@
<a href="#" class="nav-link">Gallery</a> <a href="#" class="nav-link">Gallery</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">About</a> <a href="../about.php" class="nav-link">About</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Contact</a> <a href="#" class="nav-link">Contact</a>

3
hotel_booking/components/link.php
View file

@ -3,4 +3,5 @@
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet"> <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/><link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">

2
hotel_booking/components/script.php
View file

@ -1,2 +1,4 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./script.js"></script> <script src="./script.js"></script>

BIN
hotel_booking/images/about.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 MiB

4
hotel_booking/index.php
View file

@ -4,8 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midtown Hotel | The best hotels & accommodations</title> <title>Midtown Hotel | The best hotels & accommodations</title>
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<?php require('./components/link.php'); ?> <?php require('./components/link.php'); ?>
</head> </head>
<body> <body>
@ -290,8 +288,6 @@
<?php require('./components/footer.php'); ?> <?php require('./components/footer.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<?php require('./components/script.php') ?> <?php require('./components/script.php') ?>
</body> </body>
</html> </html>

55
hotel_booking/services.php
View file

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
<title>Midtown Hotel | Services</title> <title>Midtown Hotel | Services</title>
<?php require('./components/link.php') ?> <?php require('./components/link.php') ?>
<style> <style>
@ -182,7 +181,7 @@
.service-frame2{ .service-frame2{
width: 20px; width: 20px;
height: 40px; height: 40px;
font-size: 24px; font-size: 16px;
} }
.service-subtilte{ .service-subtilte{
width: 90%; width: 90%;
@ -208,8 +207,8 @@
height: 450px; height: 450px;
} }
.sauna-text{ .sauna-text{
padding-top: 20px; padding-top: 5px;
padding-bottom: 20px; padding-bottom: 5px;
font-size: 16px; font-size: 16px;
} }
} }
@ -217,6 +216,12 @@
.service-subtilte{ .service-subtilte{
font-size: 30px; font-size: 30px;
} }
.sauna-container{
gap: 0px;
}
.service-hero{
height: 80vh;
}
} }
</style> </style>
</head> </head>
@ -328,11 +333,45 @@
</div> </div>
</div> </div>
</div> </div>
<!--massage section-->
<div class="panel" data-color="white">
<div class="service-frame" style="margin-top: 100px;">
<div class="service-frame1">
<div class="service-frame2">III</div>
</div>
<p class="service-title">Massage</p>
</div>
<p class="service-subtilte">Relax, Rejuvenate, and Unwind with Every Touch</p>
<p class="pre-header" style="font-size: 18px;">The challenges of everyday life can place a significant burden on your physical well-being.
This is why it is crucial to prioritize self-care. Our massage sessions are dedicated to ensuring your body functions optimally,
enabling you to participate in activities such as completing a half marathon without any hindrances</p>
</div>
<div class="panel" data-color="white">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/service3.jpg"/>
</div>
<div class="swiper-slide">
<img src="./images/service_page3.jpg"/>
</div>
</div>
</div>
<div class="pre-section2-container">
<div class="pre-section2-wrapper">
<div class="pre-section2-text">
<p><i class='bx bx-leaf' style="color: #B0A695;"></i> Aromatherapy massages </p>
<p><i class='bx bx-leaf' style="color: #B0A695;"></i> Deep tissue massages </p>
<p><i class='bx bx-leaf' style="color: #B0A695;"></i> Hot stone massages</p>
<p><i class='bx bx-leaf' style="color: #B0A695;"></i> Thai massages</p>
<p><i class='bx bx-leaf' style="color: #B0A695;"></i> Swedish massage</p>
</div>
</div>
</div>
</div>
<!--footer-->
<?php require('./components/footer.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<?php require('./components/script.php') ?> <?php require('./components/script.php') ?>
</body> </body>
</html> </html>

7
hotel_booking/style.css
View file

@ -147,6 +147,7 @@ ul{
} }
.hero-title{ .hero-title{
font-size: 56px; font-size: 56px;
text-transform: uppercase;
margin-bottom: 10px; margin-bottom: 10px;
animation: fadeInUp 1s ease-in-out; animation: fadeInUp 1s ease-in-out;
} }
@ -330,7 +331,7 @@ ul{
} }
.pre-header-testimonials{ .pre-header-testimonials{
width: 100px; width: 100px;
margin-bottom: -50px; margin-bottom: 100px;
margin-top: 100px; margin-top: 100px;
} }
/*--Footer--*/ /*--Footer--*/
@ -493,7 +494,7 @@ ul{
margin-bottom: 10px; margin-bottom: 10px;
} }
.hero-title{ .hero-title{
font-size: 44px; font-size: 40px;
} }
.hero-subtitle{ .hero-subtitle{
font-size: 14px; font-size: 14px;
@ -527,7 +528,7 @@ ul{
padding-right: 30px; padding-right: 30px;
} }
.pre-header-testimonials{ .pre-header-testimonials{
margin-bottom: -100px; margin-bottom: 50px;
} }
.footer-grid-1 a{ .footer-grid-1 a{
color: #93B1A6; color: #93B1A6;