Simple centered hero

Simple centered hero

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

Write a Comment

Comment