<div>landing-page-header
<header class="landing-page-header landing-page-header-bg-image">
<div class="landing-page-header__body">
<div>
<h1 class="landing-page-header__title landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br>Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
und Geschäftsmodelle.</div><i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
</div>
</header>landing-page-header--red
<header class="landing-page-header landing-page-header--red landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--red">
<div>
<h1 class="landing-page-header__title landing-page-header__title--red landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br>Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
und Geschäftsmodelle.</div><i class="icon icon-chevron-down landing-page-header__down-arrow landing-page-header__down-arrow--red"></i>
</div>
</header>landing-page-header--blue
<header class="landing-page-header landing-page-header--blue landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--blue">
<div>
<h1 class="landing-page-header__title landing-page-header__title--blue landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br>Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text landing-page-header__text--blue">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
und Geschäftsmodelle.</div><i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
</div>
</header>landing-page-header--centered
<header class="landing-page-header landing-page-header--centered landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--centered">
<div>
<h1 class="landing-page-header__title landing-page-header__title--centered landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text">Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen
und Geschäftsmodelle.</div>
<img class="landing-page__down-arrow" src="../../assets/arrow-long-down-red.svg">
</div>
</header>landing-page-header--centered-big
<header class="landing-page-header landing-page-header--centered-big landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--centered-big">
<div>
<h1 class="landing-page-header__title landing-page-header__title--centered-big landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
</div>
<img class="landing-page__down-arrow" src="../../assets/arrow-long-down-red.svg">
</div>
</header>
</div>
<div>
landing-page-header
<header class="landing-page-header landing-page-header-bg-image">
<div class="landing-page-header__body">
<div>
<h1 class="landing-page-header__title landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br />
Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text">
Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
</div>
<i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
</div>
</header>
landing-page-header--red
<header class="landing-page-header landing-page-header--red landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--red">
<div>
<h1 class="landing-page-header__title landing-page-header__title--red landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br />
Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text">
Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
</div>
<i class="icon icon-chevron-down landing-page-header__down-arrow landing-page-header__down-arrow--red"></i>
</div>
</header>
landing-page-header--blue
<header class="landing-page-header landing-page-header--blue landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--blue">
<div>
<h1 class="landing-page-header__title landing-page-header__title--blue landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. <br />
Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text landing-page-header__text--blue">
Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
</div>
<i class="icon icon-chevron-down landing-page-header__down-arrow"></i>
</div>
</header>
landing-page-header--centered
<header class="landing-page-header landing-page-header--centered landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--centered">
<div>
<h1 class="landing-page-header__title landing-page-header__title--centered landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
</div>
<div class="landing-page-header__text">
Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
</div>
<img class="landing-page__down-arrow" src={context.app.uri('assets/arrow-long-down-red.svg')} />
</div>
</header>
landing-page-header--centered-big
<header class="landing-page-header landing-page-header--centered-big landing-page-header-bg-image">
<div class="landing-page-header__body landing-page-header__body--centered-big">
<div>
<h1 class="landing-page-header__title landing-page-header__title--centered-big landing-page-header-bg-image-text-box">Wir geben Technologie einen Sinn. Und ihren Ideen eine Zukunft.</h1>
</div>
<img class="landing-page__down-arrow" src={context.app.uri('assets/arrow-long-down-red.svg')} />
</div>
</header>
</div>
/* No context defined for this component. */
.landing-page-header {
&__body--blue {
border-bottom: 8px solid $brand-primary;
background-color: $brand-text;
}
&__title--blue {
color: $landing-page-header-inverted-text-color;
}
&__text--blue {
color: $brand-primary;
}
}
.landing-page-header--centered-big {
justify-content: center;
}
.landing-page-header__body--centered-big {
top: 0; // reset
border: 0;
}
@media screen and (min-width: $grid-breakpoint-md) {
.landing-page-header__title--centered-big {
font-size: ms(16); // unmodified: ms(11)
}
}
.landing-page-header--centered {
justify-content: center;
}
.landing-page-header__body--centered {
top: 0; // reset
border: 0;
}
@media screen and (min-width: $grid-breakpoint-md) {
.landing-page-header__title--centered {
font-size: ms(13); // unmodified: ms(11)
}
}
// overrides for easy testing
// remove in final website
.landing-page-header--red {
.landing-page-header__body {
background-color: $brand-primary;
}
.landing-page-header__title {
color: $landing-page-header-inverted-text-color;
}
.landing-page-header__down-arrow {
text-align: center;
color: $brand-text;
}
}
.landing-page-header--blue {
.landing-page-header__body {
border-bottom: 8px solid $brand-primary;
background-color: $brand-text;
}
.landing-page-header__title {
color: $landing-page-header-inverted-text-color;
}
.landing-page-header__text {
color: $brand-primary;
}
}
.landing-page-header--centered {
justify-content: center;
.landing-page-header__body {
top: 0; // reset
border: 0;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.landing-page-header--centered {
.landing-page-header__title {
font-size: ms(13); // unmodified: ms(11)
}
}
}
.landing-page-header--centered-big {
justify-content: center;
.landing-page-header__body {
top: 0; // reset
border: 0;
}
.landing-page-header__text {
display: none;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.landing-page-header--centered-big {
.landing-page-header__title {
font-size: ms(16); // unmodified: ms(11)
}
}
}
.landing-page-header {
&__body--red {
background-color: $brand-primary;
}
&__title--red {
color: $landing-page-header-inverted-text-color;
}
&__down-arrow--red {
text-align: center;
color: $brand-text;
}
}
// variations imported at the end of this file
$landing-page-header-outer-padding: $spacer-lg;
$landing-page-header-outer-padding-small: $spacer-sm;
$landing-page-header-bottom-margin: $spacer-xxl;
.landing-page-header {
@extend %page-header;
justify-content: flex-end;
margin-bottom: $landing-page-header-bottom-margin;
padding: $landing-page-header-outer-padding $landing-page-header-outer-padding-small;
&__body {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
border-bottom: 8px solid $landing-page-header-border-color;
background-color: $landing-page-header-intro-bg-color;
padding: $spacer-base;
max-width: $grid-page-layout-content-width-xl;
color: $landing-page-header-intro-text-color;
box-sizing: content-box;
}
&__title {
@extend %punch-in;
margin-bottom: $spacer-xs;
padding-bottom: $spacer-base;
text-align: center;
line-height: $landing-page-header-title-line-height-small;
font-size: $landing-page-header-title-font-size-small;
}
&__text {
@extend %body-font-italic;
margin-bottom: $spacer-base;
text-align: center;
line-height: $standard-header-intro-line-height-small;
font-size: $standard-header-intro-font-size-small;
}
&__down-arrow {
text-align: center;
color: $brand-primary;
}
}
.landing-page-header-bg-image {
background-image: asset-url('visual-header-landing-page.jpg');
}
.landing-page-header-bg-image-text-box {
@extend %landing-page-header-bg-image-text-box;
}
@media screen and (min-width: $grid-breakpoint-md) {
.landing-page-header {
padding: $landing-page-header-outer-padding;
}
.landing-page-header__body {
position: relative;
top: $spacer-xxl;
padding: $spacer-xxl $spacer-base $spacer-xl;
}
.landing-page-header__title {
line-height: $landing-page-header-title-line-height;
font-size: $landing-page-header-title-font-size;
}
.landing-page-header__subtitle {
line-height: $standard-header-subtitle-line-height;
font-size: $standard-header-subtitle-font-size;
}
.landing-page-header__type {
line-height: $standard-header-type-line-height;
font-size: $standard-header-type-font-size;
}
.landing-page-header__text {
padding-right: $spacer-lg;
padding-left: $spacer-lg;
line-height: $standard-header-intro-line-height;
font-size: $standard-header-intro-font-size;
}
}
@media screen and (max-width: $grid-breakpoint-lg) and (min-height: $grid-breakpoint-md-lg) {
.landing-page-header {
min-height: 20rem;
}
}
// excluded for now
// @import './landing-page-header--red';
// @import './landing-page-header--blue';
// @import './landing-page-header--centered';
// @import './landing-page-header--centered-big';
// @import './landing-page-header--demo-classes';
There are no notes for this item.