diff --git a/hotel_booking/components/footer.php b/hotel_booking/components/footer.php new file mode 100644 index 0000000..ee0c879 --- /dev/null +++ b/hotel_booking/components/footer.php @@ -0,0 +1,49 @@ + \ No newline at end of file diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php new file mode 100644 index 0000000..fdc5df6 --- /dev/null +++ b/hotel_booking/components/header.php @@ -0,0 +1,169 @@ + +
+
+
+ +
+
+ + + +
+
+ +
+
+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/hotel_booking/components/link.php b/hotel_booking/components/link.php new file mode 100644 index 0000000..8d29287 --- /dev/null +++ b/hotel_booking/components/link.php @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/hotel_booking/components/script.php b/hotel_booking/components/script.php new file mode 100644 index 0000000..c878960 --- /dev/null +++ b/hotel_booking/components/script.php @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/hotel_booking/images/service_page2.jpg b/hotel_booking/images/service_page2.jpg new file mode 100644 index 0000000..bb1ac26 Binary files /dev/null and b/hotel_booking/images/service_page2.jpg differ diff --git a/hotel_booking/images/service_page3.jpg b/hotel_booking/images/service_page3.jpg new file mode 100644 index 0000000..7966442 Binary files /dev/null and b/hotel_booking/images/service_page3.jpg differ diff --git a/hotel_booking/index.php b/hotel_booking/index.php index 700e899..6a63f19 100644 --- a/hotel_booking/index.php +++ b/hotel_booking/index.php @@ -5,187 +5,14 @@ Midtown Hotel | The best hotels & accommodations - - - - - - +
- -
-
-
- -
-
- - - -
-
- -
-
- -
- - -
-
- - - - +
@@ -279,8 +106,8 @@

Comfortably furnished smaller accommodation

-
-
+
+
Standard rooms
@@ -308,8 +135,8 @@
-
-
+
+
Standard rooms
@@ -337,8 +164,8 @@
-
-
+
+
Standard rooms
@@ -365,6 +192,36 @@
+ +
+
+ +
+
Standard rooms
+

From $99 per night

+
+

Accommodation

+ Breakfast + Pools + Wellness & Spa +
+
+

Equipment

+ Air conditioning + Coffee & tea + Desk + Hairdryer + Television + Wi-Fi +
+ +
+
+
+ @@ -430,55 +287,11 @@
- - - - - - - - - - + - - + \ No newline at end of file diff --git a/hotel_booking/services.php b/hotel_booking/services.php new file mode 100644 index 0000000..b76aab7 --- /dev/null +++ b/hotel_booking/services.php @@ -0,0 +1,65 @@ + + + + + + + Midtown Hotel | Services + + + + +
+
+ +
+
+

Services and Facilities

+

Exceptional service - endless possibilities

+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/hotel_booking/style.css b/hotel_booking/style.css index 10db81c..bddf2ec 100644 --- a/hotel_booking/style.css +++ b/hotel_booking/style.css @@ -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;