Header and footer and middle content - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer

Description

Header and footer and middle content

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor </title> 
  <style>

</style> <!-- w ww . j  a v a 2  s  .  c  o m-->
 </head> 
 <body> 
  <style>
ul {
   list-style-type:none;
   padding:21px;
   overflow:hidden;
   background-color:Chartreuse;
   z-index:2;
}

li {
   float:left
}

li a {
   display:block;
   color:yellow;
   text-align:center;
   padding:11px;
   margin:21px;
   text-decoration:none;
}

li a:hover {
   padding:11px;
   background-color:blue;
   color:pink;
}
</style> 
  <ul> 
   <li> <a href="FirstPage.jsp">Lore</a> </li> 
   <li> <a href="About.jsp">Lorem</a> </li> 
   <li> <a href="Contact.jsp">Lorem i</a> </li> 
   <li> <a href="Books.jsp">Lorem</a> </li> 
   <li> <a href="Register.jsp" id="l1">Lorem ip</a> </li> 
   <li> <a href="Login.jsp" style="float:right;margin:20px 0 0 500px">Lorem</a> </li> 
  </ul>Lorem ipsum do 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <style>
ul {
   list-style-type:none;
   padding:21px;
   overflow:hidden;
   background-color:Chartreuse;
   width:1231px;
}

li a {
   display:block;
   color:yellow;
   text-align:center;
   padding:11px;
   margin:21px;
   text-decoration:none;
}

.fa-facebook:hover {
   background:blue;
   color:pink;
}

.fa-twitter:hover {
   background:OrangeRed;
   color:grey;
}

.fa-youtube:hover {
   background:BlueViolet;
   color:Chartreuse;
}

.fa-instagram:hover {
   background:yellow;
   color:blue;
}

.fa:hover {
   opacity:0.10;
}
</style> 
  <ul> 
   <li style="float:right;"> <a href="https://www.facebook.com/" class="fa fa-facebook"></a> </li> 
   <li style="float:right;"> <a href="https://twitter.com/" class="fa fa-twitter"></a> </li> 
   <li style="float:right;"> <a href="https://www.instagram.com/?hl=en" class="fa fa-instagram"></a> </li> 
   <li style="float:right;"> <a href="https://www.youtube.com" class="fa fa-youtube"></a> </li> 
   <li style="float:left;"> <a>Lorem ipsum</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials