Add new services.html file to the project
This commit is contained in:
fabio
parent
71bb9ea5c3
commit
b62661003c
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_178)">
|
||||
<path d="M14.5006 0.247498H2.05201C0.920734 0.247498 0 1.16824 0 2.2995V6.78527C0 7.91653 0.920734 8.83727 2.05201 8.83727H2.22922V27.7051C2.22922 31.0396 4.94213 33.7525 8.27664 33.7525C11.6111 33.7525 14.3234 31.0396 14.3234 27.7051V8.83727H14.5006C15.6319 8.83727 16.5526 7.91654 16.5526 6.78527V2.2995C16.5526 1.16824 15.6319 0.247498 14.5006 0.247498ZM13.3001 27.7051C13.3001 30.4753 11.0469 32.7291 8.27665 32.7291C5.50644 32.7291 3.25257 30.4753 3.25257 27.7051V8.83727H13.3001V27.7051ZM15.5293 6.78527C15.5293 7.35223 15.0676 7.81394 14.5006 7.81394C12.1761 7.81394 6.51387 7.81394 2.05201 7.81394C1.48504 7.81394 1.02334 7.35224 1.02334 6.78527V2.2995C1.02334 1.73254 1.48503 1.27083 2.05201 1.27083H2.45441V3.25688C2.45441 3.53936 2.6836 3.76855 2.96608 3.76855C3.24857 3.76855 3.47775 3.53936 3.47775 3.25688V1.27083H5.10936V6.16367C5.10936 6.44615 5.33855 6.67534 5.62104 6.67534C5.90352 6.67534 6.13271 6.44616 6.13271 6.16367V1.27083H7.76498V3.25688C7.76498 3.53936 7.99416 3.76855 8.27666 3.76855C8.55915 3.76855 8.78833 3.53936 8.78833 3.25688V1.27083H10.4199V6.16367C10.4199 6.44615 10.6491 6.67534 10.9316 6.67534C11.2141 6.67534 11.4433 6.44616 11.4433 6.16367V1.27083H13.0749V3.25688C13.0749 3.53936 13.3041 3.76855 13.5866 3.76855C13.869 3.76855 14.0982 3.53936 14.0982 3.25688V1.27083H14.5006C15.0676 1.27083 15.5293 1.73253 15.5293 2.2995L15.5293 6.78527Z" fill="#4753BF"/>
|
||||
<path d="M6.63637 26.0995H9.91625C10.8423 26.0995 11.5952 25.3466 11.5952 24.4205V14.3457C11.5952 13.4197 10.8423 12.6668 9.91625 12.6668H6.63637C5.7103 12.6668 4.95746 13.4197 4.95746 14.3457V24.4205C4.95746 25.3466 5.7103 26.0995 6.63637 26.0995ZM5.98079 14.3457C5.98079 13.984 6.2746 13.6901 6.63637 13.6901H9.91625C10.278 13.6901 10.5718 13.984 10.5718 14.3457V24.4205C10.5718 24.7823 10.278 25.0761 9.91625 25.0761H6.63637C6.2746 25.0761 5.98079 24.7823 5.98079 24.4205V14.3457Z" fill="#4753BF"/>
|
||||
<path d="M31.9487 0.247498H19.5001C18.3688 0.247498 17.4481 1.16823 17.4481 2.2995V6.78527C17.4481 7.91653 18.3688 8.83727 19.5001 8.83727H19.6773V27.7051C19.6773 31.0396 22.3895 33.7525 25.724 33.7525C29.0585 33.7525 31.7715 31.0396 31.7715 27.7051V8.83727H31.9487C33.0799 8.83727 34 7.91654 34 6.78527V2.2995C34 1.16824 33.0799 0.247498 31.9487 0.247498ZM30.7481 27.7051C30.7481 30.4753 28.4942 32.7291 25.724 32.7291C22.9538 32.7291 20.7006 30.4753 20.7006 27.7051V8.83727H30.7481V27.7051ZM32.9767 6.78527C32.9767 7.35223 32.5156 7.81394 31.9487 7.81394C28.3074 7.81394 25.6975 7.81394 19.5001 7.81394C18.9331 7.81394 18.4714 7.35224 18.4714 6.78527V2.2995C18.4714 1.73254 18.9331 1.27083 19.5001 1.27083H19.9018V3.25688C19.9018 3.53936 20.131 3.76855 20.4135 3.76855C20.696 3.76855 20.9251 3.53936 20.9251 3.25688V1.27083H22.5574V6.16367C22.5574 6.44615 22.7866 6.67534 23.0691 6.67534C23.3516 6.67534 23.5808 6.44616 23.5808 6.16367V1.27083H25.2124V3.25688C25.2124 3.53936 25.4416 3.76855 25.724 3.76855C26.0065 3.76855 26.2357 3.53936 26.2357 3.25688V1.27083H27.868V6.16367C27.868 6.44615 28.0972 6.67534 28.3796 6.67534C28.6621 6.67534 28.8913 6.44616 28.8913 6.16367V1.27083H30.5229V3.25688C30.5229 3.53936 30.7521 3.76855 31.0346 3.76855C31.3171 3.76855 31.5463 3.53936 31.5463 3.25688V1.27083H31.9487C32.5156 1.27083 32.9767 1.73253 32.9767 2.2995L32.9767 6.78527Z" fill="#4753BF"/>
|
||||
<path d="M24.0844 26.0995H27.3643C28.2904 26.0995 29.0432 25.3466 29.0432 24.4205V14.3457C29.0432 13.4197 28.2904 12.6668 27.3643 12.6668H24.0844C23.1584 12.6668 22.4055 13.4197 22.4055 14.3457V24.4205C22.4055 25.3466 23.1584 26.0995 24.0844 26.0995ZM23.4289 14.3457C23.4289 13.984 23.7227 13.6901 24.0844 13.6901H27.3643C27.7261 13.6901 28.0199 13.984 28.0199 14.3457V24.4205C28.0199 24.7823 27.7261 25.0761 27.3643 25.0761H24.0844C23.7227 25.0761 23.4289 24.7823 23.4289 24.4205V14.3457Z" fill="#4753BF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_178">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_185)">
|
||||
<path d="M15.1816 20.9983C17.2177 18.9622 17.2177 15.6476 15.1816 13.6108C13.1441 11.5734 9.83028 11.5741 7.79415 13.6108C5.75311 15.6519 5.75245 18.9579 7.79415 20.9983C9.83294 23.0384 13.1406 23.0393 15.1816 20.9983ZM8.50538 14.3221C10.1546 12.6742 12.8284 12.6814 14.4703 14.3221C16.1148 15.9672 16.1148 18.6426 14.4703 20.287C12.8236 21.9338 10.1534 21.935 8.50538 20.287C6.85701 18.6387 6.85739 15.9701 8.50538 14.3221Z" fill="#4753BF"/>
|
||||
<path d="M32.3436 9.46459C30.9643 8.72464 29.2106 9.1256 28.3061 10.4404L26.8921 12.4877L26.8423 4.98563C26.8423 3.63082 25.7424 2.43669 24.2705 2.43669C23.6869 2.44063 23.1479 2.64103 22.7177 2.97504V2.90758C22.6989 1.26318 21.18 0.047444 19.5453 0.437899C18.4312 0.698551 17.6178 1.76803 17.5949 2.99665C16.9813 2.52314 16.1816 2.36007 15.3983 2.55982C14.2745 2.84536 13.4899 3.89781 13.4899 5.12184L13.4991 6.78009C13.0033 6.40548 12.4021 6.22603 11.7734 6.27449C10.4334 6.36356 9.39081 7.53979 9.39933 8.95244L9.40322 9.52336C8.04762 9.88373 6.80251 10.5874 5.78486 11.6055C3.3101 14.0803 2.76435 17.7624 4.22608 20.7936C2.83512 21.5385 1.52754 22.4637 0.993499 22.9971C-0.333946 24.3245 -0.330071 26.4689 0.998082 27.7957C2.31045 29.108 4.4586 29.133 5.7973 27.7943C6.32683 27.2612 7.25243 25.9534 8.00149 24.5619C9.39829 25.2313 10.9404 25.5106 12.629 25.2708C12.9156 25.4751 13.2117 25.6613 13.5198 25.8215C12.7089 26.0908 12.1202 26.8494 12.1244 27.7485L12.1362 31.6151C12.1415 32.7311 13.0511 33.6355 14.1664 33.6355H14.1763L25.5037 33.5825C26.6229 33.5766 27.5293 32.6617 27.5241 31.5437L27.5123 27.6778C27.5123 27.6771 27.5123 27.6771 27.5123 27.6765C27.5077 26.7085 26.8211 25.9013 25.9108 25.7044C27.4451 24.6964 28.4676 22.9027 29.8241 20.5215L33.6056 13.7333C34.4542 12.205 33.8875 10.2801 32.3436 9.46459ZM10.4079 9.31788L10.4053 8.9459C10.4 8.07944 11.0438 7.33087 11.8441 7.27783C12.7147 7.21066 13.3947 7.87247 13.4899 8.55295C13.4899 8.55442 13.4903 8.55606 13.4903 8.55753L13.4979 9.50462C12.5082 9.25352 11.5315 9.16786 10.4079 9.31788ZM7.12023 24.0816C6.42209 25.379 5.55302 26.6135 5.08475 27.0844C4.15147 28.0177 2.63988 28.015 1.70933 27.0844C0.775765 26.1508 0.769616 24.6434 1.70474 23.7083C2.17759 23.2361 3.41407 22.3657 4.71277 21.6715C5.00617 22.1229 5.38476 22.6003 5.78879 23.0036C5.78924 23.0041 5.78973 23.0044 5.79018 23.0049C5.79063 23.0053 5.79096 23.0058 5.7914 23.0062C6.31211 23.527 7.05313 24.0385 7.12023 24.0816ZM6.51115 22.3025C6.50804 22.2994 6.50464 22.2969 6.50158 22.2939C3.78341 19.5736 3.70098 15.1132 6.49609 12.3167C9.27207 9.54065 13.7668 9.60461 16.479 12.3167C19.1514 14.9888 19.2369 19.2733 16.6835 22.063C13.8736 25.1211 9.23598 25.019 6.51115 22.3025ZM26.5063 27.6804L26.5181 31.5476C26.5208 32.1115 26.063 32.5732 25.4984 32.5765L14.171 32.6296C14.1697 32.6296 14.1678 32.6296 14.1665 32.6296C13.6039 32.6296 13.1448 32.1731 13.1422 31.6112L13.1304 27.7446C13.1278 27.18 13.5849 26.7183 14.1501 26.7157L25.4775 26.6626H25.4821C26.0446 26.6626 26.5031 27.1185 26.5063 27.6804ZM32.7267 13.2447C32.7261 13.2447 32.7261 13.2447 32.7261 13.2454C32.34 13.9385 34.1246 10.7347 28.9505 20.0238C26.8161 23.7699 25.7473 25.6364 22.3594 25.6207L17.0088 25.6541C16.9983 25.6541 16.9878 25.6541 16.978 25.6541C15.9347 25.6541 14.9333 25.4144 14.0289 24.9533C15.1629 24.5799 16.4018 23.8436 17.3851 22.7847C20.3632 19.5917 20.2405 14.6526 17.1921 11.6042C16.5138 10.9269 15.528 10.2398 14.5067 9.82873C14.5057 9.37907 14.4954 4.92862 14.4959 5.11924C14.4959 4.35823 14.9687 3.70659 15.6459 3.53434C16.617 3.28725 17.5198 3.96119 17.5963 4.92375L17.6512 11.8347C17.6532 12.1111 17.8785 12.3338 18.1542 12.3338H18.1582C18.4358 12.3318 18.6592 12.1046 18.6572 11.8269C18.5968 2.52504 18.6007 3.11458 18.6002 3.04708C18.6002 2.26184 19.094 1.5768 19.7777 1.417C20.7765 1.17458 21.7007 1.91686 21.7117 2.91544C21.7907 15.1115 21.7634 10.9051 21.7693 11.8151C21.7713 12.0914 21.9959 12.3141 22.2723 12.3141H22.2762C22.5539 12.3122 22.7773 12.0849 22.7753 11.8072L22.7233 5.01321C22.7233 5.01035 22.7249 5.00806 22.7249 5.00527C22.7249 4.1493 23.421 3.44789 24.2737 3.44265C25.1637 3.44265 25.8364 4.16513 25.8364 4.9889L25.8934 13.6076C23.132 13.8626 20.9625 16.1896 20.9625 19.0165C20.9625 19.2942 21.1878 19.5195 21.4655 19.5195C21.7431 19.5195 21.9684 19.2942 21.9684 19.0165C21.9684 16.5743 23.9548 14.588 26.397 14.588C26.3981 14.588 26.399 14.5873 26.4001 14.5873C26.594 14.5881 26.765 14.4421 26.8135 14.3712L29.1345 11.0108C29.7246 10.1542 30.946 9.85755 31.8714 10.3527C32.9153 10.9031 33.3027 12.2054 32.7267 13.2447Z" fill="#4753BF"/>
|
||||
<path d="M16.627 29.1428H15.492C15.2144 29.1428 14.9891 29.3681 14.9891 29.6458C14.9891 29.9235 15.2144 30.1488 15.492 30.1488H16.627C16.9047 30.1488 17.13 29.9235 17.13 29.6458C17.13 29.3681 16.9047 29.1428 16.627 29.1428Z" fill="#4753BF"/>
|
||||
<path d="M10.5632 14.9004C10.5632 14.6227 10.3379 14.3974 10.0602 14.3974C9.09486 14.3974 8.30896 15.1826 8.30896 16.148C8.30896 16.4257 8.53425 16.651 8.81193 16.651C9.08961 16.651 9.31491 16.4257 9.31491 16.148C9.31491 15.7374 9.64957 15.4034 10.0602 15.4034C10.3379 15.4034 10.5632 15.1781 10.5632 14.9004Z" fill="#4753BF"/>
|
||||
<path d="M13.1998 16.1277C13.5542 15.9234 14.0126 16.0439 14.2189 16.3995C14.358 16.6394 14.6668 16.7211 14.9066 16.5816C15.1463 16.4421 15.2281 16.1342 15.0886 15.8939C14.6033 15.0589 13.5312 14.774 12.6956 15.258C12.4552 15.3968 12.3733 15.7046 12.5128 15.945C12.651 16.1847 12.9588 16.2685 13.1998 16.1277Z" fill="#4753BF"/>
|
||||
<path d="M12.1114 19.2975C12.389 19.2975 12.6143 19.0722 12.6143 18.7945C12.6143 18.5168 12.389 18.2915 12.1114 18.2915C11.146 18.2915 10.3608 19.0767 10.3608 20.0421C10.3608 20.3198 10.5861 20.5451 10.8638 20.5451C11.1414 20.5451 11.3667 20.3198 11.3667 20.0421C11.3667 19.6315 11.7007 19.2975 12.1114 19.2975Z" fill="#4753BF"/>
|
||||
<path d="M11.8965 17.782C12.167 17.8381 12.4352 17.6662 12.4925 17.393C12.5495 17.1212 12.3753 16.854 12.1035 16.797C11.7003 16.7131 11.4422 16.319 11.5278 15.9155C11.5848 15.6437 11.4106 15.3772 11.1388 15.3195C10.8716 15.2639 10.6011 15.4361 10.5428 15.7085C10.3447 16.6557 10.9479 17.5828 11.8965 17.782Z" fill="#4753BF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_185">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.9999 27C14.9999 27 24.3913 18.6522 24.3913 12.3913C24.3913 7.20463 20.1866 3 14.9999 3C9.81327 3 5.60864 7.20463 5.60864 12.3913C5.60864 18.6522 14.9999 27 14.9999 27Z" stroke="white" stroke-width="2"/>
|
||||
<path d="M18.0003 12.0002C18.0003 13.657 16.6572 15.0002 15.0003 15.0002C13.3435 15.0002 12.0003 13.657 12.0003 12.0002C12.0003 10.3433 13.3435 9.00019 15.0003 9.00019C16.6572 9.00019 18.0003 10.3433 18.0003 12.0002Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.85938 8.4375L14.1995 14.4253C14.6811 14.7711 15.3189 14.7711 15.8005 14.4253L24.1406 8.4375M6.5625 23.75H23.4375C24.9908 23.75 26.25 22.4442 26.25 20.8333V9.16667C26.25 7.55584 24.9908 6.25 23.4375 6.25H6.5625C5.0092 6.25 3.75 7.55584 3.75 9.16667V20.8333C3.75 22.4442 5.0092 23.75 6.5625 23.75Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.8293 23.4637C25.8293 23.4637 24.381 24.8862 24.026 25.3033C23.4478 25.9203 22.7666 26.2116 21.8736 26.2116C21.7877 26.2116 21.6961 26.2116 21.6102 26.2059C19.91 26.0974 18.33 25.4347 17.145 24.8691C13.9049 23.3037 11.0598 21.0814 8.69549 18.2649C6.74339 15.9169 5.43818 13.746 4.57376 11.4151C4.04137 9.99263 3.84673 8.88432 3.9326 7.83886C3.98985 7.17044 4.24745 6.61629 4.7226 6.14212L6.67469 4.19401C6.9552 3.93121 7.25288 3.78839 7.54484 3.78839C7.90549 3.78839 8.19744 4.00548 8.38063 4.1883C8.38636 4.19401 8.39208 4.19972 8.39781 4.20544C8.74701 4.53107 9.07904 4.86813 9.42824 5.22805C9.6057 5.41086 9.78889 5.59368 9.97208 5.7822L11.5349 7.34183C12.1417 7.9474 12.1417 8.50727 11.5349 9.11284C11.3689 9.27851 11.2086 9.44419 11.0426 9.60415C10.5617 10.0955 10.9395 9.71848 10.4414 10.1641C10.43 10.1755 10.4185 10.1812 10.4128 10.1927C9.92048 10.684 10.0121 11.1639 10.1151 11.4895C10.1208 11.5066 10.1266 11.5238 10.1323 11.5409C10.5387 12.5235 11.1112 13.449 11.9813 14.5516L11.9871 14.5573C13.5671 16.4997 15.2329 18.0136 17.0705 19.1734C17.3052 19.3219 17.5457 19.4419 17.7747 19.5561C17.9807 19.659 18.1754 19.7561 18.3414 19.8589C18.3643 19.8703 18.3872 19.8875 18.4101 19.8989C18.6047 19.996 18.7879 20.0417 18.9768 20.0417C19.452 20.0417 19.7497 19.7447 19.847 19.6475L20.9691 18.5277C21.1637 18.3335 21.4728 18.0993 21.8335 18.0993C22.1884 18.0993 22.4804 18.3221 22.6578 18.5163C22.6636 18.522 22.6636 18.522 22.6693 18.5277L25.8236 21.6756C26.4132 22.2583 25.8293 23.4637 25.8293 23.4637Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_178)">
|
||||
<path d="M14.5006 0.247498H2.05201C0.920734 0.247498 0 1.16824 0 2.2995V6.78527C0 7.91653 0.920734 8.83727 2.05201 8.83727H2.22922V27.7051C2.22922 31.0396 4.94213 33.7525 8.27664 33.7525C11.6111 33.7525 14.3234 31.0396 14.3234 27.7051V8.83727H14.5006C15.6319 8.83727 16.5526 7.91654 16.5526 6.78527V2.2995C16.5526 1.16824 15.6319 0.247498 14.5006 0.247498ZM13.3001 27.7051C13.3001 30.4753 11.0469 32.7291 8.27665 32.7291C5.50644 32.7291 3.25257 30.4753 3.25257 27.7051V8.83727H13.3001V27.7051ZM15.5293 6.78527C15.5293 7.35223 15.0676 7.81394 14.5006 7.81394C12.1761 7.81394 6.51387 7.81394 2.05201 7.81394C1.48504 7.81394 1.02334 7.35224 1.02334 6.78527V2.2995C1.02334 1.73254 1.48503 1.27083 2.05201 1.27083H2.45441V3.25688C2.45441 3.53936 2.6836 3.76855 2.96608 3.76855C3.24857 3.76855 3.47775 3.53936 3.47775 3.25688V1.27083H5.10936V6.16367C5.10936 6.44615 5.33855 6.67534 5.62104 6.67534C5.90352 6.67534 6.13271 6.44616 6.13271 6.16367V1.27083H7.76498V3.25688C7.76498 3.53936 7.99416 3.76855 8.27666 3.76855C8.55915 3.76855 8.78833 3.53936 8.78833 3.25688V1.27083H10.4199V6.16367C10.4199 6.44615 10.6491 6.67534 10.9316 6.67534C11.2141 6.67534 11.4433 6.44616 11.4433 6.16367V1.27083H13.0749V3.25688C13.0749 3.53936 13.3041 3.76855 13.5866 3.76855C13.869 3.76855 14.0982 3.53936 14.0982 3.25688V1.27083H14.5006C15.0676 1.27083 15.5293 1.73253 15.5293 2.2995L15.5293 6.78527Z" fill="#4753BF"/>
|
||||
<path d="M6.63637 26.0995H9.91625C10.8423 26.0995 11.5952 25.3466 11.5952 24.4205V14.3457C11.5952 13.4197 10.8423 12.6668 9.91625 12.6668H6.63637C5.7103 12.6668 4.95746 13.4197 4.95746 14.3457V24.4205C4.95746 25.3466 5.7103 26.0995 6.63637 26.0995ZM5.98079 14.3457C5.98079 13.984 6.2746 13.6901 6.63637 13.6901H9.91625C10.278 13.6901 10.5718 13.984 10.5718 14.3457V24.4205C10.5718 24.7823 10.278 25.0761 9.91625 25.0761H6.63637C6.2746 25.0761 5.98079 24.7823 5.98079 24.4205V14.3457Z" fill="#4753BF"/>
|
||||
<path d="M31.9487 0.247498H19.5001C18.3688 0.247498 17.4481 1.16823 17.4481 2.2995V6.78527C17.4481 7.91653 18.3688 8.83727 19.5001 8.83727H19.6773V27.7051C19.6773 31.0396 22.3895 33.7525 25.724 33.7525C29.0585 33.7525 31.7715 31.0396 31.7715 27.7051V8.83727H31.9487C33.0799 8.83727 34 7.91654 34 6.78527V2.2995C34 1.16824 33.0799 0.247498 31.9487 0.247498ZM30.7481 27.7051C30.7481 30.4753 28.4942 32.7291 25.724 32.7291C22.9538 32.7291 20.7006 30.4753 20.7006 27.7051V8.83727H30.7481V27.7051ZM32.9767 6.78527C32.9767 7.35223 32.5156 7.81394 31.9487 7.81394C28.3074 7.81394 25.6975 7.81394 19.5001 7.81394C18.9331 7.81394 18.4714 7.35224 18.4714 6.78527V2.2995C18.4714 1.73254 18.9331 1.27083 19.5001 1.27083H19.9018V3.25688C19.9018 3.53936 20.131 3.76855 20.4135 3.76855C20.696 3.76855 20.9251 3.53936 20.9251 3.25688V1.27083H22.5574V6.16367C22.5574 6.44615 22.7866 6.67534 23.0691 6.67534C23.3516 6.67534 23.5808 6.44616 23.5808 6.16367V1.27083H25.2124V3.25688C25.2124 3.53936 25.4416 3.76855 25.724 3.76855C26.0065 3.76855 26.2357 3.53936 26.2357 3.25688V1.27083H27.868V6.16367C27.868 6.44615 28.0972 6.67534 28.3796 6.67534C28.6621 6.67534 28.8913 6.44616 28.8913 6.16367V1.27083H30.5229V3.25688C30.5229 3.53936 30.7521 3.76855 31.0346 3.76855C31.3171 3.76855 31.5463 3.53936 31.5463 3.25688V1.27083H31.9487C32.5156 1.27083 32.9767 1.73253 32.9767 2.2995L32.9767 6.78527Z" fill="#4753BF"/>
|
||||
<path d="M24.0844 26.0995H27.3643C28.2904 26.0995 29.0432 25.3466 29.0432 24.4205V14.3457C29.0432 13.4197 28.2904 12.6668 27.3643 12.6668H24.0844C23.1584 12.6668 22.4055 13.4197 22.4055 14.3457V24.4205C22.4055 25.3466 23.1584 26.0995 24.0844 26.0995ZM23.4289 14.3457C23.4289 13.984 23.7227 13.6901 24.0844 13.6901H27.3643C27.7261 13.6901 28.0199 13.984 28.0199 14.3457V24.4205C28.0199 24.7823 27.7261 25.0761 27.3643 25.0761H24.0844C23.7227 25.0761 23.4289 24.7823 23.4289 24.4205V14.3457Z" fill="#4753BF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_178">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_185)">
|
||||
<path d="M15.1816 20.9983C17.2177 18.9622 17.2177 15.6476 15.1816 13.6108C13.1441 11.5734 9.83028 11.5741 7.79415 13.6108C5.75311 15.6519 5.75245 18.9579 7.79415 20.9983C9.83294 23.0384 13.1406 23.0393 15.1816 20.9983ZM8.50538 14.3221C10.1546 12.6742 12.8284 12.6814 14.4703 14.3221C16.1148 15.9672 16.1148 18.6426 14.4703 20.287C12.8236 21.9338 10.1534 21.935 8.50538 20.287C6.85701 18.6387 6.85739 15.9701 8.50538 14.3221Z" fill="#4753BF"/>
|
||||
<path d="M32.3436 9.46459C30.9643 8.72464 29.2106 9.1256 28.3061 10.4404L26.8921 12.4877L26.8423 4.98563C26.8423 3.63082 25.7424 2.43669 24.2705 2.43669C23.6869 2.44063 23.1479 2.64103 22.7177 2.97504V2.90758C22.6989 1.26318 21.18 0.047444 19.5453 0.437899C18.4312 0.698551 17.6178 1.76803 17.5949 2.99665C16.9813 2.52314 16.1816 2.36007 15.3983 2.55982C14.2745 2.84536 13.4899 3.89781 13.4899 5.12184L13.4991 6.78009C13.0033 6.40548 12.4021 6.22603 11.7734 6.27449C10.4334 6.36356 9.39081 7.53979 9.39933 8.95244L9.40322 9.52336C8.04762 9.88373 6.80251 10.5874 5.78486 11.6055C3.3101 14.0803 2.76435 17.7624 4.22608 20.7936C2.83512 21.5385 1.52754 22.4637 0.993499 22.9971C-0.333946 24.3245 -0.330071 26.4689 0.998082 27.7957C2.31045 29.108 4.4586 29.133 5.7973 27.7943C6.32683 27.2612 7.25243 25.9534 8.00149 24.5619C9.39829 25.2313 10.9404 25.5106 12.629 25.2708C12.9156 25.4751 13.2117 25.6613 13.5198 25.8215C12.7089 26.0908 12.1202 26.8494 12.1244 27.7485L12.1362 31.6151C12.1415 32.7311 13.0511 33.6355 14.1664 33.6355H14.1763L25.5037 33.5825C26.6229 33.5766 27.5293 32.6617 27.5241 31.5437L27.5123 27.6778C27.5123 27.6771 27.5123 27.6771 27.5123 27.6765C27.5077 26.7085 26.8211 25.9013 25.9108 25.7044C27.4451 24.6964 28.4676 22.9027 29.8241 20.5215L33.6056 13.7333C34.4542 12.205 33.8875 10.2801 32.3436 9.46459ZM10.4079 9.31788L10.4053 8.9459C10.4 8.07944 11.0438 7.33087 11.8441 7.27783C12.7147 7.21066 13.3947 7.87247 13.4899 8.55295C13.4899 8.55442 13.4903 8.55606 13.4903 8.55753L13.4979 9.50462C12.5082 9.25352 11.5315 9.16786 10.4079 9.31788ZM7.12023 24.0816C6.42209 25.379 5.55302 26.6135 5.08475 27.0844C4.15147 28.0177 2.63988 28.015 1.70933 27.0844C0.775765 26.1508 0.769616 24.6434 1.70474 23.7083C2.17759 23.2361 3.41407 22.3657 4.71277 21.6715C5.00617 22.1229 5.38476 22.6003 5.78879 23.0036C5.78924 23.0041 5.78973 23.0044 5.79018 23.0049C5.79063 23.0053 5.79096 23.0058 5.7914 23.0062C6.31211 23.527 7.05313 24.0385 7.12023 24.0816ZM6.51115 22.3025C6.50804 22.2994 6.50464 22.2969 6.50158 22.2939C3.78341 19.5736 3.70098 15.1132 6.49609 12.3167C9.27207 9.54065 13.7668 9.60461 16.479 12.3167C19.1514 14.9888 19.2369 19.2733 16.6835 22.063C13.8736 25.1211 9.23598 25.019 6.51115 22.3025ZM26.5063 27.6804L26.5181 31.5476C26.5208 32.1115 26.063 32.5732 25.4984 32.5765L14.171 32.6296C14.1697 32.6296 14.1678 32.6296 14.1665 32.6296C13.6039 32.6296 13.1448 32.1731 13.1422 31.6112L13.1304 27.7446C13.1278 27.18 13.5849 26.7183 14.1501 26.7157L25.4775 26.6626H25.4821C26.0446 26.6626 26.5031 27.1185 26.5063 27.6804ZM32.7267 13.2447C32.7261 13.2447 32.7261 13.2447 32.7261 13.2454C32.34 13.9385 34.1246 10.7347 28.9505 20.0238C26.8161 23.7699 25.7473 25.6364 22.3594 25.6207L17.0088 25.6541C16.9983 25.6541 16.9878 25.6541 16.978 25.6541C15.9347 25.6541 14.9333 25.4144 14.0289 24.9533C15.1629 24.5799 16.4018 23.8436 17.3851 22.7847C20.3632 19.5917 20.2405 14.6526 17.1921 11.6042C16.5138 10.9269 15.528 10.2398 14.5067 9.82873C14.5057 9.37907 14.4954 4.92862 14.4959 5.11924C14.4959 4.35823 14.9687 3.70659 15.6459 3.53434C16.617 3.28725 17.5198 3.96119 17.5963 4.92375L17.6512 11.8347C17.6532 12.1111 17.8785 12.3338 18.1542 12.3338H18.1582C18.4358 12.3318 18.6592 12.1046 18.6572 11.8269C18.5968 2.52504 18.6007 3.11458 18.6002 3.04708C18.6002 2.26184 19.094 1.5768 19.7777 1.417C20.7765 1.17458 21.7007 1.91686 21.7117 2.91544C21.7907 15.1115 21.7634 10.9051 21.7693 11.8151C21.7713 12.0914 21.9959 12.3141 22.2723 12.3141H22.2762C22.5539 12.3122 22.7773 12.0849 22.7753 11.8072L22.7233 5.01321C22.7233 5.01035 22.7249 5.00806 22.7249 5.00527C22.7249 4.1493 23.421 3.44789 24.2737 3.44265C25.1637 3.44265 25.8364 4.16513 25.8364 4.9889L25.8934 13.6076C23.132 13.8626 20.9625 16.1896 20.9625 19.0165C20.9625 19.2942 21.1878 19.5195 21.4655 19.5195C21.7431 19.5195 21.9684 19.2942 21.9684 19.0165C21.9684 16.5743 23.9548 14.588 26.397 14.588C26.3981 14.588 26.399 14.5873 26.4001 14.5873C26.594 14.5881 26.765 14.4421 26.8135 14.3712L29.1345 11.0108C29.7246 10.1542 30.946 9.85755 31.8714 10.3527C32.9153 10.9031 33.3027 12.2054 32.7267 13.2447Z" fill="#4753BF"/>
|
||||
<path d="M16.627 29.1428H15.492C15.2144 29.1428 14.9891 29.3681 14.9891 29.6458C14.9891 29.9235 15.2144 30.1488 15.492 30.1488H16.627C16.9047 30.1488 17.13 29.9235 17.13 29.6458C17.13 29.3681 16.9047 29.1428 16.627 29.1428Z" fill="#4753BF"/>
|
||||
<path d="M10.5632 14.9004C10.5632 14.6227 10.3379 14.3974 10.0602 14.3974C9.09486 14.3974 8.30896 15.1826 8.30896 16.148C8.30896 16.4257 8.53425 16.651 8.81193 16.651C9.08961 16.651 9.31491 16.4257 9.31491 16.148C9.31491 15.7374 9.64957 15.4034 10.0602 15.4034C10.3379 15.4034 10.5632 15.1781 10.5632 14.9004Z" fill="#4753BF"/>
|
||||
<path d="M13.1998 16.1277C13.5542 15.9234 14.0126 16.0439 14.2189 16.3995C14.358 16.6394 14.6668 16.7211 14.9066 16.5816C15.1463 16.4421 15.2281 16.1342 15.0886 15.8939C14.6033 15.0589 13.5312 14.774 12.6956 15.258C12.4552 15.3968 12.3733 15.7046 12.5128 15.945C12.651 16.1847 12.9588 16.2685 13.1998 16.1277Z" fill="#4753BF"/>
|
||||
<path d="M12.1114 19.2975C12.389 19.2975 12.6143 19.0722 12.6143 18.7945C12.6143 18.5168 12.389 18.2915 12.1114 18.2915C11.146 18.2915 10.3608 19.0767 10.3608 20.0421C10.3608 20.3198 10.5861 20.5451 10.8638 20.5451C11.1414 20.5451 11.3667 20.3198 11.3667 20.0421C11.3667 19.6315 11.7007 19.2975 12.1114 19.2975Z" fill="#4753BF"/>
|
||||
<path d="M11.8965 17.782C12.167 17.8381 12.4352 17.6662 12.4925 17.393C12.5495 17.1212 12.3753 16.854 12.1035 16.797C11.7003 16.7131 11.4422 16.319 11.5278 15.9155C11.5848 15.6437 11.4106 15.3772 11.1388 15.3195C10.8716 15.2639 10.6011 15.4361 10.5428 15.7085C10.3447 16.6557 10.9479 17.5828 11.8965 17.782Z" fill="#4753BF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_185">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.9999 27C14.9999 27 24.3913 18.6522 24.3913 12.3913C24.3913 7.20463 20.1866 3 14.9999 3C9.81327 3 5.60864 7.20463 5.60864 12.3913C5.60864 18.6522 14.9999 27 14.9999 27Z" stroke="white" stroke-width="2"/>
|
||||
<path d="M18.0003 12.0002C18.0003 13.657 16.6572 15.0002 15.0003 15.0002C13.3435 15.0002 12.0003 13.657 12.0003 12.0002C12.0003 10.3433 13.3435 9.00019 15.0003 9.00019C16.6572 9.00019 18.0003 10.3433 18.0003 12.0002Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.85938 8.4375L14.1995 14.4253C14.6811 14.7711 15.3189 14.7711 15.8005 14.4253L24.1406 8.4375M6.5625 23.75H23.4375C24.9908 23.75 26.25 22.4442 26.25 20.8333V9.16667C26.25 7.55584 24.9908 6.25 23.4375 6.25H6.5625C5.0092 6.25 3.75 7.55584 3.75 9.16667V20.8333C3.75 22.4442 5.0092 23.75 6.5625 23.75Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.8293 23.4637C25.8293 23.4637 24.381 24.8862 24.026 25.3033C23.4478 25.9203 22.7666 26.2116 21.8736 26.2116C21.7877 26.2116 21.6961 26.2116 21.6102 26.2059C19.91 26.0974 18.33 25.4347 17.145 24.8691C13.9049 23.3037 11.0598 21.0814 8.69549 18.2649C6.74339 15.9169 5.43818 13.746 4.57376 11.4151C4.04137 9.99263 3.84673 8.88432 3.9326 7.83886C3.98985 7.17044 4.24745 6.61629 4.7226 6.14212L6.67469 4.19401C6.9552 3.93121 7.25288 3.78839 7.54484 3.78839C7.90549 3.78839 8.19744 4.00548 8.38063 4.1883C8.38636 4.19401 8.39208 4.19972 8.39781 4.20544C8.74701 4.53107 9.07904 4.86813 9.42824 5.22805C9.6057 5.41086 9.78889 5.59368 9.97208 5.7822L11.5349 7.34183C12.1417 7.9474 12.1417 8.50727 11.5349 9.11284C11.3689 9.27851 11.2086 9.44419 11.0426 9.60415C10.5617 10.0955 10.9395 9.71848 10.4414 10.1641C10.43 10.1755 10.4185 10.1812 10.4128 10.1927C9.92048 10.684 10.0121 11.1639 10.1151 11.4895C10.1208 11.5066 10.1266 11.5238 10.1323 11.5409C10.5387 12.5235 11.1112 13.449 11.9813 14.5516L11.9871 14.5573C13.5671 16.4997 15.2329 18.0136 17.0705 19.1734C17.3052 19.3219 17.5457 19.4419 17.7747 19.5561C17.9807 19.659 18.1754 19.7561 18.3414 19.8589C18.3643 19.8703 18.3872 19.8875 18.4101 19.8989C18.6047 19.996 18.7879 20.0417 18.9768 20.0417C19.452 20.0417 19.7497 19.7447 19.847 19.6475L20.9691 18.5277C21.1637 18.3335 21.4728 18.0993 21.8335 18.0993C22.1884 18.0993 22.4804 18.3221 22.6578 18.5163C22.6636 18.522 22.6636 18.522 22.6693 18.5277L25.8236 21.6756C26.4132 22.2583 25.8293 23.4637 25.8293 23.4637Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 448 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_769_611)">
|
||||
<path d="M15.4517 6.46855C16.6076 7.19331 17.4181 8.41976 17.5657 9.84338C18.0371 10.0636 18.5604 10.1903 19.1151 10.1903C21.1402 10.1903 22.7816 8.54892 22.7816 6.52409C22.7816 4.49894 21.1402 2.85754 19.1151 2.85754C17.1093 2.85817 15.4822 4.47024 15.4517 6.46855ZM13.0496 13.9757C15.0748 13.9757 16.7162 12.334 16.7162 10.3092C16.7162 8.28435 15.0745 6.64296 13.0496 6.64296C11.0248 6.64296 9.38246 8.28466 9.38246 10.3095C9.38246 12.3343 11.0248 13.9757 13.0496 13.9757ZM14.6049 14.2256H11.4937C8.90511 14.2256 6.79915 16.3319 6.79915 18.9205V22.7253L6.80883 22.7849L7.0709 22.8669C9.54126 23.6388 11.6875 23.8962 13.454 23.8962C16.9043 23.8962 18.9042 22.9125 19.0274 22.8497L19.2723 22.7259H19.2985V18.9205C19.2995 16.3319 17.1935 14.2256 14.6049 14.2256ZM20.671 10.4405H17.5838C17.5504 11.6757 17.0232 12.788 16.1892 13.5879C18.4902 14.2721 20.1737 16.4058 20.1737 18.9261V20.0986C23.2218 19.9869 24.9784 19.123 25.0941 19.065L25.339 18.9408H25.3652V15.1348C25.3652 12.5465 23.2593 10.4405 20.671 10.4405ZM6.61601 10.1909C7.33329 10.1909 8.00064 9.98159 8.56597 9.62498C8.74568 8.45283 9.37403 7.42855 10.2716 6.73094C10.2754 6.6623 10.2819 6.59428 10.2819 6.52502C10.2819 4.49988 8.64023 2.85848 6.61601 2.85848C4.59056 2.85848 2.94947 4.49988 2.94947 6.52502C2.94947 8.54923 4.59056 10.1909 6.61601 10.1909ZM9.90879 13.5879C9.07889 12.792 8.55349 11.6857 8.51512 10.458C8.40061 10.4496 8.28736 10.4405 8.17068 10.4405H5.05979C2.47119 10.4405 0.365234 12.5465 0.365234 15.1348V18.9402L0.374906 18.9988L0.63698 19.0815C2.61876 19.7002 4.38745 19.9853 5.9237 20.0752V18.9261C5.92433 16.4058 7.60722 14.2727 9.90879 13.5879Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_769_611">
|
||||
<rect width="25" height="25" fill="white" transform="translate(0.365234 0.877014)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#039be5" d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z"/><path fill="#fff" d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z"/></svg>
|
||||
|
After Width: | Height: | Size: 446 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px" fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z"/><path fill="#fff" d="M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z"/><path fill="#cfd8dc" d="M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z"/><path fill="#40c351" d="M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z"/><path fill="#fff" fill-rule="evenodd" d="M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_250)">
|
||||
<path d="M3.09457 15.7447V24.7065C3.09457 27.0981 5.04036 29.0436 7.43196 29.0436H22.5765C24.9681 29.0436 26.9139 27.0981 26.9139 24.7065V15.7909C28.0334 15.9588 29.0676 15.436 29.6225 14.5229C30.3317 13.3554 30.0164 11.819 28.8887 10.9494L16.6457 1.51404C15.68 0.770549 14.3304 0.770549 13.363 1.51404L1.04818 11.005C-0.163 11.9386 -0.363318 13.7051 0.650725 14.888C1.25191 15.5892 2.18956 15.8786 3.09457 15.7447ZM26.0648 24.7065C26.0648 26.6299 24.4999 28.1945 22.5765 28.1945H7.43196C5.50856 28.1945 3.94364 26.6299 3.94364 24.7065V15.5102C4.07355 15.4413 4.20318 15.359 4.33308 15.2628C17.9979 4.73311 6.52612 13.5731 14.4619 7.45781C14.7809 7.21127 15.2275 7.21127 15.5465 7.45781C16.6336 8.29551 24.734 14.5374 25.6779 15.2647C25.8009 15.3595 25.9305 15.4415 26.0648 15.5128L26.0648 24.7065ZM1.56668 11.6777L13.881 2.18704C14.5429 1.67766 15.4666 1.67738 16.1275 2.18677L28.3702 11.6219C29.1421 12.217 29.3732 13.2977 28.8967 14.0821C28.3148 15.0394 27.0826 15.2419 26.2309 14.6146C26.018 14.4578 16.1219 6.82761 16.0653 6.78397C15.4435 6.30522 14.5719 6.30015 13.9434 6.78397C10.1578 9.70159 7.71493 11.5843 3.91324 14.5142C3.09544 15.1447 1.92068 15.0648 1.29528 14.3352C0.601938 13.5262 0.735776 12.3175 1.56668 11.6777Z" fill="white"/>
|
||||
<path d="M19.6233 16.4671C19.204 15.7426 18.272 15.4919 17.5468 15.9099L16.5244 16.4994V15.3211C16.5244 14.495 15.8655 13.8013 15.0045 13.8013C14.164 13.8013 13.4802 14.4831 13.4802 15.3211V16.4986L12.4556 15.9063C11.7188 15.4986 10.7868 15.7739 10.3858 16.4668C9.96154 17.1986 10.2143 18.129 10.943 18.5449L11.9642 19.1337L10.9424 19.7229C10.221 20.1401 9.96083 21.0717 10.3852 21.8039C10.8034 22.5309 11.7337 22.7794 12.4628 22.3572L13.4802 21.7688V22.9462C13.4802 23.7656 14.1488 24.4705 15.0045 24.4705C15.8425 24.4705 16.5244 23.7867 16.5244 22.9462V21.7677L17.5423 22.3547C18.2562 22.7785 19.2027 22.5316 19.6233 21.8047C19.6238 21.8041 19.6244 21.8033 19.6247 21.8025C20.0401 21.0742 19.7897 20.1411 19.0661 19.7224L18.0448 19.1337L19.0669 18.5444C19.7489 18.149 20.0655 17.2641 19.6233 16.4671ZM18.6421 17.8092L16.9829 18.7658C16.7006 18.9289 16.699 19.3375 16.9829 19.5015L18.6415 20.4576C18.9616 20.6428 19.0719 21.0568 18.8878 21.3807C18.7104 21.6856 18.2825 21.8064 17.9707 21.6217L16.3118 20.6649C16.0304 20.5022 15.6753 20.7058 15.6753 21.0327V22.9462C15.6753 23.3185 15.3743 23.6214 15.0045 23.6214C14.6311 23.6214 14.3293 23.3112 14.3293 22.9462V21.0327C14.3293 20.7063 13.9751 20.5023 13.6922 20.6651L12.0378 21.6223C11.7164 21.807 11.3073 21.7031 11.1204 21.3796C10.9316 21.0515 11.0492 20.6419 11.367 20.4581L13.0261 19.5015C13.3084 19.3385 13.3101 18.9298 13.0261 18.7658L11.3653 17.8084C11.0438 17.6247 10.9329 17.2168 11.1204 16.8921C11.3006 16.5809 11.7091 16.4637 12.0377 16.6453L13.6922 17.6019C13.9758 17.7649 14.3293 17.5605 14.3293 17.2343V15.3211C14.3293 14.9513 14.6322 14.6503 15.0045 14.6503C15.3888 14.6503 15.6753 14.9551 15.6753 15.3211V17.2343C15.6753 17.5611 16.0302 17.765 16.3118 17.6022L17.9705 16.6456C18.2919 16.461 18.7032 16.5724 18.8845 16.8852C19.0858 17.2491 18.9461 17.6331 18.6421 17.8092Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_250">
|
||||
<rect width="30" height="30" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_244)">
|
||||
<path d="M27.5428 29.8527C27.7285 29.6609 27.7235 29.3546 27.5315 29.1689L21.6566 23.4813C23.4603 22.8765 24.7649 21.1739 24.7649 19.1694V17.7358H25.9675C26.7684 17.7358 27.42 17.0842 27.42 16.283V12.9089C27.42 12.108 26.7684 11.4564 25.9675 11.4564H24.7649V10.6445H25.1641C26.0279 10.6445 26.7312 9.94155 26.7312 9.07741C26.7312 8.21327 26.0279 7.51031 25.1641 7.51031H24.5392L22.9624 5.15179C22.5179 4.48629 21.7743 4.08901 20.9741 4.08901H17.0085C17.2089 3.44673 17.3368 2.78808 17.3368 2.34058C17.3368 1.04988 16.2898 0 15.0028 0C13.7121 0 12.6626 1.04988 12.6626 2.34057C12.6626 2.78866 12.7901 3.44719 12.9902 4.08901H9.02657C8.22633 4.08901 7.48276 4.48629 7.03889 5.15147L5.46152 7.51031H4.83651C3.97269 7.51031 3.26941 8.21327 3.26941 9.07741C3.26941 9.94155 3.97269 10.6445 4.83651 10.6445H5.23569V11.4564H4.03627C3.23478 11.4564 2.58313 12.108 2.58313 12.9089V16.283C2.58313 17.0842 3.23478 17.7358 4.03627 17.7358H5.23569V19.1694C5.23569 21.1737 6.5402 22.8762 8.3436 23.4812L2.46854 29.1689C2.27651 29.3547 2.27147 29.661 2.45721 29.8527C2.64537 30.0471 2.95131 30.0473 3.14097 29.864L9.50283 23.705C9.59692 23.7108 9.69034 23.7193 9.78588 23.7193H20.2148C20.3101 23.7193 20.4033 23.7108 20.4972 23.705L26.859 29.864C27.049 30.0476 27.355 30.0467 27.5428 29.8527ZM15.0028 0.967081C15.7565 0.967081 16.3697 1.58316 16.3697 2.34057C16.3697 2.69567 16.2381 3.3936 15.9913 4.08774H14.0074C13.7613 3.39423 13.6297 2.69631 13.6297 2.34057C13.6296 1.58316 14.2454 0.967081 15.0028 0.967081ZM25.9675 12.4235C26.2351 12.4235 26.4529 12.6413 26.4529 12.9089V16.283C26.4529 16.5509 26.2351 16.7687 25.9675 16.7687H24.7649V12.4235H25.9675ZM7.8429 5.68884C8.10734 5.29251 8.54995 5.05609 9.02657 5.05609H20.9741C21.4507 5.05609 21.8933 5.29251 22.1584 5.68916L23.3762 7.51031H6.62441L7.8429 5.68884ZM4.23649 9.07741C4.23649 8.74655 4.50597 8.47739 4.83651 8.47739C26.7531 8.47757 17.7492 8.47763 25.1641 8.47739C25.4947 8.47739 25.7641 8.74655 25.7641 9.07741C25.7641 9.40827 25.4947 9.67743 25.1641 9.67743C-13.1473 9.67681 27.0798 9.67734 4.83651 9.67743C4.50596 9.67743 4.23649 9.40827 4.23649 9.07741ZM4.03627 16.7687C3.76806 16.7687 3.55021 16.5509 3.55021 16.283V12.9089C3.55021 12.6413 3.76806 12.4235 4.03627 12.4235H5.23569V16.7687H4.03627ZM9.78588 22.7522C7.81016 22.7522 6.20277 21.1452 6.20277 19.1694C6.20344 19.2383 6.20548 15.3933 6.20277 10.6445H23.7979C23.7978 10.5794 23.7967 12.4874 23.7979 19.1694C23.7979 21.1452 22.1905 22.7522 20.2148 22.7522H9.78588Z" fill="white"/>
|
||||
<path d="M9.9458 30H20.0548C20.1896 30 20.318 29.9437 20.4099 29.8448C20.5012 29.746 20.5472 29.6134 20.5371 29.479C20.4546 28.4194 19.0342 26.6165 18.7503 26.2658C18.5664 26.0385 18.1824 26.0385 17.9985 26.2658C17.8138 26.4939 17.1526 27.3361 16.6874 28.1888C16.2222 27.3361 15.5609 26.4939 15.3762 26.2658C15.1924 26.0385 14.8083 26.0385 14.6244 26.2658C14.4398 26.4939 13.7785 27.3359 13.3131 28.1885C12.8479 27.3359 12.1867 26.4938 12.0021 26.2658C11.8183 26.0385 11.4342 26.0385 11.2504 26.2658C10.9664 26.6165 9.54601 28.4194 9.46352 29.479C9.45345 29.6134 9.49941 29.746 9.59071 29.8448C9.68262 29.9437 9.81106 30 9.9458 30ZM18.3744 27.3632C18.7698 27.9012 19.1847 28.5419 19.4082 29.0329H17.3412C17.5647 28.5422 17.9796 27.9012 18.3744 27.3632ZM15.0003 27.3632C15.3951 27.9015 15.81 28.5422 16.0335 29.0329H13.9665C14.19 28.5422 14.6055 27.9015 15.0003 27.3632ZM11.6262 27.3632C12.021 27.9015 12.4359 28.5422 12.6594 29.0329H10.5924C10.8159 28.5422 11.2315 27.9015 11.6262 27.3632Z" fill="white"/>
|
||||
<path d="M19.7192 11.9994H10.2808C9.32815 11.9994 8.5531 12.7744 8.5531 13.7274V18.9298C8.5531 19.8828 9.32815 20.6578 10.2808 20.6578H19.7192C20.6725 20.6578 21.4475 19.8828 21.4475 18.9298V13.7274C21.4475 12.7744 20.6725 11.9994 19.7192 11.9994ZM20.4804 18.9298C20.4804 19.3495 20.1392 19.6907 19.7192 19.6907H10.2808C9.86144 19.6907 9.52019 19.3495 9.52019 18.9298V13.7274C9.52019 13.3077 9.86144 12.9665 10.2808 12.9665H19.7192C20.1392 12.9665 20.4804 13.3077 20.4804 13.7274L20.4804 18.9298Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_244">
|
||||
<rect width="30" height="30" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_91_238)">
|
||||
<path d="M15.0024 30C15.8797 30 16.5934 29.2863 16.5934 28.409V26.3388H18.0344C18.8302 26.3388 19.4778 25.6912 19.4778 24.8951V24.1731H21.6587C24.1057 24.1731 26.0961 22.1824 26.0961 19.7357V4.44332C26.0961 1.99339 24.1057 0 21.6587 0H8.34722C5.89729 0 3.9039 1.99339 3.9039 4.44332V19.7357C3.9039 22.1824 5.89729 24.1731 8.34722 24.1731H10.5263V24.8951C10.5263 25.6912 11.1739 26.3388 11.9703 26.3388H13.4114V28.409C13.4114 29.2863 14.125 30 15.0024 30ZM15.6791 28.409C15.6791 28.7822 15.3756 29.0857 15.0024 29.0857C14.6292 29.0857 14.3256 28.7822 14.3256 28.409V26.3397H15.6791L15.6791 28.409ZM8.34722 23.2588C6.40144 23.2588 4.81816 21.6782 4.81816 19.7357V4.44332C4.81816 2.49724 6.40144 0.914256 8.34722 0.914256H21.6587C23.6015 0.914256 25.1818 2.49724 25.1818 4.44332V19.7357C25.1818 21.6782 23.6015 23.2588 21.6587 23.2588H19.4778V22.5389C19.4778 21.7428 18.8302 21.0952 18.0344 21.0952H18.0326H11.9703H11.9679C11.2048 21.0952 10.5263 21.7249 10.5263 22.5389V23.2588L8.34722 23.2588ZM11.4406 24.8951C11.4407 24.8325 11.4437 22.4086 11.4436 22.5395C11.4436 22.2351 11.7039 22.0095 11.9703 22.0095H18.0326C18.3249 22.0095 18.563 22.2473 18.563 22.5395C18.563 22.6021 18.5636 25.026 18.5636 24.8951C18.5636 25.187 18.3261 25.4245 18.0344 25.4245H11.9703C11.6781 25.4245 11.4406 25.187 11.4406 24.8951Z" fill="white"/>
|
||||
<path d="M22.6545 16.2311V6.0763C22.6545 4.66652 21.5076 3.51953 20.0981 3.51953H9.90671C8.49663 3.51953 7.34964 4.66652 7.34964 6.0763V16.2311C7.34964 17.6408 8.49663 18.7878 9.90671 18.7878H20.0981C21.5076 18.7878 22.6545 17.6408 22.6545 16.2311ZM8.2639 16.2311V6.0763C8.2639 5.17067 9.00078 4.43379 9.90671 4.43379H20.0981C21.0034 4.43379 21.7403 5.17067 21.7403 6.0763V16.2311C21.7403 17.1367 21.0034 17.8736 20.0981 17.8736H9.90671C9.00078 17.8736 8.2639 17.1367 8.2639 16.2311Z" fill="white"/>
|
||||
<path d="M14.0875 7.44292C12.9917 8.85835 11.6852 10.7976 11.6852 11.9973C11.6852 13.8261 13.1733 15.3141 15.0024 15.3141C16.8315 15.3141 18.3195 13.8261 18.3195 11.9973C18.3195 10.7976 17.013 8.85836 15.9172 7.44263C15.4591 6.85146 14.5553 6.83776 14.0875 7.44292ZM15.0024 14.3999C13.6774 14.3999 12.5995 13.3219 12.5995 11.9973C12.5995 11.2839 13.4262 9.79077 14.8101 8.00243C14.9093 7.87519 15.0964 7.87644 15.1946 8.00243C16.5785 9.79076 17.4053 11.2839 17.4053 11.9973C17.4053 13.3219 16.3273 14.3999 15.0024 14.3999Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_91_238">
|
||||
<rect width="30" height="30" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
|
|
@ -0,0 +1,274 @@
|
|||
<template>
|
||||
<footer class="home-footer">
|
||||
<div class="page-shell">
|
||||
<div class="footer-card">
|
||||
<div class="row q-col-gutter-xl">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="footer-brand">
|
||||
<img class="footer-logo" :src="footerLogoUrl" alt="Omnimed footer logo" />
|
||||
<p class="footer-description">
|
||||
We offer a wide range of healthcare services to meet your needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="footer-group">
|
||||
<h3 class="footer-title">Healthcare</h3>
|
||||
<div class="footer-links">
|
||||
<router-link
|
||||
v-for="link in healthcareLinks"
|
||||
:key="link.label"
|
||||
class="footer-link"
|
||||
:to="link.to"
|
||||
>
|
||||
{{ link.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="footer-group">
|
||||
<h3 class="footer-title">Quick Links</h3>
|
||||
<div class="footer-links">
|
||||
<router-link
|
||||
v-for="link in quickLinks"
|
||||
:key="link.label"
|
||||
class="footer-link"
|
||||
:to="link.to"
|
||||
>
|
||||
{{ link.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-4 col-lg-3">
|
||||
<div class="footer-group">
|
||||
<h3 class="footer-title">Contact Us</h3>
|
||||
<div class="footer-contact-list">
|
||||
<div
|
||||
v-for="item in contactItems"
|
||||
:key="item.text"
|
||||
class="footer-contact-item"
|
||||
>
|
||||
<img class="footer-contact-icon" :src="item.icon" :alt="item.label" />
|
||||
<span class="footer-contact-text">{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-social-band">
|
||||
<div class="footer-line" />
|
||||
<div class="footer-social-links">
|
||||
<q-btn
|
||||
v-for="social in socialLinks"
|
||||
:key="social.label"
|
||||
round
|
||||
flat
|
||||
|
||||
class="social-btn"
|
||||
:aria-label="social.label"
|
||||
>
|
||||
<q-tooltip>{{ social.label }}</q-tooltip>
|
||||
<img class="social-icon" :src="social.icon" :alt="social.label" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="footer-line" />
|
||||
</div>
|
||||
|
||||
<div class="footer-meta">
|
||||
<div class="footer-copyright">
|
||||
Copyright © 2024 All Rights Reserved.
|
||||
</div>
|
||||
|
||||
<div class="footer-legal">
|
||||
<router-link class="footer-legal-link" to="/privacy">
|
||||
Privacy policy
|
||||
</router-link>
|
||||
<router-link class="footer-legal-link" to="/terms">
|
||||
Terms & conditions
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import footerLogoUrl from 'src/assets/home/logo.png';
|
||||
import phoneIcon from 'src/assets/contact/icon-phone.svg';
|
||||
import locationIcon from 'src/assets/contact/icon-location.svg';
|
||||
import mailIcon from 'src/assets/contact/icon-mail.svg';
|
||||
import facebookIconUrl from 'src/assets/icons/facebook.svg';
|
||||
import instagramIconUrl from 'src/assets/icons/instagram.svg';
|
||||
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';
|
||||
|
||||
const healthcareLinks = [
|
||||
{ label: 'Doctors', to: '/doctors' },
|
||||
{ label: 'Diagnostics', to: '/services' },
|
||||
{ label: 'Caregiver', to: '/services' },
|
||||
{ label: 'Hospitality', to: '/about' },
|
||||
{ label: 'Emergency', to: '/contact' },
|
||||
];
|
||||
|
||||
const quickLinks = [
|
||||
{ label: 'Home', to: '/' },
|
||||
{ label: 'About us', to: '/about' },
|
||||
{ label: 'Services', to: '/services' },
|
||||
{ label: 'Doctors', to: '/doctors' },
|
||||
{ label: 'Contact', to: '/contact' },
|
||||
];
|
||||
|
||||
const contactItems = [
|
||||
{ label: 'Mail', text: 'info@domain.com', icon: mailIcon },
|
||||
{ label: 'Phone', text: '+1 (213) 465 789', icon: phoneIcon },
|
||||
{ label: 'Location', text: '2464 Royal Ln. Mesa, New Jersey', icon: locationIcon },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: whatsappIconUrl, label: 'WhatsApp' },
|
||||
{ icon: facebookIconUrl, label: 'Facebook' },
|
||||
{ icon: instagramIconUrl, label: 'Instagram' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.home-footer
|
||||
padding: 0 0 36px
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.footer-card
|
||||
padding: 56px 44px 28px
|
||||
border-radius: 46px
|
||||
background: #163047
|
||||
color: #eef8ff
|
||||
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.16)
|
||||
|
||||
.footer-brand
|
||||
max-width: 360px
|
||||
|
||||
.footer-logo
|
||||
display: block
|
||||
width: 150px
|
||||
max-width: 100%
|
||||
margin-bottom: 22px
|
||||
|
||||
.footer-description
|
||||
margin: 0
|
||||
color: rgba(238, 248, 255, 0.76)
|
||||
line-height: 1.75
|
||||
|
||||
.footer-group
|
||||
height: 100%
|
||||
|
||||
.footer-title
|
||||
margin: 0 0 18px
|
||||
font-size: 1.15rem
|
||||
font-weight: 800
|
||||
color: #fff
|
||||
|
||||
.footer-links
|
||||
display: grid
|
||||
gap: 12px
|
||||
|
||||
.footer-link
|
||||
color: rgba(238, 248, 255, 0.76)
|
||||
text-decoration: none
|
||||
transition: color 0.2s ease
|
||||
|
||||
.footer-link:hover
|
||||
color: #7ce0c3
|
||||
|
||||
.footer-contact-list
|
||||
display: grid
|
||||
gap: 16px
|
||||
|
||||
.footer-contact-item
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
gap: 12px
|
||||
|
||||
.footer-contact-icon
|
||||
width: 20px
|
||||
height: 20px
|
||||
margin-top: 2px
|
||||
filter: brightness(0) invert(1)
|
||||
|
||||
.footer-contact-text
|
||||
color: rgba(238, 248, 255, 0.76)
|
||||
line-height: 1.6
|
||||
|
||||
.footer-social-band
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 20px
|
||||
margin: 34px 0 26px
|
||||
|
||||
.footer-line
|
||||
flex: 1
|
||||
height: 1px
|
||||
background: rgba(238, 248, 255, 0.14)
|
||||
|
||||
.footer-social-links
|
||||
display: flex
|
||||
gap: 8px
|
||||
|
||||
.social-btn
|
||||
color: #fff
|
||||
border: 1px solid rgba(255, 255, 255, 0.18)
|
||||
background: rgba(255, 255, 255, 0.04)
|
||||
|
||||
.social-icon
|
||||
display: block
|
||||
width: 18px
|
||||
height: 18px
|
||||
filter: brightness(0) invert(1)
|
||||
|
||||
.footer-meta
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
gap: 16px
|
||||
|
||||
.footer-copyright
|
||||
color: rgba(238, 248, 255, 0.68)
|
||||
|
||||
.footer-legal
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-end
|
||||
gap: 18px
|
||||
|
||||
.footer-legal-link
|
||||
color: rgba(238, 248, 255, 0.76)
|
||||
text-decoration: none
|
||||
|
||||
.footer-legal-link:hover
|
||||
color: #7ce0c3
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.footer-card
|
||||
padding: 32px 22px 22px
|
||||
border-radius: 26px
|
||||
|
||||
.footer-social-band
|
||||
gap: 12px
|
||||
|
||||
.footer-meta
|
||||
align-items: flex-start
|
||||
flex-direction: column
|
||||
|
||||
.footer-legal
|
||||
justify-content: flex-start
|
||||
</style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div class="home-header">
|
||||
<section class="topbar-section">
|
||||
<div class="page-shell topbar-row">
|
||||
<div class="topbar-group">
|
||||
<div class="topbar-item">
|
||||
<q-icon name="schedule" size="18px" />
|
||||
<span><strong>Working Hour:</strong> 08:00am to 09:00pm</span>
|
||||
</div>
|
||||
<div class="topbar-item">
|
||||
<q-icon name="mail" size="18px" />
|
||||
<span><strong>Email:</strong> info@domainname.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-group topbar-group-end">
|
||||
<div class="social-links">
|
||||
<q-btn
|
||||
v-for="social in socialLinks"
|
||||
:key="social.label"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
class="social-btn"
|
||||
:aria-label="social.label"
|
||||
>
|
||||
<q-tooltip>{{ social.label }}</q-tooltip>
|
||||
<img class="social-icon" :src="social.icon" :alt="social.label" />
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="topbar-item">
|
||||
<q-icon name="call" size="18px" />
|
||||
<span><strong>Contact:</strong> +123 (456) 789</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="header-section">
|
||||
<div class="page-shell">
|
||||
<q-toolbar class="header-toolbar">
|
||||
<div class="desktop-nav gt-sm">
|
||||
<q-btn
|
||||
v-for="link in navLinks"
|
||||
:key="link.label"
|
||||
flat
|
||||
no-caps
|
||||
class="nav-btn"
|
||||
:label="link.label"
|
||||
:to="link.link"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-btn
|
||||
class="lt-md"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
aria-label="Open navigation"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import facebookIconUrl from 'src/assets/icons/facebook.svg';
|
||||
import instagramIconUrl from 'src/assets/icons/instagram.svg';
|
||||
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Home', link: '/' },
|
||||
{ label: 'About Us', link: '/about' },
|
||||
{ label: 'Services', link: '/services' },
|
||||
{ label: 'Doctors', link: '/doctors' },
|
||||
{ label: 'Contact Us', link: '/contact' },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: instagramIconUrl, label: 'Instagram' },
|
||||
{ icon: facebookIconUrl, label: 'Facebook' },
|
||||
{ icon: whatsappIconUrl, label: 'WhatsApp' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.topbar-section
|
||||
background: #163047
|
||||
color: #eff8ff
|
||||
|
||||
.topbar-row
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
gap: 16px
|
||||
padding: 12px 0
|
||||
|
||||
.topbar-group
|
||||
display: flex
|
||||
align-items: center
|
||||
flex-wrap: wrap
|
||||
gap: 18px
|
||||
|
||||
.topbar-group-end
|
||||
justify-content: flex-end
|
||||
|
||||
.topbar-item
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
gap: 8px
|
||||
font-size: 0.92rem
|
||||
|
||||
.topbar-item strong
|
||||
font-weight: 700
|
||||
|
||||
.social-links
|
||||
display: flex
|
||||
gap: 4px
|
||||
|
||||
.social-btn
|
||||
color: #fff
|
||||
|
||||
.social-icon
|
||||
display: block
|
||||
width: 32px
|
||||
height: 32px
|
||||
|
||||
.header-section
|
||||
position: sticky
|
||||
top: 0
|
||||
z-index: 10
|
||||
backdrop-filter: blur(14px)
|
||||
background: rgba(255, 255, 255, 0.9)
|
||||
border-bottom: 1px solid rgba(22, 48, 71, 0.08)
|
||||
|
||||
.header-toolbar
|
||||
min-height: 88px
|
||||
padding: 0
|
||||
|
||||
.desktop-nav
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 4px
|
||||
margin-right: 12px
|
||||
|
||||
.nav-btn
|
||||
color: #163047
|
||||
font-weight: 600
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.topbar-row
|
||||
padding: 10px 0
|
||||
|
||||
.topbar-row,
|
||||
.topbar-group,
|
||||
.topbar-group-end
|
||||
justify-content: center
|
||||
|
||||
.header-toolbar
|
||||
min-height: 76px
|
||||
</style>
|
||||
|
|
@ -2,9 +2,8 @@
|
|||
<q-layout view="lHh Lpr lFf">
|
||||
<q-header elevated>
|
||||
<q-toolbar>
|
||||
<q-btn flat dense round icon="menu" :aria-label="t('app.menu')" @click="toggleLeftDrawer" />
|
||||
|
||||
<q-toolbar-title> {{ t('app.title') }} </q-toolbar-title>
|
||||
<img data-v-2373a833="" class="brand-logo-tb" src="/src/assets/home/logo.png" alt="Omnimed logo">
|
||||
<q-toolbar-title> Omnimed </q-toolbar-title>
|
||||
|
||||
<div>Quasar v{{ $q.version }}</div>
|
||||
<div class="q-ml-md">
|
||||
|
|
@ -115,7 +114,6 @@ import { usePreferencesStore, type LanguageCode } from 'src/stores/preferences-s
|
|||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const leftDrawerOpen = ref(false);
|
||||
const preferencesStore = usePreferencesStore();
|
||||
const currentUser = ref<UserShort | null>(null);
|
||||
const model = computed({
|
||||
|
|
@ -205,10 +203,6 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
function toggleLeftDrawer() {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||||
}
|
||||
|
||||
async function loadCurrentUser(): Promise<void> {
|
||||
if (typeof window === 'undefined' || !window.localStorage.getItem('Auth-Token')) {
|
||||
currentUser.value = null;
|
||||
|
|
@ -260,4 +254,9 @@ async function logout(): Promise<void> {
|
|||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-logo-tb{
|
||||
height: 42px;
|
||||
width: auto
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,478 @@
|
|||
<template>
|
||||
<q-page class="about-page">
|
||||
<HomeHeader />
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="page-shell">
|
||||
<div class="row items-center q-col-gutter-xl">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="hero-copy">
|
||||
<div class="eyebrow">About Omnimed</div>
|
||||
<h1 class="hero-title">Healthcare built around clarity, empathy, and outcomes</h1>
|
||||
<p class="hero-text">
|
||||
We combine medical excellence with a human approach, designing every
|
||||
visit around trust, prevention, and long-term wellbeing.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
no-caps
|
||||
color="primary"
|
||||
label="Book a consultation"
|
||||
/>
|
||||
<q-btn outline rounded no-caps color="primary" label="Meet our team" />
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<q-card
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
flat
|
||||
class="stat-card"
|
||||
>
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="hero-visual">
|
||||
<div class="hero-image-main">
|
||||
<img :src="aboutImagePrimary" alt="Medical consultation" />
|
||||
</div>
|
||||
<div class="hero-image-secondary">
|
||||
<img :src="aboutImageSecondary" alt="Clinical care team" />
|
||||
</div>
|
||||
<q-card flat class="floating-summary">
|
||||
<div class="floating-summary-value">15+ years</div>
|
||||
<div class="floating-summary-label">of integrated patient care</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="values-section">
|
||||
<div class="page-shell">
|
||||
<div class="section-heading">
|
||||
<div class="section-kicker">What drives us</div>
|
||||
<h2 class="section-title">A modern clinic with standards patients can feel</h2>
|
||||
<p class="section-text">
|
||||
Our model is simple: faster access, clearer communication, coordinated
|
||||
care, and decisions guided by evidence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-lg">
|
||||
<div
|
||||
v-for="value in values"
|
||||
:key="value.title"
|
||||
class="col-12 col-md-4"
|
||||
>
|
||||
<q-card flat class="value-card">
|
||||
<img class="value-icon" :src="value.icon" :alt="value.title" />
|
||||
<h3 class="value-title">{{ value.title }}</h3>
|
||||
<p class="value-text">{{ value.text }}</p>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="journey-section">
|
||||
<div class="page-shell">
|
||||
<div class="section-heading align-center">
|
||||
<div class="section-kicker">How we work</div>
|
||||
<h2 class="section-title">A care journey designed to reduce friction</h2>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-lg">
|
||||
<div
|
||||
v-for="step in steps"
|
||||
:key="step.title"
|
||||
class="col-12 col-sm-6 col-lg-3"
|
||||
>
|
||||
<q-card flat class="step-card">
|
||||
<img class="step-image" :src="step.image" :alt="step.title" />
|
||||
<div class="step-number">{{ step.number }}</div>
|
||||
<h3 class="step-title">{{ step.title }}</h3>
|
||||
<p class="step-text">{{ step.text }}</p>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team-section">
|
||||
<div class="page-shell">
|
||||
<div class="section-heading">
|
||||
<div class="section-kicker">Our people</div>
|
||||
<h2 class="section-title">Specialists who bring confidence to every appointment</h2>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-lg">
|
||||
<div
|
||||
v-for="member in team"
|
||||
:key="member.name"
|
||||
class="col-12 col-sm-6 col-lg-3"
|
||||
>
|
||||
<q-card flat class="team-card">
|
||||
<img class="team-image" :src="member.image" :alt="member.name" />
|
||||
<div class="team-content">
|
||||
<div class="team-name">{{ member.name }}</div>
|
||||
<div class="team-role">{{ member.role }}</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HomeFooter />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
||||
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
||||
import aboutImagePrimary from 'src/assets/about/about-img-1.jpg';
|
||||
import aboutImageSecondary from 'src/assets/about/about-img-2.jpg';
|
||||
import valueIcon1 from 'src/assets/about/icon-about-info-1.svg';
|
||||
import valueIcon2 from 'src/assets/about/icon-about-info-2.svg';
|
||||
import valueIcon3 from 'src/assets/about/icon-about-info-3.svg';
|
||||
import stepImage1 from 'src/assets/about/work-step-img-1.jpg';
|
||||
import stepImage2 from 'src/assets/about/work-step-img-2.jpg';
|
||||
import stepImage3 from 'src/assets/about/work-step-img-3.jpg';
|
||||
import stepImage4 from 'src/assets/about/work-step-img-4.jpg';
|
||||
import team1 from 'src/assets/about/team-1.jpg';
|
||||
import team2 from 'src/assets/about/team-2.jpg';
|
||||
import team3 from 'src/assets/about/team-3.jpg';
|
||||
import team4 from 'src/assets/about/team-4.jpg';
|
||||
|
||||
const stats = [
|
||||
{ value: '25k+', label: 'patients supported every year' },
|
||||
{ value: '98%', label: 'patient satisfaction score' },
|
||||
{ value: '40+', label: 'specialists across key disciplines' },
|
||||
];
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: valueIcon1,
|
||||
title: 'Clear medical guidance',
|
||||
text: 'We explain options, next steps, and tradeoffs in language patients can act on.',
|
||||
},
|
||||
{
|
||||
icon: valueIcon2,
|
||||
title: 'Coordinated treatment',
|
||||
text: 'Primary care, specialist input, and follow-up planning stay connected end to end.',
|
||||
},
|
||||
{
|
||||
icon: valueIcon3,
|
||||
title: 'Prevention first',
|
||||
text: 'We focus on early detection and continuity, not only on treating symptoms.',
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Book and prepare',
|
||||
text: 'Schedule quickly and arrive with the right context already shared with the care team.',
|
||||
image: stepImage1,
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Assess and listen',
|
||||
text: 'Every consultation starts with careful listening and a structured clinical review.',
|
||||
image: stepImage2,
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Plan the treatment',
|
||||
text: 'We define a practical treatment path with timelines, referrals, and measurable goals.',
|
||||
image: stepImage3,
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'Follow through',
|
||||
text: 'Ongoing monitoring helps patients stay informed, supported, and on track.',
|
||||
image: stepImage4,
|
||||
},
|
||||
];
|
||||
|
||||
const team = [
|
||||
{ name: 'Dr. Amelia Carter', role: 'Internal Medicine', image: team1 },
|
||||
{ name: 'Dr. Julian Meyer', role: 'Cardiology', image: team2 },
|
||||
{ name: 'Dr. Sofia Bennett', role: 'Pediatrics', image: team3 },
|
||||
{ name: 'Dr. Ethan Rossi', role: 'Preventive Care', image: team4 },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.about-page
|
||||
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 36%, #eef5ff 100%)
|
||||
color: #163047
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.hero-section
|
||||
padding: 72px 0 56px
|
||||
|
||||
.hero-copy
|
||||
padding-right: 20px
|
||||
|
||||
.eyebrow
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
padding: 10px 16px
|
||||
margin-bottom: 22px
|
||||
border-radius: 999px
|
||||
background: rgba(13, 148, 136, 0.12)
|
||||
color: #0f766e
|
||||
font-size: 0.9rem
|
||||
font-weight: 800
|
||||
|
||||
.hero-title
|
||||
margin: 0 0 18px
|
||||
font-size: clamp(2.8rem, 5vw, 4.6rem)
|
||||
line-height: 1
|
||||
font-weight: 800
|
||||
letter-spacing: -0.04em
|
||||
|
||||
.hero-text
|
||||
max-width: 560px
|
||||
margin: 0 0 26px
|
||||
font-size: 1.08rem
|
||||
line-height: 1.7
|
||||
color: #55687c
|
||||
|
||||
.hero-actions
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 14px
|
||||
margin-bottom: 30px
|
||||
|
||||
.stats-row
|
||||
display: grid
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
gap: 16px
|
||||
|
||||
.stat-card
|
||||
padding: 20px
|
||||
border-radius: 24px
|
||||
background: rgba(255, 255, 255, 0.88)
|
||||
box-shadow: 0 24px 60px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.stat-value
|
||||
font-size: 1.8rem
|
||||
font-weight: 800
|
||||
|
||||
.stat-label
|
||||
margin-top: 8px
|
||||
color: #647789
|
||||
line-height: 1.5
|
||||
|
||||
.hero-visual
|
||||
position: relative
|
||||
min-height: 620px
|
||||
|
||||
.hero-visual::before
|
||||
content: ''
|
||||
position: absolute
|
||||
inset: 40px 18px 32px 56px
|
||||
border-radius: 40px
|
||||
background: linear-gradient(145deg, #dff7ee 0%, #dbeafe 100%)
|
||||
|
||||
.hero-image-main,
|
||||
.hero-image-secondary
|
||||
position: absolute
|
||||
overflow: hidden
|
||||
border-radius: 34px
|
||||
box-shadow: 0 28px 70px rgba(22, 48, 71, 0.16)
|
||||
|
||||
.hero-image-main
|
||||
top: 0
|
||||
right: 0
|
||||
width: min(82%, 460px)
|
||||
|
||||
.hero-image-secondary
|
||||
left: 0
|
||||
bottom: 0
|
||||
width: min(54%, 300px)
|
||||
border: 8px solid rgba(255, 255, 255, 0.95)
|
||||
|
||||
.hero-image-main img,
|
||||
.hero-image-secondary img
|
||||
display: block
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
.floating-summary
|
||||
position: absolute
|
||||
left: 28px
|
||||
top: 48px
|
||||
padding: 18px 20px
|
||||
border-radius: 22px
|
||||
background: rgba(255, 255, 255, 0.94)
|
||||
box-shadow: 0 18px 50px rgba(22, 48, 71, 0.14)
|
||||
|
||||
.floating-summary-value
|
||||
font-size: 1.6rem
|
||||
font-weight: 800
|
||||
|
||||
.floating-summary-label
|
||||
margin-top: 6px
|
||||
color: #647789
|
||||
|
||||
.values-section,
|
||||
.journey-section,
|
||||
.team-section
|
||||
padding: 56px 0
|
||||
|
||||
.journey-section
|
||||
background: rgba(255, 255, 255, 0.62)
|
||||
|
||||
.section-heading
|
||||
max-width: 700px
|
||||
margin-bottom: 30px
|
||||
|
||||
.align-center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
text-align: center
|
||||
|
||||
.section-kicker
|
||||
margin-bottom: 10px
|
||||
color: #0f766e
|
||||
font-size: 0.85rem
|
||||
font-weight: 800
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.section-title
|
||||
margin: 0 0 14px
|
||||
font-size: clamp(2rem, 4vw, 3.2rem)
|
||||
line-height: 1.05
|
||||
font-weight: 800
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.section-text
|
||||
margin: 0
|
||||
color: #607284
|
||||
line-height: 1.7
|
||||
font-size: 1.02rem
|
||||
|
||||
.value-card,
|
||||
.step-card,
|
||||
.team-card
|
||||
height: 100%
|
||||
border-radius: 28px
|
||||
background: rgba(255, 255, 255, 0.88)
|
||||
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.value-card
|
||||
padding: 28px
|
||||
|
||||
.value-icon
|
||||
width: 58px
|
||||
height: 58px
|
||||
margin-bottom: 18px
|
||||
|
||||
.value-title,
|
||||
.step-title
|
||||
margin: 0 0 12px
|
||||
font-size: 1.3rem
|
||||
font-weight: 800
|
||||
|
||||
.value-text,
|
||||
.step-text
|
||||
margin: 0
|
||||
color: #647789
|
||||
line-height: 1.65
|
||||
|
||||
.step-card
|
||||
overflow: hidden
|
||||
|
||||
.step-image,
|
||||
.team-image
|
||||
display: block
|
||||
width: 100%
|
||||
height: 220px
|
||||
object-fit: cover
|
||||
|
||||
.step-number
|
||||
padding: 22px 24px 0
|
||||
color: #0f766e
|
||||
font-size: 0.9rem
|
||||
font-weight: 800
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.step-title,
|
||||
.step-text
|
||||
padding-left: 24px
|
||||
padding-right: 24px
|
||||
|
||||
.step-text
|
||||
padding-bottom: 24px
|
||||
|
||||
.team-content
|
||||
padding: 22px
|
||||
|
||||
.team-name
|
||||
font-size: 1.16rem
|
||||
font-weight: 800
|
||||
|
||||
.team-role
|
||||
margin-top: 6px
|
||||
color: #647789
|
||||
|
||||
@media (max-width: 1023px)
|
||||
.hero-copy
|
||||
padding-right: 0
|
||||
|
||||
.stats-row
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.hero-visual
|
||||
min-height: 540px
|
||||
margin-top: 16px
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.hero-section,
|
||||
.values-section,
|
||||
.journey-section,
|
||||
.team-section
|
||||
padding: 40px 0
|
||||
|
||||
.hero-title
|
||||
font-size: 2.5rem
|
||||
|
||||
.hero-visual
|
||||
min-height: 420px
|
||||
|
||||
.hero-visual::before
|
||||
inset: 28px 0 20px 18px
|
||||
border-radius: 30px
|
||||
|
||||
.hero-image-main
|
||||
width: 84%
|
||||
|
||||
.hero-image-secondary
|
||||
width: 46%
|
||||
border-width: 6px
|
||||
|
||||
.floating-summary
|
||||
left: 12px
|
||||
top: 22px
|
||||
padding: 14px 16px
|
||||
</style>
|
||||
|
|
@ -0,0 +1,332 @@
|
|||
<template>
|
||||
<q-page class="contact-page">
|
||||
<HomeHeader />
|
||||
|
||||
<section class="contact-section">
|
||||
<div class="page-shell">
|
||||
<div class="contact-layout">
|
||||
<div class="contact-info-panel">
|
||||
<div class="section-kicker">Contact us</div>
|
||||
<h1 class="section-title">Reach out for questions, appointments, or support</h1>
|
||||
<p class="section-text">
|
||||
We take the time to understand your individual needs and goals,
|
||||
creating customized treatment plans to help you achieve optimal
|
||||
health and peace of mind.
|
||||
</p>
|
||||
|
||||
<div class="contact-info-list">
|
||||
<q-card
|
||||
v-for="item in contactItems"
|
||||
:key="item.title"
|
||||
flat
|
||||
class="contact-info-card"
|
||||
>
|
||||
<img class="contact-icon" :src="item.icon" :alt="item.title" />
|
||||
<div>
|
||||
<div class="contact-card-title">{{ item.title }}</div>
|
||||
<div class="contact-card-text">{{ item.text }}</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="social-row">
|
||||
<span class="social-label">Follow us:</span>
|
||||
<div class="social-links">
|
||||
<q-btn
|
||||
v-for="social in socialLinks"
|
||||
:key="social.label"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
class="social-btn"
|
||||
:aria-label="social.label"
|
||||
>
|
||||
<q-tooltip>{{ social.label }}</q-tooltip>
|
||||
<img class="social-icon" :src="social.icon" :alt="social.label" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat class="contact-form-card">
|
||||
<div class="form-kicker">Contact form</div>
|
||||
<h2 class="form-title">Send us a message</h2>
|
||||
<p class="form-text">
|
||||
Share your question and our team will get back to you with the most
|
||||
relevant next step.
|
||||
</p>
|
||||
|
||||
<q-form class="contact-form" @submit.prevent>
|
||||
<q-input
|
||||
v-model="form.name"
|
||||
outlined
|
||||
label="Full name"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
<div class="form-grid">
|
||||
<q-input
|
||||
v-model="form.email"
|
||||
outlined
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
<q-input
|
||||
v-model="form.phone"
|
||||
outlined
|
||||
label="Phone"
|
||||
placeholder="Enter your number"
|
||||
/>
|
||||
</div>
|
||||
<q-input
|
||||
v-model="form.message"
|
||||
outlined
|
||||
autogrow
|
||||
type="textarea"
|
||||
label="Message"
|
||||
placeholder="Write message..."
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
no-caps
|
||||
color="primary"
|
||||
label="Submit now"
|
||||
class="submit-btn"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reach-section">
|
||||
<div class="page-shell">
|
||||
<div class="reach-heading">
|
||||
<div class="section-kicker">How to reach us</div>
|
||||
<h2 class="section-title center">Get in touch with us</h2>
|
||||
<p class="section-text center">
|
||||
The goal of our clinic is to deliver compassionate care and exceptional
|
||||
medical services, including general consultations, specialized
|
||||
treatments, and preventive care.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<q-card flat class="map-card">
|
||||
<div class="map-placeholder">
|
||||
<q-icon name="place" size="44px" color="primary" />
|
||||
<div class="map-title">403, Port Washington Road, Canada</div>
|
||||
<div class="map-text">
|
||||
Interactive map placeholder ready to be replaced with your real embed
|
||||
or location component.
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HomeFooter />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
||||
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
||||
import phoneIcon from 'src/assets/contact/icon-phone.svg';
|
||||
import locationIcon from 'src/assets/contact/icon-location.svg';
|
||||
import mailIcon from 'src/assets/contact/icon-mail.svg';
|
||||
import facebookIconUrl from 'src/assets/icons/facebook.svg';
|
||||
import instagramIconUrl from 'src/assets/icons/instagram.svg';
|
||||
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const contactItems = [
|
||||
{ title: 'Contact details', text: '+01-787-582-568', icon: phoneIcon },
|
||||
{ title: 'Address', text: '403, Port Washington Road, Canada', icon: locationIcon },
|
||||
{ title: 'Email us', text: 'info@domain.com', icon: mailIcon },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: facebookIconUrl, label: 'Facebook' },
|
||||
{ icon: instagramIconUrl, label: 'Instagram' },
|
||||
{ icon: whatsappIconUrl, label: 'WhatsApp' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.contact-page
|
||||
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 34%, #eef5ff 100%)
|
||||
color: #163047
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.contact-section,
|
||||
.reach-section
|
||||
padding: 64px 0
|
||||
|
||||
.contact-layout
|
||||
display: grid
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr)
|
||||
gap: 24px
|
||||
|
||||
.contact-info-panel,
|
||||
.contact-form-card,
|
||||
.map-card
|
||||
border-radius: 32px
|
||||
background: rgba(255, 255, 255, 0.9)
|
||||
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.contact-info-panel
|
||||
padding: 34px
|
||||
background: linear-gradient(145deg, #dff7ee 0%, #dbeafe 100%)
|
||||
|
||||
.section-kicker,
|
||||
.form-kicker
|
||||
margin-bottom: 10px
|
||||
color: #0f766e
|
||||
font-size: 0.85rem
|
||||
font-weight: 800
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.section-title,
|
||||
.form-title
|
||||
margin: 0 0 14px
|
||||
font-size: clamp(2rem, 4vw, 3.2rem)
|
||||
line-height: 1.05
|
||||
font-weight: 800
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.section-text,
|
||||
.form-text,
|
||||
.map-text
|
||||
margin: 0
|
||||
color: #607284
|
||||
line-height: 1.7
|
||||
font-size: 1.02rem
|
||||
|
||||
.contact-info-list
|
||||
display: grid
|
||||
gap: 14px
|
||||
margin-top: 28px
|
||||
|
||||
.contact-info-card
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 16px
|
||||
padding: 18px 20px
|
||||
border-radius: 22px
|
||||
background: rgba(255, 255, 255, 0.72)
|
||||
|
||||
.contact-icon
|
||||
width: 54px
|
||||
height: 54px
|
||||
flex: 0 0 auto
|
||||
|
||||
.contact-card-title
|
||||
font-weight: 800
|
||||
margin-bottom: 4px
|
||||
|
||||
.contact-card-text
|
||||
color: #5f7386
|
||||
|
||||
.social-row
|
||||
display: flex
|
||||
align-items: center
|
||||
flex-wrap: wrap
|
||||
gap: 12px
|
||||
margin-top: 24px
|
||||
|
||||
.social-label
|
||||
font-weight: 700
|
||||
|
||||
.social-links
|
||||
display: flex
|
||||
gap: 6px
|
||||
|
||||
.social-btn
|
||||
color: #163047
|
||||
|
||||
.social-icon
|
||||
display: block
|
||||
width: 22px
|
||||
height: 22px
|
||||
|
||||
.contact-form-card
|
||||
padding: 34px
|
||||
|
||||
.contact-form
|
||||
display: grid
|
||||
gap: 18px
|
||||
margin-top: 24px
|
||||
|
||||
.form-grid
|
||||
display: grid
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
gap: 18px
|
||||
|
||||
.submit-btn
|
||||
justify-self: start
|
||||
min-width: 180px
|
||||
|
||||
.reach-heading
|
||||
max-width: 760px
|
||||
margin: 0 auto 30px
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
.map-card
|
||||
overflow: hidden
|
||||
padding: 18px
|
||||
|
||||
.map-placeholder
|
||||
display: grid
|
||||
place-items: center
|
||||
min-height: 380px
|
||||
padding: 32px
|
||||
border-radius: 24px
|
||||
background: linear-gradient(135deg, rgba(223, 247, 238, 0.92) 0%, rgba(219, 234, 254, 0.92) 100%)
|
||||
text-align: center
|
||||
|
||||
.map-title
|
||||
margin-top: 14px
|
||||
font-size: 1.3rem
|
||||
font-weight: 800
|
||||
|
||||
.map-text
|
||||
max-width: 540px
|
||||
margin-top: 10px
|
||||
|
||||
@media (max-width: 1023px)
|
||||
.contact-layout
|
||||
grid-template-columns: 1fr
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.contact-section,
|
||||
.reach-section
|
||||
padding: 40px 0
|
||||
|
||||
.contact-info-panel,
|
||||
.contact-form-card
|
||||
padding: 24px
|
||||
|
||||
.form-grid
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.section-title,
|
||||
.form-title
|
||||
font-size: 2.4rem
|
||||
</style>
|
||||
|
|
@ -0,0 +1,458 @@
|
|||
<template>
|
||||
<q-page class="doctor-detail-page">
|
||||
<HomeHeader />
|
||||
|
||||
<section class="profile-section">
|
||||
<div class="page-shell">
|
||||
<div class="row q-col-gutter-xl">
|
||||
<div class="col-12 col-lg-4">
|
||||
<q-card flat class="sidebar-card">
|
||||
<div class="sidebar-image-wrap">
|
||||
<img class="sidebar-image" :src="doctor.image" :alt="doctor.name" />
|
||||
</div>
|
||||
|
||||
<div class="sidebar-body">
|
||||
<div v-for="item in doctorDetails" :key="item.label" class="sidebar-row">
|
||||
<span class="sidebar-label">{{ item.label }}</span>
|
||||
<span class="sidebar-value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<span class="sidebar-follow">Follow us:</span>
|
||||
<div class="social-links">
|
||||
<q-btn
|
||||
v-for="social in socialLinks"
|
||||
:key="social.label"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
class="social-btn"
|
||||
:aria-label="social.label"
|
||||
>
|
||||
<q-tooltip>{{ social.label }}</q-tooltip>
|
||||
<img class="social-icon" :src="social.icon" :alt="social.label" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="content-stack">
|
||||
<section class="content-section">
|
||||
<div class="section-kicker">Personal biography</div>
|
||||
<h1 class="section-title">Personal biography</h1>
|
||||
<p class="section-text">
|
||||
Dr. Esther Howard is a highly experienced Psychologist with over
|
||||
12 years of expertise in assessing and treating a wide range of
|
||||
emotional and behavioral conditions. She focuses on creating
|
||||
personalized treatment plans that balance evidence-based methods
|
||||
with an empathetic, human-centered approach. Her practice combines
|
||||
careful evaluation, practical therapeutic tools, and continuity of
|
||||
care to help patients make sustainable progress through anxiety,
|
||||
depression, trauma, and major life transitions.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="row q-col-gutter-lg">
|
||||
<div class="col-12 col-md-6">
|
||||
<section class="content-card">
|
||||
<div class="section-kicker">My experience</div>
|
||||
<h2 class="card-title">My experience</h2>
|
||||
|
||||
<div
|
||||
v-for="item in experience"
|
||||
:key="item.title"
|
||||
class="timeline-item"
|
||||
>
|
||||
<div class="timeline-title">{{ item.title }}</div>
|
||||
<p class="timeline-text">{{ item.text }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<section class="content-card">
|
||||
<div class="section-kicker">My skills</div>
|
||||
<h2 class="card-title">My skills</h2>
|
||||
|
||||
<div v-for="skill in skills" :key="skill.label" class="skill-item">
|
||||
<div class="skill-head">
|
||||
<span>{{ skill.label }}</span>
|
||||
<span>{{ skill.value }}%</span>
|
||||
</div>
|
||||
<q-linear-progress
|
||||
rounded
|
||||
size="10px"
|
||||
color="primary"
|
||||
:value="skill.value / 100"
|
||||
class="skill-bar"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="content-section">
|
||||
<div class="section-kicker">My expertise area & feature</div>
|
||||
<h2 class="section-title small">My expertise area & feature</h2>
|
||||
<p class="section-text">
|
||||
Esther specializes in cognitive-behavioral therapy, trauma
|
||||
recovery, and mindfulness techniques, offering tailored support
|
||||
for individuals dealing with anxiety, depression, and life
|
||||
transitions.
|
||||
</p>
|
||||
|
||||
<div class="expertise-list">
|
||||
<div v-for="point in expertisePoints" :key="point" class="expertise-item">
|
||||
<q-icon name="check_circle" color="positive" size="20px" />
|
||||
<span>{{ point }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<q-card flat class="contact-card">
|
||||
<div class="section-kicker">Get into touch with me</div>
|
||||
<h2 class="section-title small">Get into touch with me</h2>
|
||||
|
||||
<q-form class="contact-form" @submit.prevent>
|
||||
<q-input
|
||||
v-model="form.name"
|
||||
outlined
|
||||
label="Full name"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
<div class="form-grid">
|
||||
<q-input
|
||||
v-model="form.email"
|
||||
outlined
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
<q-input
|
||||
v-model="form.phone"
|
||||
outlined
|
||||
label="Phone"
|
||||
placeholder="Enter your number"
|
||||
/>
|
||||
</div>
|
||||
<q-input
|
||||
v-model="form.message"
|
||||
outlined
|
||||
autogrow
|
||||
type="textarea"
|
||||
label="Message"
|
||||
placeholder="Write message..."
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
no-caps
|
||||
color="primary"
|
||||
label="Submit now"
|
||||
class="submit-btn"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HomeFooter />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
||||
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
||||
import team1 from 'src/assets/about/team-1.jpg';
|
||||
import facebookIconUrl from 'src/assets/icons/facebook.svg';
|
||||
import instagramIconUrl from 'src/assets/icons/instagram.svg';
|
||||
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';
|
||||
|
||||
const doctor = {
|
||||
name: 'Dr. Esther Howard',
|
||||
image: team1,
|
||||
};
|
||||
|
||||
const doctorDetails = [
|
||||
{ label: 'Name', value: 'Dr. Esther Howard' },
|
||||
{ label: 'Position', value: 'Psychologist' },
|
||||
{ label: 'Phone', value: '+91-123 456 7890' },
|
||||
{ label: 'E-mail', value: 'info@domain.com' },
|
||||
{ label: 'Experience', value: '16 years' },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: instagramIconUrl, label: 'X / Twitter' },
|
||||
{ icon: facebookIconUrl, label: 'LinkedIn' },
|
||||
{ icon: whatsappIconUrl, label: 'Pinterest' },
|
||||
];
|
||||
|
||||
const experience = [
|
||||
{
|
||||
title: 'Graduate intern · 2013 - 2020',
|
||||
text: 'At Institution Name focused on family counseling and conflict resolution techniques.',
|
||||
},
|
||||
{
|
||||
title: 'Licensed psychologist · 2020 - present',
|
||||
text: 'At Institution Name focused on family counseling and conflict resolution techniques.',
|
||||
},
|
||||
];
|
||||
|
||||
const skills = [
|
||||
{ label: 'Psychologist', value: 56 },
|
||||
{ label: 'Success case', value: 89 },
|
||||
{ label: 'Therapy specialist', value: 85 },
|
||||
];
|
||||
|
||||
const expertisePoints = [
|
||||
'Experienced professionals',
|
||||
'Client-centered approach',
|
||||
'Safe and confidential environment',
|
||||
'Commitment to growth',
|
||||
];
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.doctor-detail-page
|
||||
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 36%, #eef5ff 100%)
|
||||
color: #163047
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.profile-section
|
||||
padding: 100px 0
|
||||
|
||||
.sidebar-card,
|
||||
.content-card,
|
||||
.contact-card,
|
||||
.content-section
|
||||
border-radius: 46px
|
||||
background: #fff
|
||||
box-shadow: 6px 4px 168px rgba(0, 0, 0, 0.1)
|
||||
|
||||
.sidebar-card
|
||||
overflow: hidden
|
||||
position: sticky
|
||||
top: 30px
|
||||
|
||||
.sidebar-image-wrap
|
||||
overflow: hidden
|
||||
|
||||
.sidebar-image
|
||||
display: block
|
||||
width: 100%
|
||||
aspect-ratio: 1 / 1.15
|
||||
object-fit: cover
|
||||
|
||||
.sidebar-body
|
||||
display: grid
|
||||
gap: 14px
|
||||
padding: 40px
|
||||
background: #f2fbf7
|
||||
|
||||
.sidebar-row
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
padding-bottom: 14px
|
||||
border-bottom: 1px solid rgba(22, 48, 71, 0.08)
|
||||
|
||||
.sidebar-row:last-child
|
||||
padding-bottom: 0
|
||||
border-bottom: 0
|
||||
|
||||
.sidebar-label
|
||||
color: #0f766e
|
||||
font-size: 20px
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.06em
|
||||
width: 45%
|
||||
flex: 0 0 45%
|
||||
|
||||
.sidebar-value
|
||||
font-weight: 700
|
||||
|
||||
.sidebar-footer
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 20px
|
||||
padding: 15px 40px
|
||||
background: #163047
|
||||
|
||||
.sidebar-follow
|
||||
font-size: 20px
|
||||
font-weight: 600
|
||||
color: #fff
|
||||
|
||||
.social-links
|
||||
display: flex
|
||||
gap: 6px
|
||||
|
||||
.social-btn
|
||||
color: #fff
|
||||
border: 1px solid rgba(255, 255, 255, 0.8)
|
||||
background: transparent
|
||||
|
||||
.social-icon
|
||||
display: block
|
||||
width: 18px
|
||||
height: 18px
|
||||
filter: brightness(0) invert(1)
|
||||
|
||||
.content-stack
|
||||
display: grid
|
||||
gap: 24px
|
||||
|
||||
.content-section,
|
||||
.content-card,
|
||||
.contact-card
|
||||
padding: 0
|
||||
box-shadow: none
|
||||
background: transparent
|
||||
|
||||
.section-kicker
|
||||
color: #0f766e
|
||||
font-size: 0.85rem
|
||||
font-weight: 800
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.08em
|
||||
margin-bottom: 10px
|
||||
|
||||
.section-title,
|
||||
.card-title
|
||||
margin: 0 0 14px
|
||||
font-weight: 800
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.section-title
|
||||
font-size: clamp(2rem, 4vw, 2.875rem)
|
||||
line-height: 1.06
|
||||
|
||||
.section-title.small
|
||||
font-size: clamp(1.8rem, 3vw, 2.875rem)
|
||||
|
||||
.card-title
|
||||
font-size: clamp(1.8rem, 3vw, 2.875rem)
|
||||
margin-bottom: 20px
|
||||
|
||||
.section-text,
|
||||
.timeline-text,
|
||||
.expertise-item span
|
||||
margin: 0
|
||||
color: #607284
|
||||
line-height: 1.72
|
||||
|
||||
.timeline-item + .timeline-item
|
||||
margin-top: 30px
|
||||
|
||||
.timeline-title
|
||||
margin-bottom: 15px
|
||||
font-weight: 800
|
||||
font-size: 20px
|
||||
|
||||
.skill-item + .skill-item
|
||||
margin-top: 30px
|
||||
|
||||
.skill-head
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
gap: 12px
|
||||
margin-bottom: 8px
|
||||
font-weight: 700
|
||||
|
||||
.skill-bar
|
||||
background: #f2fbf7
|
||||
|
||||
.expertise-list
|
||||
display: grid
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
gap: 15px 20px
|
||||
margin-top: 20px
|
||||
|
||||
.expertise-item
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
gap: 10px
|
||||
|
||||
.contact-form
|
||||
display: grid
|
||||
gap: 18px
|
||||
margin-top: 0
|
||||
|
||||
.contact-card
|
||||
padding: 40px
|
||||
background: #f2fbf7
|
||||
box-shadow: none
|
||||
|
||||
.form-grid
|
||||
display: grid
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
gap: 18px
|
||||
|
||||
.submit-btn
|
||||
justify-self: start
|
||||
min-width: 180px
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.profile-section
|
||||
padding: 40px 0
|
||||
|
||||
.sidebar-card,
|
||||
.contact-card
|
||||
border-radius: 26px
|
||||
|
||||
.sidebar-image
|
||||
aspect-ratio: 1 / 1.1
|
||||
|
||||
.sidebar-body
|
||||
padding: 20px
|
||||
|
||||
.sidebar-label
|
||||
font-size: 18px
|
||||
|
||||
.sidebar-footer
|
||||
padding: 10px 20px
|
||||
|
||||
.sidebar-follow
|
||||
font-size: 18px
|
||||
|
||||
.section-title,
|
||||
.section-title.small,
|
||||
.card-title
|
||||
font-size: 26px
|
||||
|
||||
.timeline-item + .timeline-item
|
||||
margin-top: 20px
|
||||
|
||||
.skill-item + .skill-item
|
||||
margin-top: 20px
|
||||
|
||||
.expertise-list
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.form-grid
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.contact-card
|
||||
padding: 20px
|
||||
</style>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<q-page class="doctors-page">
|
||||
<HomeHeader />
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="page-shell">
|
||||
<div class="hero-panel">
|
||||
<div class="section-kicker">Our doctors</div>
|
||||
<h1 class="hero-title">Meet the specialists behind our standard of care</h1>
|
||||
<p class="hero-text">
|
||||
Our medical team brings together diverse specialties with one shared
|
||||
goal: delivering care that is precise, collaborative, and genuinely human.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team-section">
|
||||
<div class="page-shell">
|
||||
<div class="row q-col-gutter-lg">
|
||||
<div
|
||||
v-for="doctor in doctors"
|
||||
:key="doctor.name"
|
||||
class="col-12 col-sm-6 col-lg-3"
|
||||
>
|
||||
<q-card flat class="doctor-card">
|
||||
<q-btn class="doctor-link" flat no-caps to="/doctors/detail">
|
||||
<div class="doctor-image-wrap">
|
||||
<img class="doctor-image" :src="doctor.image" :alt="doctor.name" />
|
||||
</div>
|
||||
</q-btn>
|
||||
|
||||
<div class="doctor-body">
|
||||
<div class="social-links">
|
||||
<q-btn
|
||||
v-for="social in socialLinks"
|
||||
:key="social.label"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
class="social-btn"
|
||||
:aria-label="social.label"
|
||||
>
|
||||
<q-tooltip>{{ social.label }}</q-tooltip>
|
||||
<img class="social-icon" :src="social.icon" :alt="social.label" />
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="doctor-content">
|
||||
<h3 class="doctor-name">
|
||||
<router-link class="doctor-name-link" to="/doctors/detail">
|
||||
{{ doctor.name }}
|
||||
</router-link>
|
||||
</h3>
|
||||
<p class="doctor-specialty">{{ doctor.specialty }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HomeFooter />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
||||
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
||||
import team1 from 'src/assets/about/team-1.jpg';
|
||||
import team2 from 'src/assets/about/team-2.jpg';
|
||||
import team3 from 'src/assets/about/team-3.jpg';
|
||||
import team4 from 'src/assets/about/team-4.jpg';
|
||||
import facebookIconUrl from 'src/assets/icons/facebook.svg';
|
||||
import instagramIconUrl from 'src/assets/icons/instagram.svg';
|
||||
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: instagramIconUrl, label: 'Instagram' },
|
||||
{ icon: facebookIconUrl, label: 'Facebook' },
|
||||
{ icon: whatsappIconUrl, label: 'WhatsApp' },
|
||||
];
|
||||
|
||||
const doctors = [
|
||||
{ name: 'Dr. Esther Howard', specialty: 'Ophthalmology', image: team1 },
|
||||
{ name: 'Dr. Jenny Wilson', specialty: 'Anesthesiology', image: team2 },
|
||||
{ name: 'Dr. Kristin Watson', specialty: 'Infectious Disease', image: team3 },
|
||||
{ name: 'Dr. Arlene McCoy', specialty: 'Cardiology', image: team4 },
|
||||
{ name: 'Dr. Michael Johnson', specialty: 'Orthopedics', image: team1 },
|
||||
{ name: 'Dr. Sarah Lee', specialty: 'Pediatrics', image: team2 },
|
||||
{ name: 'Dr. James Smith', specialty: 'Neurology', image: team3 },
|
||||
{ name: 'Dr. Rachel Davis', specialty: 'Dermatology', image: team4 },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.doctors-page
|
||||
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 36%, #eef5ff 100%)
|
||||
color: #163047
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.hero-section
|
||||
padding: 72px 0 36px
|
||||
|
||||
.hero-panel
|
||||
max-width: 760px
|
||||
padding: 38px
|
||||
border-radius: 36px
|
||||
background: linear-gradient(135deg, #dff7ee 0%, #dbeafe 100%)
|
||||
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.section-kicker
|
||||
margin-bottom: 10px
|
||||
color: #0f766e
|
||||
font-size: 0.85rem
|
||||
font-weight: 800
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.hero-title
|
||||
margin: 0 0 14px
|
||||
font-size: clamp(2.4rem, 4.5vw, 4rem)
|
||||
line-height: 1.02
|
||||
font-weight: 800
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.hero-text
|
||||
margin: 0
|
||||
color: #607284
|
||||
line-height: 1.7
|
||||
font-size: 1.02rem
|
||||
|
||||
.team-section
|
||||
padding: 24px 0 64px
|
||||
|
||||
.doctor-card
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
border-radius: 28px
|
||||
background: rgba(255, 255, 255, 0.9)
|
||||
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.doctor-link
|
||||
display: block
|
||||
padding: 0
|
||||
border-radius: 0
|
||||
|
||||
.doctor-image-wrap
|
||||
overflow: hidden
|
||||
|
||||
.doctor-image
|
||||
display: block
|
||||
width: 100%
|
||||
height: 320px
|
||||
object-fit: cover
|
||||
|
||||
.doctor-body
|
||||
padding: 18px 18px 22px
|
||||
|
||||
.social-links
|
||||
display: flex
|
||||
gap: 6px
|
||||
margin-bottom: 16px
|
||||
|
||||
.social-btn
|
||||
color: #163047
|
||||
background: rgba(15, 118, 110, 0.08)
|
||||
|
||||
.social-icon
|
||||
display: block
|
||||
width: 18px
|
||||
height: 18px
|
||||
|
||||
.doctor-name
|
||||
margin: 0 0 6px
|
||||
font-size: 1.18rem
|
||||
font-weight: 800
|
||||
|
||||
.doctor-name-link
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
|
||||
.doctor-specialty
|
||||
margin: 0
|
||||
color: #607284
|
||||
text-transform: capitalize
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.hero-section
|
||||
padding: 40px 0 24px
|
||||
|
||||
.team-section
|
||||
padding: 16px 0 40px
|
||||
|
||||
.hero-panel
|
||||
padding: 24px
|
||||
</style>
|
||||
|
|
@ -1,99 +1,277 @@
|
|||
<template>
|
||||
<q-page class="row items-center justify-evenly">
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card class="q-mt-md">
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ t('home.welcome') }}</div>
|
||||
<p>
|
||||
<router-link to="/dev">{{ t('app.devSection') }}</router-link>
|
||||
</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="q-pa-md row items-start q-gutter-md">
|
||||
<q-card class="my-card">
|
||||
<img src="https://cdn.quasar.dev/img/mountains.jpg" />
|
||||
<q-page class="index-page">
|
||||
<HomeHeader />
|
||||
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ t('home.cardTitle') }}</div>
|
||||
<div class="text-subtitle2">{{ t('home.cardSubtitle') }}</div>
|
||||
</q-card-section>
|
||||
<section class="hero-section">
|
||||
<div class="page-shell">
|
||||
<div class="row items-center q-col-gutter-xl">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="hero-copy">
|
||||
<div class="eyebrow">Care that feels human, expertise you can trust</div>
|
||||
<h1 class="hero-title">Expert medical care you can rely on</h1>
|
||||
<p class="hero-text">
|
||||
Experience healthcare you can trust. Our dedicated team provides
|
||||
compassionate, high-quality care.
|
||||
</p>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
{{ t('home.lorem') }}
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="hero-actions">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
no-caps
|
||||
color="primary"
|
||||
label="Book an appointment"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
rounded
|
||||
no-caps
|
||||
color="primary"
|
||||
label="About us"
|
||||
:to="navLinks.find(link => link.label === 'About Us')?.link"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-card class="my-card">
|
||||
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
|
||||
<div class="absolute-bottom text-subtitle2 text-center">{{ t('home.imageTitle') }}</div>
|
||||
</q-img>
|
||||
</q-card>
|
||||
|
||||
<q-card class="my-card">
|
||||
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
|
||||
<div class="absolute-bottom text-h6">{{ t('home.imageTitle') }}</div>
|
||||
</q-img>
|
||||
|
||||
<q-card-section>
|
||||
{{ t('home.lorem') }}
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<q-card class="my-card">
|
||||
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
|
||||
<div class="text-subtitle2 absolute-top text-center">{{ t('home.imageTitle') }}</div>
|
||||
</q-img>
|
||||
</q-card>
|
||||
|
||||
<q-card class="my-card">
|
||||
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
|
||||
<div class="text-h5 absolute-bottom text-right">{{ t('home.imageTitle') }}</div>
|
||||
</q-img>
|
||||
</q-card>
|
||||
|
||||
<q-card class="my-card">
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-avatar>
|
||||
<img src="https://cdn.quasar.dev/img/avatar2.jpg" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ t('home.imageTitle') }}</q-item-label>
|
||||
<q-item-label caption>{{ t('home.imageSubhead') }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
|
||||
</q-card>
|
||||
|
||||
<q-card class="my-card">
|
||||
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
|
||||
<div class="absolute-bottom">
|
||||
<div class="text-h6">{{ t('home.cardTitle') }}</div>
|
||||
<div class="text-subtitle2">{{ t('home.cardSubtitle') }}</div>
|
||||
<q-card flat class="rating-card">
|
||||
<div class="rating-copy">
|
||||
<span class="rating-label">Google Rating</span>
|
||||
<span class="rating-score">5.0</span>
|
||||
</div>
|
||||
<div class="rating-stars" aria-label="5 star rating">
|
||||
<q-icon v-for="star in 5" :key="star" name="star" color="warning" />
|
||||
</div>
|
||||
<div class="rating-caption">based on 500 reviews</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-img>
|
||||
</div>
|
||||
|
||||
<q-card-actions>
|
||||
<q-btn flat>{{ t('home.action1') }}</q-btn>
|
||||
<q-btn flat>{{ t('home.action2') }}</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="hero-visual">
|
||||
<div class="hero-image-wrap">
|
||||
<img class="hero-image" :src="heroImageUrl" alt="Medical team" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HomeFooter />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
||||
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
||||
import heroImageUrl from 'src/assets/home/hero-img.png';
|
||||
|
||||
const { t } = useI18n();
|
||||
const navLinks = [
|
||||
{ label: 'Home' , link: '/' },
|
||||
{ label: 'About Us', link: '/about' },
|
||||
{ label: 'Services', link: '/services' },
|
||||
{ label: 'Doctors', link: '/doctors' },
|
||||
{ label: 'Contact Us', link: '/contact' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.my-card
|
||||
.index-page
|
||||
background: linear-gradient(180deg, #f4fbf8 0%, #ffffff 38%, #eef7ff 100%)
|
||||
color: #163047
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.nav-btn
|
||||
color: #163047
|
||||
font-weight: 600
|
||||
|
||||
.appointment-btn
|
||||
min-width: 180px
|
||||
|
||||
.hero-section
|
||||
padding: 56px 0 72px
|
||||
|
||||
.hero-copy
|
||||
padding-right: 20px
|
||||
|
||||
.eyebrow
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
max-width: 560px
|
||||
padding: 12px 18px
|
||||
margin-bottom: 24px
|
||||
border: 1px solid rgba(15, 118, 110, 0.14)
|
||||
border-radius: 18px
|
||||
background: linear-gradient(135deg, rgba(13, 148, 136, 0.16) 0%, rgba(59, 130, 246, 0.12) 100%)
|
||||
color: #0f766e
|
||||
font-size: 0.98rem
|
||||
font-weight: 800
|
||||
letter-spacing: 0.01em
|
||||
line-height: 1.4
|
||||
text-transform: none
|
||||
box-shadow: 0 14px 30px rgba(15, 118, 110, 0.08)
|
||||
|
||||
.hero-title
|
||||
margin: 0 0 20px
|
||||
font-size: clamp(2.8rem, 6vw, 4.8rem)
|
||||
line-height: 0.98
|
||||
font-weight: 800
|
||||
letter-spacing: -0.04em
|
||||
|
||||
.hero-text
|
||||
max-width: 560px
|
||||
margin: 0 0 28px
|
||||
font-size: 1.08rem
|
||||
line-height: 1.7
|
||||
color: #526579
|
||||
|
||||
.hero-actions
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 14px
|
||||
margin-bottom: 28px
|
||||
|
||||
.rating-card
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
flex-wrap: wrap
|
||||
gap: 14px
|
||||
padding: 18px 20px
|
||||
border-radius: 24px
|
||||
background: rgba(255, 255, 255, 0.86)
|
||||
box-shadow: 0 24px 70px rgba(41, 72, 108, 0.12)
|
||||
|
||||
.rating-copy
|
||||
display: flex
|
||||
align-items: baseline
|
||||
gap: 10px
|
||||
|
||||
.rating-label
|
||||
font-weight: 700
|
||||
|
||||
.rating-score
|
||||
font-size: 1.25rem
|
||||
font-weight: 800
|
||||
|
||||
.rating-stars
|
||||
display: flex
|
||||
gap: 2px
|
||||
|
||||
.rating-caption
|
||||
color: #6b7c8d
|
||||
|
||||
.hero-visual
|
||||
position: relative
|
||||
padding: 22px 20px 44px
|
||||
|
||||
.hero-visual::before
|
||||
content: ''
|
||||
position: absolute
|
||||
z-index: 0
|
||||
|
||||
.hero-image-wrap
|
||||
position: relative
|
||||
z-index: 1
|
||||
overflow: hidden
|
||||
border-radius: 36px
|
||||
box-shadow: 0 30px 80px rgba(22, 48, 71, 0.16)
|
||||
|
||||
.hero-image
|
||||
display: block
|
||||
width: 100%
|
||||
max-width: 250px
|
||||
height: auto
|
||||
|
||||
.floating-card
|
||||
position: absolute
|
||||
z-index: 2
|
||||
border-radius: 24px
|
||||
background: rgba(255, 255, 255, 0.94)
|
||||
box-shadow: 0 20px 55px rgba(22, 48, 71, 0.16)
|
||||
|
||||
.doctors-card
|
||||
left: -4px
|
||||
bottom: 18px
|
||||
padding: 18px
|
||||
|
||||
.doctor-avatars
|
||||
display: flex
|
||||
margin-bottom: 10px
|
||||
|
||||
.doctor-avatar
|
||||
border: 3px solid #fff
|
||||
margin-left: -12px
|
||||
|
||||
.doctor-avatar:first-child
|
||||
margin-left: 0
|
||||
|
||||
.floating-title
|
||||
font-size: 0.96rem
|
||||
color: #526579
|
||||
|
||||
.clients-card
|
||||
top: 8px
|
||||
right: 0
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 14px
|
||||
padding: 16px 18px
|
||||
|
||||
.clients-icon
|
||||
width: 52px
|
||||
height: 52px
|
||||
|
||||
.clients-count
|
||||
font-size: 1.5rem
|
||||
font-weight: 800
|
||||
line-height: 1
|
||||
|
||||
.clients-label
|
||||
margin-top: 4px
|
||||
color: #526579
|
||||
|
||||
@media (max-width: 1023px)
|
||||
.hero-copy
|
||||
padding-right: 0
|
||||
|
||||
.hero-visual
|
||||
margin-top: 20px
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.hero-section
|
||||
padding: 32px 0 48px
|
||||
|
||||
.hero-title
|
||||
font-size: 2.6rem
|
||||
|
||||
.eyebrow
|
||||
font-size: 0.92rem
|
||||
padding: 10px 14px
|
||||
|
||||
.rating-card
|
||||
width: 100%
|
||||
|
||||
.hero-visual
|
||||
padding: 10px 0 86px
|
||||
|
||||
.hero-visual::before
|
||||
inset: 26px 0 0 12px
|
||||
border-radius: 28px
|
||||
|
||||
.doctors-card
|
||||
left: 8px
|
||||
bottom: 0
|
||||
|
||||
.clients-card
|
||||
top: auto
|
||||
right: 8px
|
||||
bottom: 104px
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,476 @@
|
|||
<template>
|
||||
<q-page class="services-page">
|
||||
<HomeHeader />
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="page-shell">
|
||||
<div class="hero-panel">
|
||||
<div class="row items-center q-col-gutter-xl">
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="eyebrow">Our services</div>
|
||||
<h1 class="hero-title">Specialized care designed around real patient needs</h1>
|
||||
<p class="hero-text">
|
||||
From prevention and diagnostics to treatment planning and follow-up,
|
||||
we build integrated services that make care simpler to access and
|
||||
easier to trust.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="hero-summary">
|
||||
<q-card
|
||||
v-for="metric in metrics"
|
||||
:key="metric.label"
|
||||
flat
|
||||
class="metric-card"
|
||||
>
|
||||
<div class="metric-value">{{ metric.value }}</div>
|
||||
<div class="metric-label">{{ metric.label }}</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="services-section">
|
||||
<div class="page-shell">
|
||||
<div class="section-heading">
|
||||
<div class="section-kicker">Clinical areas</div>
|
||||
<h2 class="section-title">Core services patients rely on every day</h2>
|
||||
<p class="section-text">
|
||||
Each service line is built to combine fast access, specialist expertise,
|
||||
and clear next steps after every appointment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-lg">
|
||||
<div
|
||||
v-for="service in services"
|
||||
:key="service.title"
|
||||
class="col-12 col-md-6 col-lg-4"
|
||||
>
|
||||
<q-card flat class="service-card">
|
||||
<img class="service-image" :src="service.image" :alt="service.title" />
|
||||
<div class="service-content">
|
||||
<img class="service-icon" :src="service.icon" :alt="service.title" />
|
||||
<h3 class="service-title">{{ service.title }}</h3>
|
||||
<p class="service-text">{{ service.text }}</p>
|
||||
<ul class="service-points">
|
||||
<li v-for="point in service.points" :key="point">
|
||||
<q-icon name="check_circle" color="positive" size="18px" />
|
||||
<span>{{ point }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="workflow-section">
|
||||
<div class="page-shell">
|
||||
<div class="section-heading align-center">
|
||||
<div class="section-kicker">Service model</div>
|
||||
<h2 class="section-title">How we turn expertise into a better patient experience</h2>
|
||||
</div>
|
||||
|
||||
<div class="workflow-grid">
|
||||
<q-card
|
||||
v-for="step in workflow"
|
||||
:key="step.title"
|
||||
flat
|
||||
class="workflow-card"
|
||||
>
|
||||
<div class="workflow-number">{{ step.number }}</div>
|
||||
<h3 class="workflow-title">{{ step.title }}</h3>
|
||||
<p class="workflow-text">{{ step.text }}</p>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="page-shell">
|
||||
<q-card flat class="cta-card">
|
||||
<div class="row items-center q-col-gutter-xl">
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="cta-copy">
|
||||
<div class="section-kicker">Need guidance?</div>
|
||||
<h2 class="cta-title">We help patients find the right service without the usual confusion</h2>
|
||||
<p class="cta-text">
|
||||
Tell us what you need and our team will direct you to the right
|
||||
specialist, timing, and next step.
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
no-caps
|
||||
color="primary"
|
||||
label="Request an appointment"
|
||||
/>
|
||||
<q-btn outline rounded no-caps color="primary" label="Contact us" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="cta-visual">
|
||||
<img class="cta-image-main" :src="ctaImageMain" alt="Medical assistance" />
|
||||
<img class="cta-image-secondary" :src="ctaImageSecondary" alt="Patient support" />
|
||||
<q-card flat class="cta-badge">
|
||||
<img class="cta-badge-icon" :src="ctaIcon" alt="Support icon" />
|
||||
<div>
|
||||
<div class="cta-badge-title">Fast triage support</div>
|
||||
<div class="cta-badge-text">Guidance within one working day</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<HomeFooter />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
||||
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
||||
import serviceImage1 from 'src/assets/services/service-img-1.jpg';
|
||||
import serviceImage2 from 'src/assets/services/service-img-2.jpg';
|
||||
import serviceImage3 from 'src/assets/services/service-img-3.jpg';
|
||||
import serviceIcon1 from 'src/assets/services/icon-service-1.svg';
|
||||
import serviceIcon2 from 'src/assets/services/icon-service-2.svg';
|
||||
import serviceIcon3 from 'src/assets/services/icon-service-3.svg';
|
||||
import ctaImageMain from 'src/assets/services/cta-img-1.png';
|
||||
import ctaImageSecondary from 'src/assets/services/cta-img-2.png';
|
||||
import ctaIcon from 'src/assets/services/icon-faq-cta.svg';
|
||||
|
||||
const metrics = [
|
||||
{ value: '40+', label: 'clinical professionals available' },
|
||||
{ value: '12', label: 'coordinated service areas' },
|
||||
{ value: '24h', label: 'average response for triage requests' },
|
||||
];
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: 'Preventive and primary care',
|
||||
text: 'Routine checkups, early screening, and continuous care planning for long-term health.',
|
||||
image: serviceImage1,
|
||||
icon: serviceIcon1,
|
||||
points: ['Annual assessments', 'Vaccination guidance', 'Chronic care monitoring'],
|
||||
},
|
||||
{
|
||||
title: 'Specialist consultations',
|
||||
text: 'Access to focused expertise with clear coordination between disciplines and follow-up.',
|
||||
image: serviceImage2,
|
||||
icon: serviceIcon2,
|
||||
points: ['Cardiology and internal medicine', 'Pediatric support', 'Referral coordination'],
|
||||
},
|
||||
{
|
||||
title: 'Diagnostics and treatment planning',
|
||||
text: 'Accurate evaluation backed by practical treatment plans patients can actually follow.',
|
||||
image: serviceImage3,
|
||||
icon: serviceIcon3,
|
||||
points: ['Clinical diagnostics', 'Evidence-based plans', 'Post-visit support'],
|
||||
},
|
||||
];
|
||||
|
||||
const workflow = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Understand the need',
|
||||
text: 'We start with symptoms, history, urgency, and the service path that best fits the case.',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Route to the right team',
|
||||
text: 'Patients are matched to the most appropriate clinician instead of navigating care alone.',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Deliver coordinated care',
|
||||
text: 'Diagnostics, consultation, and treatment planning happen with clear ownership and timing.',
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'Stay present after the visit',
|
||||
text: 'Follow-up instructions and next actions remain visible, simple, and easy to execute.',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.services-page
|
||||
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 34%, #eef5ff 100%)
|
||||
color: #163047
|
||||
|
||||
.page-shell
|
||||
width: min(1180px, calc(100% - 32px))
|
||||
margin: 0 auto
|
||||
|
||||
.hero-section
|
||||
padding: 72px 0 44px
|
||||
|
||||
.hero-panel
|
||||
padding: 42px
|
||||
border-radius: 36px
|
||||
background: linear-gradient(135deg, #dff7ee 0%, #dbeafe 100%)
|
||||
box-shadow: 0 28px 80px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.eyebrow
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
padding: 10px 16px
|
||||
margin-bottom: 22px
|
||||
border-radius: 999px
|
||||
background: rgba(255, 255, 255, 0.66)
|
||||
color: #0f766e
|
||||
font-size: 0.88rem
|
||||
font-weight: 800
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.hero-title
|
||||
margin: 0 0 18px
|
||||
font-size: clamp(2.8rem, 5vw, 4.4rem)
|
||||
line-height: 1
|
||||
font-weight: 800
|
||||
letter-spacing: -0.04em
|
||||
|
||||
.hero-text
|
||||
max-width: 620px
|
||||
margin: 0
|
||||
font-size: 1.08rem
|
||||
line-height: 1.7
|
||||
color: #55687c
|
||||
|
||||
.hero-summary
|
||||
display: grid
|
||||
gap: 16px
|
||||
|
||||
.metric-card
|
||||
padding: 22px
|
||||
border-radius: 24px
|
||||
background: rgba(255, 255, 255, 0.82)
|
||||
|
||||
.metric-value
|
||||
font-size: 1.8rem
|
||||
font-weight: 800
|
||||
|
||||
.metric-label
|
||||
margin-top: 8px
|
||||
color: #617486
|
||||
line-height: 1.55
|
||||
|
||||
.services-section,
|
||||
.workflow-section,
|
||||
.cta-section
|
||||
padding: 56px 0
|
||||
|
||||
.section-heading
|
||||
max-width: 700px
|
||||
margin-bottom: 30px
|
||||
|
||||
.align-center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
text-align: center
|
||||
|
||||
.section-kicker
|
||||
margin-bottom: 10px
|
||||
color: #0f766e
|
||||
font-size: 0.85rem
|
||||
font-weight: 800
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.section-title
|
||||
margin: 0 0 14px
|
||||
font-size: clamp(2rem, 4vw, 3.2rem)
|
||||
line-height: 1.05
|
||||
font-weight: 800
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.section-text
|
||||
margin: 0
|
||||
color: #607284
|
||||
line-height: 1.7
|
||||
font-size: 1.02rem
|
||||
|
||||
.service-card,
|
||||
.workflow-card,
|
||||
.cta-card
|
||||
border-radius: 28px
|
||||
background: rgba(255, 255, 255, 0.88)
|
||||
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
||||
|
||||
.service-card
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
|
||||
.service-image
|
||||
display: block
|
||||
width: 100%
|
||||
height: 240px
|
||||
object-fit: cover
|
||||
|
||||
.service-content
|
||||
padding: 24px
|
||||
|
||||
.service-icon
|
||||
width: 60px
|
||||
height: 60px
|
||||
margin-bottom: 16px
|
||||
|
||||
.service-title,
|
||||
.workflow-title,
|
||||
.cta-title
|
||||
margin: 0 0 12px
|
||||
font-weight: 800
|
||||
|
||||
.service-title
|
||||
font-size: 1.32rem
|
||||
|
||||
.service-text,
|
||||
.workflow-text,
|
||||
.cta-text
|
||||
margin: 0
|
||||
color: #647789
|
||||
line-height: 1.68
|
||||
|
||||
.service-points
|
||||
display: grid
|
||||
gap: 10px
|
||||
padding: 0
|
||||
margin: 18px 0 0
|
||||
list-style: none
|
||||
|
||||
.service-points li
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 10px
|
||||
|
||||
.workflow-section
|
||||
background: rgba(255, 255, 255, 0.62)
|
||||
|
||||
.workflow-grid
|
||||
display: grid
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr))
|
||||
gap: 16px
|
||||
|
||||
.workflow-card
|
||||
padding: 26px
|
||||
height: 100%
|
||||
|
||||
.workflow-number
|
||||
margin-bottom: 14px
|
||||
color: #0f766e
|
||||
font-size: 0.9rem
|
||||
font-weight: 800
|
||||
letter-spacing: 0.08em
|
||||
|
||||
.workflow-title
|
||||
font-size: 1.24rem
|
||||
|
||||
.cta-card
|
||||
overflow: hidden
|
||||
padding: 38px
|
||||
|
||||
.cta-copy
|
||||
max-width: 580px
|
||||
|
||||
.cta-title
|
||||
font-size: clamp(2rem, 3.6vw, 3rem)
|
||||
line-height: 1.08
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.cta-text
|
||||
margin-bottom: 24px
|
||||
|
||||
.cta-actions
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 14px
|
||||
|
||||
.cta-visual
|
||||
position: relative
|
||||
min-height: 360px
|
||||
|
||||
.cta-image-main,
|
||||
.cta-image-secondary
|
||||
position: absolute
|
||||
display: block
|
||||
max-width: 100%
|
||||
|
||||
.cta-image-main
|
||||
right: 0
|
||||
top: 0
|
||||
width: min(82%, 320px)
|
||||
|
||||
.cta-image-secondary
|
||||
left: 0
|
||||
bottom: 0
|
||||
width: min(58%, 220px)
|
||||
|
||||
.cta-badge
|
||||
position: absolute
|
||||
left: 22px
|
||||
top: 26px
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 14px
|
||||
padding: 16px 18px
|
||||
border-radius: 22px
|
||||
background: rgba(255, 255, 255, 0.94)
|
||||
box-shadow: 0 18px 50px rgba(22, 48, 71, 0.14)
|
||||
|
||||
.cta-badge-icon
|
||||
width: 46px
|
||||
height: 46px
|
||||
|
||||
.cta-badge-title
|
||||
font-weight: 800
|
||||
|
||||
.cta-badge-text
|
||||
margin-top: 4px
|
||||
color: #647789
|
||||
|
||||
@media (max-width: 1023px)
|
||||
.workflow-grid
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
|
||||
@media (max-width: 599px)
|
||||
.page-shell
|
||||
width: min(100% - 24px, 1180px)
|
||||
|
||||
.hero-section,
|
||||
.services-section,
|
||||
.workflow-section,
|
||||
.cta-section
|
||||
padding: 40px 0
|
||||
|
||||
.hero-panel,
|
||||
.cta-card
|
||||
padding: 24px
|
||||
|
||||
.hero-title
|
||||
font-size: 2.5rem
|
||||
|
||||
.workflow-grid
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.cta-visual
|
||||
min-height: 300px
|
||||
margin-top: 16px
|
||||
|
||||
.cta-badge
|
||||
left: 8px
|
||||
top: 8px
|
||||
</style>
|
||||
|
|
@ -6,6 +6,11 @@ const routes: RouteRecordRaw[] = [
|
|||
component: () => import('layouts/MainLayout.vue'),
|
||||
children: [
|
||||
{ path: '', component: () => import('src/pages/IndexPage.vue') },
|
||||
{ path: 'about', component: () => import('src/pages/AboutUsPage.vue') },
|
||||
{ path: 'services', component: () => import('src/pages/ServicesPage.vue') },
|
||||
{ path: 'doctors', component: () => import('src/pages/DoctorsPage.vue') },
|
||||
{ path: 'doctors/detail', component: () => import('src/pages/DoctorDetailPage.vue') },
|
||||
{ path: 'contact', component: () => import('src/pages/ContactUsPage.vue') },
|
||||
{
|
||||
path: 'login',
|
||||
component: () => import('pages/dev/LoginPage.vue'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<!-- Page Contact Us Start -->
|
||||
<div class="page-contact-us">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<!-- Contact Us Box Start -->
|
||||
<div class="contact-us-box">
|
||||
<!-- Contact Info Box Start -->
|
||||
<div class="contact-info-box">
|
||||
<!-- Contact Info List Start -->
|
||||
<div class="contact-info-list">
|
||||
<!-- Contact Info Item Start -->
|
||||
<div class="contact-info-item wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
|
||||
<div class="icon-box">
|
||||
<img src="./contactus_files/icon-phone.svg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="contact-info-content">
|
||||
<h3>contact details</h3>
|
||||
<p>+01-787-582-568</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Info Item End -->
|
||||
|
||||
<!-- Contact Info Item Start -->
|
||||
<div class="contact-info-item wow fadeInUp" data-wow-delay="0.25s" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
|
||||
<div class="icon-box">
|
||||
<img src="./contactus_files/icon-location.svg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="contact-info-content">
|
||||
<h3>address</h3>
|
||||
<p>403, Port Washington Road, Canada</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Info Item End -->
|
||||
|
||||
<!-- Contact Info Item Start -->
|
||||
<div class="contact-info-item wow fadeInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
|
||||
<div class="icon-box">
|
||||
<img src="./contactus_files/icon-mail.svg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="contact-info-content">
|
||||
<h3>email us</h3>
|
||||
<p>info@domain.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Info Item End -->
|
||||
</div>
|
||||
<!-- Contact Info List End -->
|
||||
|
||||
<!-- Contact Social List Start -->
|
||||
<div class="contact-social-list wow fadeInUp" data-wow-delay="0.75s" style="visibility: visible; animation-delay: 0.75s; animation-name: fadeInUp;">
|
||||
<span>follow us:</span>
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/contact.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/contact.html#"><i class="fa-brands fa-x-twitter"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/contact.html#"><i class="fa-brands fa-linkedin-in"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/contact.html#"><i class="fa-brands fa-pinterest-p"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Contact Social List End -->
|
||||
</div>
|
||||
<!-- Contact Info Box End -->
|
||||
|
||||
<!-- Contact Us Form Start -->
|
||||
<div class="contact-us-form">
|
||||
<!-- Section Title Start -->
|
||||
<div class="section-title">
|
||||
<h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">contact us</h3>
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">R</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">h</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">f</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">q</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div></div></div></h2>
|
||||
<p class="wow fadeInUp" data-wow-delay="0.25s" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">We take the time to understand your individual needs and goals, creating customized treatment plans to help you achieve optimal oral health.</p>
|
||||
</div>
|
||||
<!-- Section Title End -->
|
||||
|
||||
<!-- Contact Form Start -->
|
||||
<div class="contact-form">
|
||||
<form id="contactForm" action="https://html.awaikenthemes.com/dispnsary/contact.html#" method="POST" data-toggle="validator" class="wow fadeInUp" data-wow-delay="0.25s" novalidate="true" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12 mb-4">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Enter Your Name" required="">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-6 mb-4">
|
||||
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email" required="">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-6 mb-4">
|
||||
<input type="text" name="phone" class="form-control" id="phone" placeholder="Enter Your Number" required="">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-12 mb-5">
|
||||
<textarea name="message" class="form-control" id="message" rows="4" placeholder="Write Message.."></textarea>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="btn-default disabled">submit now</button>
|
||||
<div id="msgSubmit" class="h3 hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Contact Form Start -->
|
||||
</div>
|
||||
<!-- Contact Us Form End -->
|
||||
</div>
|
||||
<!-- Contact Us Box End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page Contact Us End -->
|
||||
|
||||
<!-- Google Map Section Start -->
|
||||
<div class="google-map">
|
||||
<div class="container">
|
||||
<div class="row section-row">
|
||||
<div class="col-lg-12">
|
||||
<!-- Section Title Start -->
|
||||
<div class="section-title">
|
||||
<h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">How to reach us</h3>
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: center; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">G</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">h</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">w</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">h</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div></div></div></h2>
|
||||
<p class="wow fadeInUp" data-wow-delay="0.25s" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">The goal of our clinic is to deliver compassionate care and exceptional medical services, including general health consultations, specialized treatments, and preventive care. With trusted healthcare practices globally, we ensure your well-being is our priority.</p>
|
||||
</div>
|
||||
<!-- Section Title End -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<!-- Google Map Iframe Start -->
|
||||
<div class="google-map-iframe">
|
||||
<iframe src="./contactus_files/embed.html" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
<!-- Google Map Iframe End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Google Map Section End -->
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<!-- Page Team Single Start -->
|
||||
<div class="page-doctor-single">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<!-- Team Single Sidebar Start -->
|
||||
<div class="doctor-single-sidebar">
|
||||
<!-- Team Sidebar Box Start -->
|
||||
<div class="doctor-sidebar-box wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
|
||||
<!-- Team Sidebar Image Start -->
|
||||
<div class="doctor-sidebar-image">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctorDetail_files/team-1.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- Team Sidebar Image End -->
|
||||
|
||||
<!-- Team Sidebar Body Start -->
|
||||
<div class="doctor-sidebar-body">
|
||||
<ul>
|
||||
<li><span>name:</span>Dr. Esther howard</li>
|
||||
<li><span>position:</span>psychologist</li>
|
||||
<li><span>phone:</span>+91- 123 456 7890</li>
|
||||
<li><span>e-mail:</span>info@domain.com</li>
|
||||
<li><span>experience:</span>16 years</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Sidebar Body End -->
|
||||
|
||||
<!-- Team Sidebar Footer Start -->
|
||||
<div class="doctor-sidebar-footer">
|
||||
<span>follow us:</span>
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#"><i class="fa-brands fa-x-twitter"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#"><i class="fa-brands fa-linkedin-in"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#"><i class="fa-brands fa-pinterest-p"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Sidebar Footer End -->
|
||||
</div>
|
||||
<!-- Team Sidebar Box End -->
|
||||
</div>
|
||||
<!-- Team Member Sidebar End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<!-- Team Single Content Start -->
|
||||
<div class="doctor-single-content">
|
||||
<div class="doctor-single-entry">
|
||||
<!-- Team Member Info Start -->
|
||||
<div class="doctor-member-info">
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">P</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">b</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">g</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">p</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">h</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div></div></div></h2>
|
||||
<p class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">Dr. Esther Howard is a highly experienced Psychologist with over 12 years of expertise in diagnosing and treating a wide range of eye conditions. She specializes in advanced procedures like cataract surgery, LASIK, and the management of glaucoma and retinal disorders. With a deep commitment to patient care, Dr. Carter ensures personalized treatment plans tailored to each individual's needs. Her focus on cutting-edge techniques and compassionate care has made her a trusted name in the field of ophthalmology. Whether conducting routine eye exams or performing intricate surgeries, Dr. Carter strives to enhance vision and improve the quality of life for her patients.</p>
|
||||
</div>
|
||||
<!-- Team Member Info End -->
|
||||
|
||||
<!-- Team Member Experience Start -->
|
||||
<div class="doctor-member-experience">
|
||||
<!-- Member Experience Info Start -->
|
||||
<div class="member-experience-info">
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">M</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">x</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">p</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div></div></div></h2>
|
||||
|
||||
<div class="member-experience-info-item wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
|
||||
<h3>graduate intern - 2013 - 2020</h3>
|
||||
<p>At Institution Name focused on family counseling and conflict resolution techniques.</p>
|
||||
</div>
|
||||
|
||||
<div class="member-experience-info-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
|
||||
<h3>licensed psychologist - 2020 - present</h3>
|
||||
<p>At Institution Name focused on family counseling and conflict resolution techniques.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Member Experience Info End -->
|
||||
|
||||
<!-- Team Member Skills Start -->
|
||||
<div class="doctor-member-skills">
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">M</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">k</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div></div></div></h2>
|
||||
|
||||
<!-- Skills Progress Bar Start -->
|
||||
<div class="skills-progress-bar">
|
||||
<!-- Skill Item Start -->
|
||||
<div class="skillbar" data-percent="56%">
|
||||
<div class="skill-data">
|
||||
<div class="skill-title">psychologist</div>
|
||||
<div class="skill-no">56%</div>
|
||||
</div>
|
||||
<div class="skill-progress">
|
||||
<div class="count-bar" style="width: 56%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Skill Item End -->
|
||||
</div>
|
||||
<!-- Skills Progress Bar End -->
|
||||
|
||||
<!-- Skills Progress Bar Start -->
|
||||
<div class="skills-progress-bar">
|
||||
<!-- Skill Item Start -->
|
||||
<div class="skillbar" data-percent="89%">
|
||||
<div class="skill-data">
|
||||
<div class="skill-title">success case</div>
|
||||
<div class="skill-no">89%</div>
|
||||
</div>
|
||||
<div class="skill-progress">
|
||||
<div class="count-bar" style="width: 89%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Skill Item End -->
|
||||
</div>
|
||||
<!-- Skills Progress Bar End -->
|
||||
|
||||
<!-- Skills Progress Bar Start -->
|
||||
<div class="skills-progress-bar">
|
||||
<!-- Skill Item Start -->
|
||||
<div class="skillbar" data-percent="85%">
|
||||
<div class="skill-data">
|
||||
<div class="skill-title">therapy specialist</div>
|
||||
<div class="skill-no">85%</div>
|
||||
</div>
|
||||
<div class="skill-progress">
|
||||
<div class="count-bar" style="width: 85%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Skill Item End -->
|
||||
</div>
|
||||
<!-- Skills Progress Bar End -->
|
||||
</div>
|
||||
<!-- Team Member Skills End -->
|
||||
</div>
|
||||
<!-- Team Member Experience End -->
|
||||
|
||||
<!-- Team Member Expertice Start -->
|
||||
<div class="doctor-member-expertise">
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">M</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">x</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">p</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">s</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">&</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">f</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div></div></div></h2>
|
||||
<p class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">Esther specializes in cognitive-behavioral therapy (CBT), trauma recovery, and mindfulness techniques, offering tailored support for individuals dealing with anxiety, depression, and life transitions.</p>
|
||||
|
||||
<ul class="wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
|
||||
<li>experienced professionals</li>
|
||||
<li>client-centered approach</li>
|
||||
<li>safe and confidential environment</li>
|
||||
<li>commitment to growth</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Member Expertice End -->
|
||||
</div>
|
||||
|
||||
<!-- Doctor Contact Form Start -->
|
||||
<div class="doctor-contact-form">
|
||||
<!-- Section Title Start -->
|
||||
<div class="section-title">
|
||||
<h2 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">G</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">h</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">w</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">h</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">m</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div></div></div></h2>
|
||||
</div>
|
||||
<!-- Section Title End -->
|
||||
|
||||
<!-- Contact Form Start -->
|
||||
<div class="contact-form">
|
||||
<!-- Contact Form Start -->
|
||||
<form id="contactForm" action="https://html.awaikenthemes.com/dispnsary/doctor-single.html#" method="POST" data-toggle="validator" class="wow fadeInUp" data-wow-delay="0.25s" novalidate="true" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12 mb-4">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Enter Your Name" required="">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-6 mb-4">
|
||||
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email" required="">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-6 mb-4">
|
||||
<input type="text" name="phone" class="form-control" id="phone" placeholder="Enter Your Number" required="">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-12 mb-5">
|
||||
<textarea name="message" class="form-control" id="message" rows="4" placeholder="Write Message.."></textarea>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="btn-default disabled">submit now</button>
|
||||
<div id="msgSubmit" class="h3 hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Contact Form End -->
|
||||
</div>
|
||||
<!-- Contact Form Start -->
|
||||
</div>
|
||||
<!-- Doctor Contact Form End -->
|
||||
</div>
|
||||
<!-- Team Single Content End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page Team Single End -->
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,790 @@
|
|||
//
|
||||
// SmoothScroll for websites v1.4.10 (Balazs Galambosi)
|
||||
// http://www.smoothscroll.net/
|
||||
//
|
||||
// Licensed under the terms of the MIT license.
|
||||
//
|
||||
// You may use it in your theme if you credit me.
|
||||
// It is also free to use on any individual website.
|
||||
//
|
||||
// Exception:
|
||||
// The only restriction is to not publish any
|
||||
// extension for browsers or native application
|
||||
// without getting a written permission first.
|
||||
//
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
// Scroll Variables (tweakable)
|
||||
var defaultOptions = {
|
||||
|
||||
// Scrolling Core
|
||||
frameRate : 150, // [Hz]
|
||||
animationTime : 400, // [ms]
|
||||
stepSize : 100, // [px]
|
||||
|
||||
// Pulse (less tweakable)
|
||||
// ratio of "tail" to "acceleration"
|
||||
pulseAlgorithm : true,
|
||||
pulseScale : 4,
|
||||
pulseNormalize : 1,
|
||||
|
||||
// Acceleration
|
||||
accelerationDelta : 50, // 50
|
||||
accelerationMax : 3, // 3
|
||||
|
||||
// Keyboard Settings
|
||||
keyboardSupport : true, // option
|
||||
arrowScroll : 50, // [px]
|
||||
|
||||
// Other
|
||||
fixedBackground : true,
|
||||
excluded : ''
|
||||
};
|
||||
|
||||
var options = defaultOptions;
|
||||
|
||||
|
||||
// Other Variables
|
||||
var isExcluded = false;
|
||||
var isFrame = false;
|
||||
var direction = { x: 0, y: 0 };
|
||||
var initDone = false;
|
||||
var root = document.documentElement;
|
||||
var activeElement;
|
||||
var observer;
|
||||
var refreshSize;
|
||||
var deltaBuffer = [];
|
||||
var deltaBufferTimer;
|
||||
var isMac = /^Mac/.test(navigator.platform);
|
||||
|
||||
var key = { left: 37, up: 38, right: 39, down: 40, spacebar: 32,
|
||||
pageup: 33, pagedown: 34, end: 35, home: 36 };
|
||||
var arrowKeys = { 37: 1, 38: 1, 39: 1, 40: 1 };
|
||||
|
||||
/***********************************************
|
||||
* INITIALIZE
|
||||
***********************************************/
|
||||
|
||||
/**
|
||||
* Tests if smooth scrolling is allowed. Shuts down everything if not.
|
||||
*/
|
||||
function initTest() {
|
||||
if (options.keyboardSupport) {
|
||||
addEvent('keydown', keydown);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up scrolls array, determines if frames are involved.
|
||||
*/
|
||||
function init() {
|
||||
|
||||
if (initDone || !document.body) return;
|
||||
|
||||
initDone = true;
|
||||
|
||||
var body = document.body;
|
||||
var html = document.documentElement;
|
||||
var windowHeight = window.innerHeight;
|
||||
var scrollHeight = body.scrollHeight;
|
||||
|
||||
// check compat mode for root element
|
||||
root = (document.compatMode.indexOf('CSS') >= 0) ? html : body;
|
||||
activeElement = body;
|
||||
|
||||
initTest();
|
||||
|
||||
// Checks if this script is running in a frame
|
||||
if (top != self) {
|
||||
isFrame = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari 10 fixed it, Chrome fixed it in v45:
|
||||
* This fixes a bug where the areas left and right to
|
||||
* the content does not trigger the onmousewheel event
|
||||
* on some pages. e.g.: html, body { height: 100% }
|
||||
*/
|
||||
else if (isOldSafari &&
|
||||
scrollHeight > windowHeight &&
|
||||
(body.offsetHeight <= windowHeight ||
|
||||
html.offsetHeight <= windowHeight)) {
|
||||
|
||||
var fullPageElem = document.createElement('div');
|
||||
fullPageElem.style.cssText = 'position:absolute; z-index:-10000; ' +
|
||||
'top:0; left:0; right:0; height:' +
|
||||
root.scrollHeight + 'px';
|
||||
document.body.appendChild(fullPageElem);
|
||||
|
||||
// DOM changed (throttled) to fix height
|
||||
var pendingRefresh;
|
||||
refreshSize = function () {
|
||||
if (pendingRefresh) return; // could also be: clearTimeout(pendingRefresh);
|
||||
pendingRefresh = setTimeout(function () {
|
||||
if (isExcluded) return; // could be running after cleanup
|
||||
fullPageElem.style.height = '0';
|
||||
fullPageElem.style.height = root.scrollHeight + 'px';
|
||||
pendingRefresh = null;
|
||||
}, 500); // act rarely to stay fast
|
||||
};
|
||||
|
||||
setTimeout(refreshSize, 10);
|
||||
|
||||
addEvent('resize', refreshSize);
|
||||
|
||||
// TODO: attributeFilter?
|
||||
var config = {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
characterData: false
|
||||
// subtree: true
|
||||
};
|
||||
|
||||
observer = new MutationObserver(refreshSize);
|
||||
observer.observe(body, config);
|
||||
|
||||
if (root.offsetHeight <= windowHeight) {
|
||||
var clearfix = document.createElement('div');
|
||||
clearfix.style.clear = 'both';
|
||||
body.appendChild(clearfix);
|
||||
}
|
||||
}
|
||||
|
||||
// disable fixed background
|
||||
if (!options.fixedBackground && !isExcluded) {
|
||||
body.style.backgroundAttachment = 'scroll';
|
||||
html.style.backgroundAttachment = 'scroll';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes event listeners and other traces left on the page.
|
||||
*/
|
||||
function cleanup() {
|
||||
observer && observer.disconnect();
|
||||
removeEvent(wheelEvent, wheel);
|
||||
removeEvent('mousedown', mousedown);
|
||||
removeEvent('keydown', keydown);
|
||||
removeEvent('resize', refreshSize);
|
||||
removeEvent('load', init);
|
||||
}
|
||||
|
||||
|
||||
/************************************************
|
||||
* SCROLLING
|
||||
************************************************/
|
||||
|
||||
var que = [];
|
||||
var pending = false;
|
||||
var lastScroll = Date.now();
|
||||
|
||||
/**
|
||||
* Pushes scroll actions to the scrolling queue.
|
||||
*/
|
||||
function scrollArray(elem, left, top) {
|
||||
|
||||
directionCheck(left, top);
|
||||
|
||||
if (options.accelerationMax != 1) {
|
||||
var now = Date.now();
|
||||
var elapsed = now - lastScroll;
|
||||
if (elapsed < options.accelerationDelta) {
|
||||
var factor = (1 + (50 / elapsed)) / 2;
|
||||
if (factor > 1) {
|
||||
factor = Math.min(factor, options.accelerationMax);
|
||||
left *= factor;
|
||||
top *= factor;
|
||||
}
|
||||
}
|
||||
lastScroll = Date.now();
|
||||
}
|
||||
|
||||
// push a scroll command
|
||||
que.push({
|
||||
x: left,
|
||||
y: top,
|
||||
lastX: (left < 0) ? 0.99 : -0.99,
|
||||
lastY: (top < 0) ? 0.99 : -0.99,
|
||||
start: Date.now()
|
||||
});
|
||||
|
||||
// don't act if there's a pending queue
|
||||
if (pending) {
|
||||
return;
|
||||
}
|
||||
|
||||
var scrollRoot = getScrollRoot();
|
||||
var isWindowScroll = (elem === scrollRoot || elem === document.body);
|
||||
|
||||
// if we haven't already fixed the behavior,
|
||||
// and it needs fixing for this sesh
|
||||
if (elem.$scrollBehavior == null && isScrollBehaviorSmooth(elem)) {
|
||||
elem.$scrollBehavior = elem.style.scrollBehavior;
|
||||
elem.style.scrollBehavior = 'auto';
|
||||
}
|
||||
|
||||
var step = function (time) {
|
||||
|
||||
var now = Date.now();
|
||||
var scrollX = 0;
|
||||
var scrollY = 0;
|
||||
|
||||
for (var i = 0; i < que.length; i++) {
|
||||
|
||||
var item = que[i];
|
||||
var elapsed = now - item.start;
|
||||
var finished = (elapsed >= options.animationTime);
|
||||
|
||||
// scroll position: [0, 1]
|
||||
var position = (finished) ? 1 : elapsed / options.animationTime;
|
||||
|
||||
// easing [optional]
|
||||
if (options.pulseAlgorithm) {
|
||||
position = pulse(position);
|
||||
}
|
||||
|
||||
// only need the difference
|
||||
var x = (item.x * position - item.lastX) >> 0;
|
||||
var y = (item.y * position - item.lastY) >> 0;
|
||||
|
||||
// add this to the total scrolling
|
||||
scrollX += x;
|
||||
scrollY += y;
|
||||
|
||||
// update last values
|
||||
item.lastX += x;
|
||||
item.lastY += y;
|
||||
|
||||
// delete and step back if it's over
|
||||
if (finished) {
|
||||
que.splice(i, 1); i--;
|
||||
}
|
||||
}
|
||||
|
||||
// scroll left and top
|
||||
if (isWindowScroll) {
|
||||
window.scrollBy(scrollX, scrollY);
|
||||
}
|
||||
else {
|
||||
if (scrollX) elem.scrollLeft += scrollX;
|
||||
if (scrollY) elem.scrollTop += scrollY;
|
||||
}
|
||||
|
||||
// clean up if there's nothing left to do
|
||||
if (!left && !top) {
|
||||
que = [];
|
||||
}
|
||||
|
||||
if (que.length) {
|
||||
requestFrame(step, elem, (1000 / options.frameRate + 1));
|
||||
} else {
|
||||
pending = false;
|
||||
// restore default behavior at the end of scrolling sesh
|
||||
if (elem.$scrollBehavior != null) {
|
||||
elem.style.scrollBehavior = elem.$scrollBehavior;
|
||||
elem.$scrollBehavior = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// start a new queue of actions
|
||||
requestFrame(step, elem, 0);
|
||||
pending = true;
|
||||
}
|
||||
|
||||
|
||||
/***********************************************
|
||||
* EVENTS
|
||||
***********************************************/
|
||||
|
||||
/**
|
||||
* Mouse wheel handler.
|
||||
* @param {Object} event
|
||||
*/
|
||||
function wheel(event) {
|
||||
|
||||
if (!initDone) {
|
||||
init();
|
||||
}
|
||||
|
||||
var target = event.target;
|
||||
|
||||
// leave early if default action is prevented
|
||||
// or it's a zooming event with CTRL
|
||||
if (event.defaultPrevented || event.ctrlKey) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// leave embedded content alone (flash & pdf)
|
||||
if (isNodeName(activeElement, 'embed') ||
|
||||
(isNodeName(target, 'embed') && /\.pdf/i.test(target.src)) ||
|
||||
isNodeName(activeElement, 'object') ||
|
||||
target.shadowRoot) {
|
||||
return true;
|
||||
}
|
||||
|
||||
var deltaX = -event.wheelDeltaX || event.deltaX || 0;
|
||||
var deltaY = -event.wheelDeltaY || event.deltaY || 0;
|
||||
|
||||
if (isMac) {
|
||||
if (event.wheelDeltaX && isDivisible(event.wheelDeltaX, 120)) {
|
||||
deltaX = -120 * (event.wheelDeltaX / Math.abs(event.wheelDeltaX));
|
||||
}
|
||||
if (event.wheelDeltaY && isDivisible(event.wheelDeltaY, 120)) {
|
||||
deltaY = -120 * (event.wheelDeltaY / Math.abs(event.wheelDeltaY));
|
||||
}
|
||||
}
|
||||
|
||||
// use wheelDelta if deltaX/Y is not available
|
||||
if (!deltaX && !deltaY) {
|
||||
deltaY = -event.wheelDelta || 0;
|
||||
}
|
||||
|
||||
// line based scrolling (Firefox mostly)
|
||||
if (event.deltaMode === 1) {
|
||||
deltaX *= 40;
|
||||
deltaY *= 40;
|
||||
}
|
||||
|
||||
var overflowing = overflowingAncestor(target);
|
||||
|
||||
// nothing to do if there's no element that's scrollable
|
||||
if (!overflowing) {
|
||||
// except Chrome iframes seem to eat wheel events, which we need to
|
||||
// propagate up, if the iframe has nothing overflowing to scroll
|
||||
if (isFrame && isChrome) {
|
||||
// change target to iframe element itself for the parent frame
|
||||
Object.defineProperty(event, "target", {value: window.frameElement});
|
||||
return parent.wheel(event);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// check if it's a touchpad scroll that should be ignored
|
||||
if (isTouchpad(deltaY)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// scale by step size
|
||||
// delta is 120 most of the time
|
||||
// synaptics seems to send 1 sometimes
|
||||
if (Math.abs(deltaX) > 1.2) {
|
||||
deltaX *= options.stepSize / 120;
|
||||
}
|
||||
if (Math.abs(deltaY) > 1.2) {
|
||||
deltaY *= options.stepSize / 120;
|
||||
}
|
||||
|
||||
scrollArray(overflowing, deltaX, deltaY);
|
||||
event.preventDefault();
|
||||
scheduleClearCache();
|
||||
}
|
||||
|
||||
/**
|
||||
* Keydown event handler.
|
||||
* @param {Object} event
|
||||
*/
|
||||
function keydown(event) {
|
||||
|
||||
var target = event.target;
|
||||
var modifier = event.ctrlKey || event.altKey || event.metaKey ||
|
||||
(event.shiftKey && event.keyCode !== key.spacebar);
|
||||
|
||||
// our own tracked active element could've been removed from the DOM
|
||||
if (!document.body.contains(activeElement)) {
|
||||
activeElement = document.activeElement;
|
||||
}
|
||||
|
||||
// do nothing if user is editing text
|
||||
// or using a modifier key (except shift)
|
||||
// or in a dropdown
|
||||
// or inside interactive elements
|
||||
var inputNodeNames = /^(textarea|select|embed|object)$/i;
|
||||
var buttonTypes = /^(button|submit|radio|checkbox|file|color|image)$/i;
|
||||
if ( event.defaultPrevented ||
|
||||
inputNodeNames.test(target.nodeName) ||
|
||||
isNodeName(target, 'input') && !buttonTypes.test(target.type) ||
|
||||
isNodeName(activeElement, 'video') ||
|
||||
isInsideYoutubeVideo(event) ||
|
||||
target.isContentEditable ||
|
||||
modifier ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// [spacebar] should trigger button press, leave it alone
|
||||
if ((isNodeName(target, 'button') ||
|
||||
isNodeName(target, 'input') && buttonTypes.test(target.type)) &&
|
||||
event.keyCode === key.spacebar) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// [arrwow keys] on radio buttons should be left alone
|
||||
if (isNodeName(target, 'input') && target.type == 'radio' &&
|
||||
arrowKeys[event.keyCode]) {
|
||||
return true;
|
||||
}
|
||||
|
||||
var shift, x = 0, y = 0;
|
||||
var overflowing = overflowingAncestor(activeElement);
|
||||
|
||||
if (!overflowing) {
|
||||
// Chrome iframes seem to eat key events, which we need to
|
||||
// propagate up, if the iframe has nothing overflowing to scroll
|
||||
return (isFrame && isChrome) ? parent.keydown(event) : true;
|
||||
}
|
||||
|
||||
var clientHeight = overflowing.clientHeight;
|
||||
|
||||
if (overflowing == document.body) {
|
||||
clientHeight = window.innerHeight;
|
||||
}
|
||||
|
||||
switch (event.keyCode) {
|
||||
case key.up:
|
||||
y = -options.arrowScroll;
|
||||
break;
|
||||
case key.down:
|
||||
y = options.arrowScroll;
|
||||
break;
|
||||
case key.spacebar: // (+ shift)
|
||||
shift = event.shiftKey ? 1 : -1;
|
||||
y = -shift * clientHeight * 0.9;
|
||||
break;
|
||||
case key.pageup:
|
||||
y = -clientHeight * 0.9;
|
||||
break;
|
||||
case key.pagedown:
|
||||
y = clientHeight * 0.9;
|
||||
break;
|
||||
case key.home:
|
||||
if (overflowing == document.body && document.scrollingElement)
|
||||
overflowing = document.scrollingElement;
|
||||
y = -overflowing.scrollTop;
|
||||
break;
|
||||
case key.end:
|
||||
var scroll = overflowing.scrollHeight - overflowing.scrollTop;
|
||||
var scrollRemaining = scroll - clientHeight;
|
||||
y = (scrollRemaining > 0) ? scrollRemaining + 10 : 0;
|
||||
break;
|
||||
case key.left:
|
||||
x = -options.arrowScroll;
|
||||
break;
|
||||
case key.right:
|
||||
x = options.arrowScroll;
|
||||
break;
|
||||
default:
|
||||
return true; // a key we don't care about
|
||||
}
|
||||
|
||||
scrollArray(overflowing, x, y);
|
||||
event.preventDefault();
|
||||
scheduleClearCache();
|
||||
}
|
||||
|
||||
/**
|
||||
* Mousedown event only for updating activeElement
|
||||
*/
|
||||
function mousedown(event) {
|
||||
activeElement = event.target;
|
||||
}
|
||||
|
||||
|
||||
/***********************************************
|
||||
* OVERFLOW
|
||||
***********************************************/
|
||||
|
||||
var uniqueID = (function () {
|
||||
var i = 0;
|
||||
return function (el) {
|
||||
return el.uniqueID || (el.uniqueID = i++);
|
||||
};
|
||||
})();
|
||||
|
||||
var cacheX = {}; // cleared out after a scrolling session
|
||||
var cacheY = {}; // cleared out after a scrolling session
|
||||
var clearCacheTimer;
|
||||
var smoothBehaviorForElement = {};
|
||||
|
||||
//setInterval(function () { cache = {}; }, 10 * 1000);
|
||||
|
||||
function scheduleClearCache() {
|
||||
clearTimeout(clearCacheTimer);
|
||||
clearCacheTimer = setInterval(function () {
|
||||
cacheX = cacheY = smoothBehaviorForElement = {};
|
||||
}, 1*1000);
|
||||
}
|
||||
|
||||
function setCache(elems, overflowing, x) {
|
||||
var cache = x ? cacheX : cacheY;
|
||||
for (var i = elems.length; i--;)
|
||||
cache[uniqueID(elems[i])] = overflowing;
|
||||
return overflowing;
|
||||
}
|
||||
|
||||
function getCache(el, x) {
|
||||
return (x ? cacheX : cacheY)[uniqueID(el)];
|
||||
}
|
||||
|
||||
// (body) (root)
|
||||
// | hidden | visible | scroll | auto |
|
||||
// hidden | no | no | YES | YES |
|
||||
// visible | no | YES | YES | YES |
|
||||
// scroll | no | YES | YES | YES |
|
||||
// auto | no | YES | YES | YES |
|
||||
|
||||
function overflowingAncestor(el) {
|
||||
var elems = [];
|
||||
var body = document.body;
|
||||
var rootScrollHeight = root.scrollHeight;
|
||||
do {
|
||||
var cached = getCache(el, false);
|
||||
if (cached) {
|
||||
return setCache(elems, cached);
|
||||
}
|
||||
elems.push(el);
|
||||
if (rootScrollHeight === el.scrollHeight) {
|
||||
var topOverflowsNotHidden = overflowNotHidden(root) && overflowNotHidden(body);
|
||||
var isOverflowCSS = topOverflowsNotHidden || overflowAutoOrScroll(root);
|
||||
if (isFrame && isContentOverflowing(root) ||
|
||||
!isFrame && isOverflowCSS) {
|
||||
return setCache(elems, getScrollRoot());
|
||||
}
|
||||
} else if (isContentOverflowing(el) && overflowAutoOrScroll(el)) {
|
||||
return setCache(elems, el);
|
||||
}
|
||||
} while ((el = el.parentElement));
|
||||
}
|
||||
|
||||
function isContentOverflowing(el) {
|
||||
return (el.clientHeight + 10 < el.scrollHeight);
|
||||
}
|
||||
|
||||
// typically for <body> and <html>
|
||||
function overflowNotHidden(el) {
|
||||
var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
|
||||
return (overflow !== 'hidden');
|
||||
}
|
||||
|
||||
// for all other elements
|
||||
function overflowAutoOrScroll(el) {
|
||||
var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
|
||||
return (overflow === 'scroll' || overflow === 'auto');
|
||||
}
|
||||
|
||||
// for all other elements
|
||||
function isScrollBehaviorSmooth(el) {
|
||||
var id = uniqueID(el);
|
||||
if (smoothBehaviorForElement[id] == null) {
|
||||
var scrollBehavior = getComputedStyle(el, '')['scroll-behavior'];
|
||||
smoothBehaviorForElement[id] = ('smooth' == scrollBehavior);
|
||||
}
|
||||
return smoothBehaviorForElement[id];
|
||||
}
|
||||
|
||||
|
||||
/***********************************************
|
||||
* HELPERS
|
||||
***********************************************/
|
||||
|
||||
function addEvent(type, fn, arg) {
|
||||
window.addEventListener(type, fn, arg || false);
|
||||
}
|
||||
|
||||
function removeEvent(type, fn, arg) {
|
||||
window.removeEventListener(type, fn, arg || false);
|
||||
}
|
||||
|
||||
function isNodeName(el, tag) {
|
||||
return el && (el.nodeName||'').toLowerCase() === tag.toLowerCase();
|
||||
}
|
||||
|
||||
function directionCheck(x, y) {
|
||||
x = (x > 0) ? 1 : -1;
|
||||
y = (y > 0) ? 1 : -1;
|
||||
if (direction.x !== x || direction.y !== y) {
|
||||
direction.x = x;
|
||||
direction.y = y;
|
||||
que = [];
|
||||
lastScroll = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.localStorage && localStorage.SS_deltaBuffer) {
|
||||
try { // #46 Safari throws in private browsing for localStorage
|
||||
deltaBuffer = localStorage.SS_deltaBuffer.split(',');
|
||||
} catch (e) { }
|
||||
}
|
||||
|
||||
function isTouchpad(deltaY) {
|
||||
if (!deltaY) return;
|
||||
if (!deltaBuffer.length) {
|
||||
deltaBuffer = [deltaY, deltaY, deltaY];
|
||||
}
|
||||
deltaY = Math.abs(deltaY);
|
||||
deltaBuffer.push(deltaY);
|
||||
deltaBuffer.shift();
|
||||
clearTimeout(deltaBufferTimer);
|
||||
deltaBufferTimer = setTimeout(function () {
|
||||
try { // #46 Safari throws in private browsing for localStorage
|
||||
localStorage.SS_deltaBuffer = deltaBuffer.join(',');
|
||||
} catch (e) { }
|
||||
}, 1000);
|
||||
var dpiScaledWheelDelta = deltaY > 120 && allDeltasDivisableBy(deltaY); // win64
|
||||
var tp = !allDeltasDivisableBy(120) && !allDeltasDivisableBy(100) && !dpiScaledWheelDelta;
|
||||
if (deltaY < 50) return true;
|
||||
return tp;
|
||||
}
|
||||
|
||||
function isDivisible(n, divisor) {
|
||||
return (Math.floor(n / divisor) == n / divisor);
|
||||
}
|
||||
|
||||
function allDeltasDivisableBy(divisor) {
|
||||
return (isDivisible(deltaBuffer[0], divisor) &&
|
||||
isDivisible(deltaBuffer[1], divisor) &&
|
||||
isDivisible(deltaBuffer[2], divisor));
|
||||
}
|
||||
|
||||
function isInsideYoutubeVideo(event) {
|
||||
var elem = event.target;
|
||||
var isControl = false;
|
||||
if (document.URL.indexOf ('www.youtube.com/watch') != -1) {
|
||||
do {
|
||||
isControl = (elem.classList &&
|
||||
elem.classList.contains('html5-video-controls'));
|
||||
if (isControl) break;
|
||||
} while ((elem = elem.parentNode));
|
||||
}
|
||||
return isControl;
|
||||
}
|
||||
|
||||
var requestFrame = (function () {
|
||||
return (window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
function (callback, element, delay) {
|
||||
window.setTimeout(callback, delay || (1000/60));
|
||||
});
|
||||
})();
|
||||
|
||||
var MutationObserver = (window.MutationObserver ||
|
||||
window.WebKitMutationObserver ||
|
||||
window.MozMutationObserver);
|
||||
|
||||
var getScrollRoot = (function() {
|
||||
var SCROLL_ROOT = document.scrollingElement;
|
||||
return function() {
|
||||
if (!SCROLL_ROOT) {
|
||||
var dummy = document.createElement('div');
|
||||
dummy.style.cssText = 'height:10000px;width:1px;';
|
||||
document.body.appendChild(dummy);
|
||||
var bodyScrollTop = document.body.scrollTop;
|
||||
var docElScrollTop = document.documentElement.scrollTop;
|
||||
window.scrollBy(0, 3);
|
||||
if (document.body.scrollTop != bodyScrollTop)
|
||||
(SCROLL_ROOT = document.body);
|
||||
else
|
||||
(SCROLL_ROOT = document.documentElement);
|
||||
window.scrollBy(0, -3);
|
||||
document.body.removeChild(dummy);
|
||||
}
|
||||
return SCROLL_ROOT;
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
/***********************************************
|
||||
* PULSE (by Michael Herf)
|
||||
***********************************************/
|
||||
|
||||
/**
|
||||
* Viscous fluid with a pulse for part and decay for the rest.
|
||||
* - Applies a fixed force over an interval (a damped acceleration), and
|
||||
* - Lets the exponential bleed away the velocity over a longer interval
|
||||
* - Michael Herf, http://stereopsis.com/stopping/
|
||||
*/
|
||||
function pulse_(x) {
|
||||
var val, start, expx;
|
||||
// test
|
||||
x = x * options.pulseScale;
|
||||
if (x < 1) { // acceleartion
|
||||
val = x - (1 - Math.exp(-x));
|
||||
} else { // tail
|
||||
// the previous animation ended here:
|
||||
start = Math.exp(-1);
|
||||
// simple viscous drag
|
||||
x -= 1;
|
||||
expx = 1 - Math.exp(-x);
|
||||
val = start + (expx * (1 - start));
|
||||
}
|
||||
return val * options.pulseNormalize;
|
||||
}
|
||||
|
||||
function pulse(x) {
|
||||
if (x >= 1) return 1;
|
||||
if (x <= 0) return 0;
|
||||
|
||||
if (options.pulseNormalize == 1) {
|
||||
options.pulseNormalize /= pulse_(1);
|
||||
}
|
||||
return pulse_(x);
|
||||
}
|
||||
|
||||
|
||||
/***********************************************
|
||||
* FIRST RUN
|
||||
***********************************************/
|
||||
|
||||
var userAgent = window.navigator.userAgent;
|
||||
var isEdge = /Edge/.test(userAgent); // thank you MS
|
||||
var isChrome = /chrome/i.test(userAgent) && !isEdge;
|
||||
var isSafari = /safari/i.test(userAgent) && !isEdge;
|
||||
var isMobile = /mobile/i.test(userAgent);
|
||||
var isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);
|
||||
var isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));
|
||||
var isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;
|
||||
|
||||
var supportsPassive = false;
|
||||
try {
|
||||
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
|
||||
get: function () {
|
||||
supportsPassive = true;
|
||||
}
|
||||
}));
|
||||
} catch(e) {}
|
||||
|
||||
var wheelOpt = supportsPassive ? { passive: false } : false;
|
||||
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
|
||||
|
||||
if (wheelEvent && isEnabledForBrowser) {
|
||||
addEvent(wheelEvent, wheel, wheelOpt);
|
||||
addEvent('mousedown', mousedown);
|
||||
addEvent('load', init);
|
||||
}
|
||||
|
||||
|
||||
/***********************************************
|
||||
* PUBLIC INTERFACE
|
||||
***********************************************/
|
||||
|
||||
function SmoothScroll(optionsToSet) {
|
||||
for (var key in optionsToSet)
|
||||
if (defaultOptions.hasOwnProperty(key))
|
||||
options[key] = optionsToSet[key];
|
||||
}
|
||||
SmoothScroll.destroy = cleanup;
|
||||
|
||||
if (window.SmoothScrollOptions) // async API
|
||||
SmoothScroll(window.SmoothScrollOptions);
|
||||
|
||||
if (typeof define === 'function' && define.amd)
|
||||
define(function() {
|
||||
return SmoothScroll;
|
||||
});
|
||||
else if ('object' == typeof exports)
|
||||
module.exports = SmoothScroll;
|
||||
else
|
||||
window.SmoothScroll = SmoothScroll;
|
||||
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,36 @@
|
|||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'DM Sans';
|
||||
font-style: italic;
|
||||
font-weight: 100 1000;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4ET-DJF4e8BH9.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'DM Sans';
|
||||
font-style: italic;
|
||||
font-weight: 100 1000;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4Hz-DJF4e8A.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'DM Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 1000;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'DM Sans';
|
||||
font-style: normal;
|
||||
font-weight: 100 1000;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,374 @@
|
|||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var $window = $(window);
|
||||
var $body = $('body');
|
||||
|
||||
/* Preloader Effect */
|
||||
$window.on('load', function(){
|
||||
$(".preloader").fadeOut(600);
|
||||
});
|
||||
|
||||
/* Sticky Header */
|
||||
if($('.active-sticky-header').length){
|
||||
$window.on('resize', function(){
|
||||
setHeaderHeight();
|
||||
});
|
||||
|
||||
function setHeaderHeight(){
|
||||
$("header.main-header").css("height", $('header .header-sticky').outerHeight());
|
||||
}
|
||||
|
||||
$window.on("scroll", function() {
|
||||
var fromTop = $(window).scrollTop();
|
||||
setHeaderHeight();
|
||||
var headerHeight = $('header .header-sticky').outerHeight()
|
||||
$("header .header-sticky").toggleClass("hide", (fromTop > headerHeight + 100));
|
||||
$("header .header-sticky").toggleClass("active", (fromTop > 600));
|
||||
});
|
||||
}
|
||||
|
||||
/* Slick Menu JS */
|
||||
$('#menu').slicknav({
|
||||
label : '',
|
||||
prependTo : '.responsive-menu'
|
||||
});
|
||||
|
||||
if($("a[href='#top']").length){
|
||||
$(document).on("click", "a[href='#top']", function() {
|
||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
/* Hero Slider Layout JS */
|
||||
const hero_slider_layout = new Swiper('.hero-slider-layout .swiper', {
|
||||
slidesPerView : 1,
|
||||
speed: 1000,
|
||||
spaceBetween: 0,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.hero-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
/* testimonial Slider JS */
|
||||
if ($('.testimonial-slider').length) {
|
||||
const testimonial_slider = new Swiper('.testimonial-slider .swiper', {
|
||||
slidesPerView : 1,
|
||||
speed: 1000,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.testimonial-btn-next',
|
||||
prevEl: '.testimonial-btn-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
768:{
|
||||
slidesPerView: 2,
|
||||
},
|
||||
991:{
|
||||
slidesPerView: 3,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Skill Bar */
|
||||
if ($('.skills-progress-bar').length) {
|
||||
$('.skills-progress-bar').waypoint(function() {
|
||||
$('.skillbar').each(function() {
|
||||
$(this).find('.count-bar').animate({
|
||||
width:$(this).attr('data-percent')
|
||||
},2000);
|
||||
});
|
||||
},{
|
||||
offset: '50%'
|
||||
});
|
||||
}
|
||||
|
||||
/* Youtube Background Video JS */
|
||||
if ($('#herovideo').length) {
|
||||
var myPlayer = $("#herovideo").YTPlayer();
|
||||
}
|
||||
|
||||
/* Init Counter */
|
||||
if ($('.counter').length) {
|
||||
$('.counter').counterUp({ delay: 6, time: 3000 });
|
||||
}
|
||||
|
||||
/* Image Reveal Animation */
|
||||
if ($('.reveal').length) {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let revealContainers = document.querySelectorAll(".reveal");
|
||||
revealContainers.forEach((container) => {
|
||||
let image = container.querySelector("img");
|
||||
let tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: container,
|
||||
toggleActions: "play none none none"
|
||||
}
|
||||
});
|
||||
tl.set(container, {
|
||||
autoAlpha: 1
|
||||
});
|
||||
tl.from(container, 1, {
|
||||
xPercent: -100,
|
||||
ease: Power2.out
|
||||
});
|
||||
tl.from(image, 1, {
|
||||
xPercent: 100,
|
||||
scale: 1,
|
||||
delay: -1,
|
||||
ease: Power2.out
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Text Effect Animation */
|
||||
if ($('.text-anime-style-1').length) {
|
||||
let staggerAmount = 0.05,
|
||||
translateXValue = 0,
|
||||
delayValue = 0.5,
|
||||
animatedTextElements = document.querySelectorAll('.text-anime-style-1');
|
||||
|
||||
animatedTextElements.forEach((element) => {
|
||||
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
||||
gsap.from(animationSplitText.words, {
|
||||
duration: 1,
|
||||
delay: delayValue,
|
||||
x: 20,
|
||||
autoAlpha: 0,
|
||||
stagger: staggerAmount,
|
||||
scrollTrigger: { trigger: element, start: "top 85%" },
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.text-anime-style-2').length) {
|
||||
let staggerAmount = 0.03,
|
||||
translateXValue = 20,
|
||||
delayValue = 0.1,
|
||||
easeType = "power2.out",
|
||||
animatedTextElements = document.querySelectorAll('.text-anime-style-2');
|
||||
|
||||
animatedTextElements.forEach((element) => {
|
||||
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
||||
gsap.from(animationSplitText.chars, {
|
||||
duration: 1,
|
||||
delay: delayValue,
|
||||
x: translateXValue,
|
||||
autoAlpha: 0,
|
||||
stagger: staggerAmount,
|
||||
ease: easeType,
|
||||
scrollTrigger: { trigger: element, start: "top 85%"},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.text-anime-style-3').length) {
|
||||
let animatedTextElements = document.querySelectorAll('.text-anime-style-3');
|
||||
|
||||
animatedTextElements.forEach((element) => {
|
||||
//Reset if needed
|
||||
if (element.animation) {
|
||||
element.animation.progress(1).kill();
|
||||
element.split.revert();
|
||||
}
|
||||
|
||||
element.split = new SplitText(element, {
|
||||
type: "lines,words,chars",
|
||||
linesClass: "split-line",
|
||||
});
|
||||
gsap.set(element, { perspective: 400 });
|
||||
|
||||
gsap.set(element.split.chars, {
|
||||
opacity: 0,
|
||||
x: "50",
|
||||
});
|
||||
|
||||
element.animation = gsap.to(element.split.chars, {
|
||||
scrollTrigger: { trigger: element, start: "top 90%" },
|
||||
x: "0",
|
||||
y: "0",
|
||||
rotateX: "0",
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: Back.easeOut,
|
||||
stagger: 0.02,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Parallaxie js */
|
||||
/* var $parallaxie = $('.parallaxie');
|
||||
if($parallaxie.length && ($window.width() > 991))
|
||||
{
|
||||
if ($window.width() > 768) {
|
||||
$parallaxie.parallaxie({
|
||||
speed: 0.55,
|
||||
offset: 0,
|
||||
});
|
||||
}
|
||||
} */
|
||||
|
||||
/* Zoom Gallery screenshot */
|
||||
$('.gallery-items').magnificPopup({
|
||||
delegate: 'a',
|
||||
type: 'image',
|
||||
closeOnContentClick: false,
|
||||
closeBtnInside: false,
|
||||
mainClass: 'mfp-with-zoom',
|
||||
image: {
|
||||
verticalFit: true,
|
||||
},
|
||||
gallery: {
|
||||
enabled: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
duration: 300, // don't foget to change the duration also in CSS
|
||||
opener: function(element) {
|
||||
return element.find('img');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* Contact form validation */
|
||||
var $contactform = $("#contactForm");
|
||||
$contactform.validator({focus: false}).on("submit", function (event) {
|
||||
if (!event.isDefaultPrevented()) {
|
||||
event.preventDefault();
|
||||
submitForm();
|
||||
}
|
||||
});
|
||||
|
||||
function submitForm(){
|
||||
/* Ajax call to submit form */
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "form-process.php",
|
||||
data: $contactform.serialize(),
|
||||
success : function(text){
|
||||
if (text === "success"){
|
||||
formSuccess();
|
||||
} else {
|
||||
submitMSG(false,text);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formSuccess(){
|
||||
$contactform[0].reset();
|
||||
submitMSG(true, "Message Sent Successfully!")
|
||||
}
|
||||
|
||||
function submitMSG(valid, msg){
|
||||
if(valid){
|
||||
var msgClasses = "h4 text-success";
|
||||
} else {
|
||||
var msgClasses = "h4 text-danger";
|
||||
}
|
||||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||||
}
|
||||
/* Contact form validation end */
|
||||
|
||||
/* Appointment form validation */
|
||||
var $appointmentForm = $("#appointmentForm");
|
||||
$appointmentForm.validator({focus: false}).on("submit", function (event) {
|
||||
if (!event.isDefaultPrevented()) {
|
||||
event.preventDefault();
|
||||
submitappointmentForm();
|
||||
}
|
||||
});
|
||||
|
||||
function submitappointmentForm(){
|
||||
/* Ajax call to submit form */
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "form-appointment.php",
|
||||
data: $appointmentForm.serialize(),
|
||||
success : function(text){
|
||||
if (text === "success"){
|
||||
appointmentformSuccess();
|
||||
} else {
|
||||
appointmentsubmitMSG(false,text);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function appointmentformSuccess(){
|
||||
$appointmentForm[0].reset();
|
||||
appointmentsubmitMSG(true, "Message Sent Successfully!")
|
||||
}
|
||||
|
||||
function appointmentsubmitMSG(valid, msg){
|
||||
if(valid){
|
||||
var msgClasses = "h3 text-success";
|
||||
} else {
|
||||
var msgClasses = "h3 text-danger";
|
||||
}
|
||||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||||
}
|
||||
/* Appointment form validation end */
|
||||
|
||||
/* Case Study (filtering) Start */
|
||||
$window.on( "load", function(){
|
||||
if( $(".case-study-item-boxes").length ) {
|
||||
|
||||
/* Init Isotope */
|
||||
var $menuitem = $(".case-study-item-boxes").isotope({
|
||||
itemSelector: ".case-study-item-box",
|
||||
layoutMode: "masonry",
|
||||
masonry: {
|
||||
// use outer width of grid-sizer for columnWidth
|
||||
columnWidth: 1,
|
||||
}
|
||||
});
|
||||
|
||||
/* Filter items on click */
|
||||
var $menudisesnav=$(".case-study-nav li a");
|
||||
$menudisesnav.on('click', function (e) {
|
||||
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$menuitem.isotope({
|
||||
filter: filterValue
|
||||
});
|
||||
|
||||
$menudisesnav.removeClass("active-btn");
|
||||
$(this).addClass("active-btn");
|
||||
e.preventDefault();
|
||||
});
|
||||
$menuitem.isotope({ filter: "*" });
|
||||
}
|
||||
});
|
||||
/* Case Study (filtering) End */
|
||||
|
||||
/* Animated Wow Js */
|
||||
new WOW().init();
|
||||
|
||||
/* Popup Video */
|
||||
if ($('.popup-video').length) {
|
||||
$('.popup-video').magnificPopup({
|
||||
type: 'iframe',
|
||||
mainClass: 'mfp-fade',
|
||||
removalDelay: 160,
|
||||
preloader: false,
|
||||
fixedContentPos: true
|
||||
});
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.9999 27C14.9999 27 24.3913 18.6522 24.3913 12.3913C24.3913 7.20463 20.1866 3 14.9999 3C9.81327 3 5.60864 7.20463 5.60864 12.3913C5.60864 18.6522 14.9999 27 14.9999 27Z" stroke="white" stroke-width="2"/>
|
||||
<path d="M18.0003 12.0002C18.0003 13.657 16.6572 15.0002 15.0003 15.0002C13.3435 15.0002 12.0003 13.657 12.0003 12.0002C12.0003 10.3433 13.3435 9.00019 15.0003 9.00019C16.6572 9.00019 18.0003 10.3433 18.0003 12.0002Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.85938 8.4375L14.1995 14.4253C14.6811 14.7711 15.3189 14.7711 15.8005 14.4253L24.1406 8.4375M6.5625 23.75H23.4375C24.9908 23.75 26.25 22.4442 26.25 20.8333V9.16667C26.25 7.55584 24.9908 6.25 23.4375 6.25H6.5625C5.0092 6.25 3.75 7.55584 3.75 9.16667V20.8333C3.75 22.4442 5.0092 23.75 6.5625 23.75Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.8293 23.4637C25.8293 23.4637 24.381 24.8862 24.026 25.3033C23.4478 25.9203 22.7666 26.2116 21.8736 26.2116C21.7877 26.2116 21.6961 26.2116 21.6102 26.2059C19.91 26.0974 18.33 25.4347 17.145 24.8691C13.9049 23.3037 11.0598 21.0814 8.69549 18.2649C6.74339 15.9169 5.43818 13.746 4.57376 11.4151C4.04137 9.99263 3.84673 8.88432 3.9326 7.83886C3.98985 7.17044 4.24745 6.61629 4.7226 6.14212L6.67469 4.19401C6.9552 3.93121 7.25288 3.78839 7.54484 3.78839C7.90549 3.78839 8.19744 4.00548 8.38063 4.1883C8.38636 4.19401 8.39208 4.19972 8.39781 4.20544C8.74701 4.53107 9.07904 4.86813 9.42824 5.22805C9.6057 5.41086 9.78889 5.59368 9.97208 5.7822L11.5349 7.34183C12.1417 7.9474 12.1417 8.50727 11.5349 9.11284C11.3689 9.27851 11.2086 9.44419 11.0426 9.60415C10.5617 10.0955 10.9395 9.71848 10.4414 10.1641C10.43 10.1755 10.4185 10.1812 10.4128 10.1927C9.92048 10.684 10.0121 11.1639 10.1151 11.4895C10.1208 11.5066 10.1266 11.5238 10.1323 11.5409C10.5387 12.5235 11.1112 13.449 11.9813 14.5516L11.9871 14.5573C13.5671 16.4997 15.2329 18.0136 17.0705 19.1734C17.3052 19.3219 17.5457 19.4419 17.7747 19.5561C17.9807 19.659 18.1754 19.7561 18.3414 19.8589C18.3643 19.8703 18.3872 19.8875 18.4101 19.8989C18.6047 19.996 18.7879 20.0417 18.9768 20.0417C19.452 20.0417 19.7497 19.7447 19.847 19.6475L20.9691 18.5277C21.1637 18.3335 21.4728 18.0993 21.8335 18.0993C22.1884 18.0993 22.4804 18.3221 22.6578 18.5163C22.6636 18.522 22.6636 18.522 22.6693 18.5277L25.8236 21.6756C26.4132 22.2583 25.8293 23.4637 25.8293 23.4637Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,8 @@
|
|||
/*!
|
||||
* jquery.counterup.js 1.0
|
||||
*
|
||||
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
|
||||
* Released under the GPL v2 License
|
||||
*
|
||||
* Date: Nov 26, 2013
|
||||
*/!function(t){"use strict";t.fn.counterUp=function(e){var n=t.extend({time:400,delay:10},e);return this.each(function(){var e=t(this),u=n;e.waypoint({handler:function(){!function(){var t=[],n=u.time/u.delay,a=e.text(),r=/[0-9]+,[0-9]+/.test(a);a=a.replace(/,/g,"");/^[0-9]+$/.test(a);for(var o=/^[0-9]+\.[0-9]+$/.test(a),c=o?(a.split(".")[1]||[]).length:0,s=n;s>=1;s--){var i=parseInt(a/n*s);if(o&&(i=parseFloat(a/n*s).toFixed(c)),r)for(;/(\d+)(\d{3})/.test(i.toString());)i=i.toString().replace(/(\d+)(\d{3})/,"$1,$2");t.unshift(i)}e.data("counterup-nums",t),e.text("0");e.data("counterup-func",function(){e.text(e.data("counterup-nums").shift()),e.data("counterup-nums").length?setTimeout(e.data("counterup-func"),u.delay):(e.data("counterup-nums"),e.data("counterup-nums",null),e.data("counterup-func",null))}),setTimeout(e.data("counterup-func"),u.delay)}(),this.destroy()},offset:"100%"})})}}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,590 @@
|
|||
/*!
|
||||
* SlickNav Responsive Mobile Menu v1.0.10
|
||||
* (c) 2016 Josh Cope
|
||||
* licensed under MIT
|
||||
*/
|
||||
;(function ($, document, window) {
|
||||
var
|
||||
// default settings object.
|
||||
defaults = {
|
||||
label: 'MENU',
|
||||
duplicate: true,
|
||||
duration: 200,
|
||||
easingOpen: 'swing',
|
||||
easingClose: 'swing',
|
||||
closedSymbol: '►',
|
||||
openedSymbol: '▼',
|
||||
prependTo: 'body',
|
||||
appendTo: '',
|
||||
parentTag: 'a',
|
||||
closeOnClick: false,
|
||||
allowParentLinks: false,
|
||||
nestedParentLinks: true,
|
||||
showChildren: false,
|
||||
removeIds: true,
|
||||
removeClasses: false,
|
||||
removeStyles: false,
|
||||
brand: '',
|
||||
animations: 'jquery',
|
||||
init: function () {},
|
||||
beforeOpen: function () {},
|
||||
beforeClose: function () {},
|
||||
afterOpen: function () {},
|
||||
afterClose: function () {}
|
||||
},
|
||||
mobileMenu = 'slicknav',
|
||||
prefix = 'slicknav';
|
||||
|
||||
Keyboard = {
|
||||
DOWN: 40,
|
||||
ENTER: 13,
|
||||
ESCAPE: 27,
|
||||
LEFT: 37,
|
||||
RIGHT: 39,
|
||||
SPACE: 32,
|
||||
TAB: 9,
|
||||
UP: 38,
|
||||
};
|
||||
|
||||
function Plugin(element, options) {
|
||||
this.element = element;
|
||||
|
||||
// jQuery has an extend method which merges the contents of two or
|
||||
// more objects, storing the result in the first object. The first object
|
||||
// is generally empty as we don't want to alter the default options for
|
||||
// future instances of the plugin
|
||||
this.settings = $.extend({}, defaults, options);
|
||||
|
||||
// Don't remove IDs by default if duplicate is false
|
||||
if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) {
|
||||
this.settings.removeIds = false;
|
||||
}
|
||||
|
||||
this._defaults = defaults;
|
||||
this._name = mobileMenu;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
Plugin.prototype.init = function () {
|
||||
var $this = this,
|
||||
menu = $(this.element),
|
||||
settings = this.settings,
|
||||
iconClass,
|
||||
menuBar;
|
||||
|
||||
// clone menu if needed
|
||||
if (settings.duplicate) {
|
||||
$this.mobileNav = menu.clone();
|
||||
} else {
|
||||
$this.mobileNav = menu;
|
||||
}
|
||||
|
||||
// remove IDs if set
|
||||
if (settings.removeIds) {
|
||||
$this.mobileNav.removeAttr('id');
|
||||
$this.mobileNav.find('*').each(function (i, e) {
|
||||
$(e).removeAttr('id');
|
||||
});
|
||||
}
|
||||
|
||||
// remove classes if set
|
||||
if (settings.removeClasses) {
|
||||
$this.mobileNav.removeAttr('class');
|
||||
$this.mobileNav.find('*').each(function (i, e) {
|
||||
$(e).removeAttr('class');
|
||||
});
|
||||
}
|
||||
|
||||
// remove styles if set
|
||||
if (settings.removeStyles) {
|
||||
$this.mobileNav.removeAttr('style');
|
||||
$this.mobileNav.find('*').each(function (i, e) {
|
||||
$(e).removeAttr('style');
|
||||
});
|
||||
}
|
||||
|
||||
// styling class for the button
|
||||
iconClass = prefix + '_icon';
|
||||
|
||||
if (settings.label === '') {
|
||||
iconClass += ' ' + prefix + '_no-text';
|
||||
}
|
||||
|
||||
if (settings.parentTag === 'a') {
|
||||
settings.parentTag = 'a href="#"';
|
||||
}
|
||||
|
||||
// create menu bar
|
||||
$this.mobileNav.attr('class', prefix + '_nav');
|
||||
menuBar = $('<div class="' + prefix + '_menu"></div>');
|
||||
if (settings.brand !== '') {
|
||||
var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
|
||||
$(menuBar).append(brand);
|
||||
}
|
||||
$this.btn = $(
|
||||
['<' + settings.parentTag + ' aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">',
|
||||
'<span class="' + prefix + '_menutxt">' + settings.label + '</span>',
|
||||
'<span class="' + iconClass + '">',
|
||||
'<span class="' + prefix + '_icon-bar"></span>',
|
||||
'<span class="' + prefix + '_icon-bar"></span>',
|
||||
'<span class="' + prefix + '_icon-bar"></span>',
|
||||
'</span>',
|
||||
'</' + settings.parentTag + '>'
|
||||
].join('')
|
||||
);
|
||||
$('.navbar-toggle').append($this.btn);
|
||||
if(settings.appendTo !== '') {
|
||||
$(settings.appendTo).append(menuBar);
|
||||
} else {
|
||||
$(settings.prependTo).prepend(menuBar);
|
||||
}
|
||||
menuBar.append($this.mobileNav);
|
||||
|
||||
// iterate over structure adding additional structure
|
||||
var items = $this.mobileNav.find('li');
|
||||
$(items).each(function () {
|
||||
var item = $(this),
|
||||
data = {};
|
||||
data.children = item.children('ul').attr('role', 'menu');
|
||||
item.data('menu', data);
|
||||
|
||||
// if a list item has a nested menu
|
||||
if (data.children.length > 0) {
|
||||
|
||||
// select all text before the child menu
|
||||
// check for anchors
|
||||
|
||||
var a = item.contents(),
|
||||
containsAnchor = false,
|
||||
nodes = [];
|
||||
|
||||
$(a).each(function () {
|
||||
if (!$(this).is('ul')) {
|
||||
nodes.push(this);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
if($(this).is("a")) {
|
||||
containsAnchor = true;
|
||||
}
|
||||
});
|
||||
|
||||
var wrapElement = $(
|
||||
'<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>'
|
||||
);
|
||||
|
||||
// wrap item text with tag and add classes unless we are separating parent links
|
||||
if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
|
||||
var $wrap = $(nodes).wrapAll(wrapElement).parent();
|
||||
$wrap.addClass(prefix+'_row');
|
||||
} else
|
||||
$(nodes).wrapAll('<span class="'+prefix+'_parent-link '+prefix+'_row"/>').parent();
|
||||
|
||||
if (!settings.showChildren) {
|
||||
item.addClass(prefix+'_collapsed');
|
||||
} else {
|
||||
item.addClass(prefix+'_open');
|
||||
}
|
||||
|
||||
item.addClass(prefix+'_parent');
|
||||
|
||||
// create parent arrow. wrap with link if parent links and separating
|
||||
var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');
|
||||
|
||||
if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
|
||||
arrowElement = arrowElement.wrap(wrapElement).parent();
|
||||
|
||||
//append arrow
|
||||
$(nodes).last().after(arrowElement);
|
||||
|
||||
|
||||
} else if ( item.children().length === 0) {
|
||||
item.addClass(prefix+'_txtnode');
|
||||
}
|
||||
|
||||
// accessibility for links
|
||||
item.children('a').attr('role', 'menuitem').on("click", function(event){
|
||||
//Ensure that it's not a parent
|
||||
if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
|
||||
//Emulate menu close if set
|
||||
$($this.btn).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
//also close on click if parent links are set
|
||||
if (settings.closeOnClick && settings.allowParentLinks) {
|
||||
|
||||
item.children('a').children('a').on("click", function(event){
|
||||
//Emulate menu close
|
||||
$($this.btn).trigger('click');
|
||||
});
|
||||
|
||||
item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').on("click", function(event){
|
||||
//Emulate menu close
|
||||
$($this.btn).trigger('click');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// structure is in place, now hide appropriate items
|
||||
$(items).each(function () {
|
||||
var data = $(this).data('menu');
|
||||
if (!settings.showChildren){
|
||||
$this._visibilityToggle(data.children, null, false, null, true);
|
||||
}
|
||||
});
|
||||
|
||||
// finally toggle entire menu
|
||||
$this._visibilityToggle($this.mobileNav, null, false, 'init', true);
|
||||
|
||||
// accessibility for menu button
|
||||
$this.mobileNav.attr('role','menu');
|
||||
|
||||
// outline prevention when using mouse
|
||||
$(document).on( "mousedown", function() {
|
||||
$this._outlines(false);
|
||||
});
|
||||
|
||||
$(document).on( "keyup", function() {
|
||||
$this._outlines(true);
|
||||
});
|
||||
|
||||
// menu button click
|
||||
$($this.btn).on("click", function(e){
|
||||
e.preventDefault();
|
||||
$this._menuToggle();
|
||||
});
|
||||
|
||||
// click on menu parent
|
||||
$this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
|
||||
e.preventDefault();
|
||||
$this._itemClick($(this));
|
||||
});
|
||||
|
||||
// check for keyboard events on menu button and menu parents
|
||||
$($this.btn).on("keydown", function(e){
|
||||
var ev = e || event;
|
||||
|
||||
switch(ev.keyCode) {
|
||||
case Keyboard.ENTER:
|
||||
case Keyboard.SPACE:
|
||||
case Keyboard.DOWN:
|
||||
e.preventDefault();
|
||||
if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){
|
||||
$this._menuToggle();
|
||||
}
|
||||
|
||||
$($this.btn).next().find('[role="menuitem"]').first().trigger( "focus" );
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
$this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
|
||||
var ev = e || event;
|
||||
|
||||
switch(ev.keyCode) {
|
||||
case Keyboard.ENTER:
|
||||
e.preventDefault();
|
||||
$this._itemClick($(e.target));
|
||||
break;
|
||||
case Keyboard.RIGHT:
|
||||
e.preventDefault();
|
||||
if ($(e.target).parent().hasClass(prefix+'_collapsed')) {
|
||||
$this._itemClick($(e.target));
|
||||
}
|
||||
$(e.target).next().find('[role="menuitem"]').first().trigger( "focus" );
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$this.mobileNav.on('keydown', '[role="menuitem"]', function(e) {
|
||||
var ev = e || event;
|
||||
|
||||
switch(ev.keyCode){
|
||||
case Keyboard.DOWN:
|
||||
e.preventDefault();
|
||||
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
|
||||
var idx = allItems.index( e.target );
|
||||
var nextIdx = idx + 1;
|
||||
if (allItems.length <= nextIdx) {
|
||||
nextIdx = 0;
|
||||
}
|
||||
var next = allItems.eq( nextIdx );
|
||||
next.trigger( "focus" );
|
||||
break;
|
||||
case Keyboard.UP:
|
||||
e.preventDefault();
|
||||
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
|
||||
var idx = allItems.index( e.target );
|
||||
var next = allItems.eq( idx - 1 );
|
||||
next.trigger( "focus" );
|
||||
break;
|
||||
case Keyboard.LEFT:
|
||||
e.preventDefault();
|
||||
if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) {
|
||||
var parent = $(e.target).parent().parent().prev();
|
||||
parent.trigger( "focus" );
|
||||
$this._itemClick(parent);
|
||||
} else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){
|
||||
$this._menuToggle();
|
||||
$($this.btn).trigger( "focus" );
|
||||
}
|
||||
break;
|
||||
case Keyboard.ESCAPE:
|
||||
e.preventDefault();
|
||||
$this._menuToggle();
|
||||
$($this.btn).trigger( "focus" );
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// allow links clickable within parent tags if set
|
||||
if (settings.allowParentLinks && settings.nestedParentLinks) {
|
||||
$('.'+prefix+'_item a').on("click", function(e){
|
||||
e.stopImmediatePropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//toggle menu
|
||||
Plugin.prototype._menuToggle = function (el) {
|
||||
var $this = this;
|
||||
var btn = $this.btn;
|
||||
var mobileNav = $this.mobileNav;
|
||||
|
||||
if (btn.hasClass(prefix+'_collapsed')) {
|
||||
btn.removeClass(prefix+'_collapsed');
|
||||
btn.addClass(prefix+'_open');
|
||||
} else {
|
||||
btn.removeClass(prefix+'_open');
|
||||
btn.addClass(prefix+'_collapsed');
|
||||
}
|
||||
btn.addClass(prefix+'_animating');
|
||||
$this._visibilityToggle(mobileNav, btn.parent(), true, btn);
|
||||
};
|
||||
|
||||
// toggle clicked items
|
||||
Plugin.prototype._itemClick = function (el) {
|
||||
var $this = this;
|
||||
var settings = $this.settings;
|
||||
var data = el.data('menu');
|
||||
if (!data) {
|
||||
data = {};
|
||||
data.arrow = el.children('.'+prefix+'_arrow');
|
||||
data.ul = el.next('ul');
|
||||
data.parent = el.parent();
|
||||
//Separated parent link structure
|
||||
if (data.parent.hasClass(prefix+'_parent-link')) {
|
||||
data.parent = el.parent().parent();
|
||||
data.ul = el.parent().next('ul');
|
||||
}
|
||||
el.data('menu', data);
|
||||
}
|
||||
if (data.parent.hasClass(prefix+'_collapsed')) {
|
||||
data.arrow.html(settings.openedSymbol);
|
||||
data.parent.removeClass(prefix+'_collapsed');
|
||||
data.parent.addClass(prefix+'_open');
|
||||
data.parent.addClass(prefix+'_animating');
|
||||
$this._visibilityToggle(data.ul, data.parent, true, el);
|
||||
} else {
|
||||
data.arrow.html(settings.closedSymbol);
|
||||
data.parent.addClass(prefix+'_collapsed');
|
||||
data.parent.removeClass(prefix+'_open');
|
||||
data.parent.addClass(prefix+'_animating');
|
||||
$this._visibilityToggle(data.ul, data.parent, true, el);
|
||||
}
|
||||
};
|
||||
|
||||
// toggle actual visibility and accessibility tags
|
||||
Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
|
||||
var $this = this;
|
||||
var settings = $this.settings;
|
||||
var items = $this._getActionItems(el);
|
||||
var duration = 0;
|
||||
if (animate) {
|
||||
duration = settings.duration;
|
||||
}
|
||||
|
||||
function afterOpen(trigger, parent) {
|
||||
$(trigger).removeClass(prefix+'_animating');
|
||||
$(parent).removeClass(prefix+'_animating');
|
||||
|
||||
//Fire afterOpen callback
|
||||
if (!init) {
|
||||
settings.afterOpen(trigger);
|
||||
}
|
||||
}
|
||||
|
||||
function afterClose(trigger, parent) {
|
||||
el.attr('aria-hidden','true');
|
||||
items.attr('tabindex', '-1');
|
||||
$this._setVisAttr(el, true);
|
||||
el.hide(); //jQuery 1.7 bug fix
|
||||
|
||||
$(trigger).removeClass(prefix+'_animating');
|
||||
$(parent).removeClass(prefix+'_animating');
|
||||
|
||||
//Fire init or afterClose callback
|
||||
if (!init){
|
||||
settings.afterClose(trigger);
|
||||
} else if (trigger === 'init'){
|
||||
settings.init();
|
||||
}
|
||||
}
|
||||
|
||||
if (el.hasClass(prefix+'_hidden')) {
|
||||
el.removeClass(prefix+'_hidden');
|
||||
//Fire beforeOpen callback
|
||||
if (!init) {
|
||||
settings.beforeOpen(trigger);
|
||||
}
|
||||
if (settings.animations === 'jquery') {
|
||||
el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
|
||||
afterOpen(trigger, parent);
|
||||
});
|
||||
} else if(settings.animations === 'velocity') {
|
||||
el.velocity("finish").velocity("slideDown", {
|
||||
duration: duration,
|
||||
easing: settings.easingOpen,
|
||||
complete: function() {
|
||||
afterOpen(trigger, parent);
|
||||
}
|
||||
});
|
||||
}
|
||||
el.attr('aria-hidden','false');
|
||||
items.attr('tabindex', '0');
|
||||
$this._setVisAttr(el, false);
|
||||
} else {
|
||||
el.addClass(prefix+'_hidden');
|
||||
|
||||
//Fire init or beforeClose callback
|
||||
if (!init){
|
||||
settings.beforeClose(trigger);
|
||||
}
|
||||
|
||||
if (settings.animations === 'jquery') {
|
||||
el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
|
||||
afterClose(trigger, parent)
|
||||
});
|
||||
} else if (settings.animations === 'velocity') {
|
||||
|
||||
el.velocity("finish").velocity("slideUp", {
|
||||
duration: duration,
|
||||
easing: settings.easingClose,
|
||||
complete: function() {
|
||||
afterClose(trigger, parent);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// set attributes of element and children based on visibility
|
||||
Plugin.prototype._setVisAttr = function(el, hidden) {
|
||||
var $this = this;
|
||||
|
||||
// select all parents that aren't hidden
|
||||
var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
|
||||
|
||||
// iterate over all items setting appropriate tags
|
||||
if (!hidden) {
|
||||
nonHidden.each(function(){
|
||||
var ul = $(this);
|
||||
ul.attr('aria-hidden','false');
|
||||
var items = $this._getActionItems(ul);
|
||||
items.attr('tabindex', '0');
|
||||
$this._setVisAttr(ul, hidden);
|
||||
});
|
||||
} else {
|
||||
nonHidden.each(function(){
|
||||
var ul = $(this);
|
||||
ul.attr('aria-hidden','true');
|
||||
var items = $this._getActionItems(ul);
|
||||
items.attr('tabindex', '-1');
|
||||
$this._setVisAttr(ul, hidden);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// get all 1st level items that are clickable
|
||||
Plugin.prototype._getActionItems = function(el) {
|
||||
var data = el.data("menu");
|
||||
if (!data) {
|
||||
data = {};
|
||||
var items = el.children('li');
|
||||
var anchors = items.find('a');
|
||||
data.links = anchors.add(items.find('.'+prefix+'_item'));
|
||||
el.data('menu', data);
|
||||
}
|
||||
return data.links;
|
||||
};
|
||||
|
||||
Plugin.prototype._outlines = function(state) {
|
||||
if (!state) {
|
||||
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
|
||||
} else {
|
||||
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
|
||||
}
|
||||
};
|
||||
|
||||
Plugin.prototype.toggle = function(){
|
||||
var $this = this;
|
||||
$this._menuToggle();
|
||||
};
|
||||
|
||||
Plugin.prototype.open = function(){
|
||||
var $this = this;
|
||||
if ($this.btn.hasClass(prefix+'_collapsed')) {
|
||||
$this._menuToggle();
|
||||
}
|
||||
};
|
||||
|
||||
Plugin.prototype.close = function(){
|
||||
var $this = this;
|
||||
if ($this.btn.hasClass(prefix+'_open')) {
|
||||
$this._menuToggle();
|
||||
}
|
||||
};
|
||||
|
||||
$.fn[mobileMenu] = function ( options ) {
|
||||
var args = arguments;
|
||||
|
||||
// Is the first parameter an object (options), or was omitted, instantiate a new instance
|
||||
if (options === undefined || typeof options === 'object') {
|
||||
return this.each(function () {
|
||||
|
||||
// Only allow the plugin to be instantiated once due to methods
|
||||
if (!$.data(this, 'plugin_' + mobileMenu)) {
|
||||
|
||||
// if it has no instance, create a new one, pass options to our plugin constructor,
|
||||
// and store the plugin instance in the elements jQuery data object.
|
||||
$.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
|
||||
}
|
||||
});
|
||||
|
||||
// If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
|
||||
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||||
|
||||
// Cache the method call to make it possible to return a value
|
||||
var returns;
|
||||
|
||||
this.each(function () {
|
||||
var instance = $.data(this, 'plugin_' + mobileMenu);
|
||||
|
||||
// Tests that there's already a plugin-instance and checks that the requested public method exists
|
||||
if (instance instanceof Plugin && typeof instance[options] === 'function') {
|
||||
|
||||
// Call the method of our plugin instance, and pass it the supplied arguments.
|
||||
returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
|
||||
}
|
||||
});
|
||||
|
||||
// If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
|
||||
return returns !== undefined ? returns : this;
|
||||
}
|
||||
};
|
||||
}(jQuery, document, window));
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49.8818 14.6871C49.8769 14.8156 49.867 14.9441 49.8571 15.0726C49.7335 16.6591 49.269 18.0825 48.7105 19.3972C47.5737 22.0315 45.9625 24.2605 44.2277 26.3115C40.7137 30.3989 36.5276 33.7053 32.0597 36.4977C27.5621 39.2407 22.7285 41.4994 17.5044 42.8091C16.4369 43.0661 15.3545 43.2935 14.2523 43.4615V39.0381C14.2523 38.9541 14.2474 38.875 14.2375 38.7959C14.1535 38.0101 13.6494 37.3478 12.9525 37.0414C12.6856 36.9228 12.3841 36.8585 12.0728 36.8585H2.29677C1.24405 36.8585 0.369251 36.1122 0.166614 35.1238C0.132018 34.9804 0.117188 34.8272 0.117188 34.674V16.5306C0.117188 15.3247 1.09083 14.351 2.29677 14.351H12.0728C13.2787 14.351 14.2523 13.3724 14.2523 12.1714V2.39052C14.2523 1.18952 15.2309 0.210938 16.4369 0.210938H34.5803C35.7862 0.210938 36.7598 1.18952 36.7598 2.39052V12.1714C36.7598 13.3724 37.7384 14.351 38.9394 14.351H48.7204C49.1503 14.351 49.5457 14.4746 49.8818 14.6871Z" fill="#4753BF"/>
|
||||
<path d="M17.2206 39.0415C17.2206 38.8423 17.2092 38.651 17.186 38.4573C16.9829 36.6449 15.8209 35.0653 14.1489 34.3304C13.5133 34.0482 12.7927 33.8965 12.0756 33.8965H3.08594V17.3198H12.0756C14.9125 17.3198 17.2206 15.0117 17.2206 12.1748V3.17969H33.7973V12.1748C33.7973 15.0117 36.1053 17.3198 38.9422 17.3198H46.3454C46.2406 17.6138 46.1205 17.9193 45.9841 18.241C45.1276 20.2259 43.8866 22.1302 41.9665 24.4002C38.9521 27.9058 35.1935 31.0477 30.4908 33.9864C25.9414 36.761 21.5867 38.6787 17.2206 39.8248V39.0415Z" fill="white"/>
|
||||
<path d="M50.8976 19.2344V34.6743C50.8976 35.8802 49.9239 36.8588 48.718 36.8588H38.9371C37.7361 36.8588 36.7575 37.8325 36.7575 39.0384V48.8144C36.7575 50.0203 35.7839 50.9989 34.5779 50.9989H16.4345C15.2286 50.9989 14.25 50.0203 14.25 48.8144V45.4536C15.4115 45.2905 16.6421 45.0533 17.9815 44.7271C22.9831 43.4766 27.9255 41.3366 33.1051 38.1735C38.2402 34.9659 42.3671 31.5063 45.7328 27.587C47.9816 24.9329 49.4594 22.6446 50.5269 20.1734C50.6653 19.8522 50.7889 19.5403 50.8976 19.2344Z" fill="#506CD7"/>
|
||||
<path d="M49.8856 14.6891C49.8807 14.8176 49.8708 14.9461 49.8609 15.0746C49.7374 16.6611 49.2728 18.0845 48.7143 19.3992C47.5776 22.0335 45.9664 24.2625 44.2316 26.3135C40.7176 30.4009 36.5314 33.7073 32.0635 36.4997C27.566 39.2428 22.7323 41.5014 17.5082 42.8111C16.4407 43.0681 15.3583 43.2955 14.2562 43.4635C13.6038 43.5624 12.9465 43.6415 12.2792 43.6859C11.3105 43.765 10.3221 43.7798 9.31382 43.7205C7.88548 43.6316 6.40771 43.4092 4.92995 42.8062C3.46701 42.2329 1.96947 41.1505 1.06007 39.6035C0.84755 39.2279 0.669636 38.8375 0.53125 38.4322C1.06997 38.6942 1.67293 38.8375 2.30061 38.8375H6.15071C7.0947 39.1983 8.25616 39.3713 9.47198 39.3663C10.3913 39.3614 11.3303 39.2872 12.2792 39.1538C12.9316 39.0648 13.584 38.9413 14.2414 38.7979C14.9333 38.6546 15.6203 38.4767 16.3073 38.279C18.5956 37.6266 20.8592 36.7666 23.0536 35.7436C25.2529 34.7353 27.3979 33.5739 29.4688 32.2938C31.5446 31.0187 33.5413 29.62 35.4342 28.1076C37.3321 26.6051 39.1113 24.9692 40.7225 23.2147C42.3337 21.47 43.767 19.5722 44.7604 17.5903C45.3189 16.503 45.6896 15.3662 45.7785 14.353C45.8527 13.6117 45.7736 12.9346 45.5166 12.3761C45.4919 12.3217 45.4672 12.2723 45.4375 12.2179C45.0619 11.5606 44.4243 10.9725 43.4952 10.582C42.5907 10.1767 41.4886 9.95433 40.3469 9.85055C39.8181 9.80606 39.2843 9.78629 38.7406 9.78629V6.71215C39.309 6.65778 39.8823 6.62318 40.4655 6.61824C41.8543 6.60341 43.2975 6.7418 44.7654 7.24098C46.2184 7.71545 47.7506 8.6792 48.7341 10.1817C49.1987 10.8983 49.51 11.694 49.6929 12.4947C49.856 13.2361 49.9153 13.9824 49.8856 14.6891Z" fill="#0B1030"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,127 @@
|
|||
class Cursor {
|
||||
constructor(options) {
|
||||
this.options = $.extend(true, {
|
||||
container: "body",
|
||||
speed: 0.7,
|
||||
ease: "expo.out",
|
||||
visibleTimeout: 300
|
||||
}, options);
|
||||
this.body = $(this.options.container);
|
||||
this.el = $('<div class="cb-cursor"></div>');
|
||||
this.text = $('<div class="cb-cursor-text"></div>');
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.el.append(this.text);
|
||||
this.body.append(this.el);
|
||||
this.bind();
|
||||
this.move(-window.innerWidth, -window.innerHeight, 0);
|
||||
}
|
||||
|
||||
bind() {
|
||||
const self = this;
|
||||
|
||||
this.body.on('mouseleave', () => {
|
||||
self.hide();
|
||||
}).on('mouseenter', () => {
|
||||
self.show();
|
||||
}).on('mousemove', (e) => {
|
||||
this.pos = {
|
||||
x: this.stick ? this.stick.x - ((this.stick.x - e.clientX) * 0.15) : e.clientX,
|
||||
y: this.stick ? this.stick.y - ((this.stick.y - e.clientY) * 0.15) : e.clientY
|
||||
};
|
||||
this.update();
|
||||
}).on('mousedown', () => {
|
||||
self.setState('-active');
|
||||
}).on('mouseup', () => {
|
||||
self.removeState('-active');
|
||||
}).on('mouseenter', 'a,input,textarea,button', () => {
|
||||
self.setState('-pointer');
|
||||
}).on('mouseleave', 'a,input,textarea,button', () => {
|
||||
self.removeState('-pointer');
|
||||
}).on('mouseenter', 'iframe', () => {
|
||||
self.hide();
|
||||
}).on('mouseleave', 'iframe', () => {
|
||||
self.show();
|
||||
}).on('mouseenter', '[data-cursor]', function () {
|
||||
self.setState(this.dataset.cursor);
|
||||
}).on('mouseleave', '[data-cursor]', function () {
|
||||
self.removeState(this.dataset.cursor);
|
||||
}).on('mouseenter', '[data-cursor-text]', function () {
|
||||
self.setText(this.dataset.cursorText);
|
||||
}).on('mouseleave', '[data-cursor-text]', function () {
|
||||
self.removeText();
|
||||
}).on('mouseenter', '[data-cursor-stick]', function () {
|
||||
self.setStick(this.dataset.cursorStick);
|
||||
}).on('mouseleave', '[data-cursor-stick]', function () {
|
||||
self.removeStick();
|
||||
});
|
||||
}
|
||||
|
||||
setState(state) {
|
||||
this.el.addClass(state);
|
||||
}
|
||||
|
||||
removeState(state) {
|
||||
this.el.removeClass(state);
|
||||
}
|
||||
|
||||
toggleState(state) {
|
||||
this.el.toggleClass(state);
|
||||
}
|
||||
|
||||
setText(text) {
|
||||
this.text.html(text);
|
||||
this.el.addClass('-text');
|
||||
}
|
||||
|
||||
removeText() {
|
||||
this.el.removeClass('-text');
|
||||
}
|
||||
|
||||
setStick(el) {
|
||||
const target = $(el);
|
||||
const bound = target.get(0).getBoundingClientRect();
|
||||
this.stick = {
|
||||
y: bound.top + (target.height() / 2),
|
||||
x: bound.left + (target.width() / 2)
|
||||
};
|
||||
this.move(this.stick.x, this.stick.y, 5);
|
||||
}
|
||||
|
||||
removeStick() {
|
||||
this.stick = false;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.move();
|
||||
this.show();
|
||||
}
|
||||
|
||||
move(x, y, duration) {
|
||||
gsap.to(this.el, {
|
||||
x: x || this.pos.x,
|
||||
y: y || this.pos.y,
|
||||
force3D: true,
|
||||
overwrite: true,
|
||||
ease: this.options.ease,
|
||||
duration: this.visible ? (duration || this.options.speed) : 0
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this.visible) return;
|
||||
clearInterval(this.visibleInt);
|
||||
this.el.addClass('-visible');
|
||||
this.visibleInt = setTimeout(() => this.visible = true);
|
||||
}
|
||||
|
||||
hide() {
|
||||
clearInterval(this.visibleInt);
|
||||
this.el.removeClass('-visible');
|
||||
this.visibleInt = setTimeout(() => this.visible = false, this.options.visibleTimeout);
|
||||
}
|
||||
}
|
||||
// Init cursor
|
||||
const cursor = new Cursor();
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8; }
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none; }
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045; }
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress; }
|
||||
|
||||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out; }
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none; }
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important; }
|
||||
|
||||
.mfp-preloader {
|
||||
color: #CCC;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044; }
|
||||
.mfp-preloader a {
|
||||
color: #CCC; }
|
||||
.mfp-preloader a:hover {
|
||||
color: #FFF; }
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none; }
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none; }
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: #FFF;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace; }
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
opacity: 1; }
|
||||
.mfp-close:active {
|
||||
top: 1px; }
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333; }
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%; }
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #CCC;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap; }
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px; }
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1; }
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent; }
|
||||
.mfp-arrow:after {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px; }
|
||||
.mfp-arrow:before {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7; }
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0; }
|
||||
.mfp-arrow-left:after {
|
||||
border-right: 17px solid #FFF;
|
||||
margin-left: 31px; }
|
||||
.mfp-arrow-left:before {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0; }
|
||||
.mfp-arrow-right:after {
|
||||
border-left: 17px solid #FFF;
|
||||
margin-left: 39px; }
|
||||
.mfp-arrow-right:before {
|
||||
border-left: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px; }
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px; }
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px; }
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%; }
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000; }
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0; }
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444; }
|
||||
.mfp-figure small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; }
|
||||
.mfp-figure figure {
|
||||
margin: 0; }
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #F3F3F3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px; }
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%; }
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px; }
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box; }
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0; } }
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75); }
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0; }
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%; }
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px; } }
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
.cb-cursor {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 150;
|
||||
contain: layout style size;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
-webkit-transition: opacity 0.3s, color 0.4s;
|
||||
-o-transition: opacity 0.3s, color 0.4s;
|
||||
-moz-transition: opacity 0.3s, color 0.4s;
|
||||
transition: opacity 0.3s, color 0.4s;
|
||||
}
|
||||
|
||||
.cb-cursor:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: -24px;
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
|
||||
transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
|
||||
-o-transition: opacity 0.1s, -o-transform 0.3s ease-in-out;
|
||||
-moz-transition: transform 0.3s ease-in-out, opacity 0.1s, -moz-transform 0.3s ease-in-out;
|
||||
transition: transform 0.3s ease-in-out, opacity 0.1s;
|
||||
transition: transform 0.3s ease-in-out, opacity 0.1s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.cb-cursor-text {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transform: scale(0) rotate(10deg);
|
||||
-moz-transform: scale(0) rotate(10deg);
|
||||
-ms-transform: scale(0) rotate(10deg);
|
||||
-o-transform: scale(0) rotate(10deg);
|
||||
transform: scale(0) rotate(10deg);
|
||||
opacity: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
-webkit-transition: opacity 0.4s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.4s, -webkit-transform 0.3s;
|
||||
-o-transition: opacity 0.4s, -o-transform 0.3s;
|
||||
-moz-transition: opacity 0.4s, transform 0.3s, -moz-transform 0.3s;
|
||||
transition: opacity 0.4s, transform 0.3s;
|
||||
transition: opacity 0.4s, transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;
|
||||
}
|
||||
|
||||
@supports (mix-blend-mode: exclusion) {
|
||||
.cb-cursor.-exclusion, .cb-cursor.-opaque {
|
||||
mix-blend-mode: exclusion;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (mix-blend-mode: exclusion) {
|
||||
.cb-cursor.-exclusion:before, .cb-cursor.-opaque:before {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.cb-cursor.-normal, .cb-cursor.-text {
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
.cb-cursor.-normal:before, .cb-cursor.-text:before {
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.cb-cursor.-inverse {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cb-cursor.-visible:before {
|
||||
-webkit-transform: scale(0.2);
|
||||
-moz-transform: scale(0.2);
|
||||
-ms-transform: scale(0.2);
|
||||
-o-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.cb-cursor.-visible.-active:before {
|
||||
-webkit-transform: scale(0.23);
|
||||
-moz-transform: scale(0.23);
|
||||
-ms-transform: scale(0.23);
|
||||
-o-transform: scale(0.23);
|
||||
transform: scale(0.23);
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.cb-cursor.-pointer:before {
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.cb-cursor.-text:before {
|
||||
background: #000;
|
||||
opacity: 0.80;
|
||||
backdrop-filter: blur(10);
|
||||
-webkit-transform: scale(1.7);
|
||||
-moz-transform: scale(1.7);
|
||||
-ms-transform: scale(1.7);
|
||||
-o-transform: scale(1.7);
|
||||
transform: scale(1.7);
|
||||
}
|
||||
|
||||
.cb-cursor.-text .cb-cursor-text {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.cb-cursor.-text.-active:before {
|
||||
-webkit-transform: scale(1.6);
|
||||
-moz-transform: scale(1.6);
|
||||
-ms-transform: scale(1.6);
|
||||
-o-transform: scale(1.6);
|
||||
transform: scale(1.6);
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.cb-cursor.-opaque:before {
|
||||
-webkit-transform: scale(1.32);
|
||||
-moz-transform: scale(1.32);
|
||||
-ms-transform: scale(1.32);
|
||||
-o-transform: scale(1.32);
|
||||
transform: scale(1.32);
|
||||
}
|
||||
|
||||
.cb-cursor.-opaque.-active:before {
|
||||
-webkit-transform: scale(1.2);
|
||||
-moz-transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
-o-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.cb-cursor.-lg:before {
|
||||
-webkit-transform: scale(2);
|
||||
-moz-transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
-o-transform: scale(2);
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
.cb-cursor.-hidden:before {
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.-color-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.-color-green {
|
||||
color: #51c67d;
|
||||
}
|
||||
|
||||
.cb-demo {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.cb-demo-content {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.cb-demo-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.cb-demo-container {
|
||||
padding: 0 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.cb-demo-row {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.cb-demo-row {
|
||||
margin: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cb-demo-item {
|
||||
position: relative;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
padding: 50px 30px;
|
||||
margin: 0 20px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.cb-demo-item {
|
||||
padding: 90px 30px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.cb-demo-item-title {
|
||||
position: relative;
|
||||
margin: 0 0 25px 0;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cb-demo-item-text {
|
||||
position: relative;
|
||||
max-width: 70%;
|
||||
margin: 0 auto;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.cb-demo-item:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #f8f8f8;
|
||||
-webkit-transition: -webkit-box-shadow 0.2s;
|
||||
transition: -webkit-box-shadow 0.2s;
|
||||
-o-transition: box-shadow 0.2s;
|
||||
-moz-transition: box-shadow 0.2s, -moz-box-shadow 0.2s;
|
||||
transition: box-shadow 0.2s;
|
||||
transition: box-shadow 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*! Copyright (c) 2016 THE ULTRASOFT (http://theultrasoft.com)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Project: Parallaxie
|
||||
* Version: 0.5
|
||||
*
|
||||
* Requires: jQuery 1.9+
|
||||
*/
|
||||
|
||||
(function( $ ){
|
||||
"use strict";
|
||||
$.fn.parallaxie = function( options ){
|
||||
|
||||
var options = $.extend({
|
||||
speed: 0.2,
|
||||
repeat: 'no-repeat',
|
||||
size: 'cover',
|
||||
pos_x: 'center',
|
||||
offset: 0,
|
||||
}, options );
|
||||
|
||||
this.each(function(){
|
||||
|
||||
var $el = $(this);
|
||||
var local_options = $el.data('parallaxie');
|
||||
if( typeof local_options !== 'object' ) local_options = {};
|
||||
local_options = $.extend( {}, options, local_options );
|
||||
|
||||
var image_url = $el.data('image');
|
||||
if( typeof image_url === 'undefined' ){
|
||||
image_url = $el.css('background-image');
|
||||
if( !image_url ) return;
|
||||
|
||||
// APPLY DEFAULT CSS
|
||||
var pos_y = local_options.offset + ($el.offset().top - $(window).scrollTop()) * (1 - local_options.speed );
|
||||
$el.css({
|
||||
'background-image': image_url,
|
||||
'background-size': local_options.size,
|
||||
'background-repeat': local_options.repeat,
|
||||
'background-attachment': 'fixed',
|
||||
'background-position': local_options.pos_x + ' ' + pos_y + 'px',
|
||||
});
|
||||
|
||||
$(window).scroll( function(){
|
||||
//var pos_y = - ( $(window).scrollTop() - $el.offset().top ) * ( 1 + local_options.speed ) - ( $el.offset().top * local_options.speed );
|
||||
var pos_y = local_options.offset + ($el.offset().top - $(window).scrollTop()) * (1 - local_options.speed );
|
||||
$el.data( 'pos_y', pos_y );
|
||||
$el.css( 'background-position', local_options.pos_x + ' ' + pos_y + 'px' );
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
return this;
|
||||
};
|
||||
}( jQuery ));
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
* SlickNav Responsive Mobile Menu v1.0.10
|
||||
* (c) 2016 Josh Cope
|
||||
* licensed under MIT
|
||||
*/.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_menu .slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_menu .slicknav_icon:before{background:0 0;width:1.125em;height:.875em;display:block;content:"";position:absolute}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.slicknav_menu:after,.slicknav_menu:before{content:" ";display:table}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{*zoom:1;font-size:16px;background:#4c4c4c;padding:5px}.slicknav_nav,.slicknav_nav ul{list-style:none;overflow:hidden;padding:0}.slicknav_menu .slicknav_icon-bar{background-color:#fff}.slicknav_btn{margin:5px 5px 6px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#222}.slicknav_nav{clear:both;color:#fff;margin:0;font-size:.875em}.slicknav_nav ul{margin:0 0 0 20px}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:5px 10px;margin:2px 5px}.slicknav_nav .slicknav_row:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#fff}.slicknav_nav a{text-decoration:none;color:#fff}.slicknav_nav a:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#222}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,295 @@
|
|||
<!-- Page Team Start -->
|
||||
<div class="page-team">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-1.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. esther howard</a></h3>
|
||||
<p>ophthalmology</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-2.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. jenny wilson</a></h3>
|
||||
<p>anesthesiology</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-3.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. kristin watson</a></h3>
|
||||
<p>infectious disease</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-4.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. arlene mccoy</a></h3>
|
||||
<p>cardiology</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-5.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. michael johnson</a></h3>
|
||||
<p>orthopedics</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="1s" style="visibility: visible; animation-delay: 1s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-6.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. sarah lee</a></h3>
|
||||
<p>pediatrics</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="1.2s" style="visibility: visible; animation-delay: 1.2s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-7.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. james smith</a></h3>
|
||||
<p>neurology</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<!-- Team Member Item Start -->
|
||||
<div class="team-member-item wow fadeInUp" data-wow-delay="1.4s" style="visibility: visible; animation-delay: 1.4s; animation-name: fadeInUp;">
|
||||
<!-- Team Image Start -->
|
||||
<div class="team-image">
|
||||
<a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html" data-cursor-text="View">
|
||||
<figure class="image-anime">
|
||||
<img src="./doctors_files/team-8.jpg" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team Image End -->
|
||||
|
||||
<!-- Tema Body Start -->
|
||||
<div class="team-body">
|
||||
<!-- Team Social Icon Start -->
|
||||
<div class="team-social-icon">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Team Social Icon End -->
|
||||
<!-- Team Content Start -->
|
||||
<div class="team-content">
|
||||
<h3><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html">dr. rachel davis</a></h3>
|
||||
<p>dermatology</p>
|
||||
</div>
|
||||
<!-- Team Content End -->
|
||||
</div>
|
||||
<!-- Tema Body End -->
|
||||
</div>
|
||||
<!-- Team Member Item End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page Team End -->
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!-- Footer Start -->
|
||||
<footer class="main-footer bg-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<!-- About Footer Start -->
|
||||
<div class="about-footer">
|
||||
<!-- Footer Logo Start -->
|
||||
<div class="footer-logo">
|
||||
<img src="./doctorDetail_files/footer-logo.svg" alt="">
|
||||
</div>
|
||||
<!-- Footer Logo End -->
|
||||
|
||||
<!-- About Footer Content Start -->
|
||||
<div class="about-footer-content">
|
||||
<p>We offer a wide range of healthcare services to meet your needs.</p>
|
||||
</div>
|
||||
<!-- About Footer Content End -->
|
||||
</div>
|
||||
<!-- About Footer End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<!-- Footer Links Start -->
|
||||
<div class="footer-links">
|
||||
<h3>healthcare</h3>
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctors.html">doctors</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#">diagnostics</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#">caregiver</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#">hospitality</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#">emergency</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Footer Links End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-4 col-6">
|
||||
<!-- Footer Links Start -->
|
||||
<div class="footer-links">
|
||||
<h3>quick links</h3>
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/index.html">home</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/about.html">about us</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/faqs.html">faqs</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/blog.html">blogs</a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/projects.html">facilities</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Footer Links End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<!-- Footer Contact Box Start -->
|
||||
<div class="footer-contact-box footer-links">
|
||||
<h3>contact us</h3>
|
||||
|
||||
<!-- Footer Contact Item Start -->
|
||||
<div class="footer-contact-item">
|
||||
<div class="icon-box">
|
||||
<img src="./doctorDetail_files/icon-mail.svg" alt="">
|
||||
</div>
|
||||
<div class="footer-contact-content">
|
||||
<p>info@domain.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Contact Item End -->
|
||||
|
||||
<!-- Footer Contact Item Start -->
|
||||
<div class="footer-contact-item">
|
||||
<div class="icon-box">
|
||||
<img src="./doctorDetail_files/icon-phone.svg" alt="">
|
||||
</div>
|
||||
<div class="footer-contact-content">
|
||||
<p>+1 (213) 465 789</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Contact Item End -->
|
||||
|
||||
<!-- Footer Contact Item Start -->
|
||||
<div class="footer-contact-item">
|
||||
<div class="icon-box">
|
||||
<img src="./doctorDetail_files/icon-location.svg" alt="">
|
||||
</div>
|
||||
<div class="footer-contact-content">
|
||||
<p>2464 Royal Ln. Mesa, New Jersey</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Contact Item End -->
|
||||
</div>
|
||||
<!-- Footer Contact Box End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<!-- Footer Social Links Start -->
|
||||
<div class="footer-social-link">
|
||||
<hr>
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#"><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#"><i class="fa-brands fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
</div>
|
||||
<!-- Footer Social Links End -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Copyright Section Start -->
|
||||
<div class="footer-copyright">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<!-- Footer Copyright Start -->
|
||||
<div class="footer-copyright-text">
|
||||
<p>Copyright © 2024 All Rights Reserved.</p>
|
||||
</div>
|
||||
<!-- Footer Copyright End -->
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- Footer Terms Condition Start -->
|
||||
<div class="footer-terms-condition">
|
||||
<ul>
|
||||
<li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#">privacy policy</a>
|
||||
</li><li><a href="https://html.awaikenthemes.com/dispnsary/doctor-single.html#">terms & conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Footer Terms Condition End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Copyright Section End -->
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Footer End -->
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<!-- Topbar Section Start -->
|
||||
<div class="topbar">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 col-md-9">
|
||||
<!-- Topbar Contact Information Start -->
|
||||
<div class="topbar-contact-info">
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-solid fa-clock"></i> <span>Working Hour:</span> 08:00am to 09:00pm</a></li>
|
||||
<li><a href=""><i class="fa-solid fa-envelope"></i> <span>Email:</span> info@domainname.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Topbar Contact Information End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-3">
|
||||
<!-- Topbar Social Details Start -->
|
||||
<div class="topbar-social-details">
|
||||
<!-- Header Social Icons Start -->
|
||||
<div class="topbar-social-icons">
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Header Social Icons End -->
|
||||
|
||||
<!-- Topbar Contact Details Start -->
|
||||
<div class="topbar-contact-info topbar-contact-details">
|
||||
<ul>
|
||||
<li><a href=""><span>Contact:</span> +123 (456) 789</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Topbar Contact Details End -->
|
||||
</div>
|
||||
<!-- Topbar Social Details End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Topbar Section End -->
|
||||
|
||||
<!-- Header Start -->
|
||||
<header class="main-header">
|
||||
<div class="header-sticky">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<!-- Logo Start -->
|
||||
<a class="navbar-brand" href="">
|
||||
<img src="./resources/logo.svg" alt="Logo">
|
||||
</a>
|
||||
<!-- Logo End -->
|
||||
|
||||
<!-- Main Menu Start -->
|
||||
<div class="collapse navbar-collapse main-menu">
|
||||
<div class="nav-menu-wrapper">
|
||||
<ul class="navbar-nav mr-auto" id="menu">
|
||||
<li class="nav-item submenu"><a class="nav-link" href="">Home</a>
|
||||
<ul>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html">Home - Main</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index-image.html">Home - Image</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index-video.html">Home - Video</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index-slider.html">Home - Slider</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
|
||||
<li class="nav-item submenu"><a class="nav-link" href="">Pages</a>
|
||||
<ul>
|
||||
<li class="nav-item"><a class="nav-link" href="service-single.html">Service Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="blog-single.html">Blog Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="doctors.html">Doctors</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="doctor-single.html">Doctor Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-study.html">Case Study</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-study-single.html">Case Study Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="image-gallery.html">Image Gallery</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="video-gallery.html">Video Gallery</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="faqs.html">FAQs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="404.html">404</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>
|
||||
<li class="nav-item highlighted-menu"><a class="nav-link" href="book-appointment.html">book appointment</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Header Button Start-->
|
||||
<div class="header-btn">
|
||||
<a href="book-appointment.html" class="btn-default">book appointment</a>
|
||||
</div>
|
||||
<!-- Header Button End-->
|
||||
</div>
|
||||
<!-- Main Menu End -->
|
||||
<div class="navbar-toggle"><a href="" aria-haspopup="true" role="button" tabindex="0" class="slicknav_btn slicknav_collapsed" style="outline: none;"><span class="slicknav_menutxt"></span><span class="slicknav_icon slicknav_no-text"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a></div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="responsive-menu"><div class="slicknav_menu"><ul class="slicknav_nav slicknav_hidden" aria-hidden="true" role="menu" style="display: none;">
|
||||
<li class="nav-item submenu slicknav_collapsed slicknav_parent"><a href="" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;"><a class="nav-link" href="" tabindex="-1">Home</a>
|
||||
<span class="slicknav_arrow">►</span></a><ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html" role="menuitem" tabindex="-1">Home - Main</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index-image.html" role="menuitem" tabindex="-1">Home - Image</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index-video.html" role="menuitem" tabindex="-1">Home - Video</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index-slider.html" role="menuitem" tabindex="-1">Home - Slider</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="about.html" role="menuitem" tabindex="-1">About Us</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="services.html" role="menuitem" tabindex="-1">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="blog.html" role="menuitem" tabindex="-1">Blog</a></li>
|
||||
<li class="nav-item submenu slicknav_collapsed slicknav_parent"><a href="" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;"><a class="nav-link" href="" tabindex="-1">Pages</a>
|
||||
<span class="slicknav_arrow">►</span></a><ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;">
|
||||
<li class="nav-item"><a class="nav-link" href="service-single.html" role="menuitem" tabindex="-1">Service Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="blog-single.html" role="menuitem" tabindex="-1">Blog Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="doctors.html" role="menuitem" tabindex="-1">Doctors</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="doctor-single.html" role="menuitem" tabindex="-1">Doctor Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-study.html" role="menuitem" tabindex="-1">Case Study</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="case-study-single.html" role="menuitem" tabindex="-1">Case Study Details</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="image-gallery.html" role="menuitem" tabindex="-1">Image Gallery</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="video-gallery.html" role="menuitem" tabindex="-1">Video Gallery</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="faqs.html" role="menuitem" tabindex="-1">FAQs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="404.html" role="menuitem" tabindex="-1">404</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="contact.html" role="menuitem" tabindex="-1">Contact Us</a></li>
|
||||
<li class="nav-item highlighted-menu"><a class="nav-link" href="book-appointment.html" role="menuitem" tabindex="-1">book appointment</a></li>
|
||||
</ul></div></div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
|
||||
<!-- Hero Section Start -->
|
||||
<div class="hero bg-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<!-- Hero Content Start -->
|
||||
<div class="hero-content">
|
||||
<!-- Section Title Start -->
|
||||
<div class="section-title">
|
||||
<h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">your health our priority</h3>
|
||||
<h1 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">E</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">x</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">p</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">m</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">d</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div></div> </div><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div></div></div></h1>
|
||||
<p class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">Experience healthcare you can trust. Our dedicated team provides compassionate, high-quality care.</p>
|
||||
</div>
|
||||
<!-- Section Title End -->
|
||||
|
||||
<!-- Hero Buttons Start -->
|
||||
<div class="hero-btn wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
|
||||
<a href="book-appointment.html" class="btn-default">book a appointment</a>
|
||||
<a href="about.html" class="btn-default">about us</a>
|
||||
</div>
|
||||
<!-- Hero Buttons End -->
|
||||
|
||||
<!-- Google Rating Start -->
|
||||
<div class="google-rating wow fadeInUp" data-wow-delay="0.75s" style="visibility: visible; animation-delay: 0.75s; animation-name: fadeInUp;">
|
||||
<ul>
|
||||
<li>Google Rating <span>5.0</span></li>
|
||||
<li>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<i class="fa-solid fa-star"></i>
|
||||
</li>
|
||||
<li>based on 500 reviews</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Google Rating End -->
|
||||
</div>
|
||||
<!-- Hero Content End -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- Hero Image Start -->
|
||||
<div class="hero-image">
|
||||
<!-- Hero Img Start -->
|
||||
<div class="hero-img">
|
||||
<figure>
|
||||
<img src="./resources/hero-img.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- Hero Img End -->
|
||||
|
||||
<!-- Excerpt Doctor Box Start -->
|
||||
<div class="excerpt-doctor-box">
|
||||
<!-- Excerpt Doctor Images Start -->
|
||||
<div class="excerpt-doctor-images">
|
||||
<div class="excerpt-doctor-image">
|
||||
<figure class="image-anime">
|
||||
<img src="./resources/excerpt-doctor-img-1.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="excerpt-doctor-image">
|
||||
<figure class="image-anime">
|
||||
<img src="./resources/excerpt-doctor-img-2.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="excerpt-doctor-image">
|
||||
<figure class="image-anime">
|
||||
<img src="./resources/excerpt-doctor-img-3.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="excerpt-doctor-image">
|
||||
<figure class="image-anime">
|
||||
<img src="./resources/excerpt-doctor-img-4.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Excerpt Doctor Images End -->
|
||||
|
||||
<!-- Excerpt Doctor Content Start -->
|
||||
<div class="excerpt-doctor-content">
|
||||
<p>Talk to our <span class="counter">48</span>+ Doctors</p>
|
||||
</div>
|
||||
<!-- Excerpt Doctor Content End -->
|
||||
</div>
|
||||
<!-- Excerpt Doctor Box End -->
|
||||
|
||||
<!-- Satisfied Clients Box Start -->
|
||||
<div class="satisfied-clients-box">
|
||||
<div class="icon-box">
|
||||
<img src="./resources/hero-satisfied-clients.svg" alt="">
|
||||
</div>
|
||||
<div class="satisfied-clients-content">
|
||||
<h3><span class="counter">3500</span>+</h3>
|
||||
<p>satisfied clients</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Satisfied Clients Box End -->
|
||||
</div>
|
||||
<!-- Hero Image End -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hero Section End -->
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue