<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title>Kerala Tourism</title>

    <!-- Title Logo -->
    <link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />

    <!-- External CSS -->
    <link rel="stylesheet" href="css/style_districts2.css">

    <!-- Bootstrap extension -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
    <!-- NavBar -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-success">
        <div class="container">
            <a href="index.html">
                <img src="images/logo.jpg" width="70" height="70" class="d-inline-block align-top" alt="logo" loading="lazy"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <div class="col-lg"></div>
                    <li class="nav-item active">
                        <a href="index.html">
                            <svg width="2em" height="3em" viewBox="0 0 16 16" class="bi bi-house" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                                <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
                            </svg>
                        </a>
                    </li>
                    <div class="col-lg"></div>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="districts.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Districts
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="kasargod.html">Kasaragod</a>
                            <a class="dropdown-item" href="kannur.html">Kannur</a>
                            <a class="dropdown-item" href="wayanad.html">Wayanad</a>
                            <a class="dropdown-item" href="kozhikode.html">Kozhikode</a>
                            <a class="dropdown-item" href="malappuram.html">Malappuram</a>
                            <a class="dropdown-item" href="palakkad.html">Palakkad</a>
                            <a class="dropdown-item" href="thrissur.html">Thrissur</a>
                            <a class="dropdown-item" href="ernakulam.html">Ernakulam</a>
                            <a class="dropdown-item" href="idukki.html">Idukki</a>
                            <a class="dropdown-item" href="kottayam.html">Kottayam</a>
                            <a class="dropdown-item" href="pathanamthitta.html">Pathanamthitta</a>
                            <a class="dropdown-item" href="alappuzha.html">Alappuzha</a>
                            <a class="dropdown-item" href="kollam.html">Kollam</a>
                            <a class="dropdown-item" href="thiruvanathapuram.html">Thiruvananthapuram</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="districts.html">All Districts</a>
                        </div>
                    </li>
                    <div class="col-lg"></div><div class="col-lg-12"></div><div class="col-lg-7"></div>
                    <li class="nav-item">
                        <a class="nav-link" href="signup.html">SignUp</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="login.html">LogIn</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <a href="#">
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                        </svg>
                    </a>
                </form>
            </div>
        </div>
    </nav>
    <!-- /NavBar -->

    <!-- Content -->
    <div class="container margin">
        <h2>Welcome to Malappuram! An enchanting beauty of Nature’s creations.</h2><br>
        <div class="row">
            <p> Bounded by the Nilgiris hills on the East and the Arabian Sea on the west, the district of Malappuram literally the land atop the hills, is remarkable for its unique natural beauty. Perched among the undulating hills and the meandering rivers that flow to reach the coconut-fringed seacoast, the land conceals a unique and eventful history.
                The hill country also contributed much to the cultural artistic traditions of the state. The mosques and temples of the land are known for their spectacular festivals. The land of great poets and writers, political and religious leaders, the district has carved a unique place of its own in the history of Kerala

                Home to the khilafath movement and the mappila revolts, which questioned the British authority in India, Malappuram was the military headquarters of the zamorins of Kozhikode since ancient times.

                Malappuram District was formed on 16th of June 1969 with the Nilgiris of Tamilnadu in the east, Arabian sea in the west, Kozhikode and Wayanad Districts in the north and Palakkad and Thrissur District in the south. The District has a geographical area of 3550 sq. kms, which is 9.13% of total area of the state and ranks 3rd in the state.
            </p>
        </div>
    </div>

    <!-- Images -->
    <div class="container">
        <br>
        <h1 id="head">Explore Malappuram</h1>
        <div class="row">
            <div class="col-lg-1">
                <img src="images/malappuram/beach.jpg" alt="beach" height="200" width="200">
            </div>
            <div class="col-lg-2"></div>
            <div class="col-lg-1">
                <img src="images/malappuram/churam.jpg" alt="churam" height="200" width="200">
            </div>
            <div class="col-lg-2"></div>
            <div class="col-lg-1">
                <img src="images/malappuram/falls.jpg" alt="falls" height="200" width="200">
            </div>
            <div class="col-lg-2"></div>
            <div class="col-lg-1">
                <img src="images/malappuram/worship.jpg" alt="worship" height="200" width="200">
            </div>
        </div>
    </div>
    <br><br>
    <!-- /Images -->

    <!-- /Content -->

    <!-- Footer -->
    <nav class="navbar bottom navbar-expand-sm navbar-dark bg-info">
        <div class="col-lg-5"></div>
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-tags-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 7.586 1H3zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
            <path d="M1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"/>
        </svg>
        <a class="navbar-brand" href="index.html">KeralaTourism</a>
    </nav>
    <!-- /Footer -->
</body>
</html>