0byt3m1n1
Path:
C:
/
wamp64
/
www
/
WaterCat
/
[
Home
]
File: indexnew.php
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WATER CLINIC</title> <link rel="shortcut icon" href="assets/images/fav.png" type="image/x-icon"> <link rel="shortcut icon" href="assets/images/fav.jpg"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="assets/plugins/testimonial/css/owl.carousel.min.css"> <link rel="stylesheet" href="assets/plugins/testimonial/css/owl.theme.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <link rel="stylesheet" href="assets//css/animate.min.css"> <style> .signup-button, .admin-button, .faq-button, .dropbtn { margin: 5px; display: block; background-color: #71d17e;/* Ensure buttons are visible */ } .square-image { width: 100%; height: auto; max-height: 200px; /* Set the maximum height of the image as per your requirement */ object-fit: cover; /* Ensure the image covers the entire container */ } .bt{ background-color: #3498DB; color: white; padding: 15px; font-size: 16px; border: none; cursor: pointer; font-weight: bold; } .slider-container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Adjust to your needs */ } .slider-image { top: 0; left: 0; max-width: 100%; max-height: 100%; object-fit: cover; /* Ensure the image covers the entire container */ transition: opacity 0.5s ease; /* Smooth transition effect */ } .water-clinic-title { color: blue; position: relative; left: -200px; letter-spacing: 5px; font-family: Brush Script MT; text-align: center; font-weight: bold;/* To replicate <b> tag */ } .dropbtn { color: black; padding: 15px; font-size: 16px; border: none; cursor: pointer; font-weight: bold; float: right; margin-right: 20px; margin-top: 10px; padding:10px 5px; /* px-4 py-2 */ border-radius: 5px; background-color: #71d17e; } .dropbtn:hover, .dropbtn:focus { background-color: #71d17e; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .containers { text-align: center; } .water-image { position: absolute;/* Display as inline-block */ margin: 5px; /* Adjust margin as needed */ width: 20px; /* Adjust width as needed */ height: 30px; right: 10px; /* Maintain aspect ratio */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .cover img { width: 100%; /* Ensure the image fills its container */ height: auto; /* Maintain aspect ratio */ max-width: 100%; /* Ensure the image doesn't exceed its container's width */ max-height: 150px; /* Set a maximum height for the images */ } .dropdown a:hover {background-color: #ddd;} .show {display: block; } .signup-button { float: right; margin-right: 20px; margin-top: 20px; background-color: #71d17e; } .admin-button { float: right; margin-right: 20px; margin-top: 20px; background-color: #71d17e; } .faq-button { float: right; margin-right: 20px; margin-top: 10px; background-color: #71d17e; } .logo { width: 110px; height: 100px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 10px; /* Adjust right position as needed */ } .logos { width: 80px; height: 80px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ left: 10px; /* Adjust right position as needed */ } .logonwo { width: 70px; height: 70px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 10px; /* Adjust right position as needed */ } .dst { width: 120px; height: 90px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 100px; /* Adjust right position as needed */ } /* Styles for the top-left section */ .top-left { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; /* Change the flex-direction to column */ align-items: flex-start; /* Align the logo and text to the top-left corner */ margin-bottom: 30px; /* Add spacing between the top-left section and other content */ } /* Styles for the text below the logo */ .align-right { margin-right: 10px; color: #0345fc; font-size: 25px; margin-top: 5px; /* Add some spacing between the logo and text */ text-align: left; } footer { margin-top: -5px; /* Adjust this value to add space between the footer and the content above it */ padding-top: 10px; /* Adjust this value to add space inside the footer */ } .copy { margin-top: 10px; /* Adjust this value to add space between the footer and the content below it */ } /* For smaller devices (e.g., smartphones) */ @media screen and (max-width: 576px) { .top-left { flex-direction: column; /* Change layout to column */ align-items: center; /* Center align logo and text */ margin-bottom: 20px; /* Adjust margin */ } .water-clinic-title { color: blue; position: relative; left: 50%; /* Center horizontally */ transform: translateX(-50%); /* Move back by 50% of its own width */ font-family: Times New Roman; font-size: 24px; /* Adjust font size as needed */ font-weight: bold; /* To replicate <b> tag */ text-align: center; /* Center align text */ margin-bottom: 10px; /* Add some space below the title */ } .water-image { position: absolute;/* Display as inline-block */ margin: 5px; /* Adjust margin as needed */ width: 90px; /* Adjust width as needed */ height: 90px; right: 10px; /* Maintain aspect ratio */ } .align-right { margin-top: 10px; /* Increase spacing */ text-align: center; /* Center align text */ } .signup-button, .admin-button, .faq-button, .dropbtn { margin: 5px; display: block; /* Ensure buttons are visible */ } /* Additional styles for faq-button and dropbtn */ .faq-button, .dropbtn { float: left; /* Float them to the right */ margin-top: 5px; margin-left: 20px; /* Adjust margin-top as needed */ } /* Dropdown styling */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 100px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; right: 0; /* Ensure the dropdown content appears aligned with the dropdown button */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .show { display: block; } footer { margin-top: -5px; /* Adjust this value to add space between the footer and the content above it */ padding-top: 10px; /* Adjust this value to add space inside the footer */ } .copy { margin-top: 10px; /* Adjust this value to add space between the footer and the content below it */ } } /* For medium devices (e.g., tablets) */ @media screen and (min-width: 577px) and (max-width: 992px) { .top-left { margin-bottom: 25px; /* Adjust margin */ } .containers { text-align: center; } .water-image { display: inline-block; /* Display as inline-block */ margin: 5px; /* Adjust margin as needed */ width: 50px; /* Adjust width as needed */ height: 30px; /* Maintain aspect ratio */ } .align-right { font-size: 20px; /* Decrease font size */ margin-top: 10px; /* Adjust margin */ } .signup-button, .admin-button , { /* Remove float */ margin:5px; /* Center align */ } .faq-button { float: right; margin-right: 20px; margin-top: 10px; } .dropbtn { color: black; padding: 15px; font-size: 16px; border: none; cursor: pointer; font-weight: bold; float: right; margin-right: 20px; margin-top: 10px; padding:10px 5px; /* px-4 py-2 */ border-radius: 5px; background-color: #007bff; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .water-clinic-title { color: blue; position: relative; left: 50%; /* Center horizontally */ transform: translateX(-50%); /* Move back by 50% of its own width */ font-family: Times New Roman; font-size: 24px; /* Adjust font size as needed */ font-weight: bold; /* To replicate <b> tag */ text-align: center; /* Center align text */ margin-bottom: 10px; /* Add some space below the title */ } .slider-image { top: 0; left: 0; max-width: 100%; max-height: 100%; object-fit: cover; /* Ensure the image covers the entire container */ transition: opacity 0.5s ease; /* Smooth transition effect */ } .logo { width:20px; height: 20px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 10px; /* Adjust right position as needed */ } .logos { width: 20px; height: 20px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ left: 10px; /* Adjust right position as needed */ } footer { margin-top: -5px; /* Adjust this value to add space between the footer and the content above it */ padding-top: 10px; /* Adjust this value to add space inside the footer */ } .copy { margin-top: 10px; /* Adjust this value to add space between the footer and the content below it */ } } /* For larger devices (e.g., desktops) */ @media screen and (min-width: 993px) { .slider-container { position: relative; width: 100%; height: 100vh; /* Adjust height as needed */ overflow: hidden; margin-bottom: 30px; /* Adjust margin */ } .container { position: relative; /* Set container to relative position */ height: 120vh; /* Make container full height of the viewport */ overflow: hidden; /* Hide overflow content */ } .water-image { position: absolute;/* Display as inline-block */ margin: 5px; /* Adjust margin as needed */ width: 50px; /* Adjust width as needed */ height: 50px; left: 50px; top:-20px;/* Maintain aspect ratio */ } .slider-image { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Ensure the image covers the entire container */ transition: opacity 0.5s ease; /* Smooth transition effect */ } .top-left { display: flex; align-items: center; margin-top: 30px; /* Adjust margin */ } footer { margin-top: -5px; /* Adjust this value to add space between the footer and the content above it */ padding-top: 10px; /* Adjust this value to add space inside the footer */ } .copy { margin-top: 10px; /* Adjust this value to add space between the footer and the content below it */ } .align-right { font-size: 25px; /* Reset font size */ margin-left: 20px; /* Adjust margin */ text-align: left; /* Reset text alignment */ } .cover img { width: 100%; /* Ensure the image fills its container */ height: auto; /* Maintain aspect ratio */ max-width: 100%; /* Ensure the image doesn't exceed its container's width */ max-height: 150px; /* Set a maximum height for the images */ } .logo { width:200px; height: 80px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 10px; /* Adjust right position as needed */ } .logos { width: 100px; height: 50px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ left: 10px; /* Adjust right position as needed */ } .signup-button { float: right; margin-right: 20px; margin-top: 20px; } .admin-button { float: right; margin-right: 20px; margin-top: 20px; background-color:#71d17e; } .faq-button { float: right; margin-right: 20px; margin-top: 10px; background-color:#71d17e; } .dropbtn { color: black; padding: 15px; font-size: 16px; border: none; cursor: pointer; font-weight: bold; float: right; margin-right: 20px; margin-top: 10px; padding:10px 5px; /* px-4 py-2 */ border-radius: 5px; background-color:#71d17e; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } } @media screen and (min-width: 768px) { /*desktop*/ .slider-image { top: 0; left: 0; max-width: 100%; max-height: 100%; object-fit: cover; /* Ensure the image covers the entire container */ transition: opacity 0.5s ease; /* Smooth transition effect */ } .container { position: relative; /* Set container to relative position */ height: 120vh; /* Make container full height of the viewport */ overflow: hidden; /* Hide overflow content */ } .water-image { position: absolute;/* Display as inline-block */ margin: 5px; /* Adjust margin as needed */ width: 250px; /* Adjust width as needed */ height: 250px; left: 100px; } .logo { width:90px; height: 90px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 10px; /* Adjust right position as needed */ } .logos { width: 90px; height: 90px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ left: 10px; /* Adjust right position as needed */ } .signup-button { float: right; margin-right: 50px; margin-top: 20px; } .admin-button { float: left; float: right; margin-right: 20px; margin-top: 20px; } .signup-button, .admin-button, .faq-button, .dropbtn { display: block; /* Ensure buttons are visible */ } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; right: 0; top: 100%; /* Adjust this value as needed */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .show { display: block; } footer { margin-top: -5px; /* Adjust this value to add space between the footer and the content above it */ padding-top: 10px; /* Adjust this value to add space inside the footer */ } .copy { margin-top: 10px; /* Adjust this value to add space between the footer and the content below it */ }} @media screen and (max-width: 767px) { .logo { width: 20px; height: 20px; right: 10px; } .logos { width: 20px; height: 20px; left: 10px; } .signup-button, .admin-button, .faq-button, .dropbtn { margin-top: 20px; } .logonwo { width: 50px; height: 50px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 10px; /* Adjust right position as needed */ } .dst { width: 50px; height: 50px; position: absolute; /* Set logo to absolute position */ top: 10px; /* Adjust top position as needed */ right: 100px; /* Adjust right position as needed */ } } </style> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-MLKHL5MWPW"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-MLKHL5MWPW'); </script> </head> <body class="bg-white"> <header> <div id="menu-jk" class="nav-part shadow-md bg-white navcol"> <div class="container-lg"> <div class="row p-2"> <div class="col-lg-3 p-2"> <a href="indexnew.php"> <img class="max-230 logo" src="assets/images/logooo.jpg" alt="" > </a> <img class="max-230 logos" src="assets/images/logo (2).jpg" alt="" width="100" height="80"> <a data-bs-toggle="collapse" data-bs-target="#menu" class="float-end d-lg-none pt-1 ps-3"><i class="bi pt-1 fs-1 cp bi-list"></i></a> </div> <div id="menu" class="col-lg-9 d-none pt-1 d-lg-block"> <div> <img class="water-image" src="assets/images/water font-2.png" alt="Water Folks Image"> </div> <ul class="fw-bold nacul fs-7"> <li class="float-start p-3 px-4"><a href="indexNew.php">Home</a></li> <li class="float-start p-3 px-4"><a href="about.html">About</a></li> <li class="float-start p-3 px-4"><a href=https://w4cproject.org/about>ToolKit</a></li> <li class="float-start p-3 px-4"><a href="newsnew.php">News & Events</a></li> <li class="float-start p-3 px-4"><a href="log2.php">Login</a></li> <li class="float-start p-3 px-4"><a href="contact.php">Contact Us</a></li> <li class="float-end d-none d-md-block pt-2"> <button class="btn fw-bolder px-4 py-2 btn-primary faq-button"><a href="faq.php">FAQ</a></button> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">City Informations</button> <div id="myDropdown" class="dropdown-content"> <a href="kozhikode.html">Kozhikode City Information</a> <a href="#contact">Kozhikode City Atlas</a> <a href="#contact"">Kozhikode Policy Brief</a> <a href="urban.html">Urban Pond Atlas</a> <a href="#contact">Ground Water Information</a> <a href="#contact">Water Quality Information</a> <a href="#contact">Rainfall & Temprature</a> <a href="#contact">Flood Prone Area</a> <a href="#contact">Water Stress Area</a> <a href="#contact">Meenchantha Water Information Book</a> </div> </div></li><script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Function to change slides function changeSlide() { $('.carousel').carousel('next'); } // Set interval for automatic slide change (every 2 seconds) setInterval(changeSlide, 5000); // Change 2000 to the desired interval in milliseconds }); </script> <button class="btn fw-bolder px-4 py-2 btn-primary signup-button"><a href="reg.php">Join Us</a></button><br><br> <button class="btn fw-bolder px-4 py-2 btn-primary admin-button"><a href="adminlogin.php">Admin</a> </div> </li> </ul> </div> </div> </div> </div> </header> <!-- ##################### Slider Starts Here #################### --> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <?php // Directory where your images are stored $gallery_dir = "slideshow/"; // Get all files in the directory $images = glob($gallery_dir . "*.{jpg,png,gif}", GLOB_BRACE); // Check if any images found if (count($images) > 0) { $is_first = true; foreach ($images as $index => $image) { ?> <div class="carousel-item <?php echo ($is_first) ? 'active' : ''; ?>"> <img src="<?php echo $image; ?>" class="slider-image" alt="Slider Image"> <div class="carousel-caption d-md-block"> <!-- Content for the slide --> </div> </div> <?php $is_first = false; } } else { // No images found in the directory ?> <div class="carousel-item active"> <img src="placeholder.jpg" class="slider-image" alt="Placeholder Image"> <div class="carousel-caption d-md-block"> <!-- Content for the slide --> </div> </div> <?php } ?> </div> <!-- Controls --> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"><i class="bi fs-4 text-dark bi-chevron-left"></i></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"><i class="bi fs-4 text-dark bi-chevron-right"></i></span> <span class="visually-hidden">Next</span> </button> </div> <!-- ##################### Why Choos US #################### --> <!-- ******************** About US Starts Here ******************* --> <div class="about-us big-padding"> <div class="container-lg"> <div class="section-title"> <p>Help us to Achieve our Goal</p> <h2>About WATER FOLKS & Vision of the Project</h2> </div> <div class="about-row row"> <div class="col-md-7"> <div class="abut-detail fs-6"> <p class="mb-3">The WATER-FOLKS PROGRAM is a Citizen Science initiative by KSCSTE-CWRDM for individuals, especially those from Kozhikode Corporation, who have a passion for water science and environmental stewardship. This program aims to engage participants in a transformative initiative, empowering them to actively contribute to water research, monitoring, and conservation efforts for Kozhikode city The WATER FOLKS PROGRAM is an outcome of the Water4Change (W4C) research program, co-funded by the Netherlands Organisation for Scientific Research (NWO) and the Indian Government Department of Science and Technology (DST) as part of the Cooperation India the Netherlands program </p> <p class="mb-3">In the long run, the initiative will spread the message of need to assess the water quality, to keep our water resources clean and to conserve water resources, among the citizens at grass root level. This initiative will also play an instrumental role in improving the spatial and temporal availability of water data and enable implementation of better water management practices. The mobile app will be also acting as a water data bank for the city where common man can access the water data.</p> </div> </div> <div class="col-md-5 p-4"> <img src="assets/images/slider/img9.jpg" alt="" style="width: 6000px; height: 400px;"> </div> </div> </div> </div> <div class="container-fluid products bg-gray big-padding pt-3"> <div class="container-xl"> <div class="section-title row"> <h2 class="fs-1 fw-bold">Water Conservation Ideas</h2> <p>Explore these ideas to save water</p> </div> <div class="row mt-5"> <?php // Array of water conservation ideas $water_conservation_ideas = array( array( "image" => "assets/images/collect.jpg", "title" => "Collect Rainwater", "description" => "Install a rain barrel to collect rainwater from your roof for outdoor use like watering plants or washing your car." ), array( "image" => "assets/images/leak.jpg", "title" => "Fix Leaks", "description" => "Regularly check for and fix leaks in faucets, toilets, and pipes to prevent water wastage." ), array( "image" => "assets/images/imgnew.jpg", "title" => "Use Water-Saving Fixtures", "description" => "Replace old fixtures with water-saving models like low-flow toilets and aerated faucets." ), // Add more ideas as needed ); // Loop through each idea and display it foreach ($water_conservation_ideas as $idea) { echo '<div class="col-lg-4 mb-4 col-md-6"> <div class="cover text-center p-4 shadow-md bg-white"> <img class="w-125" src="' . $idea["image"] . '" alt="' . $idea["title"] . '"> <h2 class="fs-4 fw-bolder mt-4">' . $idea["title"] . '</h2> <p>' . $idea["description"] . '</p> </div> </div>'; } ?> </div> </div> </div> <!-- ##################### Our Products Starts Here #################### --> <!-- <div class="container-fluid products big-padding px-3 bg-gray"> <div class="container-xl"> <div class="section-title row"> <h2 class="fs-1 fw-bold"></h2> <p></p> </div> <div class="row"> <div class="col-lg-3 col-md-4 mb-4"> <a href="detail.html"> <div class="product bg-white p-4 text-center shadow-md"> <!-- <img class="mah-150" src="assets/images/product/p4.webp" alt=""> </div> </a> </div> <div class="col-lg-3 col-md-4 mb-4"> <a href="detail.html"> <div class="product bg-white p-4 text-center shadow-md"> <img class="mah-150" src="assets/images/product/p1.webp" alt=""> </div> </a> </div> <div class="col-lg-3 col-md-4 mb-4"> <a href="detail.html"> <div class="product bg-white p-4 text-center shadow-md"> <img class="mah-150" src="assets/images/product/p2.webp" alt=""> </div> </a> </div> <div class="col-lg-3 col-md-4 mb-4"> <a href="detail.html"> <div class="product bg-white p-4 text-center shadow-md"> <img class="mah-150" src="assets/images/product/p3.webp" alt=""> </div> </a> </div> </div> </div> </div>--> <!-- ################## Our Blog #################### --> <div id="blog" class="service container-fluid px-4 bg-white py-5"> <div class="container"> <div class="section-title row mb-3"> <h2 class="fw-bolder">IF THERE IS NO WATER THERE IS NO LIFE</h2> <p>.</p> </div> <div class="row mt-5"> <div class="col-lg-4 col-md-6 mb-4"> <div class="serv-cove rounded bg-white p-2"> <img src="assets/images/blog/b1.jpg" alt=""> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="serv-cove rounded bg-white p-2"> <img src="assets/images/blog/b2.jpg" alt=""> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="serv-cove rounded bg-white p-2"> <img src="assets/images/blog/b3.jpg" alt=""> </div> </div> </div> </div> </div> <!--- ############ Testimonial Starts Here ################## --> <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "watercat"; $conn = mysqli_connect($servername, $username, $password, $dbname); $query = "SELECT image_name FROM images ORDER BY id DESC LIMIT 6"; $result = mysqli_query($conn, $query); ?> <div id="gallery" class="service bg-gray container-fluid px-4 py-5"> <div class="container"> <div class="section-title row mb-3"> <h2 class="fw-bolder">Gallery</h2> <p>Capturing Moments: A Visual Journey through images</p> </div> <div class="row mt-5"> <?php // Loop through the fetched images and generate gallery items while ($row = mysqli_fetch_assoc($result)) { $image_name = $row['image_name']; ?> <div class="col-lg-4 col-md-6 mb-4"> <div class="serv-cove shadow-md rounded bg-white p-3"> <img class="img-fluid square-image" src="gallery/<?php echo $image_name; ?>" alt="<?php echo $image_name; ?>"> </div> </div> <?php } ?> </div> </div> </div><?php // Close the database connection mysqli_close($conn); ?> <!--- ############ Footer Starts Here ################## --> <footer> <div class="inner"> <div class="container"> <div class="row"> <div class="col-md-3 foot-about"> <h4> </h4> <p>Centre for Water Resources Development and Management Kunnamangalam, Kozhikode-673 571 Kerala , India</p> <img alt src="assets/images/logo(2).jpg"> <ul> <li>Phone: (91) 495 2351800,2351801, 2351803, 2351804</li> <li>Fax: (91) 495 2351808</li> <li>Email: ed@cwrdm.org</li> </ul> </div> <div class="col-md-3 foot-post"> <h4>CENTER FOR WATER RESOURCES DEVELOPMENT AND MANAGEMENT</h4> <div class="post-row"> <div class="image"> <img src="assets/images/album/a6.jpg" alt=""> </div> <div class="detail"> <p>(An Institution of Kerala State Council for Science,Technology and Environment, Govt. of Kerala) </p> </div> </div> <div class="post-row"> <div class="image"> <img src="assets/images/album/a5.jpg" alt=""> </div> <div class="detail"> </div> </div> <div class="post-row"> <div class="image"> <img src="assets/images/album/a4.jpg" alt=""> </div> <div class="detail"> <a href="https://cwrdm.kerala.gov.in/">https://cwrdm.kerala.gov.in/</a> </div> </div> </div> <div class="col-md-3 foot-news"> <h4></h4> <p> </p> <div class="input-group mb-3"> <input type="text" class="form-control mb-0" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text bg-primary" id="basic-addon2"><i class="bi text-white bi-send"></i></span> </div> </div> <ul> <li><i class="bi bi-facebook"></i></li> <li><i class="bi bi-twitter"></i></li> <li><i class="bi bi-instagram"></i></li> <li><i class="bi bi-linkedin"></i></li> <li><i class="bi bi-pinterest"></i></li> </ul> </div> </div> <img class="max-230 logonwo" src="assets/images/logonwo.jpg" alt="" > <img class="max-230 dst" src="assets/images/dst.png" alt="" > </div> </div> </footer> <div class="copy"> <div class="container"> <a href="https://cwrdm.kerala.gov.in/">2024 © All Rights Reserved | Designed and Developed by CWRDM</a> </div> </div> </body> <script src="assets/js/jquery-3.2.1.min.js"></script> <script src="assets/js/popper.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/plugins/scroll-fixed/jquery-scrolltofixed-min.js"></script> <script src="assets/plugins/testimonial/js/owl.carousel.min.js"></script> <script src="assets/js/script.js"></script> </html>