<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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="social-cont">
<div class="col-md-4">
<span class="inline"><i class="fa fa-thumbs-up up"></i> 150</span>
<span class="inline"><i class="fa fa-thumbs-down down"></i> 21</span>
</div>
<div class="col-md-8">
<div class="social">
<span class="text-right"><p>Share on Social</p></span>
<a class="social-icon facebook" target="blank" data-tooltip="Facebook" href="http://www.facebook.com/SOJITRAHIREN">
<i class="fa fa-facebook"></i>
</a>
<a class="social-icon twitter" target="blank" data-tooltip="Twitter" href="https://www.twitter.com/Sojitra_Hiren">
<i class="fa fa-twitter"></i>
</a>
<a class="social-icon linkedin" target="blank" data-tooltip="LinkedIn" href="https://www.linkedin.com/in/hirensojitraamreli">
<i class="fa fa-linkedin"></i>
</a>
<a class="social-icon google-plus" target="blank" data-tooltip="Google +" href="https://plus.google.com/+HirenSojitraa">
<i class="fa fa-google-plus"></i>
</a>
<a class="social-icon email" target="blank" data-tooltip="Contact e-Mail" href="mailto:hirensojitra007@gmail.com">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
.social-cont{
border-style: solid;
border-width: 1px;
border-color: rgb(238, 238, 238);
background-color: rgba(240, 240, 240, 0);
padding-top:7px;
padding-bottom:7px;
display: table;
width: 100%;
margin-top: 15px;
margin-bottom: 30px;
}
.social-cont span.inline{
display: table-cell;
vertical-align: middle;
height: 38px;
font-size: 16px;
font-family: "Roboto Bold";
padding-right: 15px;
}
.social-cont span.inline i{
font-size: 20px;
}
.social-cont span.inline i.up{
color: #00b226;
}
.social-cont span.inline i.down{
color: #b20000;
}
.social-cont .social{
text-align: right;
display: inline-block;
float: right;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(1.334em) translateZ(0);
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(1.334em) translateZ(0);
}
100% {
opacity: 1;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(1.334em) translateZ(0);
-moz-transform: translateX(1.334em) translateZ(0);
-ms-transform: translateX(1.334em) translateZ(0);
-o-transform: translateX(1.334em) translateZ(0);
transform: translateX(1.334em) translateZ(0);
}
100% {
opacity: 1;
}
}
.social span.text-right{
display: table;
float: left;
height: 38px;
vertical-align: middle;
}
.social span.text-right p{
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
padding-right: 10px;
font-size: 16px;
font-family: "Roboto Semi Bold";
color: rgb(68, 68, 68);
line-height: 1.2;
}
a.social-icon, a.social-icon:visited {
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
transition-timing-function: ease;
background-color: #f0f0f0;
text-align: center;
display: inline-block;
width: 35px;
height: 35px;
padding: 5px 0px;
color: #444;
margin: 2px;
font-size: 20px;
display: table;
float: left;
border-style: solid;
border-width: 1px;
border-color: rgb(204, 204, 204);
border-radius: 4px;
/* Color each button differently */
}
a.social-icon:focus, a.social-icon:active, a.social-icon:hover{
text-decoration: none;
color: #FFF;
border:none;
}
.social-icon i{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100%;
width: 100%;
}
.social-icon.facebook {
/* Animation */
-webkit-animation: fadeInRight 0.6s 0.25s forwards;
animation: fadeInRight 0.6s 0.25s forwards;
opacity: 0;
/* Color */
}
.social-icon.facebook:hover , .social-icon.facebook:active, .social-icon.facebook:focus {
opacity: 1;
background-color: #0077b2;
}
.social-icon.twitter {
/* Animation */
-webkit-animation: fadeInRight 0.6s 0.5s forwards;
animation: fadeInRight 0.6s 0.5s forwards;
opacity: 0;
/* Color */
}
.social-icon.twitter:hover, .social-icon:nth-child(2):active, .social-icon:nth-child(2):focus {
opacity: 1;
background-color: #008cb2;
}
.social-icon.linkedin {
/* Animation */
-webkit-animation: fadeInRight 0.6s 0.75s forwards;
animation: fadeInRight 0.6s 0.75s forwards;
opacity: 0;
/* Color */
}
.social-icon.linkedin:hover, .social-icon.linkedin:active, .social-icon.linkedin:focus {
opacity: 1;
background-color: #00a1b2;
}
.social-icon.google-plus {
/* Animation */
-webkit-animation: fadeInRight 0.6s 1s forwards;
animation: fadeInRight 0.6s 1s forwards;
opacity: 0;
/* Color */
}
.social-icon.google-plus:hover, .social-icon.google-plus:active, .social-icon.google-plus:focus {
opacity: 1;
background-color: #e3401d;
}
.social-icon.email {
/* Animation */
-webkit-animation: fadeInRight 0.6s 1.25s forwards;
animation: fadeInRight 0.6s 1.25s forwards;
opacity: 0;
/* Color */
}
.social-icon.email:hover, .social-icon.email:active, .social-icon.email:focus {
opacity: 1;
background-color: #e3401d;
}
.social-icon img {
width: 20px;
}
/* ============================ */
/* TOOLTIP */
/* ============================ */
[data-tooltip] {
position: relative;
/* tooltip arrow */
/* tooltip box */
}
[data-tooltip]:before, [data-tooltip]:after {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: 100%;
left: 50%;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-timing-function: linear;
position: absolute;
left: 50%;
top: 100%;
bottom: 100%;
visibility: hidden;
opacity: 0;
z-index: 9999;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
[data-tooltip]:before {
content: "";
border-color: #323232;
border-style: none;
border: 5px solid transparent;
border-bottom: 6px solid #323232;
margin-top: -4px;
}
[data-tooltip]:after {
content: attr(data-tooltip);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: auto;
height: 22px;
padding: 11px 11px 0 11px;
font-size: 13px;
line-height: 11px;
white-space: nowrap;
background-color: #323232;
color: #ecf0f1;
margin-top: 7px;
}
[data-tooltip]:hover, [data-tooltip]:focus {
background-color: transparent;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 767px){.social-cont{
margin-bottom: 0px;
margin-left: -15px;
margin-right: -15px;
min-width: calc(100% + 30px);
overflow: hidden;
}
}
@media screen and (max-width:348px){
.social-cont .social-icon{
height:29px;
width: 29px;
font-size: 18px;
}
}
