"Page Header Test"
Bootstrap 3.3.0 Snippet by sparkktv

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: