Skip to main content

Featured

How to create a awesome navbar project without javascript. Navbar tutorial. Html and css tutorial.

HTML PROJECT

In this webpage, i am going to create a awesome navbar project without javascript but only demerit is that can not resize itself on condition.

You can use media query to resize your navbar on situation.

We are going to use html and css to create this project.

So let's start this awesome project. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <style type="text/css" media="all">
      *{
        padding: 0;
        margin: 0;
      }
        .navbar {
          background-color: #362693;
          overflow: hidden;
          padding: 10px;
        }
        .navbar a {
          color: black;
          text-decoration: none;
          padding: 14px 16px;
          overflow: hidden;
          color: white;
          font-size: 18px;
        }
        
        .home {
          background-color: green;
        }
        
        .navbar a:hover{
          background-color: #ff9a9a;
          color: black;
          transition-duration: .5s;
        }
      </style>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Simple Nav Bar</title>
    </head>
    <body>
      <nav class="navbar">
      <a href="#home" class="home">Home</a>
      <a href="#Contact">Contact</a>
      <a href="#about">about</a>
    </nav>
    </body>
    </html>

Preview here 

The above block of code have created a awesome navbar and ypu can add media query or javascript go make it more dynamic.

Make sure to subscribe our channel to get more website projects.

In our next project we will create a slider using sketch (html, css, js).

 

Comments

Post a Comment

Popular Posts