code of the website video link https://www.youtube.com/watch?v=h7UoV1ACQ28&t=103s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header
{
width: 100%;
display: flex;
background-color:aqua ;
min-height: 50px;
}
#logo_div{
width: 30%;
background-color: #000;
color: #fff;
/* text-align: center; OR */
display: flex;
justify-content: center;
align-items: center;
}
#navigation_bar{
width:69%;
display: flex;
justify-content: space-around;
align-items: center;
}
#navigation_bar>a{
color: #fff;
padding: 9px;
background-color: #000;
text-decoration: none;
}
/* Now time for hover effect */
#navigation_bar>a:hover{
background-color: coral;
color: #000;
padding: 12px;
}
/* second section */
#section_two{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#background_image_div{
width: 100%;
/* here we have to add an image */
background-image: url("earth.jpg");
display: flex;
justify-content: center;
align-items: center;
color: #fff;
min-height: 500px;
font-size: 3vw;
}
/* third section */
#third_section{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
#third_section>div{
width: 30%;
border: 5px double greenyellow;
min-height: 200px;
background-color: teal;
text-align: center;
color: #fff;
font-size: 1.7vw;
}
/* time for hover effect */
#third_section>div:hover{
border: 10px double lightgreen;
background-color: darkorange;
}
</style>
</head>
<body>
<!-- this will show header part of this website -->
<header>
<!-- logo div -->
<div id="logo_div">
<h1>logo part</h1>
</div>
<!-- navigation div -->
<nav id="navigation_bar">
<a href="#">Home</a>
<a href="#">log in</a>
<a href="#">register</a>
</nav>
</header>
<!-- create section and div -->
<section id="section_two">
<div id="background_image_div">
<h2>Welcome ! You are Welcome !</h2>
</div>
</section>
<!-- third part which is div with heading and texts -->
<section id="third_section">
<div>
<h4>heading 1</h4><br>
<p>This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video This is just a text . if you like this playlist please like and share this video</p>
</div>
<div>
<h4>heading 1</h4><br>
<p>This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video This is just a text . if you like this playlist please like and share this video</p>
</div>
<div>
<h4>heading 1</h4><br>
<p>This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video This is just a text . if you like this playlist please like and share this video</p>
</div>
</section>
<style>
footer{
width: 100%;
display: flex;
justify-content: space-around;
background-color: #000;
min-height: 200px;
}
footer>div{
width: 20%;
display: flex;
flex-direction: column;
align-content: space-around;
justify-content: center;
}
footer>div>strong{
color: yellow;
}
footer>div>a{
color: #fff;
text-decoration: none;
}
</style>
<!-- footer part -->
<footer>
<div>
<strong>Important links</strong><br><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
</div>
<div>
<strong>Our sources</strong><br><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
</div>
<div>
<strong>Social media links</strong><br><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
<a href="#">link1</a><br>
</div>
</footer>
</body>
</html>
<!-- code will be in the description part -->
No comments:
Post a Comment