. create index.html
.next create index.css
Step 2
Create index.html
.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Responsive nave bar</title>
</head>
<body>
<!------nav tags-->
<nav>
<label class="logo">Aswinkl71</label>
<!----ul tags-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!----ul tags-->
</nav>
<!------nav tags-->
</body>
</html>
*{ padding:0;
margin:0:
text-decoration:none;
list-style:none:}
.next step
body {
font-family:monsterrat:
}
nav{ width:100%;
height:80px;
background:#34495e;
}
.logo{
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 100px;
line-height: 80px;
}
.next step home, about, contact right side
nav ul{
float: right;
margin-right:40px
}
.next step home, about , contact same line
nav li {
display: inline-block;
margin: 0 8px;
line-height: 80px;
}
nav a{
color: white;
font-size: 18px;
text-transform: uppercase;
border: 1px solid transparent;
padding: 7px 10px;
border-radius: 3px;
}
.next step
Go to your index.html file <li><a class="active" href="#">Home</a></li>
add a class name on li,a tags"active" iam create class name
.Next on css file
a.active,a:hover{
border: 1px solid white;
transition: .5s;
}
.png)
No comments:
Post a Comment