WEB BEKS | HTML & CSS & JS

CSS



header{

height: 200vh;

}

.container{

clip: rect(0, auto, auto, 0);

overflow: hidden;

position: absolute;

height: 100vh;

left: 0;

width: 100%;

}

.container_solid{

background: white;

top: 0;

}

.title_wrapper{

position: fixed;

display: block;

margin: auto;

width: 100%;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.title_wrapper h1{

text-align: center;

font-size: 64px;

text-transform: uppercase;

text-align: center;

font-family: 'Fraunces', serif;

font-weight: 900;

}

.container_solid .title_wrapper h1{

background: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?&q=85);

background-size: 100vw auto;

background-position: center;

-webkit-text-fill-color: transparent;

background-clip: text;

-webkit-background-clip: text;

color: black;

}

.container_image{

background-image: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);

background-size: 100vw auto;

background-position: center;

background-attachment: fixed;

top: 100vh;

}

.container_image .title_wrapper h1{

color: white;

}

section{

min-height: 100vh;

padding: 2em;

margin: auto;

max-width: 800px;

}

section h2{

font-family: 'Fraunces', serif;

}