Scribd
Upload
3 views3 pages

New Text Documenthom

The document is an HTML template for the homepage of ABC Services Company, featuring a header, navigation menu, main content area, and footer. It includes a welcome message that retrieves the username from local storage and provides logout functionality. The page is styled with CSS for a clean and responsive layout.

Uploaded by

Anubhav Paul
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
3 views3 pages

New Text Documenthom

The document is an HTML template for the homepage of ABC Services Company, featuring a header, navigation menu, main content area, and footer. It includes a welcome message that retrieves the username from local storage and provides logout functionality. The page is styled with CSS for a clean and responsive layout.

Uploaded by

Anubhav Paul
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/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - ABC Services</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #d1f2d1;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

header {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 {
margin: 0;
font-size: 24px;
color: #2d3748;
}

nav {
background-color: #b2dfdb;
padding: 10px;
display: flex;
justify-content: center;
gap: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav a {
text-decoration: none;
color: #2d3748;
font-size: 14px;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s;
}

nav a:hover {
background-color: #80cbc4;
}

.main-content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.welcome-message {
text-align: right;
font-size: 18px;
color: #2d3748;
margin-right: 20px;
}

footer {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
font-size: 12px;
color: #4a5568;
}
</style>
</head>
<body>
<header>
<h1>ABC Services Company</h1>
</header>

<nav>
<a href="home.html">Home</a>
<a href="booking.html">Booking Service</a>
<a href="tracking.html">Tracking</a>
<a href="previous-booking.html">Previous Booking</a>
<a href="support.html">Contact Support</a>
<a href="#" id="logout">Logout</a>
</nav>

<div class="main-content">
<div class="welcome-message">
Welcome <span id="username"></span>
</div>
</div>

<footer>
<p>Helpline: +1 123 456 7890 • Address: 123 Green Street, Eco City,
Earth</p>
<p>&copy; 2025 ABC Services. All rights reserved.</p>
</footer>

<script>
// Retrieve username from localStorage and display it
const username = localStorage.getItem('username');
if (username) {
document.getElementById('username').textContent = username;
} else {
// Redirect to login page if no username is found
window.location.href = 'login.html';
}

// Logout functionality
document.getElementById('logout').addEventListener('click', function(e) {
e.preventDefault();
localStorage.removeItem('username');
window.location.href = 'login.html';
});
</script>
</body>
</html>

You might also like