Making A Navigation Bar in Html & CSS.



Navigation Bar In Html and Css.


Output:




Code:

Html:


<html lang="en">
<head>
    <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>Anshu</title>
    <style>
        body{
            background-color:darksalmon;
        }
        .shubham{
            background-color:burlywood;
        }
        nav{
            background-colordarkgrey;
            margin-left810px;
            font-familycursive;
            font-weightbold;
            font-size20px;
        }
        nav:hover{
            cursorpointer;
            
        }
        a{
            padding:10px;
            transition.2s;
            
        }
        a:hover{
            border-bottomsolid 3px red;
        }
        img{
            floatleft;
            width:50px;
            height:50px;
            bordersolid 5px blue;
            border-radius10px 10px 10px 10px;
        }
        h1{
            font-familymonospace;
            font-size50px;
        }
        h1:hover{
            box-shadow
        }
        .me:visited{
            coloryellowgreen;
        }
        button{
            bordersolid 3px black;
            margin90px;
            padding10px;
            width=19px;
            height:40px;
            background:none;
            transition.5s;
            }
        button:hover{
            box-shadow-2.5px -2.5px 2px 2px deeppink;
            cursorpointer;
            background:linear-gradient(90deg,red,orange);
            border-radius45px;
        }
    
    </style>
</head>

<body>  
    <div>
        <img src="data:image/png;base64,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" float='left'>
        <h1><center>My First WebPage</center></h1>
        <a href="">Login</a><a href="">Sign Up</a>
        
    </div>
    <div class="shubham">
        <nav>
        <a class="me"  href="https://www.youtube.com" cla>Home</a>
        <a class="me" href="www.arduino.cc">Python</a>
        <a class="me" href="https://www.google.com">Arduino</a>
        <a class="me" href="www.facebook.com">About Us</a>
        <a class="me" href="www.twitter.com">Contact us</a>
        </nav>
    </div>
    <div>
        <center>
        <button>
        Login
        
        </button>
        </center>
    </div>

</body>
</html>
















No comments:

Powered by Blogger.