<div class="hero-landingpage-wrapper dark-blue">
<div class="hero-landingpage-inner">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">SmartCamp Transformation Spezialist:in</h1>
<div class="hero-text">Sind Sie fit für die Herausforderungen der aktuellen Arbeitswelt? Als Transformation Spezialist:in nehmen Sie eine Schlüsselfunktion in Ihrer Unternehmung ein und gestalten die Transformation von Abläufen, Abteilungen oder ganzen Betrieben aktiv mit.</div>
<a class="btn btn-primary" href="#lorem" target="_self">Jetzt kostenlos beraten lassen</a>
</div>
<div class="hero-image">
<div class="hero-image-inner" style="background-image: url( https://picsum.photos/1900/1200)"></div>
</div>
<div class="hero-video">
<div class="hero-video-inner">
<iframe src="https://www.youtube-nocookie.com/embed/pj9cNnT7PJs?controls=0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="hero-landingpage-wrapper {{ style }}">
<div class="hero-landingpage-inner">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">{{ title }}</h1>
{% if text != '' %}
<div class="hero-text">{{ text }}</div>
{% endif %}
{% if link_href %}
<a class="btn btn-primary" href="{{ link_href }}" target="{{ link_target }}">{{ link_text }}</a>
{% endif %}
</div>
{% if img_class %}
<div class="hero-image">
<div class="hero-image-inner {{ img_class }}"></div>
</div>
{% elseif media_src %}
<div class="hero-image">
<div class="hero-image-inner" style="background-image: url( {{ media_src }})"></div>
</div>
{% endif %}
{% if video_url %}
<div class="hero-video">
<div class="hero-video-inner">
<iframe src="{{ video_url }}?controls=0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{
"style": "dark-blue",
"title": "SmartCamp Transformation Spezialist:in",
"text": "Sind Sie fit für die Herausforderungen der aktuellen Arbeitswelt? Als Transformation Spezialist:in nehmen Sie eine Schlüsselfunktion in Ihrer Unternehmung ein und gestalten die Transformation von Abläufen, Abteilungen oder ganzen Betrieben aktiv mit.",
"media_src": "https://picsum.photos/1900/1200",
"img_class": "",
"link_href": "#lorem",
"link_text": "Jetzt kostenlos beraten lassen",
"link_target": "_self",
"video_url": "https://www.youtube-nocookie.com/embed/pj9cNnT7PJs"
}
.hero-landingpage-wrapper {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
&.dark-blue {
background: $dark-blue;
color: #fff;
}
&.white {
background: #fff;
color: #000;
}
.hero-landingpage-inner {
display: flex;
align-items: flex-start;
padding-bottom: $space-l;
padding-top: $space-l;
@include media-breakpoint-up(lg) {
padding-bottom: $space-l * 3;
padding-top: $space-l * 3;
}
position: static;
.hero-content {
}
.hero-content {
margin-bottom: $space-m;
@include media-breakpoint-up(lg) {
width: 50%;
margin-bottom: 0;
}
}
.hero-image {
width: 100%;
position: relative;
.hero-image-inner {
width: 100%;
padding-bottom: 56%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@include media-breakpoint-up(lg) {
position: absolute;
top: 3rem;
bottom: 3rem;
left: 50%;
right: 0;
width: auto;
overflow: hidden;
.hero-image-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding-bottom: 56%;
}
}
}
.hero-video {
width: 100%;
position: relative;
z-index: 4;
.hero-video-inner {
width: 100%;
padding-bottom: 56%;
position: relative;
}
@include media-breakpoint-up(lg) {
position: absolute;
top: 3rem;
bottom: 3rem;
left: 50%;
right: 0;
width: auto;
overflow: hidden;
.hero-video-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding-bottom: 56%;
.video {
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
@include media-breakpoint-up(lg) {
align-items: center;
}
}
.container {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: static;
}
.hero-title {
color: inherit;
max-width: 50rem;
@extend .hero-title;
margin-bottom: $space-s;
}
.hero-text {
color: inherit;
max-width: 50rem;
@extend .hero-text;
}
.btn {
margin-top: $space-m;
height: 3.5rem;
}
}
There are no notes for this item.