Responsive Header
Coding
- internal css
- media query
Coding:- PDF Click here
<!DOCTYPE html>
<html>
<head>
<title>Responsive header</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
height: 40px;
background: #E5E8E8;
}
ul{
list-style: none;
height: 36px;
line-height: 40px;
}
li
{
display: inline;
float: left;
border-right: 2px groove #F83109;
font-size: 20px;
font-weight: 570;
font-family: lato;
}
a{
text-decoration: none;
display: block;
color: black;
padding: 0 28px;
}
a:hover ,.active {
background: #F83109;
}
h1{
text-align: center;
padding: 20%;
font-size: 36px;
font-weight: 550;
font-family: Arial ,Helvetica, sans-serif;
}
@media screen and ( max-width: 1920px ){
.header{
height: 40px;
width: auto;
background: #E5E8E8;
}
@media screen and ( max-width: 1000px ){
.header{
height: 40px;
width: 540px;
background: black;
}
a{
color: white;
}
}
</style>
</head>
<body>
<div class="header">
<ul><!--unordered list-->
<li><a href="#" class="active">Home</a></li><!list item(li)-->
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<h1>This is my Home page</h1>
</body>
</html>
No comments:
Post a Comment