Notes
Notes - notes.io |
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kerala Tourism</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<style>
.d-block {
height: 500px;
}
@media only screen and (max-width:600px) {
.d-block {
height: 500px;
max-width:100%;
}
.carousel-item img{
width:100%;
}
html {
margin: 0;
padding: 0;
width: 100% !important;
height:100%;
}
.item {
width: 100%;
}
.cards {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
margin: 0px;
}
.card {
width: 100%;
}
.navbar{
background-color:rgb(23, 23, 143);
}
}
.card img {
width:400px;
height:200px;
}
* {
box-sizing: border-box;
font-family: ’Lato’, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
background-color: #555;
color: #bbb;
line-height: 1.5;
}
footer a {
text-decoration: none;
color: #eee;
}
a:hover {
text-decoration: underline;
}
.ft-title {
color: #fff;
font-family: ’Merriweather’, serif;
font-size: 1.375rem;
padding-bottom: 0.625rem;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.container {
flex: 1;
/* same as flex-grow: 1; */
}
.ft-main {
padding: 1.25rem 1.875rem;
display: flex;
flex-wrap: wrap;
}
.ft-main-item {
padding: 1.25rem;
min-width: 12.5rem
/*200px*/
;
}
@media only screen and (min-width: 29.8125rem
/*477px*/
) {
.ft-main {
justify-content: space-around;
}
}
@media only screen and (min-width: 77.5rem
/*1240px*/
) {
.ft-main {
justify-content: space-evenly;
}
}
form {
display: flex;
flex-wrap: wrap;
}
input[type="email"] {
border: 0;
padding: 0.625rem;
margin-top: 0.3125rem;
}
input[type="submit"] {
background-color: #0042d1;
color: #fff;
cursor: pointer;
border: 0;
padding: 0.625rem 0.9375rem;
margin-top: 0.3125rem;
}
.ft-social {
padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
display: flex;
justify-content: center;
border-top: 1px #777 solid;
padding-top: 1.25rem;
}
.ft-social-list li {
margin: 0.5rem;
font-size: 1.25rem;
}
.ft-legal {
padding: 0.9375rem 1.875rem;
background-color: #333;
}
.ft-legal-list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.ft-legal-list li {
margin: 0.125rem 0.625rem;
white-space: nowrap;
}
/* one before the last child */
.ft-legal-list li:nth-last-child(2) {
flex: 1;
/* same as flex-grow: 1; */
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 15px;
row-gap: 20px;
}
.accordion {
margin: 15px;
}
.navbar {
background-color:rgb(23, 23, 143);
}
.nav-link{
color:#fff;
font-size:medium;
}
.navbar-nav{
display:flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:flex-end;
}
.card-title{
font-weight: bolder;
}
</style>
</head>
<header>
<nav class="navbar navbar-expand-sm fixed-top ">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="color:#fff">Tourism</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item px-5 ">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item px-5 ">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item px-5 ">
<a class="nav-link" href="#">Our Packages</a>
</li>
<li class="nav-item dropdown px-5 ">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Locations
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Munnar</a></li>
<li><a class="dropdown-item" href="#">Kochi</a></li>
<li><a class="dropdown-item" href="#">Padmanabha swamy Temple</a></li>
</ul>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="#">Hotels and Accomodations</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="#">Booking</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<br>
<div>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://th.bing.com/th/id/R.6b7c1adb8705d0a8c85a3ba0de712954?rik=mjBbYnFE2tFOdw&riu=http%3a%2f%2fwww.visittnt.com%2fblog%2fwp-content%2fuploads%2f2015%2f08%2fkerala_backwater.jpg&ehk=mdoYiy%2bIMnNmz9DD2qc5IeueHAUPKs5c0uNh97%2foTCo%3d&risl=&pid=ImgRaw&r=0z" class="d-block w-100"
alt="...">
<div class="carousel-caption d-md-block">
<h5>Houseboating In Kerala - Glide Through The Backwaters In Kerala</h5>
<p>Sauntering down placid stretches of waters on exotic wooden boats is a quintessential experience once you have set foot in Kerala</p>
</div>
</div>
<div class="carousel-item">
<img src="https://th.bing.com/th/id/R.9a0c20a5aa5858051de8934819a9480d?rik=eZOcwkvuhJXYkA&riu=http%3a%2f%2fblog.raynatours.com%2fwp-content%2fuploads%2f2017%2f02%2fHill-station-in-Munnar.jpg&ehk=Rs37Yz0zJwngemmKUPI%2fjD45a%2f3BpMkFnCcqDWo%2bEFM%3d&risl=&pid=ImgRaw&r=0"
class="d-block w-100" alt="...">
<div class="carousel-caption d-md-block">
<h5>Munnar-breathtakingly beautiful,a haven of peace and tranquility - the idyllic tourist destination in God's own country</h5>
<p>Unending expanse of tea plantations - pristine valleys and mountains- exotic species of flora and fauna in its wild sanctuaries and forests - aroma of spice scented cool air - yes! Munnar has all these and more. .</p>
</div>
</div>
<div class="carousel-item">
<img src="https://keralatourism.travel/images/destinations/headers/trivandrum-kerala-tourism-entry-fee-timings-holidays-reviews-header.jpg"
class="d-block w-100" alt="...">
<div class="carousel-caption d-md-block">
<h5>Experience the mystic self-transcendence..</h5>
<p>Located inside the East Fort in Thiruvananthapuram, the capital city of the State of Kerala in India is the Sree Padmanabha Swamy Temple dedicated to Lord Vishnu. </p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div style="text-align: center;margin-top: 15px;">
<strong style="font-size:xx-large; color: darkblue;">Our destinations</strong>
</div>
<div class="cards">
<div class="card" style="width: 400px">
<img src="https://t-cf.bstatic.com/xdata/images/city/square250/684572.webp?k=f74af2be72834d9953c8096834db666c7769c5f6c1ba230d6fe5591ba84dd33d&o=" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Cochin</h5>
<p class="card-text">Kochi, also known as Cochin is a major port city on the Malabar Coast of India bordering the Laccadive Sea, which is a part of the Arabian Sea. It is part of the district of Ernakulam in the state of Kerala and is commonly referred to as Ernakulam.</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card" style="width: 400px;">
<img src="https://t-cf.bstatic.com/xdata/images/city/square250/684720.webp?k=fdb1d9397eeb9b17d4a1ef6fdf806e6b4366d5ebda38d7f0c212b9c1bec8dcea&o=" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Munnar</h5>
<p class="card-text">Munnar is a town and hill station in the Idukki district of the southwestern Indian state of Kerala. Munnar is situated at around 1,600 metres above mean sea level, in the Western Ghats mountain range. Munnar is also called the "Kashmir of South India" </p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card" style="width: 400px">
<img src="https://t-cf.bstatic.com/xdata/images/city/square250/684514.webp?k=94a24874ade1e734dd61fa72b85a246a86a682b1e6e8a0e257cf82ad151ed1f0&o=" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Alleppey</h5>
<p class="card-text">Alappuzha or Alleppey is the administrative headquarters of Alappuzha district in state of Kerala, India. The Backwaters of Alappuzha are one of the most popular tourist attractions in India which attracts millions of domestic and international tourists</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card" style="width: 400px;">
<img src="https://t-cf.bstatic.com/xdata/images/city/square250/684913.webp?k=fd159ccd48ef300cad92ad2642f0420b13cff5366e9c9bb7dcf4d935314c1fc6&o=" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Trivandrum</h5>
<p class="card-text">Thiruvananthapuram, the charming capital city of God’s Own Country is a must visit place in Kerala. Thiruvananthapuram is the centre of political activities of the state. Thiruvananthapuram is also called as the ‘Abode of Lord Anantha Padmanabha Swamy’.</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card" style="width: 400px;">
<img src="https://t-cf.bstatic.com/xdata/images/city/square250/900032.webp?k=f47c4d5159bf1986a19a832c2ee17a5f3a446d9fd3a22aa603432bd02e666681&o=" alt="...">
<div class="card-body">
<h5 class="card-title">Kozhikode</h5>
<p class="card-text">Kozhikode is situated in southern India between the Western Ghats and the Arabian Sea, Kozhikode has been attracting travelers from antiquity. The city is also known by its Anglicized name, Calicut..</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card" style="width: 400px;">
<img src="https://t-cf.bstatic.com/xdata/images/city/square250/724873.webp?k=7535c646a0d1a8bee06c1b195050e87b7439a52bf953af204763997aeef32b55&o=" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Varkala</h5>
<p class="card-text">Varkala is a major coastal municipality situated in the Kollam Metropolitan Area, in the Indian state of Kerala. It also has one of the most iconic beaches in the country the Varkala Cliff Beach, where people across the globe visits.</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
</div>
<div style="text-align:center; color: darkblue; font-size: xx-large;">
<strong>Frequently Asked Questions</strong>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
How do I make reservation for particular packages shown in your website?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
For reservations, kindly forward us an email to [email protected] or [email protected] , clearly mentioning the exact travel date (date of your arrival in kerala) & the code of the package. If you require a customized package, other than what is published in the website, you can send us an email with your requirements
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Do you operate group tours?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Yes , we do operate group tours.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Is there any fixed date for the packages?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
There are no fixed dates for the packages. The Exclusive packages are operated according to the arrival date of the guest
</div>
</div>
</div>
</div>
<footer>
<section class="ft-main">
<div class="ft-main-item">
<h2 class="ft-title">About</h2>
<ul>
<li><a href="#">Information</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Terms and Coditions</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Resources</h2>
<ul>
<li><a href="#">Resorts and Accomodations</a></li>
<li><a href="#">Trecking</a></li>
<li><a href="#">Single Booking</a></li>
<li><a href="#">Group Booking</a></li>
<li><a href="#">Boating</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Contact</h2>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Stay Updated</h2>
<p>Subscribe to our newsletter to get our latest news.</p>
<form>
<input type="email" name="email" placeholder="Enter email address">
<input type="submit" value="Subscribe">
</form>
</div>
</section>
<!-- Footer social -->
<section class="ft-social">
<ul class="ft-social-list">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-github"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</section>
<!-- Footer legal -->
<section class="ft-legal">
<ul class="ft-legal-list">
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li>© 2019 Copyright Nowrap Inc.</li>
</ul>
</section>
</footer>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
