Daily Video Blog with Anik || Active Horizontal Bar in CSS

In this video,I explained the Active Horizontal Bar in CSS . Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -

HTML Files - 
<html>
    <head> <title> Horizontal Bar </title>
       <link rel="stylesheet" href="exercises12.css">
</head>

<body>
  <ul>
    <li> <a href="home.html" class="active"> Home </a> </li>
<li> <a href="about.html"> About Us </a> </li>
<li> <a href="contact.html"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
  </ul>
 
  <p> This is my HOME Page </p>
</body>
</html>

<html>
    <head> <title> Horizontal Bar </title>
       <link rel="stylesheet" href="exercises12.css">
</head>

<body>
  <ul>
    <li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" class="active"> About Us </a> </li>
<li> <a href="contact.html"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
  </ul>
 
  <p> This is my ABOUT US page </p>
</body>
</html>

<html>
    <head> <title> Horizontal Bar </title>
       <link rel="stylesheet" href="exercises12.css">
</head>

<body>
  <ul>
    <li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" > About Us </a> </li>
<li> <a href="contact.html" class="active"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
  </ul>
 
  <p> This is my CONTACT US page </p>
</body>
</html>

<html>
    <head> <title> Horizontal Bar </title>
       <link rel="stylesheet" href="exercises12.css">
</head>

<body>
  <ul>
    <li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" > About Us </a> </li>
<li> <a href="contact.html" > Contact Us </a> </li>
<li> <a href="queries.html" class="active"> Any Queries </a> </li>
  </ul>
 
  <p> This is my QUERIES page </p>
</body>
</html>

CSS File - 
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
overflow: hidden;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 20px;
}

li a:hover {
color: red;
background-color: lightgreen;
text-decoration: underline;

}

.active {
background-color: red;
}

p {
font-size: 30px;
text-align: center;
}


Comments

Post a Comment

Popular posts from this blog

HTML - Frameset Tag in html

Image
Hello everyone. In this video, I explained the frameset tag in html -  HTML - Frameset Tag in html . For more, please subscribe the channel. If you have any doubt, please comment in this video. Check my playlist -  HTML Playlist Please like, comment, share and subscribe.
Read more

Interface in TypeScript || Interface along with Arrow Function

Image
In this video,I explained interface in TypeScript . Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist  .Please visit my  YouTube Videos . The code is as follows - interface.ts - interface Chat {   // Chat is the interface name   x: number,   y: number } let doChat = (chat: Chat) => {  // doChat - arrow function   console.log("The value of x:- " + chat.x);          // chat - parameter   console.log("The value of y:- " + chat.y); } doChat({   x: 20,   y: 40 }) interface1.ts -  interface anik {   x: number,   y: number } let singh = (abc: anik) => {   console.log(abc.x);   console.log(abc.y); } singh({   x: 1,   y: 2 })
Read more