Scribd
Upload
2 views6 pages

!DOCTYPE HTML

The document is an HTML template for the Lakshya Organization, which focuses on empowering youth leadership and community-driven change. It includes sections on the organization's mission, programs, chapters, events, resources, and contact information. The layout features a hero banner, navigation links, and interactive elements for user engagement.

Uploaded by

anshikashwarn08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views6 pages

!DOCTYPE HTML

The document is an HTML template for the Lakshya Organization, which focuses on empowering youth leadership and community-driven change. It includes sections on the organization's mission, programs, chapters, events, resources, and contact information. The layout features a hero banner, navigation links, and interactive elements for user engagement.

Uploaded by

anshikashwarn08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lakshya Organization</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

header .hero-banner {
padding: 50px;
background: #222;
color: #fff;
}

header h1 {
font-size: 2.5rem;
}

header p {
font-size: 1.2rem;
}

button {
background-color: #f39c12;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 1rem;
margin-top: 20px;
}

button:hover {
background-color: #e67e22;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
margin-top: 20px;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}

section {
padding: 40px 20px;
margin: 20px 0;
background-color: #fff;
}

h2, h3 {
margin-bottom: 20px;
}

ul {
list-style: none;
}

ul li {
margin-bottom: 10px;
}

.map, .gallery, .social-links {


margin-top: 20px;
}

.chapter img, .gallery img {


max-width: 100%;
height: auto;
display: block;
}

.social-links a {
margin-right: 15px;
color: #333;
text-decoration: none;
}

form {
display: flex;
flex-direction: column;
}

form label {
margin: 10px 0 5px;
}

form input, form textarea {


padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

form button {
background-color: #27ae60;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}

form button:hover {
background-color: #2ecc71;
}
</style>
</head>

<body>
<!-- Homepage Section -->
<header id="homepage">
<div class="hero-banner">
<h1>Empowering Through Innovation - 2025</h1>
<p>Empowering communities, inspiring change, and fostering leadership
across borders.</p>
<button onclick="location.href='#about-us'">Learn More</button>
</div>

<nav>
<ul>
<li><a href="#chapters">Chapters</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
</nav>
</header>

<!-- About Us Section -->


<section id="about-us">
<h2>Who We Are</h2>
<p>Lakshya is a global movement focused on inspiring youth leadership and
fostering community-driven change.</p>

<h3>Our Reach</h3>
<div class="map">
<p>Countries: Nepal, India, Bangladesh, UAE, and more...</p>
</div>

<h3>Our Impact</h3>
<ul>
<li>50+ Chapters</li>
<li>10,000+ Students Reached</li>
</ul>
</section>

<!-- Programs and Themes Section -->


<section id="programs-themes">
<h2>Programs and Themes</h2>
<h3>Annual Theme</h3>
<p>Social Media & Mental Health: Addressing the impact of social media on
mental well-being.</p>

<h3>Monthly Themes</h3>
<ul>
<li>January: Digital Literacy</li>
<li>February: Mental Health Awareness</li>
<li>March: Women Empowerment</li>
<!-- More months -->
</ul>

<h3>Past Themes</h3>
<p>Check out the highlights from our previous themes and initiatives.</p>
</section>

<!-- Chapters and Community Section -->


<section id="chapters">
<h2>Chapters and Community</h2>
<h3>Start a Chapter</h3>
<p>Learn how to start a chapter or join an existing one to contribute to
our mission.</p>

<h3>Featured Chapters</h3>
<div class="chapter">
<p>Example Chapter - Achievements</p>
<img src="chapter.jpg" alt="Chapter Image">
</div>

<h3>Success Stories</h3>
<p>Hear from Chapter Presidents and members about their impactful
journeys.</p>
</section>

<!-- Events Section -->


<section id="events">
<h2>Events and Activities</h2>

<h3>Upcoming Events</h3>
<ul>
<li>Workshop on Digital Literacy - 10th Feb</li>
<li>Webinar on Mental Health - 25th Feb</li>
</ul>

<h3>Past Events</h3>
<div class="gallery">
<img src="event1.jpg" alt="Event Image 1">
<img src="event2.jpg" alt="Event Image 2">
</div>

<h3>Get Involved</h3>
<p>Join us in upcoming events and make a difference!</p>
</section>

<!-- Publications Section -->


<section id="resources">
<h2>Publications and Resources</h2>

<h3>Monthly Magazine</h3>
<p><a href="#">Download the latest issue</a></p>

<h3>Blog/Articles</h3>
<p>Read educational articles on a variety of topics.</p>

<h3>Event Toolkits</h3>
<p><a href="#">Download event planning guides</a></p>
</section>

<!-- Donate Section -->


<section id="donate">
<h2>Donate or Support Us</h2>
<p>Your donations help us expand our reach and impact more communities.</p>
<button onclick="location.href='#donate'">Donate Now</button>

<h3>Sponsor Opportunities</h3>
<p>We offer sponsorship packages for businesses looking to partner with
us.</p>
</section>

<!-- Contact Us Section -->


<section id="contact">
<h2>Contact Us</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>

<button type="submit">Send Message</button>


</form>

<h3>Email</h3>
<p>[email protected]</p>

<h3>Follow Us</h3>
<div class="social-links">
<a href="https://instagram.com/lakshya" target="_blank">Instagram</a>
<a href="https://linkedin.com/lakshya" target="_blank">LinkedIn</a>
<a href="https://twitter.com/lakshya" target="_blank">Twitter</a>
</div>
</section>

<script>
// Add any interactivity you'd like, such as form validation, smooth
scroll, etc.
document.addEventListener("DOMContentLoaded", function() {
// Example: Smooth scrolling for navigation
document.querySelectorAll('nav ul li a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDe fault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
</body>

</html>

You might also like