Simple Degin Using HTML And CSS Part-2

- October 14, 2019

A Home Page Using HTML And CSS

Today We are going to Make a beautiful home page by using HTML and CSS. In the given program i used two picture one for background aand one for logo. I gonna give the link of that pictures.

We gonna write this program in "notepad++ or Sublime" or any other programming coder:-
And We will save it with ((anyname of u want).html). And run it in any Browser.

So let's Start :-

Let's See what we are going to make

It's Look Beautiful.
For the above Home We need to write some program in HTML and give Some Effect from CSS.

<!DOCTYPE html>
<html>
<head>
<title>DarkWriter Creations</title>

<style>
*{
margin: 0;
padding: 0;
font-family:century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("file:///C:/Users/Karan/Desktop/New%20folder/42469-assassins-creed-syndicate-1920x1080-game-wallpaper.jpg");
height: 100vh;
background-size: cover;
background-position:center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.5s;
}
ul li a:hover{
background-color: white;
color: black;
}
ul li.active a{
background-color: white;
color: black;
}

.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);

}
.title h1{
color: white;
font-size:50px;
font-family:Bradley Hand ITC;
}
.button{
position: absolute;
top:63%;
left:50%;
transform: translate(-50%,-50%);

}
.btn{
border: 1px solid white;
padding: 10px 30px;
text-decoration: none;
transition: 0.6s;
color: white;
}
.btn:hover{
background-color: white;
color: black;
}
img{
width: 100px;
height: auto;
position: absolute;
margin: 5px;
filter:opacity(30%);
}
img:hover{
filter: opacity(100%);
}
</style>
</head>
<body>
<header>
<div class="main">

<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="file:///C:/Users/Karan/Desktop/New%20folder/logo.png">
</div>
<div class="title">
<h1>DarkWriter CREATIONS</h1>
</div>
<div class="button"><a href="#" class="btn"> Watch Videos</a><a href="#" class="btn">Learn More</a></div>
</header>
</body>
</html>

FOR BACKGROUND IMAGE:- https://drive.google.com/file/d/1HI-GsDpQqCIGdEEM7FJ9FnCpqUxu1_tC/view?usp=sharing

FOR LOGO:-https://drive.google.com/file/d/17mwfIKS8w-0cKeQLXqvstC73dnfBKv3a/view?usp=sharing

If You haven't read it's old Part do not to worry Just Click the Following Link and Watch more intresting work on CSS and HTML:-

Part 1 :-https://darkwriter17.blogspot.com/2019/10/simple-design-using-css-and-html.html

HOPE YOU GOING TO LIKE THIS SO SHARE AND GIVE SUPPORT IN COMMENT PART