commit 03b810d6179c3c17207d07a457ddaa7afcb04a22 Author: Juthatip McDevitt Date: Fri May 31 23:07:41 2024 -0500 initial commit diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..c82db33 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,10 @@ +# Use root/example as user/password credentials +version: '3.1' + +services: + db: + image: mysql + restart: always + environment: + MYSQL_ROOT_PASSWORD: example + # (this is just an example, not intended to be a production configuration) diff --git a/hotel_booking/images/h.png b/hotel_booking/images/h.png new file mode 100644 index 0000000..775eed0 Binary files /dev/null and b/hotel_booking/images/h.png differ diff --git a/hotel_booking/images/home1.jpg b/hotel_booking/images/home1.jpg new file mode 100644 index 0000000..b289da9 Binary files /dev/null and b/hotel_booking/images/home1.jpg differ diff --git a/hotel_booking/index.php b/hotel_booking/index.php new file mode 100644 index 0000000..0856e2b --- /dev/null +++ b/hotel_booking/index.php @@ -0,0 +1,269 @@ + + + + + + Midtown Hotel | The best hotels & accommodations + + + + + + + + + +
+ +
+
+
+ +
+
+ +

Midtown Hotel

+ +
+
+ +
+
+ +
+
+
+
+ Midtown Hotel +
+ +
+
+ +
+
+
+ +
+
+
+ + + + + +
+
+

Welcome to Midtown Hotel

+

Everything you can dream about, available here, start just $99 per night

+
+ +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+

Popular Rooms

+

Comfortably furnished smaller accommodation

+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/hotel_booking/style.css b/hotel_booking/style.css new file mode 100644 index 0000000..ae0bf28 --- /dev/null +++ b/hotel_booking/style.css @@ -0,0 +1,186 @@ +*{ + font-family: "Lora", serif; +} +.logo-font{ + font-family: "Righteous", sans-serif; + color: white; +} +a{ + text-decoration: none !important; +} +ul{ + list-style: none; +} +/*-Hero-*/ +.hero { + position: relative; + background: url('./images/home1.jpg') center/cover no-repeat; + height: 100vh; + display: flex; + flex-direction: column; +} +.hero::before{ + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 0; +} +.hero-content{ + height: 100vh; + display: flex; + flex-direction: column; + color: #fff; + z-index: 1; + justify-content: center; + align-items: center; + padding-left: 10px; + padding-right: 10px; +} +.hero-head{ + padding-left: 10px; + padding-right: 10px; + text-align: center; + margin-bottom: 30px; +} +.hero-title{ + font-size: 56px; + margin-bottom: 10px; + animation: fadeInUp 1s ease-in-out; +} +.hero-subtitle{ + font-size: 18px; + animation: fadeInUp 1s ease-in-out 0.5s; +} +@keyframes fadeInUp{ + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +/*--- Navbar ---*/ +.nav-parent{ + width: 100%; + position: fixed; + top: 0; + z-index: 3; +} +.nav-wrapper{ + display: flex; + justify-content: space-between; + align-items: center; +} +.nav-wrapper ul{ + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} +.nav-wrapper ul li a::after{ + content: ''; + display: flex; + width: 0%; + height: 2px; + transition: all .3s ease; +} +.nav-wrapper ul li a:hover::after { + width: 100%; +} +.nav-item .nav-link{ + color: white; +} +.nav-item .nav-link:hover{ + color: #B0A695; +} +.branding{ + display: none; +} +.burger { + display: none; + justify-content: space-between; + align-items: center; + flex-direction: column; + width: 50px; + height: 10px; +} +.burger.active .bar:nth-child(1) { + transform: rotate(45deg) translateY(6px); +} +.burger.active .bar:nth-child(2) { + transform: rotate(-45deg) translateY(-5px);; +} +.burger .bar { + width: 100%; + height: 2px; + background: white; + transition: all .3s ease; +} +.burger-links { + display: none; + justify-content: center; + align-items: center; + text-align: center; + font-size: 26px; + width: 100%; + height: 100vh; + position: fixed; + z-index: 2; + background: black; + top: -100%; + transition: all .3s ease; +} +.burger-links a{ + color: white; +} + +.burger-links.active { + top: 0%; +} +@media (max-width:768px) { + .nav-wrapper { + padding: 30px; + } + .nav-wrapper ul { + display: none; + } + .branding { + display: flex; + font-size: 28px; + } + .branding .logo-font:hover{ + color: #B0A695; + } + .burger{ + display: flex; + } + .burger-links{ + display: flex; + } +} +@media (max-width: 450px){ + .hero-head{ + margin-top: 100px; + margin-bottom: 10px; + } + .hero-title{ + font-size: 44px; + } + .hero-subtitle{ + font-size: 14px; + } + .row-form{ + padding-left: 10px; + padding-right: 10px; + } +} + + + +