Heroes

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <nav class="navbar navbar-expand-lg navbar-light mt-2 px-0">
        <a class="navbar-brand" href="#"><img src="/wp-content/themes/understrap-child/images/components/logo.svg"
            width="30" height="30" class="d-inline-block align-top" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item pr-2">
              <a class="nav-link" href="#">Product</a>
            </li>
            <li class="nav-item pr-2">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item pr-2">
              <a class="nav-link" href="#">Markerplace</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Log in</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="my-lg-5">
        <p class="text-muted text-uppercase h5 mb-0">Coming soon</p>
        <h1 class="font-weight-bold mb-3">Data to enrich your <span class="text-primary">online business</span>
        </h1>
        <p class="h4 font-weight-normal text-muted pr-lg-4">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p><br>
        <p class="font-weight-bold">Sign up to get notified when it's ready.</p>
        <form class="form-inline">
          <div class="form-group mb-2">
            <input type="text" class="form-control form-control-lg mr-2" value="" placeholder="Enter your email">
          </div>
          <button type="submit" class="btn btn-dark btn-lg mb-2">Notify me</button>
        </form>
        <p class="text-muted">We care about the protection of your data. Read our <a class="text-dark" href="#">Privacy Policy</a>.</p>
        <br>
      </div>
    </div>
    <div class="col-lg-6 d-none d-lg-block"
      style="background:url(https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1425&q=80) no-repeat center center;background-size:cover;">
    </div>
    <div class="col-lg-6 d-lg-none">
      <img class="img-fluid"
        src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1425&q=80"
        alt="">
    </div>
  </div>
</div>

h1 {
  font-size: 64px;
  line-height: 1 !important;
}

.text-primary {
  color: #5850ec !important;
}

.btn-primary {
  background: #5850ec !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: none !important;
  background: #6875f5 !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary.active {
  box-shadow: none !important;
  background: #6875f5 !important;
  color: #fff !important;
}

.btn-light {
  background: #e5edff !important;
  border: none !important;
  color: #5145cd !important;
}

.btn-light:hover,
.btn-light:focus {
  box-shadow: none !important;
  background: #f0f5ff !important;
  color: #5145cd !important;
}

.btn-light:active,
.btn-light.active {
  box-shadow: none !important;
  background: #f0f5ff !important;
  color: #5145cd !important;
}

.navbar-light .navbar-nav .active .nav-link {
  color: #5145cd !important;
}

.h4 {
  line-height: 30px;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <nav class="navbar navbar-expand-lg navbar-light mt-2 px-0">
        <a class="navbar-brand" href="#"><img src="/wp-content/themes/understrap-child/images/components/logo.svg"
            width="30" height="30" class="d-inline-block align-top" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item pr-2">
              <a class="nav-link" href="#">Product</a>
            </li>
            <li class="nav-item pr-2">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item pr-2">
              <a class="nav-link" href="#">Markerplace</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Log in</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="my-lg-5">
        <h1 class="font-weight-bold">Data to enrich your <span class="text-primary">online business</span>
        </h1>
        <p class="h4 font-weight-normal text-muted pr-lg-4">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p><br>
        <p><a class="btn btn-primary btn-lg py-lg-3 px-lg-5 mr-2" href="#">Get started</a> <a class="btn btn-light btn-lg py-lg-3 px-lg-5" href="#">Live demo</a></p>
        <br>
      </div>
    </div>
    <div class="col-lg-6 d-none d-lg-block"
      style="background:url(https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1425&q=80) no-repeat center center;background-size:cover;">
    </div>
    <div class="col-lg-6 d-lg-none">
      <img class="img-fluid"
        src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1425&q=80"
        alt="">
    </div>
  </div>
</div>

h1 {
  font-size: 64px;
  line-height: 1 !important;
}

.text-primary {
  color: #5850ec !important;
}

.btn-primary {
  background: #5850ec !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: none !important;
  background: #6875f5 !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary.active {
  box-shadow: none !important;
  background: #6875f5 !important;
  color: #fff !important;
}

.btn-light {
  background: #e5edff !important;
  border: none !important;
  color: #5145cd !important;
}

.btn-light:hover,
.btn-light:focus {
  box-shadow: none !important;
  background: #f0f5ff !important;
  color: #5145cd !important;
}

.btn-light:active,
.btn-light.active {
  box-shadow: none !important;
  background: #f0f5ff !important;
  color: #5145cd !important;
}

.navbar-light .navbar-nav .active .nav-link {
  color: #5145cd !important;
}

.h4 {
  line-height: 30px;
}

<div class="container-fluid bg-light">
<div class="py-3 d-flex justify-content-between align-items-center">
<a class="navbar-brand" href="#"><img src="/wp-content/themes/understrap-child/images/components/logo.svg"
            width="50" height="50" class="d-inline-block align-top" alt=""></a>
<nav class="h5 font-weight-normal text-muted px-5">
    <a class="p-2 text-dark" href="#">Product</a>
    <a class="p-2 text-dark" href="#">Features</a>
    <a class="p-2 text-dark" href="#">Marketplace</a>
    <a class="p-2 text-dark" href="#">Company</a>
  </nav>
<div><a class="btn btn-light px-lg-3 py-lg-2 shadow-sm" href="#">Log in</a></div>
</div>
<div class="row text-center">
  <div class="col-md-10 p-lg-5 mx-auto my-5">
    <h1 class="font-weight-bold mb-4">Data to enrich your <span class="text-primary">online business</span></h1>
    <p class="h5 font-weight-normal text-muted mb-4 px-5">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
    <p><a class="btn btn-primary btn-lg py-lg-3 px-lg-5 mr-2" href="#">Get started</a> <a class="btn btn-light btn-lg shadow-sm py-lg-3 px-lg-5" href="#">Live demo</a></p>
  </div>
</div>
</div>

h1 {
  font-size: 64px;
  line-height: 1 !important;
}

.text-primary {
  color: #5850ec !important;
}

.btn-primary {
  background: #5850ec !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: none !important;
  background: #6875f5 !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary.active {
  box-shadow: none !important;
  background: #6875f5 !important;
  color: #fff !important;
}

.btn-light {
  background: #fff !important;
  border: none !important;
  color: #5145cd !important;
}

.btn-light:hover,
.btn-light:focus {
  box-shadow: none !important;
  background: #f2f2f2 !important;
  color: #5145cd !important;
}

.btn-light:active,
.btn-light.active {
  box-shadow: none !important;
  background: #f2f2f2 !important;
  color: #5145cd !important;
}