Untitled

<!DOCTYPE html>
<html lang="en">
    <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: 40px;
         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: 70px;">Featured Products</h2>
        </div>
        <div class="d-flex">
            <img src="https%3A%2F%2Fstatic-uc.olist.ng%2Fupload%2F20200504%2Fu9d3g7iwxkx.jpg&imgrefurl=https%3A%2F%2Folist.ng%2Fhair-weaves-wigs%2FGot2be-glue-54021528485889.html&tbnid=DgjGyowzrKXpVM&vet=12ahUKEwiitMT29ar7AhUPqRoKHQNMBk4QMygRegQIARBk..i&docid=fj1SbEM7SmwkBM&w=500&h=500&q=nathairdiva&ved=2ahUKEwiitMT29ar7AhUPqRoKHQNMBk4QMygRegQIARBk" alt="oil" height="200" width="150">
            <img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fnathairdiva.com%2Fshop%2Fimg%2Fproduct%2F9631ea03ecfb17ed56bb23bebb1dd3a1.jpg&imgrefurl=https%3A%2F%2Fnathairdiva.com%2F&tbnid=mI5KpYxOt5To8M&vet=12ahUKEwiitMT29ar7AhUPqRoKHQNMBk4QMygQegQIARBi..i&docid=z32g5cSa3Bx2HM&w=1620&h=1080&q=nathairdiva&ved=2ahUKEwiitMT29ar7AhUPqRoKHQNMBk4QMygQegQIARBi" alt="cream" height="200" width="150">
            <img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fnathairdiva.com%2Fshop%2Fimg%2Fproduct%2F40d45d6a45be13cee215a0f9030ace79.jpg&imgrefurl=https%3A%2F%2Fnathairdiva.com%2Fshop%2Fproduct.php%3Fid%3D61%26shea-butter-and-coco&tbnid=n1LhNoZg_AgFDM&vet=10CBcQxiAoAmoXChMI4KjmnsCq-wIVAAAAAB0AAAAAEBA..i&docid=WUsLMtsiolcqDM&w=500&h=500&itg=1&q=nathairdiva&ved=0CBcQxiAoAmoXChMI4KjmnsCq-wIVAAAAAB0AAAAAEBA" alt="cream" height="200" width="150">
        </div>
    </body>
</html>
Editor is loading...