Fullscreen Video Background

TITLE : Fullscreen Video Background |Source Code Link | HTML and CSS | 2020

HTML :

<html>

<head>

<title>Fullscreen Video Background</title>

</head>

<body>

<h2>Take a closer look towards nature</h2>

<h3>Nature hotels, resorts & eco lodges, worldwide</h3>

<p>The well-known Eco Camp Patagonia situated in the sensational massif of Paine in Patagonia is only one example of our numerous nature hotels. Stroll through Torres del Paine National Park and enjoy the fascinating wildlife.</p>

<button>Registor Now</button>

</div>

<span>Eco Hotels</span>

</div>

</body>

</html>

CSS :

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

width: 100%;

height: 100vh;

}

video {

width: 100%;

height: 100vh;

object-fit: cover;

}

.overlay {

position: absolute;

height: 100vh;

width: 100%;

top:0;

left: 0;

background: linear-gradient(to right,rgba(66,4,126,0.5),rgba(7,244,158,0.5));

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

}

.overlay h2 {

color:#fff;

font-family: Futura Md BT;

font-size: 3.5em;

padding-left: 50px;

text-transform: uppercase;

}

.overlay h3 {

color:#fff;

font-family: Futura Bk BT;

font-size: 2em;

padding: 25px 50px;

text-transform: uppercase;

}

.overlay p{

color:#fff;

font-family: Swis721 BT;

font-size: 1.2em;

padding: 25px 50px;

width: 50%;

text-align: justify;

}

.overlay button{

padding: 12px 50px;

color:#fff;

font-family: Swis721 BT;

font-size: 1.2em;

border: none;

outline: none;

border-radius: 5px;

transition: 0.3s;

background: linear-gradient(to right,#ff0f7b,#f89b29);

margin: 25px 50px;

box-shadow: 0 0 25px rgba(0,0,0,0.4);

}

.overlay button:hover {

border-radius: 50px;

}

span {

background: linear-gradient(to right,#b597f6,#96c6ea);

width:200px;

height: 80px;

position: absolute;

top:0;

right: 25px;

font-size: 1.5em;

color:#fff;

font-family: Swis721 BT;

display: flex;

justify-content: center;

align-items: center;

border-radius: 0 0 20px 20px;

box-shadow: 0 0 25px rgba(0,0,0,0.4);

}

.images {

width: 350px;

height:220px;

position: absolute;

right: 80px;

bottom: 80px;

}

.images img{

width: 100%;

height: 100%;

position: absolute;

border:10px solid #fff;

box-shadow: 0 0 25px rgba(0,0,0,0.4);

}

.images img:nth-child(1){

transform: rotate(20deg);

}

.images img:nth-child(3){

transform: rotate(-20deg);

}