Cairocoders: CSS

Showing posts with label CSS. Show all posts

Bootstrap Subscribe Newsletter Form inside Modal

Bootstrap Subscribe Newsletter Form inside Modal

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Subscribe Newsletter Form inside Modal</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
    body {
  font-family: 'Varela Round', sans-serif;
 } 
 .modal-newsletter { 
  color: #999;
  font-size: 15px;
 }
 .modal-newsletter .modal-content {
  padding: 40px;
  border-radius: 0;  
  border: none;
 }
 .modal-newsletter .modal-header {
  border-bottom: none;   
        position: relative;
  text-align: center;
  border-radius: 5px 5px 0 0;
 }
 .modal-newsletter h4 {
  color: #000;
  text-align: center;
  font-size: 30px;
  margin: 0 0 25px;
  font-weight: bold;
  text-transform: capitalize;
 }
 .modal-newsletter .close {
  background: #c0c3c8;
  position: absolute;
  top: -15px;
  right: -15px;
  color: #fff;
  text-shadow: none;
  opacity: 0.5;
  width: 22px;
  height: 22px;
  border-radius: 20px;
  font-size: 16px;
 }
 .modal-newsletter .close span {
  position: relative;
  top: -1px;
 }
 .modal-newsletter .close:hover {
  opacity: 0.8;
 }
 .modal-newsletter .form-control, .modal-newsletter .btn {
  min-height: 46px;
  border-radius: 3px; 
 }
 .modal-newsletter .form-control {
  box-shadow: none;
  border-color: #dbdbdb;
 }
 .modal-newsletter .form-control:focus {
  border-color: #19bc9c;
  box-shadow: 0 0 8px rgba(114, 101, 234, 0.5);
 }
    .modal-newsletter .btn {
        color: #fff;
        border-radius: 4px;
  background: #19bc9c;
  text-decoration: none;
  transition: all 0.4s;
        line-height: normal;
  padding: 6px 20px;
  min-width: 150px;
        border: none;
    }
 .modal-newsletter .btn:hover, .modal-newsletter .btn:focus {
  background: #4e3de4;
  outline: none;
 }
 .modal-newsletter .input-group {
  margin: 30px 0 15px;
 }
 .hint-text {
  margin: 100px auto;
  text-align: center;
 }
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $("#myModal").modal('show');
 });
</script>
<div id="myModal" class="modal fade">
 <div class="modal-dialog modal-newsletter">
  <div class="modal-content">
   <form action="confirmation.php" method="post">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span>×</span></button>
    </div>
    <div class="modal-body text-center">
     <h4>Subscribe to our newsletter</h4> 
     <p>Sugnup for our weekly newsletter to get the latest news, updates and amazong offers delivered direcly in your inbox.</p>
     <div class="input-group">
      <input type="email" class="form-control" placeholder="Enter your email" required>
      <span class="input-group-btn">
       <input type="submit" class="btn btn-primary" value="Subscribe">
      </span>
     </div>
    </div>
   </form>   
  </div>
 </div>
</div>
<p class="hint-text"><strong>Note:</strong> Refresh the page or run the code to reload the modal.</p>
</body>
</html>

jQuery CSS Popup modal

jQuery - Popup

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Popup modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
 //loads popup only if it is disabled
 if(popupStatus==0){
  $("#backgroundPopup").css({
   "opacity": "0.7"
  });
  $("#backgroundPopup").fadeIn("slow");
  $("#popupContact").fadeIn("slow");
  popupStatus = 1;
 }
}

//centering popup
function centerPopup(){
 //request data for centering
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $("#popupContact").height();
 var popupWidth = $("#popupContact").width();
 //centering
 $("#popupContact").css({
  "position": "absolute",
  "top": windowHeight/2-popupHeight/2,
  "left": windowWidth/2-popupWidth/2
 });
}

//disabling popup with jQuery magic!
function disablePopup(){
 //disables popup only if it is enabled
 if(popupStatus==1){
  $("#backgroundPopup").fadeOut("slow");
  $("#popupContact").fadeOut("slow");
  popupStatus = 0;
 }
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 //LOADING POPUP
 //Click the button event!
 $("#button").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup();
 });
  //CLOSING POPUP
 //Click the x event!
 $("#popupContactClose").click(function(){
  disablePopup();
 });
  //Click out event!
 $("#backgroundPopup").click(function(){
  disablePopup();
 });
  //Press Escape event!
 $(document).keypress(function(e){
  if(e.keyCode==27 && popupStatus==1){
   disablePopup();
  }
 });
});
</script>
</head>
<body>
<p><h1 align="center">jQuery Popup Modal</h1></p>
<div id="button"><input type="submit" value="PopUp!" /></div>

 <div id="popupContact">
  <a id="popupContactClose"><img src="../img/delete00.png"></a>
  <h1>Title!</h1>
  <p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl </p>
  <p>risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante </p>
  <p>orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla.</p>
 </div>
 <div id="backgroundPopup"></div>
<style>
body{
 background:#fff none repeat scroll 0%;
 line-height:1;
 font-size: 12px;
 font-family:arial,sans-serif;
 margin:0pt;
 height:100%;
}
a{
 cursor: pointer;
 text-decoration:none;
}
#button{
 text-align:center;
 margin:100px;
}
#backgroundPopup{
 display:none;
 position:fixed;
 height:100%;
 width:100%;
 top:0;
 left:0;
 background:#000000;
 border:1px solid #cecece;
 z-index:1;
}
#popupContact{
 display:none;
 position:fixed;
 height:300px;
 width:400px;
 background:#FFFFFF;
 border:2px solid #cecece;
 z-index:2;
 padding:12px;
 font-size:13px;
}
#popupContact h1{
 text-align:left;
 color:#6FA5FD;
 font-size:22px;
 font-weight:700;
 border-bottom:1px dotted #D3D3D3;
 padding-bottom:2px;
 margin-bottom:20px;
}
#popupContactClose{
 font-size:14px;
 line-height:14px;
 right:6px;
 top:4px;
 position:absolute;
 color:#6fa5fd;
 font-weight:700;
 display:block;
}
</style>
</body>
</html>

Jquery CSS Notification Boxes

Jquery Notification Boxes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Notification Boxes</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('.notification').hover(function() {
     $(this).css('cursor','pointer');
    }, function() {
     $(this).css('cursor','auto');
   });
   $('.notification span').click(function() {
                $(this).parents('.notification').fadeOut(800);
            });
   
   $('.notification').click(function() {
                $(this).fadeOut(800);
            });
   
});
</script>
</head>

<body>
 <h1>Notification Boxes</h1>
    <div class="notification success">
        <span></span>
        <div class="text">
         <p><strong>Success!</strong> This is a success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
        </div>
    </div>
 
    <div class="notification warning">
        <span></span>
        <div class="text">
         <p><strong>Warning!</strong> This is a warning notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
 
    <div class="notification tip">
        <span></span>
        <div class="text">
         <p><strong>Quick Tip!</strong> This is a quick tip notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div> 
 
 <div class="notification error">
        <span></span>
        <div class="text">
         <p><strong>Error!</strong> This is a error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
        </div>
    </div>
    
     <div class="notification secure">
        <span></span>
        <div class="text">
         <p><strong>Secure Area!</strong> This is a secure area notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>        
    </div>
    
     <div class="notification info">
        <span></span>
        <div class="text">
         <p><strong>Info!</strong> This is a info notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
    
    <div class="notification message">
        <span></span>
        <div class="text">
         <p><strong>Message!</strong> This is a message notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
    
    <div class="notification download">
        <span></span>
        <div class="text">
         <p><strong>Download!</strong> This is a download notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
   
    <div class="notification purchase">
        <span></span>
        <div class="text">
         <p><strong>Purchase!</strong> This is a purchase notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
        </div>
    </div>
    
    <div class="notification print">
        <span></span>
        <div class="text">
         <p><strong>Print!</strong> This is a print notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
 
</body>
</html>

//css/style.css
body {
 margin: 70px;
 padding: 0;
 background: #e5e5e5;
}

#new {
 margin-bottom: 20px; 
}

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
 color: #323232;
 margin: 50px;
}
/*NOTIFICATION BOX - NO DESCRIPTION */
.notification {
 min-height: 70px;
 width: 580px;
 display: block;
 position: relative;
 /*Border Radius*/
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px; 
 /*Box Shadow*/
 -moz-box-shadow: 2px 2px 2px #cfcfcf;
 -webkit-box-shadow: 2px 2px 4px #cfcfcf;
 box-shadow: 2px 2px 2px #cfcfcf;
 margin-bottom: 30px;
}
.notification span {
 background: url(../images/close.png) no-repeat right top;
 display: block;
 width: 19px;
 height: 19px;
 position: absolute;
 top:-9px;
 right: -8px;
}
.notification .text {
 overflow: hidden;
}
.notification p {
 width: 500px; 
 font-family: Arial, Helvetica, sans-serif;
 color: #323232;
 font-size: 14px;
 line-height: 21px;
 text-align: justify;
 float: right;
 margin-right: 15px;
 /* TEXT SHADOW */
  text-shadow: 0px 0px 1px #f9f9f9;
}

/*SUCCESS BOX*/
.success {
 border-top: 1px solid #edf7d0;
 border-bottom: 1px solid #b7e789;
 /*Background Gradients*/
 background: #dff3a8;
 background: -moz-linear-gradient(top,#dff3a8,#c4fb92);
 background: -webkit-gradient(linear, left top, left bottom, from(#dff3a8), to(#c4fb92));
}
.success:before {
 content: url(../images/success.png);
 float: left;
 margin: 23px 15px 0px 15px;
}
.success strong {
 color: #61b316;
 margin-right: 15px;
}

/*WARNING BOX*/
.warning {
 border-top: 1px solid #fefbcd;
 border-bottom: 1px solid #e6e837;
 /*Background Gradients*/
 background: #feffb1;
 background: -moz-linear-gradient(top,#feffb1,#f0f17f);
 background: -webkit-gradient(linear, left top, left bottom, from(#feffb1), to(#f0f17f));
}
.warning:before {
 content: url(../images/warning.png);
 float: left;
 margin: 15px 15px 0px 25px;
}
.warning strong {
 color: #e5ac00;
 margin-right: 15px;
}

/*QUICK TIP BOX*/
.tip {
 border-top: 1px solid #fbe4ae;
 border-bottom: 1px solid #d9a87d;
 /*Background Gradients*/
 background: #f9d9a1;
 background: -moz-linear-gradient(top,#f9d9a1,#eabc7a);
 background: -webkit-gradient(linear, left top, left bottom, from(#f9d9a1), to(#eabc7a));
}
.tip:before {
 content: url(../images/tip.png);
 float: left;
 margin: 20px 15px 0px 15px;
}
.tip strong {
 color: #b26b17;
 margin-right: 15px;
}
/*ERROR BOX*/
.error {
 border-top: 1px solid #f7d0d0;
 border-bottom: 1px solid #c87676;
 /*Background Gradients*/
 background: #f3c7c7;
 background: -moz-linear-gradient(top,#f3c7c7,#eea2a2);
 background: -webkit-gradient(linear, left top, left bottom, from(#f3c7c7), to(#eea2a2));
}
.error:before {
 content: url(../images/error.png);
 float: left;
 margin: 20px 15px 0px 15px;
}
.error strong {
 color: #b31616;
 margin-right: 15px;
}
/*SECURE AREA BOX*/
.secure {
 border-top: 1px solid #efe0fe;
 border-bottom: 1px solid #d3bee9;
 /*Background Gradients*/
 background: #e5cefe;
 background: -moz-linear-gradient(top,#e5cefe,#e4bef9);
 background: -webkit-gradient(linear, left top, left bottom, from(#e5cefe), to(#e4bef9));
}
.secure:before {
 content: url(../images/secure.png);
 float: left;
 margin: 18px 15px 0px 15px;
}
.secure strong {
 color: #6417b2;
 margin-right: 15px;
}
/*INFO BOX*/
.info {
 border-top: 1px solid #f3fbff;
 border-bottom: 1px solid #bedae9;
 /*Background Gradients*/
 background: #e0f4ff;
 background: -moz-linear-gradient(top,#e0f4ff,#d4e6f0);
 background: -webkit-gradient(linear, left top, left bottom, from(#e0f4ff), to(#d4e6f0));
}
.info:before {
 content: url(../images/info.png);
 float: left;
 margin: 18px 15px 0px 21px;
}
.info strong {
 color: #177fb2;
 margin-right: 15px;
}
/*MESSAGE BOX*/
.message {
 border-top: 1px solid #f4f4f4;
 border-bottom: 1px solid #d7d7d7;
 
 /*Background Gradients*/
 background: #f0f0f0;
 background: -moz-linear-gradient(top,#f0f0f0,#e1e1e1);
 background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e1e1e1));
}
.message:before {
 content: url(../images/message.png);
 float: left;
 margin: 25px 15px 0px 15px;
}
.message strong {
 color: #323232;
 margin-right: 15px;
}
/*DONWLOAD BOX*/
.download {
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #eeeeee;
 
 /*Background Gradients*/
 background: #f7f7f7;
 background: -moz-linear-gradient(top,#f7f7f7,#f0f0f0);
 background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#f0f0f0));
}

.download:before {
 content: url(../images/download.png);
 float: left;
 margin: 16px 15px 0px 18px;
}

.download strong {
 color: #037cda;
 margin-right: 15px;
}

/*PURCHASE BOX*/

.purchase {
 border-top: 1px solid #d1f7f8;
 border-bottom: 1px solid #8eabb1;
 
 /*Background Gradients*/
 background: #c4e4e4;
 background: -moz-linear-gradient(top,#c4e4e4,#97b8bf);
 background: -webkit-gradient(linear, left top, left bottom, from(#c4e4e4), to(#97b8bf));
}

.purchase:before {
 content: url(../images/purchase.png);
 float: left;
 margin: 19px 15px 0px 15px;
}

.purchase strong {
 color: #426065;
 margin-right: 15px;
}

/*PRINT BOX*/

.print {
 border-top: 1px solid #dde9f3;
 border-bottom: 1px solid #8fa6b2;
 
 /*Background Gradients*/
 background: #cfdde8;
 background: -moz-linear-gradient(top,#cfdde8,#9eb3bd);
 background: -webkit-gradient(linear, left top, left bottom, from(#cfdde8), to(#9eb3bd));
}

.print:before {
 content: url(../images/print.png);
 float: left;
 margin: 19px 15px 0px 15px;
}

.print strong {
 color: #3f4c6b;
 margin-right: 15px;
}

Download Source Code and Images

Create a Tabbed Content With jQuery And CSS

Create a Tabbed Content With jQuery And CSS
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Tabbed Content With jQuery And CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("a.tab").click(function () {
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".content").slideUp();
  var content_show = $(this).attr("title");
  $("#"+content_show).slideDown();
  return false
 });
});
</script>
</head>
<body>
<div id="tabbed_box_1">
 <div class="tabbed_area">
	<ul class="tabs">
         <li><a href="#" title="content_1" class="tab active">Popular</a></li>
         <li><a href="#" title="content_2" class="tab">Latest</a></li>
         <li><a href="#" title="content_3" class="tab">Comments</a></li>
     </ul>
     <div id="content_1" class="content">
      <ul>
          <li><a href="">Testing The Elements <small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes <small>January 11, 2010</small></a></li>
          <li><a href="">Image in a post<small>January 11, 2010</small></a></li>
          <li><a href="">Sed tincidunt augue et nibh <small>November 11, 2011</small></a></li>
          <li><a href="">Morbi rhoncus arcu egestas erat <small>December 11, 2011</small></a></li>
          <li><a href="">Web Development <small>December 18, 2011</small></a></li>
		</ul>
     </div>
	 <div id="content_2" class="content">
      <ul>
          <li><a href="">Image in a post <small>January 11, 2010</small></a></li>
          <li><a href="">Testing The Elements<small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes<small>January 11, 2010</small></a></li>
          <li><a href="">Lobortis tellus diam <small>January 11, 2010</small></a></li>
          <li><a href="">This is another featured post<small>January 7, 2011</small></a></li>
          <li><a href="">Testing The Elements<small>January 20, 2011</small></a></li>
		</ul>
     </div>
	 <div id="content_3" class="content">
      <ul>
          <li><a href="">admin: Looks like the Old Course at St. Andrews!...</a></li>
          <li><a href="">admin: Very nice boxes!...</a></li>
          <li><a href="">admin: And another threaded reply!...</a></li>
          <li><a href="">admin: This is a threaded reply!...</a></li>
          <li><a href="">admin: And this is a third comment with some lorem ipsum!...</a></li>
		</ul>
     </div>
 </div>
</div> 

<style>
body {
background-position:top center;
background-color:#EBE9E1;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_area {
	border:2px solid #E6E6E6;
	background-color:#F5F4F0;
	padding:8px;
	border-radius: 8px; /*w3c border radius*/
	box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
	-moz-border-radius: 8px; /* mozilla border radius */
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
	background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
	-webkit-border-radius: 8px; /* webkit border radius */
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
	background-color:#EBE9E1;
	color:#000000;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #FFFFFF;
	background-position:bottom;
}
ul.tabs li a:hover {
background-color:#E4E3DD;
border-color:#FFFFFF;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #EBE9E1;
	border-bottom: 1px solid #ffffff;
	background-image:url(tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #EBE9E1; 
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(content_bottom.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
}
#content_2, #content_3 { display:none; }
.content ul {
	margin:0px;
	padding:0px 0px 0px 0px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>
</body>
</html>

Social Media Floating Sidebar with CSS

Social Media Floating Sidebar with CSS

<!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>