Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My project website for travel. #137

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

My project website for travel. #137

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions CSS-Frameworks/24BCS10265/project-travel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="https://cdn.tailwindcss.com"></script>
<link href='https://fonts.googleapis.com/css?family=Cinzel Decorative' rel='stylesheet'>
<script src="https://kit.fontawesome.com/52502200a5.js" crossorigin="anonymous"></script>
</head>
<body class="bg-gradient-to-r from-purple-500 to-pink-500">
<header class="Navigation-bar d-flex flex-row align-items-center justify-content-md-around font-sans bg-transparent text-orange-50 p-4 text-2xl">
<div class="display-4", style="font-family: 'Cinzel Decorative'">
Roam Around
</div>
<nav class="d-flex flex-row gap-3">
<a href="">Home</a>
<a href="">Places</a>
<a href="">Enjoy Life</a>
<a href="">Flights Available
</a>
</nav>
</header>

<div class="card d-flex flex-row p-4 border-warning" style="width: 100%; ">
<img src="https://www.google.com/url?sa=i&url=http%3A%2F%2Ft2.gstatic.com%2Flicensed-image%3Fq%3Dtbn%3AANd9GcSkUaN3A4v09Jdp242dKE8Gj2owDbUZVOX3u-CYftly60Xp9MW-E3gmf6-p4Ng7tUXT&psig=AOvVaw3tTFG0k6KEug7HETXZGb2n&ust=1728625481652000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCJipyPGNg4kDFQAAAAAdAAAAABAE" class="card-img-top h-25 w-50 p-3" alt="...">
<div class="card-body d-flex flex-column justify-content-md-evenly">
<h1 class="card-title display-4 font-sans" style="font-family: 'Cinzel Decorative'">Banff</h1>
<br>
<p class="card-text fs-6">
Banff National Park in Alberta, Canada is a popular tourist destination known for its natural beauty, wildlife, and outdoor activities:
<br>
<br>
<ul class="fs-6 d-flex flex-column justify-content-md-evenly gap-3">
<li>✨ Wildlife viewing: Spot wildlife in their natural habitat</li>
<li>✨ Winter sports: Hit the slopes and ice</li>
<li>✨ Art galleries: Discover galleries amidst the mountains</li>
<li>✨ Hot springs: Unwind in mineral-rich mountain waters</li>
<li>✨ Hiking: Hike to one of the many lakes or on the Columbia Icefield glacier walk </li>
<li>✨ Biking: Bike on the Columbia Icefield glacier walk</li>
<li>✨ Climbing: Climb on the Columbia Icefield glacier walk</li>
<li>✨ ATV riding: Go on an ATV ride to a hidden waterfall</li>
</ul>
</p>
<br>
<a href="#" class="btn bg-danger bg-gradient text-white">Visit Now</a>
</div>
</div>



<div class="card d-flex flex-row-reverse p-4 border-warning" style="width: 100%; ">
<img src="https://hips.hearstapps.com/hmg-prod/images/kuang-si-waterfall-royalty-free-image-1693283318.jpg?crop=0.99882xw:1xh;center,top&resize=980:*" class="card-img-top h-50 w-25 p-3" alt="...">
<div class="card-body d-flex flex-column justify-content-md-evenly">
<h1 class="card-title font-sans display-4" style="font-family: 'Cinzel Decorative'">Kuang Si Falls, Laos</h1>
<p class="card-text fs-5">
Set near the Mekong and Nam Khan rivers, the city of Luang Prabang is picture-perfect with its golden temples. Venture the 40-minute drive to Kuang Si Falls, and you'll find yourself in the midst of a vibrant jungle. The falls consist of three tiers, each with pools for taking in the view and wading in peace.
</p>
<br>
<a href="#" class="btn bg-danger bg-gradient text-white">Visit Now</a>
</div>
</div>




<div class="card d-flex flex-row p-4 border-warning" style="width: 100%; ">
<img src="https://hips.hearstapps.com/hmg-prod/images/hbz-venice-gettyimages-489741024-1505338894.jpg?crop=1xw:1xh;center,top&resize=980:*" class="card-img-top h-50 w-25 p-3" alt="...">
<div class="card-body d-flex flex-column justify-content-md-evenly">
<h1 class="card-title font-sans display-4" style="font-family: 'Cinzel Decorative'">Venice, Italy</h1>
<p class="card-text fs-5">
If traversing the canals with a be-striped gondolier sounds unbearably touristy, stick to the sidewalks and spectacular arched bridges to get your fill of this truly unique, wildly romantic floating city. Venice, the enchanting city of canals and romance, is a must-visit destination for travellers seeking to experience the charm of Italy. With its winding waterways, historic architecture, and rich cultural heritage, Venice offers a unique and unforgettable experience.
</p>
<br>
<a href="#" class="btn bg-danger bg-gradient text-white">Visit Now</a>
</div>
</div>

<footer class="p-5 text-white d-flex flex-column align-items-center justify-content-md-around">
<h1 class="display-5" style="font-family: 'Cinzel Decorative'">Contact Us</h1><br>
<img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2Flogo-instagram-social-media-png-free-download--869968852998457878%2F&psig=AOvVaw3mqgyAa_g1WWIQPNbHgGBo&ust=1728629520469000&source=images&cd=vfe&opi=89978449&ved=0CBEQjRxqFwoTCPii_fWcg4kDFQAAAAAdAAAAABAJ" alt="">
<a href=""><i class="fa-brands fa-instagram"></i> Instagram</a>
<a href=""><i class="fa-brands fa-facebook-f"></i> Facebook </a>
<a href=""><i class="fa-brands fa-whatsapp"></i>WhatsApp</a>
</ul>

<form>
<label >Name</label><br>
<input autofocus type="text"/><br>

<label>Email</label><br>
<input type="email"/><br>

<label for="phone">Phone</label><br>
<input type="number" id="phone"/><br>

<label for="message">Message</label><br>
<textarea name="message" id="message" required></textarea>
<br>
</form>
</footer>
</body>
</html>