How we set Background, Header and also make a table of services
we create a Header and services file which shows different colors when the cursor moves on it and also attached a beautiful background color according to your choice through HTML and CSS code.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Background</title>
</head>
<body >
<style>
body{
background-image: url(bac.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
ul{
list-style-type: none;
background-color: black;
height: 50px;
padding-top: 15px;
}
table,tr,td,th{
border-collapse: collapse;
border:2px solid black;
font-size: 25px;
}
li{
display: inline;
padding-left: 20px;
padding-bottom: 20px;
}
a{
text-decoration: none;
color: white;
}
td:hover{
cursor: pointer;
color: red;
}
.row1:hover{
color: blue;
cursor: pointer;
background-color: pink;
}
.row2:hover{
cursor: pointer;
color: red;
background-color: yellow;
}
.row3:hover{
cursor: pointer;
color: blue;
background-color: skyblue;
}
.row4:hover{
cursor: pointer;
background-color: black;
color: white;
}
.row5:hover{
cursor: pointer;
background-color: pink;
color:green;
}
#div1{
height: 200px;
margin-top: 50px;
font-size: 150px;
text-align: center;
background-color: white;
opacity: 0.5;
}
</style>
<ul>
<li><a href="file:///C:/Users/AjWa%20Lp/Desktop/carmoving.html">Home</a></li>
<li><a href="resultcard.html">About</a></li>
<li><a href="#">services</a></li>
</ul>
<table width="100%">
<tr class="row1">
<td>1.</td>
<td>Services 1</td>
</tr>
<tr class="row2">
<td>2.</td>
<td>Services 2</td>
</tr>
<tr class="row3">
<td>3.</td>
<td>Services 3</td>
</tr>
<tr class="row4">
<td>4.</td>
<td>Services 4</td>
</tr>
<tr class="row5">
<td>5.</td>
<td>Services 5</td>
</tr>
</table>
<div id="div1">Services</div>
</body>
</html>
