<div class="triplet-divider">
<div class="triplet-divider__left">Die einen designen Produkte.</div>
<div class="triplet-divider__right">Die anderen entwickeln Software.</div>
<div class="triplet-divider__center">
<div class="page-layout-xl--default">
<h2>INNOQ kann beides.</h2>
<p class="lead">Für uns kann ein ausgereiftes Produkt nur dann entstehen, wenn Design
und Entwicklung Hand in Hand arbeiten. Deshalb haben wir Module entwickelt,
die ein ganzheitliches Vorgehen ermöglichen. Mit Methoden, die zum richtigen
Zeitpunkt greifen – von der ersten vagen Idee bis zum fertigen Produkt,
die von Anfang an Nutzergruppen mit einbeziehen und Prozesse beschleunigen.</p>
</div>
</div>
</div>
<div class="triplet-divider">
<div class="triplet-divider__left">
Die einen designen Produkte.
</div>
<div class="triplet-divider__right">
Die anderen entwickeln Software.
</div>
<div class="triplet-divider__center">
<div class="page-layout-xl--default">
<h2>INNOQ kann beides.</h2>
<p class="lead">
Für uns kann ein ausgereiftes Produkt nur dann entstehen, wenn Design
und Entwicklung Hand in Hand arbeiten. Deshalb haben wir Module entwickelt,
die ein ganzheitliches Vorgehen ermöglichen. Mit Methoden, die zum richtigen
Zeitpunkt greifen – von der ersten vagen Idee bis zum fertigen Produkt,
die von Anfang an Nutzergruppen mit einbeziehen und Prozesse beschleunigen.
</p>
</div>
</div>
</div>
/* No context defined for this component. */
$triplet-divider-height-sm: 2 * $spacer-xxl;
$triplet-divider-height-md: 4 * $spacer-xxl;
.triplet-divider {
display: flex;
flex-wrap: wrap;
}
.triplet-divider__center {
flex-grow: 2;
text-align: center;
}
.triplet-divider__left {
background-color: $brand-blue;
color: $brand-red;
}
.triplet-divider__right {
background-color: $brand-red;
text-align: right;
color: $brand-blue;
}
.triplet-divider__right,
.triplet-divider__left {
flex-grow: 1;
font-family: $font-family-sans-serif-heavy;
font-size: $h2-font-size;
}
.triplet-divider__right,
.triplet-divider__left,
.triplet-divider__center {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: $container-spacer-x $container-spacer-y;
min-height: $triplet-divider-height-sm;
}
@media screen and (min-width: $grid-breakpoint-md) {
.triplet-divider__right {
text-align: left;
}
.triplet-divider__right,
.triplet-divider__left,
.triplet-divider__center {
min-height: $triplet-divider-height-md;
}
}
There are no notes for this item.