Hero with image on right

Hero with image on right

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;
}

Write a Comment

Comment