-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtravel.html
200 lines (185 loc) · 8.23 KB
/
travel.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}
.myLink {display: none}
</style>
<body class="w3-light-grey">
<!-- Navigation Bar -->
<div class="w3-bar w3-white w3-border-bottom w3-xlarge">
<a href="#" class="w3-bar-item w3-button w3-text-red w3-hover-red"><b><i class="fa fa-map-marker w3-margin-right"></i>Logo</b></a>
<a href="#" class="w3-bar-item w3-button w3-right w3-hover-red w3-text-grey"><i class="fa fa-search"></i></a>
</div>
<!-- Header -->
<header class="w3-display-container w3-content w3-hide-small" style="max-width:1500px">
<img class="w3-image" src="/w3images/london2.jpg" alt="London" width="1500" height="700">
<div class="w3-display-middle" style="width:65%">
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Flight');"><i class="fa fa-plane w3-margin-right"></i>Flight</button>
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Hotel');"><i class="fa fa-bed w3-margin-right"></i>Hotel</button>
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Car');"><i class="fa fa-car w3-margin-right"></i>Rental</button>
</div>
<!-- Tabs -->
<div id="Flight" class="w3-container w3-white w3-padding-16 myLink">
<h3>Travel the world with us</h3>
<div class="w3-row-padding" style="margin:0 -16px;">
<div class="w3-half">
<label>From</label>
<input class="w3-input w3-border" type="text" placeholder="Departing from">
</div>
<div class="w3-half">
<label>To</label>
<input class="w3-input w3-border" type="text" placeholder="Arriving at">
</div>
</div>
<p><button class="w3-button w3-dark-grey">Search and find dates</button></p>
</div>
<div id="Hotel" class="w3-container w3-white w3-padding-16 myLink">
<h3>Find the best hotels</h3>
<p>Book a hotel with us and get the best fares and promotions.</p>
<p>We know hotels - we know comfort.</p>
<p><button class="w3-button w3-dark-grey">Search Hotels</button></p>
</div>
<div id="Car" class="w3-container w3-white w3-padding-16 myLink">
<h3>Best car rental in the world!</h3>
<p><span class="w3-tag w3-deep-orange">DISCOUNT!</span> Special offer if you book today: 25% off anywhere in the world with CarServiceRentalRUs</p>
<input class="w3-input w3-border" type="text" placeholder="Pick-up point">
<p><button class="w3-button w3-dark-grey">Search Availability</button></p>
</div>
</div>
</header>
<!-- Page content -->
<div class="w3-content" style="max-width:1100px;">
<!-- Good offers -->
<div class="w3-container w3-margin-top">
<h3>Good Offers Right Now</h3>
<h6>Up to <strong>50%</strong> discount.</h6>
</div>
<div class="w3-row-padding w3-text-white w3-large">
<div class="w3-half w3-margin-bottom">
<div class="w3-display-container">
<img src="/w3images/cinqueterre.jpg" alt="Cinque Terre" style="width:100%">
<span class="w3-display-bottomleft w3-padding">Cinque Terre</span>
</div>
</div>
<div class="w3-half">
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-half w3-margin-bottom">
<div class="w3-display-container">
<img src="/w3images/newyork2.jpg" alt="New York" style="width:100%">
<span class="w3-display-bottomleft w3-padding">New York</span>
</div>
</div>
<div class="w3-half w3-margin-bottom">
<div class="w3-display-container">
<img src="/w3images/sanfran.jpg" alt="San Francisco" style="width:100%">
<span class="w3-display-bottomleft w3-padding">San Francisco</span>
</div>
</div>
</div>
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-half w3-margin-bottom">
<div class="w3-display-container">
<img src="/w3images/pisa.jpg" alt="Pisa" style="width:100%">
<span class="w3-display-bottomleft w3-padding">Pisa</span>
</div>
</div>
<div class="w3-half w3-margin-bottom">
<div class="w3-display-container">
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%">
<span class="w3-display-bottomleft w3-padding">Paris</span>
</div>
</div>
</div>
</div>
</div>
<!-- Explore Nature -->
<div class="w3-container">
<h3>Explore Nature</h3>
<p>Travel with us and see nature at its finest.</p>
</div>
<div class="w3-row-padding">
<div class="w3-half w3-margin-bottom">
<img src="/w3images/ocean2.jpg" alt="Norway" style="width:100%">
<div class="w3-container w3-white">
<h3>West Coast, Norway</h3>
<p class="w3-opacity">Roundtrip from $79</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="w3-button w3-margin-bottom">Buy Tickets</button>
</div>
</div>
<div class="w3-half w3-margin-bottom">
<img src="/w3images/mountains2.jpg" alt="Austria" style="width:100%">
<div class="w3-container w3-white">
<h3>Mountains, Austria</h3>
<p class="w3-opacity">One-way from $39</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="w3-button w3-margin-bottom">Buy Tickets</button>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="w3-container">
<div class="w3-panel w3-padding-16 w3-black w3-opacity w3-card w3-hover-opacity-off">
<h2>Get the best offers first!</h2>
<p>Join our newsletter.</p>
<label>E-mail</label>
<input class="w3-input w3-border" type="text" placeholder="Your Email address">
<button type="button" class="w3-button w3-red w3-margin-top">Subscribe</button>
</div>
</div>
<!-- Contact -->
<div class="w3-container">
<h2>Contact</h2>
<p>Let us book your next trip!</p>
<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>
<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>
<i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]<br>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Email" required name="Email"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message" required name="Message"></p>
<p><button class="w3-button w3-black w3-padding-large" type="submit">SEND MESSAGE</button></p>
</form>
</div>
<!-- End page content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-center w3-opacity w3-margin-bottom">
<h5>Find Us On</h5>
<div class="w3-xlarge w3-padding-16">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>
<script>
// Tabs
function openLink(evt, linkName) {
var i, x, tablinks;
x = document.getElementsByClassName("myLink");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(linkName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
// Click on the first tablink on load
document.getElementsByClassName("tablink")[0].click();
</script>
</body>
</html>