diff --git a/hotel_booking/images/h.png b/hotel_booking/images/h.png deleted file mode 100644 index 775eed0..0000000 Binary files a/hotel_booking/images/h.png and /dev/null differ diff --git a/hotel_booking/images/home2.jpg b/hotel_booking/images/home2.jpg new file mode 100644 index 0000000..0d39830 Binary files /dev/null and b/hotel_booking/images/home2.jpg differ diff --git a/hotel_booking/images/home3.jpg b/hotel_booking/images/home3.jpg new file mode 100644 index 0000000..ee2e2ae Binary files /dev/null and b/hotel_booking/images/home3.jpg differ diff --git a/hotel_booking/images/home4.jpg b/hotel_booking/images/home4.jpg new file mode 100644 index 0000000..0b44cbe Binary files /dev/null and b/hotel_booking/images/home4.jpg differ diff --git a/hotel_booking/images/home5.jpg b/hotel_booking/images/home5.jpg new file mode 100644 index 0000000..7989fb5 Binary files /dev/null and b/hotel_booking/images/home5.jpg differ diff --git a/hotel_booking/images/logo.png b/hotel_booking/images/logo.png new file mode 100644 index 0000000..06f3707 Binary files /dev/null and b/hotel_booking/images/logo.png differ diff --git a/hotel_booking/images/single_room.jpg b/hotel_booking/images/single_room.jpg new file mode 100644 index 0000000..73fed8f Binary files /dev/null and b/hotel_booking/images/single_room.jpg differ diff --git a/hotel_booking/index.php b/hotel_booking/index.php index 0856e2b..9930206 100644 --- a/hotel_booking/index.php +++ b/hotel_booking/index.php @@ -4,9 +4,10 @@ Midtown Hotel | The best hotels & accommodations - + + @@ -14,6 +15,7 @@
+
@@ -35,7 +37,7 @@
-

Midtown Hotel

+

Midtown Hotel
@@ -57,10 +59,10 @@
-
+
- Midtown Hotel + Midtown Hotel
@@ -227,7 +229,7 @@
- +
@@ -239,8 +241,43 @@
-

Popular Rooms

-

Comfortably furnished smaller accommodation

+

Rooms

+

Comfortably furnished smaller accommodation

+
+
+
+
+ +
+
Single room
+

From $99 per night

+
+

Accommodation

+ Breakfast + Pools + Wellness & Spa +
+
+

Equipment

+ Air conditioning + Coffee & tea + Desk + Hairdryer + Television + Wi-Fi +
+
+ Book Now + More Details +
+
+
+
+
+ More +
+
+
@@ -264,6 +301,10 @@ body.classList.toggle('active'); } + + + + \ No newline at end of file diff --git a/hotel_booking/style.css b/hotel_booking/style.css index ae0bf28..cbc4ee8 100644 --- a/hotel_booking/style.css +++ b/hotel_booking/style.css @@ -2,8 +2,7 @@ font-family: "Lora", serif; } .logo-font{ - font-family: "Righteous", sans-serif; - color: white; + font-family: "Tangerine"; } a{ text-decoration: none !important; @@ -14,11 +13,51 @@ ul{ /*-Hero-*/ .hero { position: relative; - background: url('./images/home1.jpg') center/cover no-repeat; + /*background: url('./images/home1.jpg') center/cover no-repeat;*/ height: 100vh; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + width: 100%; + animation: slide 15s infinite; display: flex; flex-direction: column; } +@keyframes slide{ + 0%{ + background-image: url(images/home1.jpg); + } + 20%{ + background-image: url(images/home1.jpg); + } + 20.01%{ + background-image: url(images/home2.jpg); + } + 40%{ + background-image: url(images/home2.jpg); + } + 40.01%{ + background-image: url(images/home3.jpg); + } + 60%{ + background-image: url(images/home3.jpg); + } + 60.01%{ + background-image: url(images/home4.jpg); + } + 80%{ + background-image: url(images/home4.jpg); + } + 80.01%{ + background-image: url(images/home5.jpg); + } + 100%{ + background-image: url(images/home5.jpg); + } +} +.load{ + animation: slide 0.2s; +} .hero::before{ content: ""; position: absolute; @@ -143,6 +182,31 @@ 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; +} +.btn-main:hover, .btn-minor:hover{ + background-color: #625e5b; + color: white; +} +.btn-minor{ + background-color: #747264; + border: none; + color: white; + padding: 10px 20px; + text-align: center; + font-size: 14px; + border-radius: 3px; +} + +/*---Responsive---*/ @media (max-width:768px) { .nav-wrapper { padding: 30px; @@ -182,5 +246,3 @@ ul{ } - -