"Page Header Test"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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__item hero__item--right"> <h1 class="hero__title reveal--delay1 hero__title--home" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.9s ease 0.15s, opacity 0.9s ease 0.15s; transition: transform 0.9s ease 0.15s, opacity 0.9s ease 0.15s; "> Next Level<br>Design & Technology</h1> <div class="hero__sep sep sep--primary reveal--delay2" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.9s ease 0.25s, opacity 0.9s ease 0.25s; transition: transform 0.9s ease 0.25s, opacity 0.9s ease 0.25s; "></div> <h2 class="hero__subtitle reveal--delay3" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.9s ease 0.35s, opacity 0.9s ease 0.35s; transition: transform 0.9s ease 0.35s, opacity 0.9s ease 0.35s; "> You have the vision for a stunning digital experience. We’re<br>the software design and engineering team that can bring it to life.</h2> <div class="hero__cta reveal--delay4" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.9s ease 0.5s, opacity 0.9s ease 0.5s; transition: transform 0.9s ease 0.5s, opacity 0.9s ease 0.5s; "> <div class="btn__wrap btn--fix-width"> <a class="btn btn--primary" data-text="Let's Get Started" href="/services"> <span class="btn__overlay"></span> <span class="btn__text">Let's Get Started</span></a></div></div></div>
.hero__item--right {order:1;align-self:center;flex:1;padding-left:8.125rem;} .hero__item {align-self: center;width:100%;z-index:1;} .hero__item--right .hero__subtitle, .hero__item--right .hero__title {padding-right:0;} .hero__title--home {font-size:8rem;} .hero__title {font-family:Trump Gothic East,sans-serif;font-weight:700;line-height:1;color:#2d2d32;text-transform:uppercase;letter-spacing:1px;text-align:left;margin-top:0;} .hero__sep {margin-left:0!important;margin:1.875rem auto;} .sep--primary {background-color:#ef0d33;} .sep{height:4px;width:40px;} .hero__subtitle {font-family:Maison Neue,sans-serif;font-weight:300;line-height:1.4;color:#2d2d32;font-size:1.5rem;text-align:left;padding:0;max-width:inherit;margin:0;} .hero__cta {width:100%;text-align:left;margin-top:25px;} .btn--fix-width{width:240px;} .btn__wrap {display:inline-block;position:relative;overflow:hidden;border-radius:2px;-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");} .btn--primary {background-color: #ef0d33;} .btn {font-family:Maison Neue,sans-serif;font-weight:700;font-size:1rem;letter-spacing:2px;text-decoration:none;text-align:center;padding:24px 0 20px;text-transform:uppercase;border:2px solid transparent;border-radius:2px;transition:background-color .3s,color .3s,border-color .3s;width:100%;color:#fff;display:block;} .btn .btn__overlay {position: absolute;top: 0;right: 0;height: 100%;width: 140%;transform: translate3d(100%,0,0) skew(0deg);background-color: #c30928;opacity: 0;transition: transform .5s ease,opacity .3s ease;border-radius: 2px;display: block;} .btn .btn__text, .btn::before {transition: opacity .25s ease,transform .25s ease;z-index: 1;display: inline-block;} .btn--primary:hover {background-color:#d20b2d;color:#fff;}

Related: See More


Questions / Comments: