<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="banner">
<div class="image-container">
<div class="text text-test">NATURE</div>
</div>
<video autoplay loop muted class="banner__video" poster="https://pawelgrzybek.com/photos/2015-12-06-codepen.jpg">
<source src="https://pawelgrzybek.com/photos/2015-12-06-codepen.webm" type="video/webm">
<source src="https://pawelgrzybek.com/photos/2015-12-06-codepen.mp4" type="video/mp4">
</video>
</div>
<style type="text/css">
body {
margin: 0;
}
.banner {
position: relative;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
.banner__video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
z-index: -10;
}
.banner::before{
background: black;
content: '';
width: 100%;
height: 100%;
position: absolute;
}
.image-container {
background-size: cover;
position: relative;
height: 500px;
/* background-color: black;
*/
}
.text {
background-color: white;
color: black;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
</style>
</body>
</html>Komentarze wyłączone