Footer
CODE
×
HTML
<footer class='container v2'> <div class='footer-wrapper'><div class="row"> <div class="col-4 footer-logo-wrapper"> <img src="img/Lantal-Logo_white.svg" width="0" height="0"> </div> <nav class='col-8 language-switch d-none d-md-flex justify-content-end align-items-center v2' aria-label="Language Switch"> <a href="#" class="menue-item">DE</a> <span class="divider-language"></span> <a href="#" class="menue-item selected language-en">EN</a> </nav> </div> <div class="row"> <div class="col-12 col-md-6 col-lg-4"> <p>With over 60 years of experience in the aviation industry, Lantal is your competent partner in all matters.</p> <div class="social-media"> <a href="#" title="Linkedin" rel="noopener noreferrer" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 512 512"> <style> .st0 {fill:#000} .st1 {fill:#fff} </style> <circle class="st0" cx="255" cy="255" r="255" transform="translate(2)" /> <path class="st1" d="M36.934,165H2.726V54.839H36.934ZM19.811,39.812a19.906,19.906,0,1,1,19.811-20A19.979,19.979,0,0,1,19.811,39.812ZM164.967,165H130.832V111.375c0-12.78-.258-29.17-17.786-29.17-17.786,0-20.511,13.885-20.511,28.25V165H58.363V54.839H91.172V69.866h.479c4.567-8.655,15.723-17.789,32.367-17.789,34.621,0,40.986,22.8,40.986,52.411V165Z" transform="translate(179.5 156.999)" /> </svg> </a> <a href="#" title="Instagram" rel="noopener noreferrer" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 512 512"> <style> .st0 {fill:#000} .st1 {fill:#fff} </style> <circle class="st0" cx="255" cy="255" r="255" transform="translate(2)" /> <path class="st1" d="M90,0C65.55,0,62.5.112,52.9.54,43.313.99,36.787,2.5,31.05,4.725A44.074,44.074,0,0,0,15.1,15.1,43.913,43.913,0,0,0,4.725,31.05C2.5,36.787.982,43.312.54,52.9S0,65.55,0,90s.112,27.5.54,37.1c.45,9.578,1.957,16.11,4.185,21.848A44.137,44.137,0,0,0,15.1,164.895a44.011,44.011,0,0,0,15.945,10.38c5.745,2.22,12.27,3.742,21.847,4.185,9.6.45,12.652.54,37.1.54s27.5-.113,37.1-.54c9.578-.45,16.11-1.965,21.848-4.185a46,46,0,0,0,26.325-26.325c2.22-5.738,3.742-12.27,4.185-21.848.45-9.6.54-12.653.54-37.1s-.113-27.5-.54-37.1c-.45-9.578-1.965-16.118-4.185-21.848A44.172,44.172,0,0,0,164.895,15.1,43.851,43.851,0,0,0,148.95,4.725C143.212,2.5,136.68.982,127.1.54,117.5.09,114.45,0,90,0Zm0,16.2c24.022,0,26.888.12,36.375.532,8.775.413,13.537,1.868,16.7,3.112a29.617,29.617,0,0,1,17.085,17.077c1.23,3.165,2.7,7.927,3.1,16.7.427,9.495.525,12.345.525,36.375s-.112,26.888-.555,36.375c-.457,8.775-1.92,13.537-3.158,16.7a28.576,28.576,0,0,1-6.742,10.365,28.078,28.078,0,0,1-10.35,6.72c-3.15,1.23-7.988,2.7-16.763,3.1-9.555.427-12.368.525-36.442.525s-26.9-.112-36.443-.555c-8.782-.457-13.62-1.92-16.77-3.158A27.871,27.871,0,0,1,26.22,153.33a27.328,27.328,0,0,1-6.75-10.35c-1.237-3.15-2.692-7.988-3.15-16.763-.337-9.45-.458-12.368-.458-36.33s.12-26.895.458-36.457c.458-8.775,1.912-13.6,3.15-16.755a26.679,26.679,0,0,1,6.75-10.357,26.62,26.62,0,0,1,10.342-6.735c3.15-1.245,7.882-2.708,16.658-3.157,9.562-.338,12.375-.45,36.442-.45L90,16.2Zm0,27.585A46.215,46.215,0,1,0,136.215,90,46.212,46.212,0,0,0,90,43.785ZM90,120a30,30,0,1,1,30-30A29.992,29.992,0,0,1,90,120Zm58.845-78.037a10.8,10.8,0,1,1-10.8-10.792A10.808,10.808,0,0,1,148.845,41.962Z" transform="translate(170 168)" /> </svg> </a> <a href="#" title="YouTube" rel="noopener noreferrer" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 512 512"> <style> .st0 {fill:#000} .st1 {fill:#fff} </style> <circle class="st0" cx="255" cy="255" r="255" transform="translate(2)" /> <path class="st1" d="M187.08,25.4A23.874,23.874,0,0,0,170.282,8.5c-14.817-4-74.232-4-74.232-4s-59.414,0-74.232,4A23.874,23.874,0,0,0,5.02,25.4C1.05,40.316,1.05,71.432,1.05,71.432s0,31.115,3.97,46.029a23.518,23.518,0,0,0,16.8,16.637c14.817,4,74.232,4,74.232,4s59.414,0,74.232-4a23.518,23.518,0,0,0,16.8-16.637c3.97-14.913,3.97-46.029,3.97-46.029s0-31.115-3.97-46.029ZM76.618,99.682v-56.5l49.659,28.251L76.618,99.682Z" transform="translate(160.95 187.734)" /> </svg> </a> </div> </div> <div class="info-block-wrapper col-12 col-md-3 col-lg-2 offset-lg-2"> <h2 class="info-block-title text-uppercase">Get In Touch</h2> <p> Lantal Textiles AG<br> Dorfgasse 5<br> 4900 Langenthal<br> Schweiz<br> </p> <p> <a href="mailto:foo@bar.baz">foo@bar.baz</a> </p> <p> <a href="tel:+41 123 456789">+41 123 456789</a> </p> </div> <div class="d-none d-lg-block col-lg-2"> <h2 id="service-links" class="footer-title text-uppercase">Service Links</h2> <nav aria-labelledby="service-links" class="footer-nav"> <ul> <li> <a href="#" class="menue-item">Kontakt & Impressum</a> </li> <li> <a href="#" class="menue-item">AGB & Datenschutz</a> </li> <li> <a href="#" class="menue-item">Newsletter An-/Abmeldung</a> </li> <li> <a href="#" class="menue-item">Download-Center</a> </li> <li> <a href="#" class="menue-item">Standorte</a> </li> </ul> </nav> </div> <div class="col-12 col-md-3 col-lg-2"> <h2 id="other-members" class="footer-title text-uppercase">Other Members of the lantal group</h2> <nav aria-labelledby="other-members" class="footer-nav"> <ul> <li> <a class="menue-item" href="https://www.snowflake.ch" rel="noopener noreferrer" target="_blank"> Zum Lantal Portal </a> </li> <li> <a class="menue-item" href="https://www.snowflake.ch" rel="noopener noreferrer" target="_blank"> Ground Transportation </a> </li> <li> <a class="menue-item" href="https://www.snowflake.ch" rel="noopener noreferrer" target="_blank"> Airline Services Interiors </a> </li> <li> <a class="menue-item" href="https://www.snowflake.ch" rel="noopener noreferrer" target="_blank"> Gierlings Velpor </a> </li> <li> <a class="menue-item" href="https://www.snowflake.ch" rel="noopener noreferrer" target="_blank"> Raymakers </a> </li> </ul> </nav> </div> <nav class='col-12 language-switch language-switch-mobile d-flex d-md-none align-items-center' aria-label="Language Switch" role="list"> <a href="#" class="menue-item language-de" role="listitem">DE</a> <span class="divider-language" aria-hidden="true"></span> <a href="#" class="menue-item selected language-en" role="listitem">EN</a> </nav> </div></div> </footer>
CSS
@media screen and (max-width: 991px) { footer.container.v2 { margin-top: 120px; padding-top: 54px; } } @media screen and (max-width: 575px) { footer.container.v2 { margin-top: 80px; padding-top: 48px; } } footer p a { color: var(--fc8); text-decoration: none; } footer.v2 .footer-description { /* display: flex; width: 100%; margin-top: 10px; margin-bottom: 20px; height: auto; font-size: var(--fs-xs); line-height: var(--lh-l); color: var(--fc7); font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); letter-spacing: var(--bf-ls); word-spacing: var(--bf-ws); max-width: 400px; */ } footer.v2 div.social-media > a > svg { height: 46px; width: 46px; } footer.v2 a.menue-item { margin: 0; border-bottom: 1px solid transparent; color: var(--fc8); } footer.v2 .language-switch { display:inline-block; white-space: nowrap; gap: 9px; } footer.v2 li a[href^="http"]::before { background-image: url('data:image/svg+xml;utf8,
'); transition: all 300ms ease-in-out; } footer.v2 .language-switch-mobile { margin-top: 44px; } footer.v2 .divider-language { width: 3px; height: 3px; background-color: var(--bc5); border-radius: 50%; } footer.v2 .row + .row { margin-top: 24px } footer.v2 li a[href^="http"] { text-indent: 0; padding-left: 21px; } .footer-bottom-nav li, .footer-nav li { padding-left: 0; } .footer-bottom-nav li::before, .footer-nav li::before { display: none; } footer.v2 .info-block-title, footer.v2 .footer-title { color: var(--fc8); letter-spacing: var(--bf-ls); word-spacing: var(--bf-ws); text-align: left; } footer.v2 p { display: block; font-size: var(--fs-xxs); margin-bottom: 20px; letter-spacing: var(--bf-ls); word-spacing: var(--bf-ws); color: var(--fc7); margin-top: 12px; } footer.v2 .info-block-links a { display: block; margin-bottom: 17px; } .footer-bottom-nav ul { display: flex; justify-content: flex-end; column-gap: 57px } .footer-bottom .copyright { color: var(--fc7); margin: auto 0; letter-spacing: var(--bf-ls); word-spacing: var(--bf-ws); font-size: var(--fs-xxs); line-height: var(--lh-s); } footer.v2 .info-block-wrapper { margin-bottom: 30px; } /* Anfang LANTAL spezifische Anpassung */ footer svg .st0 { fill: var(--fc7) } footer svg .st1 { fill: var(--bc1) } footer.v2 ul li { margin-top: 1rem; margin-bottom: 1rem; } footer.v2 div.social-media > a:hover > svg .st0 { fill: var(--fec); } footer.v2 div.social-media > a:hover > svg .st1 { fill: var(--fsc2); } footer.v2 a.menue-item:hover { color: var(--fc7); } footer.v2 .language-switch .menue-item.selected, footer.v2 .language-switch .menue-item.selected:hover { cursor: default; color: var(--fc7) !important; border-bottom: 1px solid var(--fc7); } footer.v2 li a[href^="http"]:hover::before { background-image: url('data:image/svg+xml;utf8,
'); transform: rotate(45deg); transition: all 300ms ease-in-out; } footer.v2 a.menue-item:hover { color: var(--fc7); } /* Ende LANTAL spezifische Anpassung !!! */ @media screen and (max-width: 767px) { .footer-logo-wrapper > img { width: 136px; height: auto; } footer.v2 .row + .row { margin-top: 20px; } .footer-bottom .row { flex-direction: column-reverse; } footer.v2 li { margin-bottom: 17px; } footer.v2 li:last-of-type { margin-bottom: 0; } .footer-bottom-nav ul { flex-wrap: wrap; justify-content: space-between; column-gap: 0; } footer.v2 div.social-media > a > svg { height: 42px; width: 42px; margin-right: 8px; } } @media screen and (min-width: 767px) { footer.v2 .row + .row { margin-top: 48px } .footer-logo-wrapper > img { width: 150px; height: auto; } footer.v2 .info-block-links a.menue-item, footer.v2 .info-block { font-size: var(--fs-xxs); line-height: var(--lh-m); } } @media screen and (max-width: 575px), screen and (max-height: 389px) { footer.v2 li { margin-left: 0; } .footer-bottom .copyright { margin-bottom: 20px; margin-top: 12px; } }
JS
Footer
Last Edit: Nov 29, 2023, 2:12pm
×