Sidebar with icon
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="STYLESHEET" type="text/css" href="web.css">
<title>web design</title>
</head>
<body>
<div class="sidebar">
<a href="#"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-wrench"></i>Services</a>
<a href="#"><i class="fa fa-fw fa-user"></i>Clients</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i>Contact</a>
</div>
<div class="main">
<h2>Sidebar with icon</h2>
<p>The side navigation is of full(100%)Height and always shows</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</p>
</div>
</body>
</html>
CSS Sidebar with icon Style
.sidebar{
height:100%;
width:160px;
position: fixed;
z-index: 1;
top:0;
left:0;
background-color:#111;
overflow-x: hidden;
padding-top:16px;
}
.sidebar a{
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:20px;
color: #818181;
display: block;
}
.sidebar a:hover{
color: #f1f1f1;
}
.main{
margin-left:160px;
padding:0 10px;
}
@media screen and(max-width:450;) {
.sidebar{
padding-top:15px ;
}
.sidebar a{font-size:20px ;}
}
No comments:
Post a Comment