<div class="su-container">
<div class="sidebar_about_author">
<div class='inner_wrapper'>
<div class='subox-img'>
<img alt='Sundaku' class='img-responsive' height='auto' src='https://1.bp.blogspot.com/-YvvOg9EiQTE/XTnBnAb2o4I/AAAAAAAACDU/_O_x0dYtyV0A-HLWhZpTRye5jpnB0aVtQCLcBGAs/s1600/20190725_214748_0000.png' title='Sundaku' width='300' ></img>
<div class='joinfloat-img'><span class='subox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=4643508814622367414' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-laptop'></i> Join Our Site</a></span></div>
</div>
</div>
<div class='subox-info'>
<h4><span>Sundaku.com</span></h4>
<p>Micro Blogging + SEO Tips + Make Money</p>
</div>
<div class='subox-wrap'>
<ul class='suextend'>
<li class='subox-icon facebook'>
<a href='https://www.facebook.com/sundaku' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook fa-fw'></i>Follow Us</a>
</li>
<li class='subox-icon twitter'>
<a href='https://twitter.com/robbizaelani' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter fa-fw'></i>Follow Us</a>
</li>
<li class='subox-icon circle'>
<a href='https://plus.google.com/+robbizaelani' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus fa-fw'></i>Circle Us</a>
</li>
</ul>
</div>
</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}

body {
background: #37B185;
padding: 0;
margin: 0;
font-family: 'Roboto';
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a,
a:visited {
color: #555;
outline: none;
text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
color: #22a1c4;
text-decoration: none;
}

.su-container {
position: relative;
display: block;
background: #fff;
width: 320px;
margin: 5% auto;
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
overflow: hidden;
}


/* Sosial Media Widget */
.subox-info h4 {
background: transparent;
position: relative;
padding: 0;
margin: 0;
border: 0;
text-align: center;
font-size: 110%
}

.subox-img {
position: relative;
max-height: 135px;
overflow: hidden
}

.subox-img img {
max-width: 100%;
width: 100%;
transition: all .6s;
}

.subox-img:hover img {
transform: scale(1.2) rotate(-9deg)
}

.subox-img:before {
content: '';
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
transition: all .3s
}

.subox-img:hover:before {
background: rgba(0, 0, 0, 0.5);
}

.joinfloat-img {
width: 56%;
position: absolute;
top: 36%;
bottom: 36%;
left: 22.6%;
z-index: 4
}

.subox-float {
text-align: center;
display: table;
width: 100%;
height: 100%
}

.subox-float a {
background: transparent;
color: #37B185;
padding: 8px 14px;
z-index: 2;
display: table-cell;
width: 100%;
font-size: 90%;
text-transform: uppercase;
vertical-align: middle;
border: 1px solid #37B185;
border-radius: 4px;
transition: all .3s
}

.subox-float:hover a {
background: #37B185;
color: #fefefe;
border-color: transparent;
}

.subox-float a i {
font-weight: normal;
margin: 0 6px 0 0
}

.subox-wrap {
display: block;
margin: 14px auto;
position: relative;
}

.subox-wrap .bsdextend {
width: 100%;
display: block;
}

.suextend {
text-align: center;
font-size: 17px
}

.suextend .subox-icon {
display: inline-block;
border: 0;
margin: 0;
padding: 0;
width: 32%;
}

.suextend .subox-icon a {
background: #768187;
display: inline-block;
font-weight: 410;
color: #fefefe;
padding: 0 12px;
line-height: 32px;
border-radius: 4px;
font-size: 11px;
width: 100%;
}

.suextend .subox-icon i {
font-family: fontawesome;
margin: 0 4px 0 0
}

.subox-icon.facebook a {
background: #3b5998
}

.subox-icon.twitter a {
background: #19bfe5
}

.subox-icon.circle a {
background: #d64136
}

.subox-icon.facebook a:hover,
.subox-icon.twitter a:hover,
.subox-icon.circle a:hover {
background: #415471
}

.extender .subox-icon:hover a,
.extender .subox-icon a:hover {
color: #fefefe;
}

.subox-info {
margin: 11px 0 0 0;
font-size: 12px;
text-align: center;
}

.subox-info p {
margin: 6px 0
}

.subox-info h4 {
position: relative;
margin-bottom: 11px;
font-size: 15px;
text-transform: uppercase;
color: #37B185;
font-weight: 600
}

.subox-info h4 span {
position: relative;
display: inline-block;
padding: 0 11px;
margin: 0 auto;
}

.subox-info h4:before,
.subox-info h4:after {
position: absolute;
top: 52%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: rgba(0, 0, 0, 0.07);
}

.subox-info h4:before {
margin-left: -50%;
text-align: right;
}