Share Page
CODE
×
HTML
<div class='sharing'> <label class='sharing'>Seite teilen:</label> <div class='instagram-c'></div> <div class='twitter-c'></div> <div class='youtube-c'></div> <div class='facebook-c'></div> <div class='email-c'></div> </div>
CSS
@media screen and (max-width: 1119px) { div.sharing { margin-left: 30px; max-width: 420px; } } @media screen and (max-width: 767px) { div.sharing { margin-top: 36px; margin-left: 20px; max-width: 280px; } } label.sharing { display:block; color: rgba(112,112,112,1); font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; } div.facebook-c { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQogIDxkZWZzPg0KICA8c3R5bGU+DQogICAgLnN0MHtmaWxsOiM0MTRjOTl9DQogICAgLnN0MXtmaWxsOiNmZmZ9DQogIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LDBBMTYsMTYsMCwxLDAsMzIsMTYsMTYsMTYsMCwwLDAsMTYsMFoiLz4NCiAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjY5LDI0LjloMy42NzlWMTZoMi40NTRsLjMyNS0zLjA2OEgxNy4zNjlsMC0xLjUzNmMwLS44LjA3Ni0xLjIyOSwxLjIyNC0xLjIyOWgxLjUzNFY3LjFIMTcuNjc2Yy0yLjk0OSwwLTMuOTg2LDEuNDg5LTMuOTg2LDMuOTkydjEuODQySDExLjg1MlYxNkgxMy42OXY4LjlaIi8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.twitter-c { background-image: url('../img/twitter-color.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.email-c { display:inline-block; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMSAzMSI+DQogIDxkZWZzPg0KICAgIDxzdHlsZT4NCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGZpbGw6ICNhNDE1MDY7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMiB7DQogICAgICAgIGZpbGw6ICNmZmY7DQogICAgICB9DQogICAgPC9zdHlsZT4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iR3J1cHBlXzEyODkiIGRhdGEtbmFtZT0iR3J1cHBlIDEyODkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzYuMDgyIC0zODU1KSI+DQogICAgPGNpcmNsZSBpZD0iRWxsaXBzZV84IiBkYXRhLW5hbWU9IkVsbGlwc2UgOCIgY2xhc3M9ImNscy0xIiBjeD0iMTUuNSIgY3k9IjE1LjUiIHI9IjE1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzNi4wODIgMzg1NSkiLz4NCiAgICA8ZyBpZD0iY2xvc2UtZW52ZWxvcGVfMV8iIGRhdGEtbmFtZT0iY2xvc2UtZW52ZWxvcGUoMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0Mi44NTMgMzg2NC4yNjkpIj4NCiAgICAgIDxnIGlkPSJHcnVwcGVfMTkzIiBkYXRhLW5hbWU9IkdydXBwZSAxOTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPg0KICAgICAgICA8cGF0aCBpZD0iUGZhZF8xNCIgZGF0YS1uYW1lPSJQZmFkIDE0IiBjbGFzcz0iY2xzLTIiIGQ9Ik04Ljk5Miw5LjQ1Miw2Ljc0NCw3LjQ4NC4zMTYsMTIuOTk0YTEuMzE2LDEuMzE2LDAsMCwwLC45LjM1MkgxNi43NzJhMS4zMDYsMS4zMDYsMCwwLDAsLjg5My0uMzUybC02LjQyNC01LjUxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wOTQgLTAuMzY1KSIvPg0KICAgICAgICA8cGF0aCBpZD0iUGZhZF8xNSIgZGF0YS1uYW1lPSJQZmFkIDE1IiBjbGFzcz0iY2xzLTIiIGQ9Ik0xNy42NjgsMi4zNTJhMS4zMDcsMS4zMDcsMCwwLDAtLjktLjM1MkgxLjIxMmExLjMsMS4zLDAsMCwwLS44OTQuMzU0TDguOTkyLDkuNzg5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wOTUgLTIpIi8+DQogICAgICAgIDxwYXRoIGlkPSJQZmFkXzE2IiBkYXRhLW5hbWU9IlBmYWQgMTYiIGNsYXNzPSJjbHMtMiIgZD0iTTAsMi44NzhWMTMuNjYzTDYuMjc0LDguMzMxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMS43MzgpIi8+DQogICAgICAgIDxwYXRoIGlkPSJQZmFkXzE3IiBkYXRhLW5hbWU9IlBmYWQgMTciIGNsYXNzPSJjbHMtMiIgZD0iTTkuMTY3LDguMzMybDYuMjc0LDUuMzMxVjIuODc1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi43MzMgLTEuNzM5KSIvPg0KICAgICAgPC9nPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.instagram-c { display:inline-block; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwMCA2MDAiIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj4NCiAgPGNpcmNsZSBjeD0iMzAwIiBjeT0iMzAwIiByPSIyOTcuNSIgZmlsbD0iIzgxMzRBRiIgLz4NCiAgPHBhdGggZD0iTTMwMCAxMjMuNWMtNDcuOSAwLTU0IC4yLTcyLjggMS4xLTE4LjguOS0zMS42IDMuOC00Mi44IDguMi0xMS42IDQuNS0yMS41IDEwLjUtMzEuMyAyMC40LTkuOCA5LjgtMTUuOCAxOS43LTIwLjQgMzEuMy00LjQgMTEuMi03LjQgMjQuMS04LjIgNDIuOC0uOCAxOC44LTEuMSAyNC44LTEuMSA3Mi44IDAgNDcuOS4yIDUzLjkgMS4xIDcyLjguOSAxOC44IDMuOCAzMS42IDguMiA0Mi44IDQuNSAxMS42IDEwLjUgMjEuNSAyMC40IDMxLjMgOS44IDkuOCAxOS43IDE1LjkgMzEuMyAyMC40IDExLjIgNC40IDI0LjEgNy4zIDQyLjggOC4yIDE4LjguOSAyNC44IDEuMSA3Mi44IDEuMSA0Ny45IDAgNTMuOS0uMiA3Mi44LTEuMSAxOC44LS45IDMxLjYtMy44IDQyLjktOC4yIDExLjYtNC41IDIxLjQtMTAuNiAzMS4yLTIwLjQgOS44LTkuOCAxNS44LTE5LjcgMjAuNC0zMS4zIDQuMy0xMS4yIDcuMy0yNCA4LjItNDIuOC44LTE4LjggMS4xLTI0LjggMS4xLTcyLjggMC00Ny45LS4yLTUzLjktMS4xLTcyLjgtLjktMTguOC0zLjktMzEuNi04LjItNDIuOC00LjUtMTEuNi0xMC42LTIxLjUtMjAuNC0zMS4zLTkuOC05LjgtMTkuNi0xNS44LTMxLjMtMjAuNC0xMS4zLTQuNC0yNC4xLTcuMy00Mi45LTguMi0xOC44LS45LTI0LjgtMS4xLTcyLjctMS4xem0tMTUuOCAzMS44SDMwMGM0Ny4xIDAgNTIuNy4yIDcxLjMgMSAxNy4yLjggMjYuNSAzLjcgMzIuOCA2LjEgOC4yIDMuMiAxNC4xIDcgMjAuMyAxMy4yIDYuMiA2LjIgMTAgMTIuMSAxMy4yIDIwLjMgMi40IDYuMiA1LjMgMTUuNiA2LjEgMzIuOC44IDE4LjYgMSAyNC4yIDEgNzEuMyAwIDQ3LjEtLjIgNTIuNy0xIDcxLjMtLjggMTcuMi0zLjcgMjYuNS02LjEgMzIuOC0zLjIgOC4yLTcgMTQuMS0xMy4yIDIwLjMtNi4yIDYuMi0xMiAxMC0yMC4zIDEzLjItNi4yIDIuNC0xNS42IDUuMy0zMi44IDYuMS0xOC42LjgtMjQuMiAxLTcxLjMgMS00Ny4xIDAtNTIuNy0uMi03MS4zLTEtMTcuMi0uOC0yNi41LTMuNy0zMi44LTYuMS04LjItMy4yLTE0LjEtNy0yMC4zLTEzLjItNi4yLTYuMi0xMC0xMi4xLTEzLjItMjAuMy0yLjQtNi4yLTUuMy0xNS42LTYuMS0zMi44LS44LTE4LjYtMS0yNC4yLTEtNzEuMyAwLTQ3LjEuMi01Mi43IDEtNzEuMy44LTE3LjIgMy43LTI2LjUgNi4xLTMyLjggMy4yLTguMiA3LTE0LjEgMTMuMi0yMC4zIDYuMi02LjIgMTIuMS0xMCAyMC4zLTEzLjIgNi4yLTIuNCAxNS42LTUuMyAzMi44LTYuMSAxNi4zLS44IDIyLjYtMSA1NS41LTF6bTExMCAyOS4zYy0xMS43IDAtMjEuMiA5LjUtMjEuMiAyMS4yczkuNSAyMS4yIDIxLjIgMjEuMiAyMS4yLTkuNSAyMS4yLTIxLjItOS41LTIxLjItMjEuMi0yMS4yek0zMDAgMjA5LjRjLTUwLjEgMC05MC42IDQwLjYtOTAuNiA5MC42IDAgNTAuMSA0MC42IDkwLjYgOTAuNiA5MC42IDUwLjEgMCA5MC42LTQwLjYgOTAuNi05MC42IDAtNTAuMS00MC41LTkwLjYtOTAuNi05MC42em0wIDMxLjhjMzIuNSAwIDU4LjggMjYuMyA1OC44IDU4LjhzLTI2LjMgNTguOC01OC44IDU4LjgtNTguOC0yNi4zLTU4LjgtNTguOCAyNi4zLTU4LjggNTguOC01OC44eiIgc3R5bGU9ImZpbGw6I2ZmZiIvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.youtube-c { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA3MiA3MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCg0KPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCg0KPHBhdGggZD0iTTM2LDcyIEwzNiw3MiBDNTUuODgyMjUxLDcyIDcyLDU1Ljg4MjI1MSA3MiwzNiBMNzIsMzYgQzcyLDE2LjExNzc0OSA1NS44ODIyNTEsLTMuNjUyMzEwMjZlLTE1IDM2LDAgTDM2LDAgQzE2LjExNzc0OSwzLjY1MjMxMDI2ZS0xNSAtMi40MzQ4NzM1ZS0xNSwxNi4xMTc3NDkgMCwzNiBMMCwzNiBDMi40MzQ4NzM1ZS0xNSw1NS44ODIyNTEgMTYuMTE3NzQ5LDcyIDM2LDcyIFoiIGZpbGw9IiNGRjAwMDIiLz4NCg0KPHBhdGggZD0iTTMxLjA0NCw0Mi4yNjk5MTYgTDMxLjA0MjUsMjguNjg3NzQxNiBMNDQuMDExNSwzNS41MDIyNDM3IEwzMS4wNDQsNDIuMjY5OTE2IFogTTU5LjUyLDI2LjMzNDE2MjcgQzU5LjUyLDI2LjMzNDE2MjcgNTkuMDUwNSwyMy4wMDMxOTkgNTcuNjEyLDIxLjUzNjM2NjUgQzU1Ljc4NjUsMTkuNjEwMjk5IDUzLjc0MDUsMTkuNjAxMjM1MiA1Mi44MDMsMTkuNDg5NDQ3NyBDNDYuMDg2LDE5IDM2LjAxMDUsMTkgMzYuMDEwNSwxOSBMMzUuOTg5NSwxOSBDMzUuOTg5NSwxOSAyNS45MTQsMTkgMTkuMTk3LDE5LjQ4OTQ0NzcgQzE4LjI1OCwxOS42MDEyMzUyIDE2LjIxMzUsMTkuNjEwMjk5IDE0LjM4NjUsMjEuNTM2MzY2NSBDMTIuOTQ4LDIzLjAwMzE5OSAxMi40OCwyNi4zMzQxNjI3IDEyLjQ4LDI2LjMzNDE2MjcgQzEyLjQ4LDI2LjMzNDE2MjcgMTIsMzAuMjQ2NzIzMiAxMiwzNC4xNTc3NzMxIEwxMiwzNy44MjU2MDk4IEMxMiw0MS43MzgxNzAzIDEyLjQ4LDQ1LjY0OTIyMDIgMTIuNDgsNDUuNjQ5MjIwMiBDMTIuNDgsNDUuNjQ5MjIwMiAxMi45NDgsNDguOTgwMTgzOSAxNC4zODY1LDUwLjQ0NzAxNjUgQzE2LjIxMzUsNTIuMzczMDgzOSAxOC42MTIsNTIuMzEyNjU4MyAxOS42OCw1Mi41MTM1NzM2IEMyMy41Miw1Mi44ODUxOTEzIDM2LDUzIDM2LDUzIEMzNiw1MyA0Ni4wODYsNTIuOTg0ODkzNiA1Mi44MDMsNTIuNDk1NDQ1OSBDNTMuNzQwNSw1Mi4zODIxNDc4IDU1Ljc4NjUsNTIuMzczMDgzOSA1Ny42MTIsNTAuNDQ3MDE2NSBDNTkuMDUwNSw0OC45ODAxODM5IDU5LjUyLDQ1LjY0OTIyMDIgNTkuNTIsNDUuNjQ5MjIwMiBDNTkuNTIsNDUuNjQ5MjIwMiA2MCw0MS43MzgxNzAzIDYwLDM3LjgyNTYwOTggTDYwLDM0LjE1Nzc3MzEgQzYwLDMwLjI0NjcyMzIgNTkuNTIsMjYuMzM0MTYyNyA1OS41MiwyNi4zMzQxNjI3IEw1OS41MiwyNi4zMzQxNjI3IFoiIGZpbGw9IiNGRkYiLz4NCg0KPC9nPg0KDQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; display:inline-block; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.facebook-c:hover, div.facebook-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.twitter-c:hover, div.twitter-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.email-c:hover, div.email-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.instagram-c:hover, div.instagram-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.youtube-c:hover, div.youtube-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
JS
Share Page
Letzte Änderung: 12.09.2024 - 18:06 Uhr
×
Seite teilen: