Skip to content

Instantly share code, notes, and snippets.

@kholodovz
Created February 25, 2020 17:11
Show Gist options
  • Save kholodovz/02b8ec3b4536ac49e5f6f35906f950c0 to your computer and use it in GitHub Desktop.
Save kholodovz/02b8ec3b4536ac49e5f6f35906f950c0 to your computer and use it in GitHub Desktop.
Whatsapp and Phone panel for mobile
<div class="mobile-call">
<a href="tel:+77084905611" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAABdklEQVRIia3ULUhDURjG8edsyoYO0WbwCwzDjzxQsLisQVEQzEajxWgxiWnFJJgVxSiDBUERg4gWGSLi0GBRED9wf8MmXufOvdfd85QT3ufcH/dyzpVqAsSAZeAQmKudOwnQCmzzkzIw7xpJAAX+5hnocwmt1kG+s+cK6QJefSCA0ShGrLpOSEoEdGdcQNkQ3TYXUE9A713ShgsIn86TpEljzFEUqKm63lnmN5KyxphiFET6eaMTyzznAvFC+5Z50gXyK8BpnbtzAcRdQ7OWi7rgGooBx5Z/3aBrLAN81MEugUgXth62ZPmEBaDFZ98YsAgMh4UMsGvBDoD2mn4cWPd0ysAmkAqDdQBFC3YFjFd7SWDL0jsDusNgaaBkeQjALfDoMwe4BnrDYAPAfcDDgpIPhKrYEPAQAfoEmsNi/cB5g9BaKMSDpYAclVMVNiuA+RfkAUeoHHO/lIBp777GtAqYljQlKSOpU9KLpKKkvKQdY8ybt/8F8jcoaFQQS8oAAAAASUVORK5CYII=">ПОЗВОНИТЬ</a>
<a href="https://wa.me/+77084905611?text=Добрый%20день.%20Желаю%20получить%20консультацию%20по%20вашим%20услугам" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="none" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" fill-rule="nonzero"></path><g fill="#ffffff" fill-rule="evenodd"><path d="M131.70849,40.33349c-12.13574,-12.13574 -28.26074,-18.83349 -45.43555,-18.83349c-35.39941,0 -64.22705,28.80664 -64.22705,64.20606c-0.021,11.31689 2.93945,22.36084 8.56641,32.10303l-9.11231,33.27881l34.05567,-8.94433c9.36426,5.12305 19.94629,7.81055 30.69629,7.83154h0.02099c35.39942,0 64.20606,-28.80664 64.22705,-64.22705c0,-17.15381 -6.67676,-33.27881 -18.79151,-45.41455zM86.27295,139.12012h-0.02099c-9.57422,0 -18.98047,-2.58252 -27.16894,-7.43262l-1.95264,-1.15479l-20.21923,5.29102l5.39599,-19.69433l-1.25977,-2.01562c-5.35401,-8.50342 -8.16748,-18.32959 -8.16748,-28.40771c0,-29.41553 23.95654,-53.35108 53.41406,-53.35108c14.25634,0 27.65185,5.56397 37.72998,15.64209c10.07813,10.09912 15.62109,23.49462 15.62109,37.75097c0,29.43653 -23.95654,53.37207 -53.37207,53.37207zM115.54151,99.14356c-1.5957,-0.79785 -9.49023,-4.68213 -10.95996,-5.20703c-1.46972,-0.5459 -2.54053,-0.79785 -3.61133,0.79785c-1.0708,1.6167 -4.13623,5.22803 -5.08105,6.29883c-0.92383,1.04981 -1.86865,1.19678 -3.46435,0.39893c-1.6167,-0.79785 -6.78174,-2.49854 -12.9126,-7.97852c-4.76611,-4.24121 -7.99951,-9.51123 -8.92334,-11.10693c-0.94483,-1.6167 -0.10498,-2.47754 0.69287,-3.27539c0.73486,-0.71387 1.6167,-1.86866 2.41455,-2.81348c0.79785,-0.92383 1.0708,-1.5957 1.6167,-2.66651c0.5249,-1.0708 0.25195,-2.01562 -0.14697,-2.81347c-0.39893,-0.79785 -3.61133,-8.71338 -4.95508,-11.92578c-1.30176,-3.12842 -2.62451,-2.6875 -3.61133,-2.75049c-0.92383,-0.04199 -1.99463,-0.04199 -3.06543,-0.04199c-1.0708,0 -2.81348,0.39892 -4.2832,2.01563c-1.46973,1.5957 -5.60596,5.47998 -5.60596,13.37451c0,7.89453 5.75293,15.53711 6.55078,16.60791c0.79785,1.0498 11.3169,17.25879 27.4209,24.20849c3.82129,1.65869 6.80273,2.64551 9.1333,3.38037c3.84229,1.21778 7.34864,1.04981 10.12012,0.65088c3.08642,-0.46192 9.49023,-3.88428 10.83398,-7.64258c1.32275,-3.73731 1.32275,-6.94971 0.92383,-7.62158c-0.39893,-0.67187 -1.46973,-1.0708 -3.08643,-1.88965z"></path></g></g></svg>WHATSAPP</a>
</div>
<style>
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:150px;
right:30px;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
.mobile-call{
display: none;
position: fixed;
z-index: 333333333;
bottom: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
.mobile-call a{
width: 50%;
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mobile-call a img{
margin-right: 5px;
}
.mobile-call a svg{
margin-right: 5px;
}
.mobile-call a svg{
z-index: 1;
}
.mobile-call a:first-child{
background-color: #07acba;
color: #fff;
}
.mobile-call a:last-child{
background-color: #75be2b;
color: #fff;
}
@media (max-width: 992px) {
.mobile-call{
display: flex;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment