34 lines
780 B
CSS
34 lines
780 B
CSS
div.header {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: var(--heading-height);
|
|
}
|
|
|
|
/* Create angled background with 'before' pseudo-element */
|
|
header::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 6em;
|
|
width: 100%;
|
|
height: calc(var(--heading-height) + 10em);
|
|
z-index: -1;
|
|
transform: skewY(-3.5deg);
|
|
background:
|
|
linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
|
|
url(https://images.unsplash.com/photo-1495464101292-552d0b52fe41?auto=format&fit=crop&w=1350&q=80) no-repeat center,
|
|
linear-gradient(#4e4376, #2b5876);
|
|
background-size: cover;
|
|
border-bottom: .2em solid #fff;
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(2.8em + 2.6vw);
|
|
font-weight: 650;
|
|
letter-spacing: .01em;
|
|
padding: 6rem 0 0 4.5rem;
|
|
text-shadow: .022em .022em .022em #111;
|
|
color: #fff;
|
|
}
|