Practical-1
Problem Definition: Initiate the “Project Title” by defining scope, key
pages (min. 10), and layout with HTML skeletons.
Topic: Event Management System
Code:
login page (source code):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login - Event Management</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background: url('https://images.unsplash.com/photo-1515165562835-
c3b8b57a2571') no-repeat center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 2px 2px 5px black;
}
.login-container {
background: rgba(0, 0, 0, 0.7);
padding: 30px;
border-radius: 8px;
width: 100%;
max-width: 400px;
text-align: center;
}
.login-container h2 {
margin-bottom: 20px;
font-size: 2rem;
}
.login-container input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.login-container button {
width: 100%;
padding: 10px;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 4px;
fot-size: 1rem;
cursor: pointer;
}
.login-container button:hover {
background-color: #34495e;
}
.footer {
position: absolute;
bottom: 10px;
text-align: center;
width: 100%;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login to Your Account</h2>
<form action="#" method="post">
<input type="email" placeholder="Enter your email" required />
<input type="password" placeholder="Enter your password" required />
<button type="submit">Login</button>
</form>
</div>
<div class="footer">
<p>© 2025 Event Management System | All Rights Reserved</p>
</div>
</body>
</html>
OUTPUT:
Home page (source code):
<!DOCTYPE html>
<html lang="en">
<body bgcolor="lightgreen">
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Management - Home</title>
<style>
/* (Same CSS from before — you can reuse this CSS on all pages for
consistency) */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #2c3e50;
padding: 20px;
color: #fff;
text-align: center;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
.hero {
background: url('https://images.unsplash.com/photo-1515165562835-
c3b8b57a2571') no-repeat center center/cover;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 2px 2px 5px black;
flex-direction: column;
text-align: center;
}
.hero h1 {
font-size: 3rem;
}
.section {
padding: 40px 20px;
text-align: center;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<header>
<h1>Event Management System</h1>
<nav>
<a href="login.html">Login</a>
<a href="events.html">Events</a>
<a href="services.html">Services</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
<a href="logout.html">logout</a>
</nav>
</header>
<div class="hero">
<h1>Make Your Events Memorable</h1>
<p>We plan. You celebrate.</p>
</div>
<div class="section">
<h2>Welcome to Our Event Management Platform</h2>
<p>Explore our services, check upcoming events, and contact us to plan your
perfect event!</p>
</div>
<footer>
<p>© 2025 Event Management System | All Rights Reserved</p>
</footer>
</body>
</html>
OUTPUT:
Events page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Events - Event Management</title>
<style>
/* Reused CSS */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI',
sans-serif; }
body { background-color: #f4f4f4; color: #333; }
header, footer { background-color: #2c3e50; color: white; text-align: center;
padding: 20px; }
nav a { color: white; margin: 0 15px; text-decoration: none; }
.section { padding: 40px 20px; text-align: center; }
</style>
<div class="section">
<h2>What's Coming Up</h2>
<ul style="list-style: none; padding: 0;">
<li><strong>Corporate Conference 2025</strong> – Jan 25, 2025</li>
<li><strong>Spring Wedding Expo</strong> – Mar 15, 2025</li>
<li><strong>Summer Gala Night</strong> – Jul 10, 2025</li>
</ul>
</div>
<footer>
<p>© 2025 Event Management System | All Rights Reserved</p>
</footer>
</body>
</html>
OUTPUT:
Services (source code):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Services - Event Management</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI',
sans-serif; }
body { background-color: #f4f4f4; color: #333; }
header, footer { background-color: #2c3e50; color: white; text-align: center;
padding: 20px; }
nav a { color: white; margin: 0 15px; text-decoration: none; }
.section { padding: 40px 20px; text-align: center; }
</style>
<div class="section">
<h2>What We Offer</h2>
<ul style="list-style: none; padding: 0;">
<li>✔ Corporate Event Planning</li>
<li>✔ Wedding Planning</li>
<li>✔ Birthday & Social Events</li>
<li>✔ Venue Decoration</li>
<li>✔ Audio/Visual Setup</li>
</ul>
</div>
<footer>
<p>© 2025 Event Management System | All Rights Reserved</p>
</footer>
</body>
</html>
OUTPUT:
Gallery page (source code):
<!DOCTYPE html>
<tml lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gallery - Event Management</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI',
sans-serif; }
body {
background-image: url('https://source.unsplash.com/1600x900/?event-
background');
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: #333;
}
header, footer {
background-color: rgba(44, 62, 80, 0.85);
color: white;
text-align: center;
padding: 20px;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.gallery-section {
padding: 60px 20px;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
.gallery-section h2 {
font-size: 2rem;
margin-bottom: 30px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.gallery-grid img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
footer p {
font-size: 0.9rem;
}
</style>
</head>
<body>
<header>
<h1>Event Gallery</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="events.html">Events</a>
<a href="services.html">Services</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<div class="gallery-section">
<h2>Our Work in Action</h2>
<div class="gallery-grid">
<img src="https://source.unsplash.com/1600x900/?wedding-event"
alt="Wedding" title="Wedding Event" />
<img src="https://source.unsplash.com/1600x900/?birthday-party"
alt="Party" title="Birthday Party" />
<img src="https://source.unsplash.com/1600x900/?business-conference"
alt="Conference" title="Business Conference" />
<img src="https://source.unsplash.com/1600x900/?corporate-event"
alt="Corporate Event" title="Corporate Gathering" />
<img src="https://source.unsplash.com/1600x900/?cultural-festival"
alt="Festival" title="Cultural Festival" />
</div>
</div>
<footer>
<p>© 2025 Event Management System | All Rights Reserved</p>
</footer>
</body>
</html>
OUTPUT:
Contact page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.contact-section {
background-color: #2c3e50;
padding: 20px;
color: #fff;
padding: 50px 20px;
text-align: center;
}
.contact-section h2 {
font-size: 36px;
margin-bottom: 20px;
font-weight: bold;
}
.contact-section p {
font-size: 18px;
line-height: 1.6;
}
.contact-section a {
color: #ffdd57;
text-decoration: none;
font-weight: bold;
}
.contact-section a:hover {
text-decoration: underline;
}
/* Optional: Responsive */
@media (max-width: 600px) {
.contact-section h2 {
font-size: 28px;
}
.contact-section p {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="contact-section">
<h2>Contact Us</h2>
<p>Have questions? Ready to plan an event? <br>
Reach out to us at <a
href="mailto:info@eventmanagement.com">info@eventmanagement.com</a>
</p>
</div>
</body>
</html>
OUTPUT:
Logout page (source code):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Management - Logout</title>
<style>
/* Reusing existing styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
font-family: 'Segoe UI', sans-serif;
}
header {
background-color: #2c3e50;
padding: 20px;
color: #fff;
text-align: center;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
.hero {
background: url('https://images.unsplash.com/photo-1515165562835-
c3b8b57a2571') no-repeat center center/cover;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 2px 2px 5px black;
flex-direction: column;
text-align: center;
}
.hero h1 {
font-size: 3rem;
}
.logout-message {
text-align: center;
padding: 50px 20px;
color: #2c3e50;
font-size: 1.5rem;
}
.logout-message h2 {
margin-bottom: 20px;
}
.btn-logout {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
border: none;
font-size: 1.2rem;
cursor: pointer;
border-radius: 5px;
}
.btn-logout:hover {
background-color: #c0392b;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<header>
<h1>Event Management System</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="events.html">Events</a>
<a href="services.html">Services</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<div class="logout-message">
<h2>You have successfully logged out.</h2>
<p>Thank you for using our Event Management System.</p>
<p>Click below to return to the home page:</p>
<a href="index.html">
<button class="btn-logout">Back to Home</button>
</a>
</div>
<footer>
<p>© 2025 Event Management System | All Rights Reserved</p>
</footer>
</body>
</html>
OUTPUT:
Conclusion:
The Event Management System provides a comprehensive, user-friendly
solution for planning, organizing, and managing events efficiently. By
automating various tasks such as event scheduling, registration, venue
management, and communication, the system reduces manual workload,
minimizes errors, and enhances coordination among stakeholders.
Through its intuitive interface and real-time data access, users can manage
events of varying sizes with greater control and flexibility. The system not
only improves operational efficiency but also enhances the overall experience
for attendees and organizers alike. With future enhancements, including
mobile integration and advanced analytics, the Event Management System
has the potential to become a vital tool for both professional and personal
event planning.
