Skip to content

Commit

Permalink
Added Responsive Travel Website
Browse files Browse the repository at this point in the history 
Added Responsive Travel Website developed using HTML, CSS and JS
  • Loading branch information
@anmolm07
anmolm07 authored Oct 30, 2021
1 parent b0df1d7 commit 5323249
Show file tree
Hide file tree
Showing 3 changed files with 431 additions and 0 deletions.
166 changes: 166 additions & 0 deletions Frontend-Projects/Responsive Travel Website/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<title>My first project</title>
<link rel="stylesheet" href="style.css">
<script>
function dropdownmenu()
{
var x=document.getElementById("drop");
if(x.className === "topbar")
{
x.className +=" responsive";
}
else
{
x.className="topbar";
}
}
</script>
</head>
<body>
<nav>
<ul class="topbar" id="drop">
<li><a href="#home">Home</a></li>
<li><a href="#home">about</a></li>
<li><a href="#home">news</a></li>
<li><a href="#home">content</a></li>
<li class="topbar-right"><a href="#home">sign in</a></li>
<li class="topbar-right"><a href="#home">sign up</a></li>
<li class="dropdown"><a href="javascript:void(0);" onclick="dropdownmenu()">&#9776</a></li>
</ul>
</nav>



<div class="contain first">
<div class="heading1">
<h1 class="heading1">NEVER LET YOUR MEMORIES GREATER THAN YOUR DREAMS</h1>
</div>
</div>
<header>
<h1 style="text-align: center;text-shadow: 2px 2px 5px black;">GET READY TO EXPLORE NEW PLACES</h1>
</header>

<div class="contain">
<div class="row">
<div class="col-4">
<div class="box">
<div class="imgresize">
<img src="https://blogs.forbes.com/alexcapri/files/2018/09/Singapore.jpg" class="imgatribute">
<h1>SINGAPORE</h1>
<p>Glimpse a different Singapore. The personal connections made on this itinerary promise that no two travellers will bring home the same experience.</p>
</div>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="imgresize">
<img src="https://pix10.agoda.net/geo/city/2994/1_2994_02.jpg?s=1920x822" class="imgatribute" >
<h1>DUBAI</h1>
<p>Whether you're looking for a relaxing beach holiday or to explore the many corners of the city, Dubai offers the best of both worlds.</p>
</div>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="imgresize">
<img src="https://www.roughguides.com/wp-content/uploads/2012/11/amalfi-italy-shutterstock_759048709.jpg" class="imgatribute">
<h1>ITLAY</h1>
<p>Where to go in Italy. Unless you're heading for a particular destination and staying put, you'll want to take some time to explore this alluring country.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="mybutton">SEE MORE</button>
</div>
</div>
</div>

<hr>
<header>
<h1 style="text-align: center;color: #009999;font-weight: 900;margin: 10px;text-shadow: 1px 1px 1px black;">WHY USE A TRAVEL ADVISOR ?</h1>
</header>
<div class="contain rows">
<div class="row">
<div class="col-12">
<div class="why">
<p>Planning a trip today can be confusing and time consuming. A travel advisor not only arranges the various modes of transportation, but may also be able to save you money with early booking discounts, special fares, hotel deals and travel advisories.</p>
</div>
</div>
</div>
<br>
<br>

<div class="row">
<div class="col-3">
<h1 class="why2h"> CONVENIENCE</h1>
<p class="why2">Instead of sifting through countless websites, guidebooks or post from your friends on social media, you deserve a hassle-free vacation planned by a professional, saving your valuable time.</p>
</div>
<div class="col-3">
<h1 class="why2h">SAVE MONEY</h1>
<p class="why2">Instead of sifting through countless websites, guidebooks or post from your friends on social media, you deserve a hassle-free vacation planned by a professional, saving your valuable time.</p>
</div>
<div class="col-3">
<h1 class="why2h">ATTENTION</h1>
<p class="why2">Travel advisors take pride in helping make your trip one-of-a-kind. When using online booking sites, you never know who to contact or where to get guidance from.Go to places you cannot google.</p>
</div>
<div class="col-3">
<h1 class="why2h">EXPERT ADVISE</h1>
<p class="why2">Travel advisors are educated travelers who know the world, they will guide you where you want to go. So take advantage of their expertise to help create your dream vacation. Explore.</p>
</div>
</div>
</div>
<br>
<br>
<footer class="footsy">
<div class="row one">
<div class="col-4">
<h1>ABOUT</h1>
<ul>
<li>Service Guarantee</li>
<li>News</li>
<li>Careers</li>
<li>Privacy Statements</li>
<li>Terms And Conditions</li>
</ul>
</div>
<div class="col-4">
<h1>Other Services</h1>
<ul>
<li>Investors Relations</li>
<li>Awards</li>
<li>Affiliated Programs</li>
<li>List My Hotels</li>
<li>All Hotels</li>
</ul>
</div>
<div class="col-4">
<h1>Contact Us</h1>
<ul>
<li>E-mail</li>
<li>Phone No.</li>
<li>Telephone No.</li>
<li>Website Feedback</li>
<li>Customer Support</li>
</ul>
</div>
</div>
<br>
<div class="row">
<div class="col-12">
<div style="text-align:center">
<p>Copyright © 2020 Trip.com Travel Singapore Pte. Ltd. All rights reserved</p>
</div>
</div>
</div>
<br>
<br>
</footer>



</body>
</html>
60 changes: 60 additions & 0 deletions Frontend-Projects/Responsive Travel Website/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
html {
background: #e6e9e9;
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
-webkit-font-smoothing: antialiased;
}

body {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
}

h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3;
}

h2 {
margin-top: 1.3em;
}

a {
color: #0083e8;
}

b, strong {
font-weight: 600;
}

samp {
display: none;
}

img {
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border: 10px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}

@keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
Loading

0 comments on commit 5323249

Please sign in to comment.