"Masthead 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 ----------> <div class="hero-content"> <h1 class="hero-title">Future Man</h1> <h2 class="hero-subtitle">Season 3 Now Streaming</h2> <a class="button hero-cta" href="https://press.hulu.com/shows/future-man">Learn More</a> </div> <br> <br> <section class="section"> <h2 class="section-title" id="anchorGrid"> <a href="https://press.hulu.com/show-types/originals">Hulu Originals <span class="section-title-helper-text">explore all</span> <img class="section-title-arrow-icon" src="https://press.hulu.com/wp-content/themes/hulupress/assets/img/icons/arrow-right-small-icon.svg" aria-hidden="true" alt="arrow icon"> </a> </h2></section>
body{background:#000;} .hero-content {padding-left:7rem;padding-right:7rem;color:#fff;} .hero-label {width:8rem !important;height:auto!important;} .hero-label {text-transform:uppercase;margin-bottom:.75rem;} .hero-title {max-width:35%;font-size:40px;line-height:40px;margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:.39px;} .hero-subtitle {max-width:35%;font-size:30px;line-height:30px;margin-bottom:2.625rem;} .hero-cta {border-color:#fff!important;color:#fff!important;padding:.5rem 2em;} .button{background-color:transparent;font-weight:600;color:#151515;font-size:.875rem;letter-spacing:1px;line-height:1.1;text-transform:uppercase;} .button{display: inline-block;vertical-align: middle;margin: 0;padding: .5rem 2em;border: 1px solid transparent;border-radius: 0;transition: box-shadow .5s ease-out,border-color .25s ease-out,color .2s ease-out,-webkit-box-shadow .5s ease-out;line-height: 1;text-align: center;cursor: pointer;border: 2px solid #151515;} .hero-cta:hover {border-color:rgba(255,255,255,.5)!important;box-shadow:none;color:rgba(255,255,255,.5)!important;} .button:hover{background-color:transparent;} .button:hover{text-decoration:none;} .section{background-color:#fff;} .section-title {margin-bottom:0;text-transform: capitalize;} .section h2{font-size:3rem;line-height:1;margin-top:0;} .section-title > a {-webkit-box-align:center;align-items:center;color:#151515;display:flex;white-space:nowrap;} .section-title > a > .section-title-helper-text {font-weight:600;transition:opacity .2s ease-out,max-width .2s ease-out,padding .2s ease-out;font-size: 1rem;letter-spacing: 1.14px;margin-top: 8px;max-width: 0;opacity: 0;padding-left: 0;text-transform: capitalize;} .section-title > a:hover > .section-title-helper-text {max-width:300px;opacity:1;padding-left:22px;} .section-title .section-title-arrow-icon {content: url(https://press.hulu.com/wp-content/themes/hulupress/assets/img/icons/arrow-right-icon.svg);height:31px;margin-left:16px;margin-top:5px;} .section a:hover{text-decoration:none;}

Related: See More


Questions / Comments: