<!DOCTYPE html>

<html lang="en">
<head>
    <title>Navigation Bar</title>
    <style>
        header{
            font-size: 40px;
            text-align: right;
            padding: 30px;
            margin: 30px;
        }
        a{
            color: rgb(18, 92, 121);
            text-decoration: none;
            background: rgb(168, 237, 241);
        }
        a:hover{
            background-color: rgb(18, 92, 121);
            color: rgb(168, 237, 241);
        }
        h1{
            font-size: 70px;
            color: plum;
            background-color: black;
            text-align: center;
            text-decoration-line: underline;
            padding: 20px;
            margin: 50px;
            border-style: solid;
            border-width: 10px;
            border-radius: 15px;
            border-color: rgb(78, 163, 243);
        }
        h1:hover{
            background-color: plum;
            color: black;
       
        }
        img{
            padding: 30px;
            margin: 30px;
        }
        img:hover{
            width: 800px;
        }
       
    </style>
</head>
<body bgcolor="black">
    <header>
        <i><a href="">Home</a></i>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <i><a href="">About Us</a></i>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <i><a href="">Contact</a></i>
    </header>

    <h1><i>Web Development</i></h1>
   
    <img src="w1.png" alt="error" width="700px">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img src="w3.png" alt="error" width="700px">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img src="w2.jfif" alt="error" width="700px">

   
</body>
</html>