AWESOME WEB PAGE DESIGN USING HTML & CSS ~ Jankarimedia

How to Design Awesome Web page Design*

Hi Gys I telling you how to design Awesome web page using html & css.
firstly create a new folder and under folder create one folder again image folder , and paste your website Logo and Background photo. Download Background Photo here https://unsplash.com/wallpaper/1065396/desktop-wallpapers

Download any background and paste in image folder, now do let's Source code copy.

Html code copy this code and open notepad and paste and save this file index.html

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nirala Web Solution</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<header>
<div class="nav-bar">
<img src="img/LOGO.png" class="logo" />
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>
<div class="welcome">
<h1>ARE YOU NEW ON MY CHANNEL ? </h1>

<a href="#" class="btn btn1">Like Videos</a>
<a href="#" class="btn btn2">Subscribe</a>

</header>

</body>
</html>

save it. in html format.

style.css

*{
margin:0px;
padding:0px;
}
header{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 100, 0.5)),url(img/background.jpg);
height:100vh;
background-size:cover;
background-position:center;}
.nav-bar{
background:rgb(0 , 0 , 0 , 0.5);
height:80px;
}
.logo{
margin:10px 50px;
height:60px;
}
.menu{
float:right;
list-style:none;
margin:20px;
}
.menu li{
display: inline-block;
margin:10px 5px;
}
.menu li a{
text-decoration:none;
color:#FFF;
padding:5px 10px;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing:2px;
border:1px solid #fff;
}
.menu li a:hover{
background:#fff;
transition: .4s;
color:#000;
}
.welcome{
position:relative;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
top: 160px;
}
.welcome h1{
font-size:42px;
margin:25px;
}
.btn{
font-size:18px;
letter-spacing:2px;
margin:5px;
padding:7px 10px;
text-decoration:none;
border:1px solid#fff;
}
.btn1{
background:#fff;
color:#000;
}
.btn2{
color:#fff;
}
.btn2:hover{
background:#fff;
color:#000;
transition:0.4s;
}

save it style.css

About Admin

Thanks For Reading this content.