Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wallpaper</title>
       <style>
        *{
            padding: 0px;
            margin:  0px;

        }
        .main{
            box-sizing: content-box;
        }
        .images{
            size: 20px;
        }
        body{
            background-color: rgba(199, 199, 221, 0.795);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100%;
        }
        /* nav{
            border: 2px solid black;
            /* border-radius: 12px;
            border-width: 12px; */
            /* box-shadow: 12px; */
            /* padding-right: 10px; */
            /* margin: 10px;} */
            nav{
                float: right;
                /* margin: 1px; */
                padding: 3px 80px 0;
                /* border: solid red; */
                box-shadow: 2px 2px 2px;
                /* border-width: 5px;
                border-radius: 5px; */
            }
            .search {
                padding: 3px 7px;
               
            }
        .content{
          font-size: 30px;
          color: white;
          background-color: black;
          /* border-radius: 1px;
          border-width: 10px; */
          box-shadow: 3px 3px, black -1em 0 .4em olive;
          /* opacity: 5px; */
          font-family: 'Times New Roman', Times, serif;
            display: flex;
            /* margin: 5px; */
        }
        header{
            background-color:rgba(241, 231, 231, 0.685);
            border: 2px solid rgb(75, 18, 231);
            /* border-radius: 12px; */
            box-shadow: 10px 12px 10px;
            /* border-radius: 10px;
            border-width: 10px; */
            border-width: 5px;
            text-align: center;
            font-size: 45px;
        }
        nav:hover{
            opacity: 5px;
            box-shadow: 10px 12px 10px red;
        }
    </style>
</head>
<body>
    <div class="main">
        
        <header><b>The Wallpaper Collection
        </b>           
        </header>
    <div class="content">
        <nav><b>All Collection</b> </nav>
        <nav><b>Sports</b></nav>
        <nav><b>Wildlife</b></nav>
        <nav><b>Nature</b></nav>
        <input type="text" class="search" placeholder="Search"><img class="menu"
            src="https://telegra.ph/file/de286fbc18362f6e17110.png" alt="">
            
    </div>
    
    </div>
   
    
    
</body>
</html>
Editor is loading...