Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
15 views3 pages

Basic HTML Layout With Navigation and Logo

The document provides a basic HTML layout featuring a header with a logo and navigation bar, a main content section, and a footer. The accompanying CSS styles enhance the layout by resetting default styles, styling the header, navigation, main content, and footer for a cohesive look. This structure serves as a foundational template for creating a simple website.

Uploaded by

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

Basic HTML Layout With Navigation and Logo

The document provides a basic HTML layout featuring a header with a logo and navigation bar, a main content section, and a footer. The accompanying CSS styles enhance the layout by resetting default styles, styling the header, navigation, main content, and footer for a cohesive look. This structure serves as a foundational template for creating a simple website.

Uploaded by

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

Basic HTML Layout with Navigation and Logo

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Layout with Navigation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section with Logo and Navigation -->
<header class="header">
<div class="logo">
<img src="logo.png" alt="Logo">
<h1>My Website</h1>
</div>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main class="main-content">
<h2>Welcome to My Website</h2>
<p>This is a simple layout with a header, logo, and navigation bar.</p>
</main>
<!-- Footer Section -->
<footer class="footer">
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>
CSS Code:

/* Reset some default styles */


*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Header styling */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 20px;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar li {
margin-left: 20px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 5px 10px;
transition: background-color 0.3s ease;
}
.navbar a:hover {
background-color: #555;
border-radius: 5px;
}
/* Main content styling */
.main-content {
padding: 40px;
text-align: center;
}
/* Footer styling */
.footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
}

You might also like