"Hero Header Test"
Bootstrap 4.1.1 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="hero-simple"> <h1 class="page-title">Hulu Assets</h1> </header>
body {font-family: graphik,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-weight: 400;line-height: 1.5;color: #151515;-moz-osx-font-smoothing: grayscale;} .hero-simple{padding-top:2.65625rem;padding-bottom:2.65625rem;padding-left:3.5rem;padding-right:3.5rem;} .hero-simple{max-width:82.25rem;margin:0 auto;} .page-title {display: inline-flex;margin-bottom: 1.875rem;padding: 0 .875rem;position: relative;text-transform: uppercase;} .h1, h1 {font-size: 4.5rem;line-height: 1;margin-top: 0;text-rendering:optimizeLegibility;} .page-title::before {animation: shadow-up .5s ease-in both;animation-delay: .5s;content: '';height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: -1;} .page-title::before {-webkit-box-shadow: inset 0 -88px 0 0 #1ce783;box-shadow: inset 0 -88px 0 0 #1ce783;}

Related: See More


Questions / Comments: