0byt3m1n1
Path:
C:
/
wamp64
/
www
/
WaterCat
/
[
Home
]
File: website.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <style> /* CSS styles from the previous example... */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #9de4fc; } header { background-color: ##a8beed; color: #fff; padding: 20px; text-align: center; } nav ul { list-style-type: none; margin: 0; padding: 0; text-align: center; background-color: #fff; /* Add background color */ border-radius: 8px; /* Add border-radius for container */ padding: 10px; /* Add padding */ } nav ul li { display: inline; margin-right: 20px; } nav ul li a { text-decoration: none; color: black; /* Change link color */ font-weight: bold; padding: 8px 15px; /* Add padding */ border-radius: 5px; /* Add border-radius for links */ transition: background-color 0.3s; /* Add transition effect */ } nav ul li a:hover { background-color: #b6c3d1; /* Change background color on hover */ } main { padding: 20px; display: flex; flex-direction: column; /* Change to column */ justify-content: space-between; align-items: stretch; /* Ensure sections stretch to full width */ } section { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h2 { text-align: center !important; /* Center the text horizontally */ } article { margin-bottom: 20px; } footer { background-color: #333; color: #fff; text-align: center; padding: 20px; bottom: 0; width: 100%; } /* Slide changer styles */ .slider-container { position: relative; overflow: hidden; margin-bottom: 20px; width: 100%; } .slides { display: flex; width: 300%; /* Adjust this value based on the number of slides */ transition: transform 0.5s ease-in-out; } .slide { width: 100%; /* Adjust the width of each slide */ flex: 0 0 auto; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Button styles */ .prev, .next { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; background-color: #333; color: #fff; border: none; border-radius: 50%; z-index: 1; } .prev { left: 10px; } .next { right: 10px; } .water-conservation .row { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; } .water-conservation .col-lg-4 { flex-basis: calc(33.33% - 20px); margin-bottom: 20px; } .water-conservation .cover { height: 100%; } .water-conservation .cover img { width: 100%; border-radius: 8px; } .water-conservation .cover h2 { margin-top: 20px; } .water-conservation .cover img { width: 100%; height: 200px; /* Adjust the height as needed */ object-fit: cover; /* Ensure the image covers the entire container */ border-radius: 8px; } h2 { text-align: center; /* Center the text horizontally */ } .title { font-size: 60px; color: black; font-family: 'Times New Roman', Times, serif; } .section-title::after { content: ''; /* Add a pseudo-element for decoration */ position: absolute; bottom: -5px; /* Adjust this value to control the distance from the text */ left: 50%; /* Position the pseudo-element in the middle */ transform: translateX(-50%); /* Center the pseudo-element horizontally */ width: 50px; /* Width of the line */ height: 2px; /* Height of the line */ background-color: #333; /* Color of the line */ } .fs-1 { font-weight: bold; margin: 0 auto; /* Center the heading horizontally */ text-align: center; /* Ensure text alignment in case margin alone doesn't center it */ margin-bottom: 10px; /* Add margin at the bottom */ } .italic { font-style: italic; /* Make the text italic */ margin-top: 30px; /* Adjust spacing between heading and paragraph */ text-align: center; /* Center the paragraph horizontally */ } .slide-content { position: relative; width: 100%; } .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: Black; } .overlay-text h2 { font-size: 24px; margin-bottom: 10px; } .overlay-text p { font-size: 18px; } .logo-left img, .logo-right img { width: 50px; /* Adjust the width as needed */ height: auto; /* Maintain aspect ratio */ } .logo-left, .logo-right { position: absolute; top: 50%; transform: translateY(-50%); } .logo-left { left: 50px; /* Adjust left position */ } .logo-right { right: 20px; /* Adjust right position */ } </style> </head> <body> <header> <div class="logo-left"> <img src="assets/images/cwrdm.jpg" alt="Left Logo" height="40" width="40"> <h5 style="color: black; position: relative; right: 50px;">KSCSTE-CWRDM</h5> </div> <div class="col-lg-3 p-2"> <a href="index.html"> <img class="max-230" src="assets/images/logo (2).jpg" alt="" width="50" height="50"><b>WATER FOLKS</b> </a> <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 class="logo-right"> <img src="path_to_right_logo.png" alt="Right Logo" height="40" width="40"> </div> </header> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="contact.php">Contact</a></li> <!-- Add more navigation links as needed --> </ul> </nav> <main> <section class="slider-container"> <div class="slides"> <!-- You can add your slides here --> <div class="slide"><img src="assets/images/slider/s1.jpg" alt="Slide 1"> <div class="overlay-text"> <h2>Water CATWATER Citizen Assessment Tool (WATER-CAT)</h2> <p>An initiative taken by KSCSTE-CWRDM under the project “Water for Change” to enable water sensitive governance in Kozhikode City through citizen engagement.</p> </div> </div> <div class="slide"><img src="assets/images/slider/neww.jpg" alt="Slide 2"></div> <div class="overlay-text"> <h2>Water CATWATER Citizen Assessment Tool (WATER-CAT)</h2> <p>An initiative taken by KSCSTE-CWRDM under the project “Water for Change” to enable water sensitive governance in Kozhikode City through citizen engagement.</p> </div> <button class="prev" onclick="prevSlide()">❮</button> <button class="next" onclick="nextSlide()">❯</button> </section> <section class="water-conservation"> <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 class="italic">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/water.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-100" 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> </section> </main> <footer> <p>© <?php echo date("Y"); ?> My Website. All rights reserved.</p> </footer> <script> let slideIndex = 0; showSlides(); function showSlides() { let slides = document.querySelectorAll('.slide'); for (let i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = 'block'; setTimeout(showSlides, 5000); // Change slide every 5 seconds } function prevSlide() { slideIndex--; showSlides(); } function nextSlide() { slideIndex++; showSlides(); } </script> </body> </html>