Created
February 25, 2020 17:11
-
-
Save kholodovz/02b8ec3b4536ac49e5f6f35906f950c0 to your computer and use it in GitHub Desktop.
Whatsapp and Phone panel for mobile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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