Footer (Default)
CODE
×
HTML
<div class='footer oe'> <div class='signet-oe-footer'> <img class='logo-oe-footer' src='img/Kanton-Bern.svg'> <div class='logo-caption-footer'>Internetportal des Kantons Bern</div> </div> <div class='intro-footer'>Offizielle Website des Kantons Bern: News, E-Services, aktuelle Themen, Übersicht der kantonalen Behörden, Gesetze, Jobs, ...</div> <p class='copyright cr-kbe'>© 2024 - Katnon Bern</p> <div class='label-footer'>Folgen Sie uns</div> <div class='sm-icons'> <div class='instagram-b'></div> <a class='tw-ico'></a> <a class='youtube-ico'></a> <a class='fb-ico'></a> </div> <div class='footer-nav'> <a class='footer-menue f1'>Kontakt</a> <a class='footer-menue f2'>Datenschutz</a> <a class='footer-menue f3'>Impressum</a> </div> <div class='footer-bg'></div> </div>
CSS
@media screen and (max-width: 1119px) { div.footer.oe { padding-right: 30px; padding-left: 30px; height: 240px; } } @media screen and (max-width: 767px) { div.footer.oe { padding-right: 20px; padding-left: 20px; } } div.footer { z-index: 9999; } @media screen and (min-width: 1440px) { div.footer-bg { width: 100vw; } } a.footer-menue:hover::after, a.footer-menue:focus::after, a.footer-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.sm-icons { height: 32px !important; left:0; padding-left: 30px; padding-right: 30px; overflow:hidden; } div.footer-nav { bottom: 70px; left:0; padding-left: 30px; padding-right: 30px; } div.signet-oe-footer { display:none; } } @media screen and (max-width: 767px) { div.sm-icons { padding-left: 20px; padding-right: 20px; } div.footer-nav { padding-left: 20px; padding-right: 20px; } } div.instagram-b { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwMCA2MDAiIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj4NCiAgPGNpcmNsZSBjeD0iMzAwIiBjeT0iMzAwIiByPSIyOTcuNSIgZmlsbD0iIzMzMyIgLz4NCiAgPHBhdGggZD0iTTMwMCAxMjMuNWMtNDcuOSAwLTU0IC4yLTcyLjggMS4xLTE4LjguOS0zMS42IDMuOC00Mi44IDguMi0xMS42IDQuNS0yMS41IDEwLjUtMzEuMyAyMC40LTkuOCA5LjgtMTUuOCAxOS43LTIwLjQgMzEuMy00LjQgMTEuMi03LjQgMjQuMS04LjIgNDIuOC0uOCAxOC44LTEuMSAyNC44LTEuMSA3Mi44IDAgNDcuOS4yIDUzLjkgMS4xIDcyLjguOSAxOC44IDMuOCAzMS42IDguMiA0Mi44IDQuNSAxMS42IDEwLjUgMjEuNSAyMC40IDMxLjMgOS44IDkuOCAxOS43IDE1LjkgMzEuMyAyMC40IDExLjIgNC40IDI0LjEgNy4zIDQyLjggOC4yIDE4LjguOSAyNC44IDEuMSA3Mi44IDEuMSA0Ny45IDAgNTMuOS0uMiA3Mi44LTEuMSAxOC44LS45IDMxLjYtMy44IDQyLjktOC4yIDExLjYtNC41IDIxLjQtMTAuNiAzMS4yLTIwLjQgOS44LTkuOCAxNS44LTE5LjcgMjAuNC0zMS4zIDQuMy0xMS4yIDcuMy0yNCA4LjItNDIuOC44LTE4LjggMS4xLTI0LjggMS4xLTcyLjggMC00Ny45LS4yLTUzLjktMS4xLTcyLjgtLjktMTguOC0zLjktMzEuNi04LjItNDIuOC00LjUtMTEuNi0xMC42LTIxLjUtMjAuNC0zMS4zLTkuOC05LjgtMTkuNi0xNS44LTMxLjMtMjAuNC0xMS4zLTQuNC0yNC4xLTcuMy00Mi45LTguMi0xOC44LS45LTI0LjgtMS4xLTcyLjctMS4xem0tMTUuOCAzMS44SDMwMGM0Ny4xIDAgNTIuNy4yIDcxLjMgMSAxNy4yLjggMjYuNSAzLjcgMzIuOCA2LjEgOC4yIDMuMiAxNC4xIDcgMjAuMyAxMy4yIDYuMiA2LjIgMTAgMTIuMSAxMy4yIDIwLjMgMi40IDYuMiA1LjMgMTUuNiA2LjEgMzIuOC44IDE4LjYgMSAyNC4yIDEgNzEuMyAwIDQ3LjEtLjIgNTIuNy0xIDcxLjMtLjggMTcuMi0zLjcgMjYuNS02LjEgMzIuOC0zLjIgOC4yLTcgMTQuMS0xMy4yIDIwLjMtNi4yIDYuMi0xMiAxMC0yMC4zIDEzLjItNi4yIDIuNC0xNS42IDUuMy0zMi44IDYuMS0xOC42LjgtMjQuMiAxLTcxLjMgMS00Ny4xIDAtNTIuNy0uMi03MS4zLTEtMTcuMi0uOC0yNi41LTMuNy0zMi44LTYuMS04LjItMy4yLTE0LjEtNy0yMC4zLTEzLjItNi4yLTYuMi0xMC0xMi4xLTEzLjItMjAuMy0yLjQtNi4yLTUuMy0xNS42LTYuMS0zMi44LS44LTE4LjYtMS0yNC4yLTEtNzEuMyAwLTQ3LjEuMi01Mi43IDEtNzEuMy44LTE3LjIgMy43LTI2LjUgNi4xLTMyLjggMy4yLTguMiA3LTE0LjEgMTMuMi0yMC4zIDYuMi02LjIgMTIuMS0xMCAyMC4zLTEzLjIgNi4yLTIuNCAxNS42LTUuMyAzMi44LTYuMSAxNi4zLS44IDIyLjYtMSA1NS41LTF6bTExMCAyOS4zYy0xMS43IDAtMjEuMiA5LjUtMjEuMiAyMS4yczkuNSAyMS4yIDIxLjIgMjEuMiAyMS4yLTkuNSAyMS4yLTIxLjItOS41LTIxLjItMjEuMi0yMS4yek0zMDAgMjA5LjRjLTUwLjEgMC05MC42IDQwLjYtOTAuNiA5MC42IDAgNTAuMSA0MC42IDkwLjYgOTAuNiA5MC42IDUwLjEgMCA5MC42LTQwLjYgOTAuNi05MC42IDAtNTAuMS00MC41LTkwLjYtOTAuNi05MC42em0wIDMxLjhjMzIuNSAwIDU4LjggMjYuMyA1OC44IDU4LjhzLTI2LjMgNTguOC01OC44IDU4LjgtNTguOC0yNi4zLTU4LjgtNTguOCAyNi4zLTU4LjggNTguOC01OC44eiIgc3R5bGU9ImZpbGw6I2ZmZiIvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; margin-right: 25px; float:left; } div.label-footer { position:absolute; right:0; padding-left: 45px; padding-right: 45px; top: 35px; color: var(--black); font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; font-family: 'Roboto'; font-style: normal; font-weight: 400; letter-spacing: 0.01rem; word-spacing: 0.025rem; } div.intro-footer { color: var(--black); font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; font-family: 'Roboto'; font-style: normal; font-weight: 400; letter-spacing: 0.01rem; word-spacing: 0.025rem; max-width: 340px; width:100%; } a.fb-ico { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQogIDxkZWZzPg0KICA8c3R5bGU+DQogICAgLnN0MHtmaWxsOiMzMzN9DQogICAgLnN0MXtmaWxsOiNmZmZ9DQogIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LDBBMTYsMTYsMCwxLDAsMzIsMTYsMTYsMTYsMCwwLDAsMTYsMFoiLz4NCiAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjY5LDI0LjloMy42NzlWMTZoMi40NTRsLjMyNS0zLjA2OEgxNy4zNjlsMC0xLjUzNmMwLS44LjA3Ni0xLjIyOSwxLjIyNC0xLjIyOWgxLjUzNFY3LjFIMTcuNjc2Yy0yLjk0OSwwLTMuOTg2LDEuNDg5LTMuOTg2LDMuOTkydjEuODQySDExLjg1MlYxNkgxMy42OXY4LjlaIi8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; display:inline-block; float:left; cursor:pointer; } a.tw-ico { background-image: url('../img/twitter-black-white.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; display:inline-block; float:left; } a.footer-menue.f1 { margin-left: 0px !important; } a.footer-menue.f3 { margin-right: 0; } img.logo-oe-footer { cursor:pointer; max-width: 110px; } div.logo-caption-footer { font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); margin-top: 12px; max-width: 210px; font-size: 12px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } p.copyright.cr-kbe { position:absolute; bottom: 29px; left:0; } div.footer-bg { border-top: 1px solid rgba(238,238,238,1); background-color: rgba(252,248,243,1); width: 100%; height: 320px; } a.youtube-ico { background-image: url('../img/youtube.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; display:inline-block; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; float:left; } div.sm-icons > a.fb-ico { margin-right: 0; } div.footer.oe > div.footer-bg { position: absolute; top: 0px; left: 0px; z-index: -1; } div.instagram-b:hover, div.instagram-b:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.fb-ico:hover, a.fb-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.tw-ico:hover, a.tw-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.youtube-ico:hover, a.youtube-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } @media screen and (max-width: 1119px) { div.label-footer { padding-left: 30px; padding-right: 30px; left:0; } div.intro-footer { display:none; } img.logo-oe-footer { display:none; } div.footer-bg { height: 240px; } } @media screen and (max-width: 767px) { div.label-footer { padding-left: 20px; padding-right: 20px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.footer-menue { font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); display:inline-block; text-decoration:none; height: 18px; line-height: 1.5; margin: 0 calc(0.5vw + 30px) 0 0; } a.footer-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.footer-menue:hover::after, a.footer-menue:focus::after, a.footer-menue:active::after { transform: scaleX(1); } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } } p.copyright { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.02rem; word-spacing: 0.05rem; color: var(--black); padding-left: 45px; padding-right: 45px; margin-bottom: 0; max-width: none; margin-top: 20px; margin-left: 0; width: auto; } @media screen and (max-width: 1119px) { p.copyright { padding-left: 30px; padding-right: 30px; } } @media screen and (max-width: 767px) { p.copyright { width:100%; padding-left: 20px; padding-right: 20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
JS
Footer (Default)
Letzte Änderung: 11.09.2024 - 09:45 Uhr
×