Gebruiker:IdP/kladblok30

Protesttheater - header

{{#css:
#showcase-header img {border-radius: 0.25rem; object-fit: cover; width: 100%;}

#overlay-header {
background: rgba(204,204,204,0.6);
left: 0;
width: 100%;
height: 25%;
z-index: 2;
}

.titel-header {
color: white;
letter-spacing: .1rem;
line-height: 0.5;
font-size: 1rem;
z-index: 3;
}

@media (min-width: 576px) { 
.titel-header {
letter-spacing: 0.2rem;
line-height: .6;
font-size: 1.6rem;
}
}

@media (min-width: 992px) { 
.titel-header {
letter-spacing: 0.3rem;
line-height: .6;
font-size: 2rem;
}
}

@media (min-width: 1200px) { 
.titel-header {
letter-spacing: 0.8rem;
line-height: 1.4;
font-size: 2.2rem;
}
}

@media (min-widht: 1400px) {
.titel-header {
letter-spacing: 0.8rem;
line-height: 1.8;
font-size: 4rem;
}
}
}}
{{#tweekihide:firstHeading|sidebar-right}}<div id="showcase-header" class="card border-0 text-white m-auto pb-4">[[Bestand: Header-achtergronden-onderzoek protesttheater 1400x400.png]]
<div id="overlay-header" class="card-img-overlay"><h2 class="card-title titel-header text-uppercase text-center px-4">{{PAGENAME}}</h2>
</div><!-- eof card-img-overlay -->
</div><!-- eof card -->