In this article I am creating five web page application using HTML & CSS
Step1st:open VSCODE and create separate folder for web project
Step2nd:
Create home.html web page and divide page into separate header, middle and footer part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<!-- Header Start -->
<div id="header">
<div class="logo">
<img src="images/logo.webp" alt="Logo"
title="Company name" height="100" width="150" />
</div>
<div class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
</div>
<!-- Header End -->
<!-- Middle Start -->
<div id="middle">
<iframe width="860" height="450"
src="https://www.youtube.com/embed/3FfQ_eMtAr8?si=jahoYEbjDB4-DyVn"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>
<!-- Middle End -->
<!-- Footer Start -->
<div id="footer">
<div class="footerpart">
<h3>About us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta aspernatur,
dignissimos beatae rem tenetur dolorem excepturi, atque quaerat deleniti at magni nobis
, numquam eligendi voluptas neque dolores eum quos dolorum nam animi corrupti qui.
Eveniet distinctio nesciunt dolore! Asperiores natus minus, deleniti tempore, iure
rerum quod autem voluptas, labore et deserunt nesciunt!
Magnam cupiditate eum eius rerum numquam eveniet quisquam fugit nobis? Repellendus
nostrum beatae iusto repellat odio corrupti voluptatum. Quam quidem, unde odio
blanditiis deserunt a quos explicabo soluta.</p>
</div>
<div class="footerpart">
<h3>Our Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
<div class="footerpart">
<h3>Social Connects</h3>
</div>
</div>
</div>
<!-- Footer End -->
</body>
</html>
step3rd:
create .css file for external css and define header, middle and footer properties.
*{
margin: 0px;
}
#header{
height: 100px;
background-color: brown;
}
.logo{
float:left;
width:20%;
padding-left: 5px;
padding-top: 1px;
height: 100%;
}
.menu{
float:right;
width:78%;
height: 100%;
}
.menu ul li {
display: inline-block;
margin-left: 20px;
}
.menu ul li a{
color:white;
font-size: 24px;
font-weight: bolder;
}
#middle{
height: 500px;
background-color: lightblue;
}
#middle iframe
{
margin-top: 30px;
margin-left: 60px;
}
#footer{
height: 300px;
background-color: brown;
}
.footerpart
{
margin-top: 20px;
width:30%;
height:80%;
margin-left: 20px;;
text-align: center;
float:left;
border:1px solid white;
}
.footerpart ul li{
list-style-type: none;
font-size: 25px;
display: block;
text-align: center;
}
.footerpart ul li a{
color:white;
}
Step4th:
Link css file under home.html file
<link href="style.css" rel="stylesheet" />
Step5th:
Create Logo and Menu section under header part and put logo image and create navigation menu.
<div class="logo">
<img src="images/logo.webp" alt="Logo" title="Company name" height="100" width="150" />
</div>
<div class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
Step5th:
Complete Home Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<!-- Header Start -->
<div id="header">
<div class="logo">
<img src="images/logo.webp" alt="Logo" title="Company name" height="100" width="150" />
</div>
<div class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
</div>
<!-- Header End -->
<!-- Middle Start -->
<div id="middle">
<iframe width="860" height="450" src="https://www.youtube.com/embed/3FfQ_eMtAr8?si=jahoYEbjDB4-DyVn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<!-- Middle End -->
<!-- Footer Start -->
<div id="footer">
<div class="footerpart">
<h3>About us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta aspernatur, dignissimos beatae rem tenetur dolorem excepturi, atque quaerat deleniti at magni nobis, numquam eligendi voluptas neque dolores eum quos dolorum nam animi corrupti qui. Eveniet distinctio nesciunt dolore! Asperiores natus minus, deleniti tempore, iure rerum quod autem voluptas, labore et deserunt nesciunt! Magnam cupiditate eum eius rerum numquam eveniet quisquam fugit nobis? Repellendus nostrum beatae iusto repellat odio corrupti voluptatum. Quam quidem, unde odio blanditiis deserunt a quos explicabo soluta.</p>
</div>
<div class="footerpart">
<h3>Our Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
<div class="footerpart">
<h3>Social Connects</h3>
</div>
</div>
</div>
<!-- Footer End -->
</body>
</html>
for more information download source code
POST Answer of Questions and ASK to Doubt