<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;
}
