Creating a completely responsive NGO website with all the mentioned features would require a substantial amount of code. Here's a simplified example of how you can structure the HTML, CSS, and JavaScript for such a website. Please note that this is a basic template, and you would need to customize it further according to your specific requirements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NGO Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header class="header">
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">NGO Camps</a></li>
<li><a href="#">Donations</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="become-member">Become a Member</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<img src="https://via.placeholder.com/1200x400" alt="Hero Image" class="hero-image">
</section>
<!-- NGO Camp Images in Gridview -->
<section class="camp-images">
<!-- Use CSS to create a grid layout for the images -->
<!-- Example using placeholder images -->
<div class="camp-image"><img src="https://via.placeholder.com/400x400" alt="Camp Image"></div>
<!-- Repeat this for all 9 images -->
</section>
<!-- Donation Section -->
<section class="donation">
<h2>Make a Donation</h2>
<form id="donation-form">
<input type="text" placeholder="Name" id="name">
<input type="email" placeholder="Email" id="email">
<input type="tel" placeholder="Phone Number" id="phone">
<input type="number" placeholder="Donation Amount" id="amount">
<button type="button" id="donate-button">Donate</button>
</form>
</section>
<!-- Event Registration -->
<section class="event-registration">
<!-- Create a grid view for 3 events with images and descriptions -->
<!-- Example using placeholder images -->
<div class="event">
<img src="https://via.placeholder.com/300x200" alt="Event Image">
<p>Event Description</p>
<button class="register-button">Register</button>
</div>
<!-- Repeat this for all 3 events -->
</section>
<!-- About Us Section -->
<section class="about-us">
<h2>About Us</h2>
<!-- Add detailed information about your NGO here -->
</section>
<!-- Contact Us Section -->
<section class="contact-us">
<h2>Contact Us</h2>
<form id="contact-form">
<!-- Add input fields for name, email, message, etc. -->
</form>
</section>
<!-- Footer Section -->
<footer class="footer">
<!-- Add rounded social icons using CSS -->
<div class="social-icons">
<img src="https://via.placeholder.com/50x50" alt="Social Icon">
<!-- Repeat this for all social icons -->
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
In this template, you would need to create separate CSS (`styles.css`) and JavaScript (`script.js`) files to style and add interactivity to the website. You can use the provided placeholder images for testing, but you should replace them with actual images and content as needed.
No comments:
Post a Comment