HTML AND CSS HTML WEBSITE CODE
Hello everyone after a long time i am going to give you a complete professional website code.I have also given the link of below code in document form so you can download it from here also fore code click
* for image click me
---------------------------- CODE ---------------------------------
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding:0;
}
header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(4.jpg);
height: 100vh;
background-size: cover;
background-position:center;
transition: 0.6s ease;
}
ul {
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color:#fff;
padding: 5px 20px;
border: 1px solid tranparent;
}
ul li a:hover {
background-color: #fff;
color: #000;
}
ul li.active a{
background-color: #fff;
color: #000;
}
.logo img {
float: left;
width: 151px;
height: auto;
margin-top: 10px;
}
.main {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.title h1 {
color: white;
font-size: 70px;
}
.button {
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
============================================================================
</style>
<title>X-peria</title>
</head>
<body >
<header>
<div class="main">
<div class="logo">
<img src="D:\CHAND\my website under construction\LOGO.png">
</div>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="title">
<h1>X-Peria</h1>
</div>
<div class="button">
<a href="#" class="btn">Watch Video</a>
<a href="#" class="btn">Learn More</a>
</div>
</header>
</body>
</html>
---------------------------------------------- END OF CODE --------------------------------------------------
Download the above code in .html file
Thank you very much.
&nbs
p; Please subscribe us for more amazing tutorial and tech knowledge.
