Check Posting - Korle Klottey Municipal/title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <style> :root { --primary-color: #5f5884; --secondary-color: #4a6fa5; --accent-color: #2980b9; --text-color: #333333; --background-color: #f0f4f8; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } .container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .card { background-color: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 2rem; width: 100%; max-width: 400px; transform: translateY(20px); opacity: 0; } .header { text-align: center; margin-bottom: 2rem; } .logo { max-width: 120px; margin-bottom: 1rem; } h1 { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 0.5rem; } h2 { font-size: 1.3rem; color: var(--text-color); } .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 600; } input[type="text"] { width: 100%; padding: 0.75rem; border: 2px solid #ced4da; border-radius: 10px; font-size: 1rem; font-family: "Poppins", sans-serif; transition: border-color 0.3s ease, box-shadow 0.3s ease; } input[type="text"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25); } button { width: 100%; padding: 0.75rem; background-color: var(--primary-color); color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; font-weight: 600; font-size: 1rem; margin-top: 1rem; } button:hover { background-color: #035f39; transform: translateY(-2px); } button:active { transform: translateY(0); } footer { text-align: center; padding: 20px; background-color: var(--primary-color); color: #fff; margin-top: 40px; } @media (max-width: 480px) { .container { padding: 1rem; } .card { padding: 1.5rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } } </style> </head> <body> <div class="container"> <div class="card"> <header class="header"> <img src="images/logo.png" alt="Korle Klottey Municipal Logo" class="logo" /> <h1>Korle Klottey Municipal</h1> <h2>Check Posting</h2> </header> <main> <form id="confirmationForm" action="check_posting.php" method="POST"> <div class="form-group"> <input type="text" id="phone_number" name="phone_number" placeholder=" 0XXXXXXXXX" required /> </div> <button type="submit" name="search">Search</button> </form> </main> </div> </div> <footer>©2024 EC-2024 Korle Klottey Municipal</footer> <script> document.addEventListener("DOMContentLoaded", function () { gsap.to(".card", { duration: 0.8, y: 0, opacity: 1, ease: "power3.out", }); }); document .getElementById("confirmationForm") .addEventListener("submit", function (event) { // The form will be submitted without any client-side validation }); </script> </body> </html>