<section class="hero">
  <img class="brush-top" src="https://res.cloudinary.com/dpmroh94y/image/upload/v1653393126/brush-border-top-white_ntsfmr.png" alt="">
    <div class="container h-100">
       <div class="row h-100">
        <div class="col-md-10 offset-md-1 my-auto text-center">
          <h1 class="headingLg white uc" data-aos="fade-right" data-aos-delay="400">Lorem ipsum dolor sit&nbsp;amet</h1>
          <h2 class="headingSm white uc" data-aos="fade-right" data-aos-delay="400">Lorem ipsum dolor sit&nbsp;amet</h2>
        </div>
      </div><!-- close row -->
    </div><!-- close container  --> 
   <img class="brush-bottom" src="https://res.cloudinary.com/dpmroh94y/image/upload/v1653393126/brush-border-bottom-white_mzzdu0.png" alt="">
  </section>

<section class="py-5 my-5">
  <h2 class="py-5 my-5 text-center">white section</h2>
</section>

<section class="py-5 my-5">
  <div class="row">
  <div class="col-12">
  <img class="img-fluid" src="https://res.cloudinary.com/dpmroh94y/image/upload/v1653390351/hero-table-bg_yjbvhb.jpg" alt="">
  </div>
  </div><!-- close row -->
</section>




.hero{
  position:relative;
  height:600px;
  background: linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.5) 46%, rgba(0,0,0,.4) 100%), url('https://res.cloudinary.com/dpmroh94y/image/upload/v1653390351/hero-table-bg_yjbvhb.jpg');
  background-repeat:no-repeat !important;
  background-position: center left;
  background-size: cover !important;
  padding-bottom:
}

.white{
  color:#fff;
}

.brush-top{
  position:absolute;
  top:0px; 
  left:0;
  width:100%;
}

.brush-bottom{
  position:absolute;
  bottom:0px; 
  left:0;
  width:100%;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.1/js/bootstrap.min.js