created component for link, script, navbar, footer and created service page
This commit is contained in:
parent
5e724d1425
commit
471c7e4421
9 changed files with 386 additions and 236 deletions
49
hotel_booking/components/footer.php
Normal file
49
hotel_booking/components/footer.php
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<div class="footer">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-grid-1">
|
||||
<a href="#">Rooms</a>
|
||||
<a href="../services.php">Services</a>
|
||||
<a href="#">News</a>
|
||||
<a href="#">Gallery</a>
|
||||
<a href="#">Info</a>
|
||||
</div>
|
||||
<div class="footer-grid-2">
|
||||
<div class="footer-grid-2-title">
|
||||
<a href="#">More about rooms <i class="bi bi-arrow-right-circle"></i></a>
|
||||
</div>
|
||||
<a href="#">Standard rooms</a>
|
||||
<a href="#">Excutive rooms</a>
|
||||
<a href="#">Suite rooms</a>
|
||||
<a href="#">Presidential rooms</a>
|
||||
</div>
|
||||
<div class="footer-grid-3">
|
||||
<img src="./images/logo-white.png" class="pre-header-img" style="width: 120px; margin-bottom:80px; margin-top:50px;"/>
|
||||
<div class="footer-grid-3-title" style="margin-bottom:100px;">
|
||||
<p style="font-size: 22px;">Midtown Hotel</p>
|
||||
<p style="margin-top: 10px;">36381 Trantow Hill,</p>
|
||||
<p style="margin-top: -10px;">New Port, FL 57941</p>
|
||||
<p style="margin-top: 50px;">+123 45 678 90 00</p>
|
||||
<p style="margin-top: -10px;">reception@midtownhotel.com</p>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom:50px; gap: 10px; font-size: 30px;">
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-trip-advisor'></i></a>
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-facebook-circle'></i></a>
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-instagram'></i></a>
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-youtube' ></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wave-area">
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(19,50,50,0.7"/>
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(19,40,40,0.5)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(19,30,30,0.3)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#296161" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
169
hotel_booking/components/header.php
Normal file
169
hotel_booking/components/header.php
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!--Navbar section (bootstrap)-->
|
||||
<div class="wrap w-100">
|
||||
<div class="row align-items-center m-0 d-none d-md-flex sticky-top">
|
||||
<div class="col-5 text-center rounded-pill" >
|
||||
<ul class="d-flex list-unstyled justify-content-center m-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Rooms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../services.php">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.php">News</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Gallery</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-2 bg-transparent px-3">
|
||||
<a href="index.php" style="text-decoration: none;">
|
||||
<img src="./images/logo-white.png" class="logo-img"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-5 text-center rounded-pill">
|
||||
<ul class="d-flex list-unstyled justify-content-center m-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--Navbar responsive (css)-->
|
||||
<div>
|
||||
<div class="nav-parent sticky-top">
|
||||
<div class="nav-wrapper" style="margin-top: -20px;">
|
||||
<div class="branding">
|
||||
<img src="./images/logo-white.png" style="width: 120px; margin-left: -40px;"/>
|
||||
</div>
|
||||
<a class="burger" onclick="burgerButton()">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="burger-links">
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Rooms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../services.php" class="nav-link">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Gallery</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
<li style="padding-top: 50px">
|
||||
<buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="border: 1px solid white; font-weight: 500; color: white;">Login</button>
|
||||
</li>
|
||||
<li style="padding-top: 5px">
|
||||
<buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="background-color: #EEEEEE; font-weight: 500; color: black;">Register</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--backdrop login-->
|
||||
<div class="modal fade" id="loginBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form>
|
||||
<div class="modal-header" style="border: none;">
|
||||
<button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h5 class="text-center" style="font-size: 22px;">Login</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control shadow-none">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control shadow-none">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<a href="javascript: void(0)" style="font-size: 14px; color: gray;">Forgot your password?</a>
|
||||
</div>
|
||||
<div class="mb-3 d-grid">
|
||||
<button type="submit" class="btn btn-dark shadow-none d-block ">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--backdrop register-->
|
||||
<div class="modal fade" id="registerBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form>
|
||||
<div class="modal-header" style="border: none;">
|
||||
<button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h5 class="text-center" style="font-size: 22px;">Register</h5>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>First Name</label>
|
||||
<input type="text" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Last Name</label>
|
||||
<input type="text" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Phone Number</label>
|
||||
<input type="tel" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Date of Birth</label>
|
||||
<input type="date" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-12">
|
||||
<label>Address</label>
|
||||
<textarea type="text" rows="3" class="form-control shadow-none" style="resize: none;"></textarea>
|
||||
</div>
|
||||
<div class="mb-3 col-md-12">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-5 col-md-6">
|
||||
<label>Confirm Password</label>
|
||||
<input type="password" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 d-grid">
|
||||
<button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
6
hotel_booking/components/link.php
Normal file
6
hotel_booking/components/link.php
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<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://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">
|
||||
2
hotel_booking/components/script.php
Normal file
2
hotel_booking/components/script.php
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<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>
|
||||
BIN
hotel_booking/images/service_page2.jpg
Normal file
BIN
hotel_booking/images/service_page2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
hotel_booking/images/service_page3.jpg
Normal file
BIN
hotel_booking/images/service_page3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
|
|
@ -5,187 +5,14 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Midtown Hotel | The best hotels & accommodations</title>
|
||||
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<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://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="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
||||
<?php require('./components/link.php'); ?>
|
||||
</head>
|
||||
<body>
|
||||
<!--Hero & Navbar section-->
|
||||
<div class="hero">
|
||||
<div class="load"></div>
|
||||
<!--Navbar section (bootstrap)-->
|
||||
<div class="wrap w-100">
|
||||
<div class="row align-items-center m-0 d-none d-md-flex sticky-top">
|
||||
<div class="col-5 text-center rounded-pill" >
|
||||
<ul class="d-flex list-unstyled justify-content-center m-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Rooms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.php">News</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Gallery</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-2 bg-transparent px-3">
|
||||
<a href="index.php" style="text-decoration: none;">
|
||||
<img src="./images/logo-white.png" class="logo-img"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-5 text-center rounded-pill">
|
||||
<ul class="d-flex list-unstyled justify-content-center m-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--Navbar responsive (css)-->
|
||||
<div>
|
||||
<div class="nav-parent sticky-top">
|
||||
<div class="nav-wrapper" style="margin-top: -20px;">
|
||||
<div class="branding">
|
||||
<img src="./images/logo-white.png" style="width: 120px; margin-left: -40px;"/>
|
||||
</div>
|
||||
<a class="burger" onclick="burgerButton()">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="burger-links">
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Rooms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Gallery</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
<li style="padding-top: 50px">
|
||||
<buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="border: 1px solid white; font-weight: 500; color: white;">Login</button>
|
||||
</li>
|
||||
<li style="padding-top: 5px">
|
||||
<buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="background-color: #EEEEEE; font-weight: 500; color: black;">Register</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--backdrop login-->
|
||||
<div class="modal fade" id="loginBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form>
|
||||
<div class="modal-header" style="border: none;">
|
||||
<button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h5 class="text-center" style="font-size: 22px;">Login</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control shadow-none">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control shadow-none">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<a href="javascript: void(0)" style="font-size: 14px; color: gray;">Forgot your password?</a>
|
||||
</div>
|
||||
<div class="mb-3 d-grid">
|
||||
<button type="submit" class="btn btn-dark shadow-none d-block ">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--backdrop register-->
|
||||
<div class="modal fade" id="registerBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form>
|
||||
<div class="modal-header" style="border: none;">
|
||||
<button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<h5 class="text-center" style="font-size: 22px;">Register</h5>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>First Name</label>
|
||||
<input type="text" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Last Name</label>
|
||||
<input type="text" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Phone Number</label>
|
||||
<input type="tel" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Date of Birth</label>
|
||||
<input type="date" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-12">
|
||||
<label>Address</label>
|
||||
<textarea type="text" rows="3" class="form-control shadow-none" style="resize: none;"></textarea>
|
||||
</div>
|
||||
<div class="mb-3 col-md-12">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-5 col-md-6">
|
||||
<label>Confirm Password</label>
|
||||
<input type="password" class="form-control shadow-none"/>
|
||||
</div>
|
||||
<div class="mb-3 d-grid">
|
||||
<button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php require('./components/header.php'); ?>
|
||||
<!--Hero section-->
|
||||
<div class="hero-content">
|
||||
<div class="hero-head">
|
||||
|
|
@ -279,8 +106,8 @@
|
|||
<p class="mb-4 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 350px; margin: auto;">
|
||||
<div class="col-lg-3 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 400px; margin: auto;">
|
||||
<img src="./images/home3.jpg" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #222831;">Standard rooms</h5>
|
||||
|
|
@ -308,8 +135,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 350px; margin: auto;">
|
||||
<div class="col-lg-3 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 400px; margin: auto;">
|
||||
<img src="./images/home3.jpg" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #222831;">Standard rooms</h5>
|
||||
|
|
@ -337,8 +164,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 350px; margin: auto;">
|
||||
<div class="col-lg-3 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 400px; margin: auto;">
|
||||
<img src="./images/home3.jpg" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #222831;">Standard rooms</h5>
|
||||
|
|
@ -365,6 +192,36 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 400px; margin: auto;">
|
||||
<img src="./images/home3.jpg" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #222831;">Standard rooms</h5>
|
||||
<p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
|
||||
<div class="accommodation mt-4 mb-3">
|
||||
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
|
||||
</div>
|
||||
<div class="equipment">
|
||||
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
|
||||
</div>
|
||||
<div class="d-flex gap-2 items-center justify-content-center mt-4">
|
||||
<a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
|
||||
<a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12 text-center mt-5 mb-2">
|
||||
<a href="" class="btn-th">More</a>
|
||||
</div>
|
||||
|
|
@ -430,55 +287,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<!--footer-->
|
||||
<div class="footer">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-grid-1">
|
||||
<a href="#">Rooms</a>
|
||||
<a href="#">Services</a>
|
||||
<a href="#">News</a>
|
||||
<a href="#">Gallery</a>
|
||||
<a href="#">Info</a>
|
||||
</div>
|
||||
<div class="footer-grid-2">
|
||||
<div class="footer-grid-2-title">
|
||||
<a href="#">More about rooms <i class="bi bi-arrow-right-circle"></i></a>
|
||||
</div>
|
||||
<a href="#">Standard rooms</a>
|
||||
<a href="#">Excutive rooms</a>
|
||||
<a href="#">Suite rooms</a>
|
||||
</div>
|
||||
<div class="footer-grid-3">
|
||||
<img src="./images/logo-white.png" class="pre-header-img" style="width: 120px; margin-bottom:80px; margin-top:50px;"/>
|
||||
<div class="footer-grid-3-title" style="margin-bottom:100px;">
|
||||
<p style="font-size: 22px;">Midtown Hotel</p>
|
||||
<p style="margin-top: 10px;">36381 Trantow Hill,</p>
|
||||
<p style="margin-top: -10px;">New Port, FL 57941</p>
|
||||
<p style="margin-top: 50px;">+123 45 678 90 00</p>
|
||||
<p style="margin-top: -10px;">reception@midtownhotel.com</p>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom:50px; gap: 10px; font-size: 30px;">
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-trip-advisor'></i></a>
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-facebook-circle'></i></a>
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-instagram'></i></a>
|
||||
<a href="#" style="color:lightgray;"><i class='bx bxl-youtube' ></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?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>
|
||||
<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>
|
||||
<?php require('./components/script.php') ?>
|
||||
</body>
|
||||
</html>
|
||||
65
hotel_booking/services.php
Normal file
65
hotel_booking/services.php
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<?php require('./components/link.php') ?>
|
||||
<style>
|
||||
.service-hero{
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
animation: service-slide 15s infinite;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@keyframes service-slide{
|
||||
0%{
|
||||
background-image: url(images/service1.jpg);
|
||||
}
|
||||
33%{
|
||||
background-image: url(images/service1.jpg);
|
||||
}
|
||||
33.01%{
|
||||
background-image: url(images/service_page2.jpg);
|
||||
}
|
||||
66%{
|
||||
background-image: url(images/service_page2.jpg);
|
||||
}
|
||||
66.01%{
|
||||
background-image: url(images/service_page3.jpg);
|
||||
}
|
||||
100%{
|
||||
background-image: url(images/service_page3.jpg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="service-hero">
|
||||
<div class="load"></div>
|
||||
<?php require('./components/header.php') ?>
|
||||
<div class="hero-content">
|
||||
<div class="hero-head">
|
||||
<h1 class="hero-title">Services and Facilities</h1>
|
||||
<p class="hero-subtitle">Exceptional service - endless possibilities</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?php require('./components/script.php') ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -37,7 +37,7 @@ ul{
|
|||
background-color: #3C3633;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -51,7 +51,7 @@ ul{
|
|||
background-color: #747264;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -66,9 +66,8 @@ ul{
|
|||
.logo-img{
|
||||
width: 13vw;
|
||||
}
|
||||
.hero {
|
||||
.hero{
|
||||
position: relative;
|
||||
/*background: url('./images/home1.jpg') center/cover no-repeat;*/
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -382,6 +381,49 @@ ul{
|
|||
.footer-grid-3-title, .footer-grid-3-social{
|
||||
color: lightgray;
|
||||
}
|
||||
.wave-area{
|
||||
position: relative;
|
||||
height: -2vh;
|
||||
background-color: #194141;
|
||||
}
|
||||
.waves{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
min-height: 200px;
|
||||
max-height: 150px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.parallax>use{
|
||||
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
|
||||
}
|
||||
.parallax>use:nth-child(1){
|
||||
animation-delay: -2s;
|
||||
animation-duration: 7s;
|
||||
}
|
||||
.parallax>use:nth-child(2){
|
||||
animation-delay: -3s;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.parallax>use:nth-child(3){
|
||||
animation-delay: -4s;
|
||||
animation-duration: 13s;
|
||||
}
|
||||
.parallax>use:nth-child(4){
|
||||
animation-delay: -5s;
|
||||
animation-duration: 20s;
|
||||
}
|
||||
@keyframes move-forever{
|
||||
0% {
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*---------- Responsive ----------*/
|
||||
@media (max-width:980px) {
|
||||
.logo-img{
|
||||
|
|
@ -403,6 +445,11 @@ ul{
|
|||
.footer-grid{
|
||||
display: block;
|
||||
}
|
||||
.footer-grid-1, .footer-grid-2{
|
||||
height: 50vh;
|
||||
padding-left: 50px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width:768px) {
|
||||
.nav-wrapper {
|
||||
|
|
@ -430,6 +477,10 @@ ul{
|
|||
.font-title{
|
||||
font-size: 40px;
|
||||
}
|
||||
.waves {
|
||||
height: 60px;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 450px){
|
||||
.hero-head{
|
||||
|
|
@ -473,11 +524,6 @@ ul{
|
|||
margin-top: 300px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.footer-grid-1, .footer-grid-2{
|
||||
height: 50vh;
|
||||
padding-left: 50px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
.footer-grid-1 a{
|
||||
color: #93B1A6;
|
||||
font-size: 30px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue