<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kollam/Kerala tourism</title>
    
    <link rel = "icon" href = 
"images and videos/logo.png" 
        type = "image/x-icon">

     <link rel="stylesheet" href="css/style.css" type="text/css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Stalemate&display=swap" rel="stylesheet">
</head>
<body class="background">
    
        
    
     



      <!-- --------------------------------------------------NAVBAR---------------------------------------------------------------------------- -->

       
        <header>
           <div class="nav-container">
             <nav class="navbar navbar-expand-lg navbar-light"style="position: fixed;width: 100%; background-color: rgba(0,0,0,0.8);font-weight:bold;z-index: 7;">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">
                     <img id="logo"src="images/logo.png">
                 </a>

                 <h1 style="color: white; margin-left: 20%;">Kollam</h1>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"style="color:white; background-color:rgba(100,100,100,0.8">
                   <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">

                   <ul class="navbar-nav mb-2 mb-lg-0" style="margin-left: auto;">

                     <li class="nav-item">
                       <a class="nav-link active" aria-current="page" style="color: rgb(236, 227, 227) ;font-size: 20px;padding-right: 50px;" href="index.html">Home</a>
                     </li>
                     <li class="nav-item">
                      <a class="nav-link" style="color: rgb(236, 227, 227);font-size: 20px;padding-right: 50px;" href="register.html">Register</a>
                    </li>

                     <li class="nav-item">
                       <a class="nav-link" style="color: rgb(236, 227, 227);font-size: 20px;padding-right: 50px;" href="about.html">About</a>
                     </li>

                     

                     

                     <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" style="color: rgb(236, 227, 227);font-size: 20px;padding-right: 50px;"href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Districts
                      </a>
                      <ul class="dropdown-menu scrollable-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="Kasargod.html">Kasargod</a></li>
                        <li><a class="dropdown-item" href="kannur.html">Kannur</a></li>
                        <li><a class="dropdown-item" href="wayanad.html">Wayanad</a></li>
                        <li><a class="dropdown-item" href="kozhikod.html">Kozhikod</a></li>
                        <li><a class="dropdown-item" href="malapuram.html">Malapuram</a></li>
                        <li><a class="dropdown-item" href="palakkad.html">Palakkad</a></li>
                        <li><a class="dropdown-item" href="thrissur.html">Thrissur</a></li>
                        <li><a class="dropdown-item" href="Ernakulam.html">Ernakulam</a></li>
                        <li><a class="dropdown-item" href="idukki.html">Idukki</a></li>
                        <li><a class="dropdown-item" href="kottayam.html">Kottayam</a></li>
                        <li><a class="dropdown-item" href="alapuzha.html">Alappuzha</a></li>
                        <li><a class="dropdown-item" href="pathanamthitta.html">Pathanamthitta</a></li>
                        <li><a class="dropdown-item" href="kollam.html">Kollam</a></li>
                        <li><a class="dropdown-item" href="thiruvananthapuram.html">Thiruvananthapuram</a></li>
                      </ul>
                    </li>

                     
       
                   </ul>
                   
                  </div>
               </div>
             </nav>
             </div>    
         </header>
         <!-- ------------------------------navbar-------------------------------- -->
         

    <section>
        <div class="container" style=" padding-top: 10%;">
            <div class="row">
                <div class="col-md-8">
                    
                    <img src="https://img.traveltriangle.com/blog/wp-content/uploads/2018/04/Jatayu%E2%80%99s-Earth-Centre-kollam-kb6592.jpg" alt="bird sanctuary" width="50%" align="left"style="margin-right:10px">
                
                    
                    <p>The spectacular places to see in Kollam are so diverse that it’s arduous to explore all at one go. Adored with sea, 
                      lakes, plains, mountains, rivers, backwaters, forest, vast green fields, etc this city has been on the route map for a breath-easy vacation. 
                      Kollam is a place that will fascinate you with its picturesque beauty, spectacular landscape,  culture and tradition.<br><br>

                      Travel the utopian stretches of cashew and spices plantation in Kollam or visit the biggest seaport of Kollam, 
                      Neendakara Port where you can experience fishing.  For sunsets and cruising, head to Ashtamudi lake. 
                      Ashtamudi Lake houses this beautiful city on its bank, and it is the starting point for most of the tourists.
                       If the thrill is what entices you, then set out for Thangassery LightHouse to experience scuba diving and surfing. 
                        
    
                    </p>
                </div>
                <div class="col-md-4">
                    <div style="background-color: rgba(0,0,0,0.3);margin-top: 2%;margin-bottom: 8%;padding: 5%;width: fit-content; margin-left: 18%;font-size: 20px;border:2px solid thistle; border-radius: 2%;">
                        <h3 style="text-align:center">Things to do</h3>
                        <ul>
                            
                            <li>Canoeing</li>
                            <li>Paragliding</li>
                            <li>Water sports</li>
                            <li>Boating</li>
                            <li>Know the villege</li>
                            <li>Kite flying</li>
                            <li>Horse riding</li>
                            
                            
                           

                    </div>
    
                </div>

                </div>
            </div>
        </div>
    </section>
    


        <!-- --------------------------attractions------------------------------------- -->

        <div class="container" style="padding-top:5%;color:black">
            <h2 style="color: black;">Major attractions</h2>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card-group">
                        <div class="card">
                            <img src="https://www.tourmyindia.com/states/kerala/images/ashtamudi-beach-kollam-3.jpg"
                                class="card-img-top"style="height:240px;" alt="Ashtamudi lake">
                                <div class="card-body" style="height: 210px;">
                                <h5 class="card-title">Ashtamudi lake</h5>
                                <p class="card-text">Ashtamudi lake has eight branches that coincide with the Arabian sea after converging into one channel,
                                   hence the name Ashtamudi, where Ashta means eight and mudi means branch.

                                  Beautifying the banks of this lake, palm and coconut trees, intensifies the fascinating experience of calm and lush green waterways.
                                  
                                    </p>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted"><a style="text-decoration: none; color:black;" href="https://www.google.com/maps/place/Ashtamudi+Lake/@8.9551586,76.5658614,13z/data=!3m1!4b1!4m5!3m4!1s0x3b05fdbb69f5a623:0xa28e3beb592ce94b!8m2!3d8.9591853!4d76.5777203"><i class="fas fa-map-marker-alt"></i> Visit</a></small>
                            </div>
                        </div>
            
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card-group">
                        <div class="card">
                            <img src="https://en-media.thebetterindia.com/uploads/2015/12/jatayu_f.png"
                                class="card-img-top" style="height:240px;"alt="Jatayu statue">
                                <div class="card-body" style="height: 210px;">
                                <h5 class="card-title">Jatayu Earth's center</h5>
                                <p class="card-text">You will certainly get mesmerised with Kollam’s latest tourist attraction, the Jatayu Earth’s Center that hosts the world’s largest bird sculpture. 
                                  Spanning over 65 acres across four hills, this is the State’s first ever BOT (Build-Operate-Transfer) tourism.
                                    </p>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted"><a style="text-decoration: none; color:black;" href="https://www.google.com/maps/place/Jatayu+Earth's+Center/@8.8606137,76.8647999,17z/data=!3m1!4b1!4m5!3m4!1s0x3b05ddd5ea2b9599:0x77a24d56f5a90c70!8m2!3d8.8606137!4d76.8669886"><i class="fas fa-map-marker-alt"></i> Visit</a></small>
                            </div>
                        </div>
            
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card-group">
                        <div class="card">
                            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/84/01/54/pc-rramanarayanan.jpg"
                                class="card-img-top" style="height:240px;"alt="Palaruvi falls">
                                <div class="card-body" style="height: 210px;">
                                <h5 class="card-title">Palaruvi falls</h5>
                                <p class="card-text">The whitestream waterfall descending from the height of 300ft resembles the shape of a horse’s tail.

                                  The stream of milk names the cascade as Palaruvi, which rushes down the mountain, giving a glorious view and is one of the top places to visit in Kollam. 
                                    </p>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted"><a style="text-decoration: none; color:black;" href="https://www.google.com/maps/place/Pazhayangadi+Sunni+Masjid/@11.1489111,75.9599206,17z/data=!3m1!4b1!4m5!3m4!1s0x3ba64f1c471d632d:0x7e7719dce208d2c8!8m2!3d11.1489111!4d75.9621093"><i class="fas fa-map-marker-alt"></i> Visit</a></small>
                            </div>
                        </div>
            
                    </div>
                </div>
            </div>
        
        
        </div>

         <!-- --------------------------------------FOOTER-------------------------  -->
    <footer class="footer">
        <div class="details">
          <div class="container pt-4 pb-4 pl-4 "style="margin-top:3rem;">
            <div class="row">
              <div class="col-md-3">
                <h5><i class="fas fa-globe"></i> Links</h5>
                <a href="">About us</a><br>
                <a href="">Careers</a>
                
              </div>
  
              <div class="col-md-3">
                <h5><i class="fas fa-map-marker-alt"></i> Nearby places to visit</h5>
                <a href="">Coorg,Karnataka</a><br>
                <a href="">Ooty,Tamilnadu</a><br>
                <a href="">Kodaikanal,Tamilnadu</a><br>
                <a href="">Pondicheri,Tamilnadu</a>
                
              </div>
              <div class="col-md-3">
                <h5><i class="fas fa-address-book"></i> Contact</h5>
                <p>Department of Tourism<br>
                Park View,Thiruvananthapuram<br>
              Phone:+91 471 2322279<br>
            E-mail:<a href="https://accounts.google.com/ServiceLogin/identifier?service=mail&passive=1209600&osid=1&continue=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&followup=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&emr=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin">info@keralatourism.org</a></a></p>
                
              </div>
  
              <div class="col-md-3">
                <h5><i class="fas fa-wifi"></i> Connect us</h5>
                &nbsp;&nbsp;<a href=""><i class="fab fa-facebook-square"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=""><i class="fab fa-instagram-square"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=""><i class="fab fa-twitter-square"></i></a>
              </div>
            
            </div>
          </div>
          
        </div>
        <div class="copyright">
          <p>Copyright © 2021 Pt. Ltd. All rights reserved</p>
        </div>
      </footer>
      
  
  
    <script src="https://kit.fontawesome.com/86d99ca6c5.js" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>  
  </body>
  </html>