1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Floating Sidebar with CSS</title><style> body { background-color: #02c54c ;}/* Sticky Social Icons */.sticky-container{ padding:0px; margin:0px; position:fixed; right:-130px;top:230px; width:210px; z-index: 1100;}.sticky li{list-style-type:none;background-color:#fff;color:#efefef;height:43px;padding:0px;margin:0px 0px 1px 0px; -webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; cursor:pointer;}.sticky li:hover{margin-left:-115px;}.sticky li img{float:left;margin:5px 4px;margin-right:5px;}.sticky li p{padding-top:5px;margin:0px;line-height:16px; font-size:11px;}.sticky li p a{ text-decoration:none; color:#2C3539;}.sticky li p a:hover{text-decoration:underline;}/* Sticky Social Icons */</style></head><body><div class="container"> <div class="row"> <div class="col-lg-12"> <div class="sticky-container"> <ul class="sticky"> <li> <img src="img/facebook-circle.png" width="32" height="32"> <p><a href="#" target="_blank">Like Us on<br>Facebook</a></p> </li> <li> <img height="32" src="img/twitter-circle.png" width="32" height="32"> <p><a href="#" target="_blank">Follow Us on<br>Twitter</a></p> </li> <li> <img src="img/gplus-circle.png" width="32" height="32"> <p><a href="#" target="_blank">Follow Us on<br>Google+</a></p> </li> <li> <img src="img/linkedin-circle.png" width="32" height="32"> <p><a href="#" target="_blank">Follow Us on<br>LinkedIn</a></p> </li> <li> <img src="img/youtube-circle.png" width="32" height="32"> <p><a href="#" target="_blank">Subscribe on<br>YouYube</a></p> </li> <li> <img src="img/pin-circle.png" width="32" height="32"> <p><a href="#" target="_blank">Follow Us on<br>Pinterest</a></p> </li> </ul> </div> </div> </div></div> </body></html> |
