<header class="gradient-header">
<div class="gradient-header__body">
<h3 class="gradient-header__type">INNOQ Story</h3>
<h3 class="gradient-header__author">Mika Majoran</h3>
<h1 class="gradient-header__title">Das Ziel war im Weg.</h1>
<img class="gradient-header__img" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
</div>
</header>
<header class="gradient-header">
<div class="gradient-header__body">
<h3 class="gradient-header__type">INNOQ Story</h3>
<h3 class="gradient-header__author">Mika Majoran</h3>
<h1 class="gradient-header__title">Das Ziel war im Weg.</h1>
<img class="gradient-header__img" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
</div>
</header>
/* No context defined. */
.gradient-header {
background: linear-gradient(180deg, $gradient-header-background-color 0%, rgba(255, 230, 217, 0) 100%);
&__body {
display: flex;
max-width: 64rem; //magic number
flex-direction: column;
align-items: center;
justify-content: center;
padding: $spacer-base $spacer-sm;
margin: 0 auto;
color: $gradient-header-text-color;
}
&__type {
@extend %heading-font-bold;
margin-bottom: $spacer-xs;
font-size: $font-size-xs;
text-align: center;
text-transform: uppercase;
}
&__author {
@extend %body-font-regular;
margin-bottom: $spacer-lg;
font-size: $font-size-xs;
text-align: center;
}
&__title {
@extend %body-font-italic;
max-width: 60rem;
margin-bottom: $spacer-lg;
font-size: $font-size-xl;
text-align: center;
}
&__img {
@extend %box-shadow-primary-25-right-bottom;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.gradient-header__type {
font-size: $font-size-base;
}
.gradient-header__author {
font-size: $font-size-base;
}
.gradient-header__title {
font-size: $font-size-xxl;
}
}
No notes defined.