یک طراحی کاربردی برای اطلاعات تماس وب سایت

<div class=”call”></div>
<div class=”call1″>
<div class=”knoww”>
<div id=”closee”></div>
شماره تماس

09121234567
<div class=”axsocial”><a href=”#”><img src=”images/telegram.png” /></a>
<a href=”#”><img src=”images/whatsapp.png” /></a>
<a href=”#”><img src=”images/instagram.png” /></a></div>
<div id=”socialBtn”></div>
</div>
</div>

.call{position: fixed;z-index: 9999;left: 0; bottom: 0;width: 100px;
border-radius: 50%;
background-color: white;
height: 100px; box-shadow: 0 4px 10px 0 rgba(46,58,70,0.35); left: 20px;
bottom: 20px;}.call:before{content: “\f095”;font-family: “FontAwesome”; font-size: 48px; color: #24cc63;padding-top: 30px;padding-left: 32px;display: block;}.axsocial,.knoww{display:none;}
#closee:before{content: “\f00d”;font-family: “FontAwesome”; font-size: 19px;color:black;display:block;width:20px;height:20px;}
#closee:hover:before{color:red;}
#socialBtn:after{content: “\f078”;font-family: “FontAwesome”; font-size: 19px;color:black;display:block;width:20px;height:20px;text-align:center;margin:0 auto;}
.knoww{position: fixed; z-index: 9999; left: 0; bottom: 0; width: 242px;border: 1px solid lightgrey;padding: 7px;background-color: white;box-shadow: 0 4px 10px 0 rgba(46,58,70,0.35);left: 20px;
bottom: 30px;}
.knoww p{text-align:center;color:grey;font-weight: 900;}
.axsocial img{margin:7%;}
.axsocial img:hover{filter: grayscale(70%);}
.axsocial{border-top: 1px solid grey;}

jQuery(“document”).ready(function($){
$( “#socialBtn” ).click(function(){
$( “.axsocial” ).slideToggle(500);
});$( “#closee” ).click(function(){
$( “.knoww” ).hide(500);
$( “.call” ).show(500);
});$( “.call” ).click(function(){
$( “.knoww” ).show(500);
$( “.call” ).hide(500);
});});