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>document</title>
        <style>
            .d-flex{
                display: flex;
            }
            .meun div{
                margin-right: 20px;
            }
      .nav{
        display: flex;
        justify-content: space-between;
      }
      body{
        margin: 0 30px;
      }
      .hero-text{
        font-size: 55px;
        text-align: center;
      }
      .hero-box{
        width: 300px;
        margin: auto;
        margin-bottom: 10px;
    }
    .search-bar{
         height: 50px;
         width: 300px;
         border-radius: 5px;
         border: 1px #b8b4b4;
         padding: 10px;

    }
    .search-button{
        background: #19806f;
        border: none;
        border-radius: 5px;
    }
        </style>
    </head>
    <body>
        <nav class="d-flex nav">
            <div>nathairdiva</div>
            <div class="d-flex meun">
                <div>Blog</div>
                <div>Contact</div>
                <div>Shop</div>
                <div>Quiz</div>
          </div>
        </nav>
        <!-- //search bar -->
        <div class="hero-box">
            <h3 class="hero-text">
                Shop With Ease!!!
            </h3>
            <div class="d-flex">
            <input type="text" class="search-bar"placeholder="search for products,category or brands"> 
            <button class="search-button">search</button>
        </div>
        <div>
<h2 style="text-align: center;font-size: 40px;">Featured Products</h2>
        </div>
    </body>
</html>
Editor is loading...