HTML CSS Header Footer Layout Source Code
HTML CSS Header Footer Layout Source Code
Welcome to our beginner-friendly HTML and CSS tutorial!we'll guide you step-by-step through creating a simple yet stylish website layout featuring a header and footer using HTML and CSS. Whether you're new to web development or looking to enhance your skills, this project is perfect for you.
🔥 In this tutorial, you'll learn:
How to create a responsive header and footer for your website.
Basics of HTML elements and their structure.
Styling techniques using CSS to make your website visually appealing.
Tips and tricks for optimizing your code and improving user experience.
Beginners looking to learn HTML and CSS from scratch.
Anyone interested in building a strong foundation in web development.
Enthusiasts wanting to create a professional-looking website layout.
Easy-to-follow explanations suitable for beginners.
Hands-on coding examples to reinforce your learning.
Practical tips and best practices from experienced developers.
Accessible and engaging content designed to boost your confidence in web development.
Source Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>footer</title>
<link rel="stylesheet" href="footer.css" />
</head>
<body>
<header></header>
<footer>
<div class="first-colum">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="second-colum">
<span>Address: </span>
<div class="add">
<a href="#"> Home: Bhopal Madhya Pardesh </a>
<a href="#"> phone : +912343****23 </a>
<p>pin : 462023</p>
</div>
</div>
<div class="thidr-colum">
<span>Intro</span>
<p>
we are providing best oppotinity we have best of empolee project
complete within time limit
</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
header {
height: 70px;
background-color: black;
}
footer {
height: auto;
width: 100%;
margin-top: 35%;
background-color: rgb(9, 212, 235);
display: flex;
justify-content: space-around;
}
.first-colum ul {
list-style: none;
text-align: center;
}
.first-colum ul li a {
text-decoration: none;
color: blue;
font-size: 16px;
}
.second-colum {
width: 30%;
}
.thidr-colum {
width: 20%;
text-align: center;
}
span {
color: red;
}
.png)
#HTML #CSS #WebDevelopment #BeginnerTutorial #HeaderFooterLayout #CodingForBeginners #FrontEndDevelopment #WebDesign #CodeWithMe #LearnToCode #OpenSource #GitHub #CodingProjects #CodeSnippets #Programming #GitHubRepository #DevelopersCommunity #TechEnthusiasts #CodeSharing #ProgrammingProjects #SoftwareDevelopment #GitHubCode #CodingCommunity #CollaborativeCoding #TechSolutions #CodingResources #CodeReview #CodeDevelopment #VersionControl #CodingInspiration #GitHubCollaboration
No comments: