"Page Headers"
Bootstrap 3.3.0 Snippet by RizwanAkram

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="pageTitle1"> <h1 class="arrow">We're a team that adore what we do</h1> </div> <br><hr> <div class="pageTitle2"> <figure> <img src="http://i.imgur.com/cQFulm8.png" alt="..."> </figure> <h1>News Reel</h1> <h2> <span>Lorem ipsum dolor sit amet, consectetur...</span> </h2> </div> <br><hr> <div class="pageTitle3"> <h1 class="arrow"><span>Page</span> Title</h1> <h2> <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</span> </h2> </div> <br><hr> <div class="pageTitle4"> <h1><span>Page</span> Title</h1> <h2 class="arrow"> <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</span> </h2> </div> </div> <br><hr> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,800,800italic); body { font-family: 'Open Sans', sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } /*1*/ .pageTitle1 { text-align: center; } .pageTitle1 h1 { font-size: 15px; color: #353535; text-transform: uppercase; letter-spacing: 1px; } .pageTitle1 .arrow { background: url('http://i.imgur.com/60MaGIT.png') no-repeat center bottom; padding-bottom: 30px; } /*2*/ .pageTitle2 { text-align: center; } .pageTitle2 figure, .pageTitle2 figure img { width: 60px; height: 60px; margin: 0 auto; } .pageTitle2 h1 { margin: 10px 0; font-size: 2.5em; text-transform: uppercase; } .pageTitle2 h2 { margin: 0; padding-top: 20px; background: url('http://i.imgur.com/FfWRRWB.png') no-repeat center top; } .pageTitle2 h2 span { font-size: 16px; color: #FFF; padding: 10px 15px; background-color: #FFC000; border-bottom: double 8px #FFF; } /*3*/ .pageTitle3 { text-align: center; max-width: 700px; margin: 0 auto; } .pageTitle3 h1 { color: #71b100; font-size: 2em; text-transform: uppercase; } .pageTitle3 h1 span { font-weight: 400; color: #253d4a; } .pageTitle3 h2 { color: #50575e; font-family: 'Bitter', serif; font-size: 14px; font-style: italic; line-height: 1.8em; } .pageTitle3 .arrow { background: url('http://i.imgur.com/3F51gIF.png') no-repeat center bottom; padding-bottom: 30px; } /*4*/ .pageTitle4 { text-align: center; max-width: 700px; margin: 0 auto; } .pageTitle4 h1 { color: #71b100; font-size: 2em; text-transform: uppercase; } .pageTitle4 h1 span { font-weight: 400; color: #253d4a; } .pageTitle4 h2 { color: #50575e; font-family: 'Bitter', serif; font-size: 14px; font-style: italic; line-height: 1.8em; } .pageTitle4 .arrow { background: url('http://i.imgur.com/3F51gIF.png') no-repeat center bottom; padding-bottom: 30px; }

Related: See More


Questions / Comments: