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