<footer class="footer">
    <div class="footer-inner">
        <div class="row">
            <div class="col-sm-6 col-lg-3 order-sm-1 order-lg-6">
                <div class="newsletter">
                    <h3 class="label-title">Bleiben Sie à jour!</h3> <a href="#" class="newsletter-text">Abonnieren Sie unseren Newsletter</a>
                </div>

            </div>

            <div class="col-sm-3 col-lg-3 order-2 order-lg-3">
                <h3 class="label-title">Soziale Medien</h3>
                <ul class="social-media-links">
                    <li><a href=""><i class="fab fa-fw fa-facebook-f"></i> Facebook</a></li>
                    <li><a href=""><i class="fab fa-fw fa-twitter"></i> Twitter</a></li>
                    <li><a href=""><i class="fab fa-fw fa-xing"></i> Xing</a></li>
                    <li><a href=""><i class="fab fa-fw fa-linkedin-in"></i> LinkedIn</a></li>
                </ul>
            </div>
            <div class="col-sm-3 col-lg-3 order-3 order-lg-1">
                <h3 class="label-title">Quicklinks</h3>
                <ul>
                    <li><a href="">Impressum</a></li>
                    <li><a href="">Datenschutzerklärung</a></li>
                    <li><a href="">Nutzungsbedinungen</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-lg-3 order-4 order-lg-2">
                <h3 class="label-title">Kontakt</h3>
                <p>KV Business School Zürich AG<br> Bildungszentrum Sihlpost<br> Sihlpostgasse 2<br> 8004 Zürich<br> T <a href="tel:+41449743000">+41 44 974 30 00</a><br> <a href="mailto:info@kvz-weiterbildung.ch">info@kvz-weiterbildung.ch</a> </p>

            </div>

            <div class="col-sm-6 col-lg-3 order-6 order-sm-5 order-lg-4 footer-dark">
                <h3 class="label-title">Netzwerk</h3>
                <ul>
                    <li><a href="">Kaufmännischer Verband Schweiz <i class="fal fa-arrow-up rotate-45"></i></a></li>
                    <li><a href="">KV Zürich, Berufsfachschule <i class="fal fa-arrow-up rotate-45"></i></a></li>
                </ul> <a href="#"><img src="/images/logo-kfmv.svg"></a> <a href="#"><img src="/images/logo-kvz.svg"></a>

            </div>
            <div class="col-sm-12 col-lg-3 order-5 order-sm-6 order-lg-5">
                <small>Copyright &copy; 2020</small>
            </div>
        </div>
    </div>
</footer>
<footer class="footer">
    <div class="footer-inner">
        <div class="row">
            <div class="col-sm-6 col-lg-3 order-sm-1 order-lg-6">
                {{ newsletter }}
                
            </div> 
            
            <div class="col-sm-3 col-lg-3 order-2 order-lg-3">
                {{ social_media }}    
            </div>
            <div class="col-sm-3 col-lg-3 order-3 order-lg-1">
                {{ quick_links }}
            </div>
            <div class="col-sm-6 col-lg-3 order-4 order-lg-2">
                {{ contact }}
                
            </div>
            
            <div class="col-sm-6 col-lg-3 order-6 order-sm-5 order-lg-4 footer-dark">
                {{ network_links }}
                
            </div>
            <div class="col-sm-12 col-lg-3 order-5 order-sm-6 order-lg-5">
                <small>{{ copyright_text }}</small>
            </div>
        </div>
    </div>
</footer>
{
  "newsletter": "<div class=\"newsletter\"> <h3 class=\"label-title\">Bleiben Sie à jour!</h3> <a href=\"#\" class=\"newsletter-text\">Abonnieren Sie unseren Newsletter</a> </div>",
  "quick_links": "<h3 class=\"label-title\">Quicklinks</h3> <ul> <li><a href=\"\">Impressum</a></li> <li><a href=\"\">Datenschutzerklärung</a></li> <li><a href=\"\">Nutzungsbedinungen</a></li> </ul>",
  "social_media": "<h3 class=\"label-title\">Soziale Medien</h3> <ul class=\"social-media-links\"> <li><a href=\"\"><i class=\"fab fa-fw fa-facebook-f\"></i> Facebook</a></li> <li><a href=\"\"><i class=\"fab fa-fw fa-twitter\"></i> Twitter</a></li> <li><a href=\"\"><i class=\"fab fa-fw fa-xing\"></i> Xing</a></li> <li><a href=\"\"><i class=\"fab fa-fw fa-linkedin-in\"></i> LinkedIn</a></li> </ul>",
  "contact": "<h3 class=\"label-title\">Kontakt</h3> <p>KV Business School Zürich AG<br> Bildungszentrum Sihlpost<br> Sihlpostgasse 2<br> 8004 Zürich<br> T <a href=\"tel:+41449743000\">+41 44 974 30 00</a><br> <a href=\"mailto:info@kvz-weiterbildung.ch\">info@kvz-weiterbildung.ch</a> </p>",
  "network_links": "<h3 class=\"label-title\">Netzwerk</h3> <ul> <li><a href=\"\">Kaufmännischer Verband Schweiz <i class=\"fal fa-arrow-up rotate-45\"></i></a></li> <li><a href=\"\">KV Zürich, Berufsfachschule <i class=\"fal fa-arrow-up rotate-45\"></i></a></li> </ul> <a href=\"#\"><img src=\"/images/logo-kfmv.svg\"></a> <a href=\"#\"><img src=\"/images/logo-kvz.svg\"></a>",
  "copyright_text": "Copyright &copy; 2020"
}
  • Content:
    .footer {
    	overflow: hidden;
    	background: #f2f2f2;
    	padding-bottom: 2rem;
    	margin-top: 6rem;
    
    	@include media-breakpoint-up(lg) {
    		margin-top: 12rem;
    	}
    
    	.footer-inner {
    		@extend .container;
    		color: $secondary;
    		ul {
    			@extend .list-unstyled;
    
    			li {
    				a {
    				}
    			}
    		}
    		.social-media-links {
    			svg {
    				@include media-breakpoint-up(sm) {
    					display: none;
    				}
    				@include media-breakpoint-up(lg) {
    					display: inline-block;
    				}
    			}
    		}
    
    		.rotate-45 {
    			transform: rotate(45deg);
    		}
    		h3 {
    			margin-bottom: 1.5rem;
    		}
    
    		[class^="col-"] {
    			padding-top: 1rem;
    			padding-bottom: 1rem;
    
    			@include media-breakpoint-up(md) {
    				padding-top: 2rem;
    				padding-bottom: 2rem;
    			}
    		}
    
    		.label-title {
    			font-family: "Effra";
    			margin-bottom: 0.5rem;
    		}
    
        .copyright-language-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
        }
    	}
    
    	.footer-dark {
    		position: relative;
    		padding-top: 2rem !important;
    
    		* {
    			position: relative;
    			z-index: 2;
    		}
    		h3 {
    			color: $primary;
    		}
    		&::before {
    			content: "";
    			z-index: 0;
    			position: absolute;
    			top: 0;
    			left: 0;
    			height: 1000px;
    			background: $secondary;
    			width: 3000px;
    			left: -4rem;
    			top: -1rem;
    
    			@include media-breakpoint-up(sm) {
    				left: -1rem;
    			}
    			@include media-breakpoint-up(md) {
    				top: 0;
    			}
    		}
    		a {
    			display: block;
    			color: #fff;
    			white-space: nowrap;
    
    			svg {
    				margin-left: 0.5rem;
    				color: $primary;
    			}
    
    			&:hover,
    			&:focus {
    				color: $primary;
    			}
    		}
    		img {
    			margin-top: 2rem;
    			max-width: 100%;
    			width: 100%;
          height: auto;
    
    			@include media-breakpoint-up(sm) {
    				width: auto;
    			}
    		}
    	}
    
    	small {
    		margin-top: 2rem;
    		margin-bottom: 2rem;
    		display: block;
    		@include media-breakpoint-up(sm) {
    			margin-top: 0;
    			margin-bottom: 0;
    		}
    	}
    	.newsletter {
    		max-width: 24rem;
    		h3 {
    			color: $primary;
    		}
    		.newsletter-text {
    			font-size: 2.4rem;
    			line-height: 1.2;
    			font-family: "Feijoa";
    			font-style: italic;
    		}
    	}
    }
    
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: components/03-layout/footer/footer.scss
  • Size: 2.1 KB

There are no notes for this item.