warning signs sig

<center><div class="name-sig"><div class="name-sig-title"><b>i'll use you as a</b>warning <span>sign</span></div><div class="name-sig-info"><b>00/00</b>MESSAGE HERE YO!</div><div class="name-sig-img" style="background-image: url(IMAGE GOES HERE);"></div><div class="name-sig-link-box"><div class="name-sig-link"><div class="name-sig-link1"><i class="fa fa-star"></i></div><div class="name-sig-link2"><a href="LINK HERE" target="_blank">myoa</a></div></div><div class="name-sig-link"><div class="name-sig-link1"><i class="fa fa-bolt"></i></div><div class="name-sig-link2"><a href="LINK HERE" target="_blank">adoptables</a></div></div><div class="name-sig-link"><div class="name-sig-link1"><i class="fa fa-heartbeat"></i></div><div class="name-sig-link2"><a href="LINK HERE" target="_blank">crackship</a></div></div><div class="name-sig-link"><div class="name-sig-link1"><i class="fa fa-tags"></i></div><div class="name-sig-link2"><a href="LINK HERE" target="_blank">tracker</a></div></div><div class="name-sig-link"><div class="name-sig-link1"><i class="fa fa-wrench"></i></div><div class="name-sig-link2"><a href="LINK HERE" target="_blank">tester</a></div></div></div></div></center>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><style type="text/css">.name-sig { width: 350px; height: 168px; background: #fff; padding: 10px; }.name-sig-title { margin-bottom: 5px; border-bottom: 3px solid #222; font: 900 30px/83% arial; text-align: left; text-transform: uppercase; letter-spacing: -3px; color: #222; }.name-sig-title b { margin-bottom: -3px; display: block; background: #fff; font: bold 8px/100% arial; letter-spacing: 1px; }.name-sig-title span { color: #6AC3BC; }.name-sig-link-box { font: 0px/100% arial; margin-top: 5px; }.name-sig-link { width: 69.5px; height: 27px; display: inline-block; background-color: #292929; margin: auto; position: relative; overflow: hidden; color: #6AC3BC; }.name-sig-link .name-sig-link1 { width: 65px; padding: 5px; position: absolute; top: 0px; font-size: 17px; line-height: 100%; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }.name-sig-link:hover .name-sig-link1 { top: 27px; }.name-sig-link .name-sig-link2 { width: 65px; padding: 5px; position: absolute; top: -27px; font: 11px/100% muli; letter-spacing: .5px; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }.name-sig-link2 a { color: #eee; }.name-sig-link:hover .name-sig-link2 { top: 2px; }.name-sig-info { width: 189px; padding-right: 5px; display: inline-block; vertical-align: middle; font: 10px/100% muli; text-align: justify; letter-spacing: .5px; }.name-sig-info b { margin-right: 8px; float: left; font: 900 18px/100% arial; text-align: center; text-transform: uppercase; letter-spacing: -2px; color: #6AC3BC; }.name-sig-img { width: 150px; height: 100px; display: inline-block; vertical-align: middle; background-size: cover; background-position: center; }</style>