-
Notifications
You must be signed in to change notification settings - Fork 0
/
house.html
146 lines (142 loc) · 6.1 KB
/
house.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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 2 beds 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> 250 reviews Response rate 100% 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>