Free Travel Website Template

Free Travel Template by w3

"W3.CSS Website Templates

We have created some responsive W3.CSS website templates for you to use.

You are free to modify, save, share, and use them in all your projects."

Source Code

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}

.myLink {display: none}

</style>

</div>

<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>

<h3>Travel the world with us</h3>

</div>

</div>

<p><button class="w3-button w3-dark-grey">Search and find dates</button></p>

</div>

<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>

<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>

<p><button class="w3-button w3-dark-grey">Search Availability</button></p>

</div>

</header>

<h3>Good Offers Right Now</h3>

<h6>Up to <strong>50%</strong> discount.</h6>

</div>

<span class="w3-display-bottomleft w3-padding">Cinque Terre</span>

</div>

</div>

<span class="w3-display-bottomleft w3-padding">San Francisco</span>

</div>

</div>

<span class="w3-display-bottomleft w3-padding">Paris</span>

</div>

<h3>Explore Nature</h3>

<p>Travel with us and see nature at its finest.</p>

</div>

<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>

<h3>Mountains, Austria</h3>

<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="w3-button w3-margin-bottom">Buy Tickets</button>

</div>

<h2>Get the best offers first!</h2>

<p>Join our newsletter.</p>

<button type="button" class="w3-button w3-red w3-margin-top">Subscribe</button>

</div>

<h2>Contact</h2>

<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: mail@mail.com<br>

<p><button class="w3-button w3-black w3-padding-large" type="submit">SEND MESSAGE</button></p>

</form>

</div>

</div>

</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>

// 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>

Search This Blog

Free Code Examples