Badge style logo with banner
A Pen by LittleSnippets.net on CodePen.
Badge style logo with banner
A Pen by LittleSnippets.net on CodePen.
<div class="snip1331"> | |
<h1>Woodstone</h1> | |
<h5>Neque porro quisquam</h5> | |
<h6>Est. 1958</h6> | |
</div> | |
<div class="snip1331"> | |
<h1>Vanguard</h1> | |
<h5>Cras ornare tristique elit</h5> | |
<h6>Est. 1965</h6> | |
</div> | |
<div class="snip1331"> | |
<h1>Spartacus</h1> | |
<h5>At vero eos et accusamus</h5> | |
<h6>Est. 1977</h6> | |
</div> |
/* Demo purposes only */ | |
$(".hover").mouseleave( | |
function () { | |
$(this).removeClass("hover"); | |
} | |
); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Raleway:500); | |
@import url(https://fonts.googleapis.com/css?family=Lora:700); | |
.snip1331 { | |
font-family: 'Raleway', Arial, sans-serif; | |
position: relative; | |
float: left; | |
color: #bdbdbd; | |
margin: 60px 25px; | |
max-width: 285px; | |
width: 100%; | |
text-align: center; | |
font-size: 16px; | |
-webkit-box-sizing: content-box; | |
box-sizing: content-box; | |
} | |
.snip1331 h1, | |
.snip1331 h5 { | |
margin: 0; | |
text-transform: uppercase; | |
} | |
.snip1331 h1 { | |
font-family: 'Lora', Arial, sans-serif; | |
font-weight: 700; | |
font-size: 1.8em; | |
line-height: 50px; | |
position: relative; | |
background-color: #bdbdbd; | |
color: #212121; | |
text-align: center; | |
margin: 0 30px 8px; | |
border-top: 6px solid #212121; | |
border-bottom: 6px solid #212121; | |
} | |
.snip1331 h1:before, | |
.snip1331 h1:after { | |
content: ''; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: 5px; | |
border-width: 25px 10px; | |
border-style: solid; | |
} | |
.snip1331 h1:before { | |
left: -23px; | |
border-color: #bdbdbd #bdbdbd #bdbdbd transparent; | |
} | |
.snip1331 h1:after { | |
right: -23px; | |
border-color: #bdbdbd transparent #bdbdbd #bdbdbd; | |
} | |
.snip1331 h5 { | |
font-weight: 500; | |
font-size: 0.6em; | |
} | |
.snip1331 h6 { | |
margin: 0; | |
display: inline-block; | |
position: relative; | |
} | |
.snip1331 h6:before, | |
.snip1331 h6:after { | |
position: absolute; | |
height: 1px; | |
content: ''; | |
background: #bdbdbd; | |
width: 30px; | |
top: 50%; | |
} | |
.snip1331 h6:before { | |
left: -35px; | |
} | |
.snip1331 h6:after { | |
right: -35px; | |
} | |
.snip1331:before { | |
content: ''; | |
position: absolute; | |
width: 180px; | |
height: 180px; | |
border: 8px solid #bdbdbd; | |
left: 50%; | |
top: 50%; | |
-webkit-transform-origin: 0 0; | |
-ms-transform-origin: 0 0; | |
transform-origin: 0 0; | |
-webkit-transform: rotate(45deg) translate(-50%, -50%); | |
transform: rotate(45deg) translate(-50%, -50%); | |
border-radius: 50%; | |
} | |
/* Demo purposes only */ | |
body { | |
background-color: #212121; | |
} |