updated home page
This commit is contained in:
parent
1c598a66dd
commit
8355547cfd
6 changed files with 294 additions and 48 deletions
BIN
hotel_booking/images/presec1.jpg
Normal file
BIN
hotel_booking/images/presec1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
hotel_booking/images/presec2.jpg
Normal file
BIN
hotel_booking/images/presec2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
BIN
hotel_booking/images/presec3.jpg
Normal file
BIN
hotel_booking/images/presec3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,004 KiB |
|
|
@ -206,7 +206,7 @@
|
|||
<input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<label class="form-label" style="color: black; font-weight: 500;">Guests</label>
|
||||
<label class="form-label" style="color: black; font-weight: 500;">Adults</label>
|
||||
<select class="form-select" style="font-size: 14px;">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<label class="form-label" style="color: black; font-weight: 500;">Rooms</label>
|
||||
<label class="form-label" style="color: black; font-weight: 500;">Children</label>
|
||||
<select class="form-select" style="font-size: 14px;">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
|
|
@ -239,9 +239,42 @@
|
|||
</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">Midtown Hotel epitomizes comfort and service with spacious accommodation for you to enjoy every moment</h1>
|
||||
<a class="btn-th" href="#" style="margin-bottom: 10px;">Hotel</a>
|
||||
</div>
|
||||
<!--pre section2-->
|
||||
<div class="panel" data-color="khaki">
|
||||
<div class="swiper mySwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="./images/presec1.jpg"/>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./images/presec2.jpg"/>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./images/presec3.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pre-section2-container">
|
||||
<div class="pre-section2-wrapper">
|
||||
<div class="pre-section2-text">
|
||||
<p>Favorite hotel</p>
|
||||
<p>Find inspiration</p>
|
||||
<p>Experience the ultimate in luxury</p>
|
||||
<p>Discover the ultimate indulgence</p>
|
||||
<p>In the heart of Florida</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Rooms-->
|
||||
<div>
|
||||
<h3 class="mt-5 pt-4 text-center logo-font fw-bold" style="color:#776B5D; font-size: 56px; text-shadow: 2px 2px #EBE3D5;">Rooms</h3>
|
||||
<div class="panel" data-color="white">
|
||||
<h3 class="pt-4 text-center fw-bold logo-font" style="color: #776B5D; font-size: 56px; text-shadow: 2px 2px #EBE3D5;">Rooms</h3>
|
||||
<p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
|
@ -273,12 +306,71 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 text-center mt-5">
|
||||
<a href="" class="btn btn-sm btn-outline-dark rounded">More</a>
|
||||
|
||||
<div class="col-lg-4 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 300px; margin: auto;">
|
||||
<img src="./images/single_room.jpg" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #222831;">Single room</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-4 col-md-6 my-3">
|
||||
<div class="card shadow" style="max-width: 300px; margin: auto;">
|
||||
<img src="./images/single_room.jpg" class="card-img-top">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #222831;">Single room</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-5">
|
||||
<a href="" class="btn-th">More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -287,24 +379,9 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
const burgerLinks = document.querySelector('.burger-links');
|
||||
const burger = document.querySelector('.burger');
|
||||
const body = document.querySelector('body');
|
||||
|
||||
burgerButton = function()
|
||||
{
|
||||
burgerLinks.classList.toggle('active');
|
||||
burger.classList.toggle('active');
|
||||
body.classList.toggle('active');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
63
hotel_booking/script.js
Normal file
63
hotel_booking/script.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
//===== navbar =====//
|
||||
const burgerLinks = document.querySelector('.burger-links');
|
||||
const burger = document.querySelector('.burger');
|
||||
const body = document.querySelector('body');
|
||||
|
||||
burgerButton = function(){
|
||||
burgerLinks.classList.toggle('active');
|
||||
burger.classList.toggle('active');
|
||||
body.classList.toggle('active');
|
||||
}
|
||||
//===== pre section =====//
|
||||
function checkForVisibility() {
|
||||
var headers = document.querySelectorAll(".pre-header");
|
||||
headers.forEach(function(preheader) {
|
||||
if (isElementInViewport(preheader)) {
|
||||
preheader.classList.add("headerVisible");
|
||||
} else {
|
||||
preheader.classList.remove("headerVisible");
|
||||
}
|
||||
});
|
||||
}
|
||||
function isElementInViewport(el) {
|
||||
var rect = el.getBoundingClientRect();
|
||||
return (
|
||||
rect.top >= 0 &&
|
||||
rect.left >= 0 &&
|
||||
rect.bottom <=
|
||||
(window.innerHeight || document.documentElement.clientHeight) &&
|
||||
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||||
);
|
||||
}
|
||||
|
||||
if (window.addEventListener) {
|
||||
addEventListener("DOMContentLoaded", checkForVisibility, false);
|
||||
addEventListener("load", checkForVisibility, false);
|
||||
addEventListener("scroll", checkForVisibility, false);
|
||||
}
|
||||
//===== background color (jquery) =====//
|
||||
$(window).scroll(function() {
|
||||
var $window = $(window),
|
||||
$body = $('body'),
|
||||
$panel = $('.panel');
|
||||
var scroll = $window.scrollTop() + ($window.height() / 3);
|
||||
$panel.each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
|
||||
$body.removeClass(function (index, css) {
|
||||
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
|
||||
});
|
||||
$body.addClass('color-' + $(this).data('color'));
|
||||
}
|
||||
});
|
||||
}).scroll();
|
||||
//===== swiper =====//
|
||||
var swiper = new Swiper(".mySwiper", {
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
effect: "fade",
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
*{
|
||||
font-family: "Lora", serif;
|
||||
}
|
||||
.logo-font{
|
||||
font-family: "Tangerine";
|
||||
body{
|
||||
color: #000;
|
||||
background-color: #f4f4f4;
|
||||
transition: background-color 1s ease;
|
||||
}
|
||||
a{
|
||||
text-decoration: none !important;
|
||||
|
|
@ -10,6 +12,39 @@ a{
|
|||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
.logo-font{
|
||||
font-family: "Tangerine";
|
||||
}
|
||||
/*---Btn---*/
|
||||
.btn-main{
|
||||
background-color: #3C3633;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn-main:hover, .btn-minor:hover, .btn-th:hover{
|
||||
background-color: #625e5b;
|
||||
color: white;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.btn-minor{
|
||||
background-color: #747264;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn-th{
|
||||
border: 1px solid #747264;
|
||||
padding: 15px 35px;
|
||||
border-radius: 3px;
|
||||
color: black;
|
||||
}
|
||||
/*-Hero-*/
|
||||
.hero {
|
||||
position: relative;
|
||||
|
|
@ -182,31 +217,81 @@ ul{
|
|||
.burger-links.active {
|
||||
top: 0%;
|
||||
}
|
||||
/*---Room---*/
|
||||
.btn-main{
|
||||
background-color: #3C3633;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
/*-- pre section --*/
|
||||
.panel {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-main:hover, .btn-minor:hover{
|
||||
background-color: #625e5b;
|
||||
color: white;
|
||||
.color-khaki {
|
||||
background-color: #CBC0AF;
|
||||
}
|
||||
.btn-minor{
|
||||
background-color: #747264;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
.pre-header{
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: all 1.2s ease-out;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
font-size: 50px;
|
||||
margin-bottom: 50px;
|
||||
width: 50%;
|
||||
}
|
||||
.headerVisible{
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/*-- pre section2 --*/
|
||||
.pre-section2-container{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 350px;
|
||||
height: 400px;
|
||||
background-color:white;
|
||||
}
|
||||
.pre-section2-wrapper{
|
||||
width: 300px;
|
||||
height: 350px;
|
||||
border: 1px solid lightgray;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
.pre-section2-text{
|
||||
width: 300px;
|
||||
height: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
/*--Swiper--*/
|
||||
.swiper{
|
||||
width: 80%;
|
||||
height: 800px;
|
||||
}
|
||||
.swiper-slide{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-slide img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/*---Responsive---*/
|
||||
|
||||
/*---------- Responsive ----------*/
|
||||
@media (max-width:980px) {
|
||||
.pre-header{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width:768px) {
|
||||
.nav-wrapper {
|
||||
padding: 30px;
|
||||
|
|
@ -227,10 +312,12 @@ ul{
|
|||
.burger-links{
|
||||
display: flex;
|
||||
}
|
||||
.pre-header{
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 450px){
|
||||
.hero-head{
|
||||
margin-top: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.hero-title{
|
||||
|
|
@ -243,6 +330,25 @@ ul{
|
|||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.pre-header{
|
||||
font-size: 30px;
|
||||
}
|
||||
.pre-section2-container{
|
||||
width: 280px;
|
||||
height: 450px;
|
||||
}
|
||||
.pre-section2-wrapper{
|
||||
width: 230px;
|
||||
height: 400px;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
.pre-section2-text{
|
||||
width: 230px;
|
||||
height: 400px;
|
||||
}
|
||||
.swiper{
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue