Add files via upload

akay41024 · Jan 4, 2022 · 8dbb82c · 8dbb82c
1 parent 0eaedbd
commit 8dbb82c
Show file tree

Hide file tree

Showing 40 changed files with 1,320 additions and 0 deletions.
diff --git a/house.html b/house.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>House Details Page</title>
+    <!-- fontAwesome Script link  -->
+    <script src="https://kit.fontawesome.com/073a6056a7.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <nav id="navBar" class="navbar-white">
+        <a href="/index.html">
+            <img src="images/logo-red.png" class="logo">
+        </a>
+        <ul class="nav-links">
+            <li>
+                <a href="#" class="active">Popular Places</a>
+            </li>
+            <li>
+                <a href="house.html">Travel Outside</a>
+            </li>
+            <li>
+                <a href="listing.html">Online Packages</a>
+            </li>
+        </ul>
+        <a href="#" class="register-btn">Register Now</a>
+        <i class="fas fa-bars" onclick="togglebtn()"></i>
+    </nav>
+    <div class="house-details">
+        <div class="house-title">
+            <h1>Wenge House</h1>
+            <div class="row">
+                <div>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star-half-alt"></i>
+                    <i class="far fa-star"></i>
+                    <span>250 Reviews</span>
+                </div>
+                <div>
+                    <p>Location: San Francisco, Califonia, United States</p>
+                </div>
+            </div>
+        </div>
+        <div class="gallery">
+            <div class="gallery-img-1"><img src="images/house-1.png"></div>
+            <div><img src="images/house-2.png"></div>
+            <div><img src="images/house-3.png"></div>
+            <div><img src="images/house-4.png"></div>
+            <div><img src="images/house-5.png"></div>
+        </div>
+        <div class="small-details">
+            <h2>Entire rental unit hosted by Brandon</h2>
+            <p>2 guest &nbsp;&nbsp;&nbsp; 2 beds &nbsp;&nbsp; 1 bathroom</p>
+            <h4>$ 100 / day</h4>
+        </div>
+        <hr class="line">
+        <form class="check-form">
+            <div>
+                <label>Check-in</label>
+                <input type="text" placeholder="Add Date">
+            </div>
+            <div>
+                <label>Check-out</label>
+                <input type="text" placeholder="Add Date">
+            </div>
+            <div class="guest-field">
+                <label>Guest</label>
+                <input type="text" placeholder="2 guest">
+            </div>
+            <button type="submit">Check Availability</button>
+        </form>
+
+        <ul class="details-list">
+            <li><i class="fas fa-home"></i>Entire Home
+                <span>You will have the entire flat for you.</span>
+            </li>
+            <li><i class="fas fa-paint-brush"></i>Enhanced Clean
+                <span>This host has committed to staybnb's cleaning process.</span>
+            </li>
+            <li><i class="fas fa-map-marker-alt"></i>Great Location
+                <span>90% of recent guest gave the location a 5 star rating.</span>
+            </li>
+            <li><i class="fas fa-heart"></i>Great Check-in Experience
+                <span>100% of recent guest gave the check-in process a 5 star rating.</span>
+            </li>
+        </ul>
+        <hr class="line">
+        <p class="home-desc">Guest will be allocated on the ground floor according to availability. You get a
+            comfortable Two bedroom apartment has a true city feeling. The price quoted is for two guest, at the guest
+            slot please ark the number of guests to get the exect price for groups. The Guest will be allocated ground
+            floor according to availability. You get the comfortable tow bedroom apartment that has a true city feeling.
+        </p>
+        <hr class="line">
+        <div class="map">
+            <h3>Location on Map</h3>
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25234.33667649553!2d-122.4654113877805!3d37.75974893161535!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858099be62b323%3A0x6cffe7b6954fe44a!2sde%20Young%20Museum!5e0!3m2!1sen!2sin!4v1641320596510!5m2!1sen!2sin"
+                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+            <b>San Francisco, Califonia, United States</b>
+            <p>It's like a home away from home.</p>
+        </div>
+        <hr class="line">
+        <div class="host">
+            <img src="images/host.png">
+            <div>
+                <h2>Hosted by Brandon</h2>
+                <p>
+                    <span>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </span>&nbsp; &nbsp; 250 reviews &nbsp; &nbsp; Response rate 100% &nbsp; &nbsp; Response time: 60
+                    min
+                </p>
+            </div>
+        </div>
+        <a href="#" class="contact-host">Contact Host</a>
+    </div>
+    <div class="container">
+        <div class="footer">
+            <a href="https://facebook.com"><i class="fab fa-facebook-f"></i></a>
+            <a href="https://youtube.com"><i class="fab fa-youtube"></i></a>
+            <a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
+            <a href="https://linkdin.com"><i class="fab fa-linkedin-in"></i></a>
+            <a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
+            <hr>
+            <p>Copyright @ 2021, Aasif Khan Developer.</p>
+        </div>
+    </div>
+    <script>
+        var navBar = document.getElementById("navBar");
+        function togglebtn() {
+            navBar.classList.toggle("hidemenu");
+        }
+    </script>
+</body>
+
+</html>
diff --git a/images/arrow.png b/images/arrow.png
diff --git a/images/banner-2.png b/images/banner-2.png
diff --git a/images/banner.png b/images/banner.png
diff --git a/images/dubai.png b/images/dubai.png
diff --git a/images/host.png b/images/host.png
diff --git a/images/house-1.png b/images/house-1.png
diff --git a/images/house-2.png b/images/house-2.png
diff --git a/images/house-3.png b/images/house-3.png
diff --git a/images/house-4.png b/images/house-4.png
diff --git a/images/house-5.png b/images/house-5.png
diff --git a/images/image-1.png b/images/image-1.png
diff --git a/images/image-10.png b/images/image-10.png
diff --git a/images/image-15.png b/images/image-15.png
diff --git a/images/image-2.png b/images/image-2.png
diff --git a/images/image-3.png b/images/image-3.png
diff --git a/images/image-4.png b/images/image-4.png
diff --git a/images/image-5.png b/images/image-5.png
diff --git a/images/image-6.png b/images/image-6.png
diff --git a/images/image-7.png b/images/image-7.png
diff --git a/images/image-8.png b/images/image-8.png
diff --git a/images/image-9.png b/images/image-9.png
diff --git a/images/image-s1.png b/images/image-s1.png
diff --git a/images/image-s2.png b/images/image-s2.png
diff --git a/images/image-s3.png b/images/image-s3.png
diff --git a/images/image-s4.png b/images/image-s4.png
diff --git a/images/image-s5.png b/images/image-s5.png
diff --git a/images/image-s6.png b/images/image-s6.png
diff --git a/images/logo-red.png b/images/logo-red.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/new-delhi.png b/images/new-delhi.png
diff --git a/images/new-york.png b/images/new-york.png
diff --git a/images/paris.png b/images/paris.png
diff --git a/images/search.png b/images/search.png
diff --git a/images/story-1.png b/images/story-1.png
diff --git a/images/story-2.png b/images/story-2.png
diff --git a/images/story-3.png b/images/story-3.png
diff --git a/index.html b/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hotel Web page</title>
+    <!-- fontAwesome Script link  -->
+    <script src="https://kit.fontawesome.com/073a6056a7.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="header">
+        <nav id="navBar">
+            <a href="/index.html">
+                <img src="images/logo-red.png" class="logo">
+            </a>
+            <ul class="nav-links">
+                <li>
+                    <a href="#"class="active">Popular Places</a>
+                </li>
+                <li>
+                    <a href="house.html">Travel Outside</a>
+                </li>
+                <li>
+                    <a href="listing.html">Online Packages</a>
+                </li>
+            </ul>
+            <a href="#" class="register-btn">Register Now</a>
+            <i class="fas fa-bars"onclick = "togglebtn()"></i>
+        </nav>
+        <div class="container">
+            <h1>
+                Find Your Next Stay
+            </h1>
+            <div class="search-bar">
+                <form>
+                    <div class="location_input">
+                        <label>Location</label>
+                        <input type="text" placeholder="Where are you going?">
+                    </div>
+                    <div>
+                        <label>Check In</label>
+                        <input type="text" placeholder="Add Date">
+                    </div>
+                    <div>
+                        <label>Check Out</label>
+                        <input type="text" placeholder="Add Date">
+                    </div>
+                    <div>
+                        <label>Guest</label>
+                        <input type="text" placeholder="Add Guest">
+                    </div>
+                    <button type="submit"><img src="images/search.png"></button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <h2 class="sub-title">Exclusives</h2>
+        <div class="exclusives">
+            <div>
+                <img src="images/image-1.png">
+                <span>
+                    <h3>London</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-2.png">
+                <span>
+                    <h3>Switzerland</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-3.png">
+                <span>
+                    <h3>Austraila</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-4.png">
+                <span>
+                    <h3>France</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-5.png">
+                <span>
+                    <h3>Amsterdam</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-6.png">
+                <span>
+                    <h3>Netherlands</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-7.png">
+                <span>
+                    <h3>New Yark</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-8.png">
+                <span>
+                    <h3>Chicago</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-9.png">
+                <span>
+                    <h3>San Francisco</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+            <div>
+                <img src="images/image-10.png">
+                <span>
+                    <h3>Shanghal</h3>
+                    <p>Starts @ $250</p>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="sub-title">Trending Places</h2>
+        <div class="trending">
+            <div>
+                <img src="images/dubai.png">
+                <h3>Dubai</h3>
+            </div>
+            <div>
+                <img src="images/new-york.png">
+                <h3>New York</h3>
+            </div>
+            <div>
+                <img src="images/paris.png">
+                <h3>Paris</h3>
+            </div>
+            <div>
+                <img src="images/new-delhi.png">
+                <h3>New Delhi</h3>
+            </div>
+        </div>
+        <div class="cta">
+            <h3>Sharing <br> Is Earning Now</h3>
+            <p>Great opportunity to make by <br> sharing your extra space.</p>
+            <a href="#" class="cta-btn">Know More</a>
+        </div>
+
+        <h2 class="sub-title">Travellers Stories</h2>
+        <div class="stories">
+            <div>
+                <img src="images/story-1.png">
+                <p>Popular European countries with a budget of just $10,000</p>
+            </div>
+            <div>
+                <img src="images/story-2.png">
+                <p>Travaled more than 100 countries in less than a year</p>
+            </div>
+            <div>
+                <img src="images/story-3.png">
+                <p>Best experience you get while traveling to Thailand</p>
+            </div>
+        </div>
+        <a href="#" class="start-btn">Start making money</a>
+        <div class="about-msg">
+            <h2>About Staybnb</h2>
+            <p>Contrary to popular belief, Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum aliquid quaerat recusandae sapiente nulla eaque distinctio inventore asperiores laborum nam labore nobis, tempora, explicabo ea eius illo est, unde assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quis excepturi, assumenda illum quod animi in provident dicta optio voluptates voluptatibus quasi saepe fugit aut officia rem ipsum veritatis? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem nam sunt alias aperiam. Soluta ipsam provident atque nulla velit accusantium eligendi maiores nihil odit, laudantium ullam perferendis quo distinctio ab.</p>
+        </div>
+
+        <div class="footer">
+            <a href="https://facebook.com"><i class="fab fa-facebook-f"></i></a>
+            <a href="https://youtube.com"><i class="fab fa-youtube"></i></a>
+            <a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
+            <a href="https://linkdin.com"><i class="fab fa-linkedin-in"></i></a>
+            <a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
+            <hr>
+            <p>Copyright @ 2021, Aasif Khan Developer.</p>
+        </div>
+    </div>
+
+    <script>
+        var navBar = document.getElementById("navBar");
+        function togglebtn(){
+            navBar.classList.toggle("hidemenu");
+        }
+    </script>
+</body>
+</html>