<div class="snip1537">
<h1>American</h1>
<h6>Restaurant</h6><br/>
<h5>Est. 1977</h5><br/><i class="ion-star"></i>
</div>
<div class="snip1537">
<h1>Nightbridge</h1>
<h6>High School</h6><br/>
<h5>Est. 1977</h5><br/><i class="ion-star"></i>
</div>
<div class="snip1537">
<h1>Junction</h1>
<h6>Riverside</h6><br/>
<h5>Est. 1977</h5><br/><i class="ion-star"></i>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Teko:700);
.snip1537 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
display: inline-block;
color: #bdbdbd;
margin: 60px 20px;
max-width: 285px;
width: 100%;
text-align: center;
font-size: 16px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.snip1537 h1,
.snip1537 h5 {
margin: 0;
text-transform: uppercase;
}
.snip1537 h1 {
font-family: 'Teko', Arial, sans-serif;
font-weight: 700;
font-size: 54px;
padding: 0;
text-align: center;
margin: 0;
line-height: 27px;
}
.snip1537 h5 {
background-color: #bdbdbd;
color: #212121;
display: inline-block;
font-size: 0.6em;
font-weight: 700;
line-height: 18px;
padding: 0 20px;
position: relative;
}
.snip1537 h5:before,
.snip1537 h5:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 2px;
border-width: 9px 5px;
border-style: solid;
opacity: 0.8;
}
.snip1537 h5:before {
right: 100%;
border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.snip1537 h5:after {
left: 100%;
border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.snip1537 h6 {
margin: 0;
display: inline-block;
position: relative;
text-transform: uppercase;
}
.snip1537 h6:before,
.snip1537 h6:after {
position: absolute;
height: 2px;
content: '';
width: 30px;
top: 50%;
border-top: 2px solid #bdbdbd;
border-bottom: 2px solid #bdbdbd;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.snip1537 h6:before {
left: -35px;
}
.snip1537 h6:after {
right: -35px;
}
.snip1537 i {
font-size: 22px;
line-height: 36px;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);