- Get link
- X
- Other Apps
Source Code:
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>V I D E O B A C K G R O U N D</title>
</head>
<body>
<div class="bgimage">
<video autoplay loop muted play-inline id="bgvideo">
<source src="vid.mov" type="video/mp4">
</video>
<div class="logo">
<h2>Website name/logo</h2>
</div>
<div class="sidebar">
<div class="txtbox">
<h1>Vraj Resort</h1>
<h4>Living Happily</h4>
<div class="line"></div>
</div>
</div>
<div class="content">
<span>kerala</span>
<p><strong>God's</strong> own country or a heaven on Earth.</p>
<div class="line2"></div><br>
<div class="button">
<button type="button" id="btn">Take a Tour</button>
</div>
</div>
</div>
<script>
var bgvideo=document.getElementById('bgvideo');
var bgvideo=document.getElementById('btn');
var bgvideo=document.getElementById('bgvideo');
btn.onclick=function(){
bgvideo.style.display="block";
if(bgvideo.paused){
bgvideo.play()
}
else{
bgvideo.pause();
}
}
</script>
</body>
</html>
body{
margin:0;
padding:0;
font-family:century gothic;
}
.bgimage{
width:100%;
height:100vh;
background-image:url(bgimage.jpg);
background-size:cover;
background-position:center;
position:relative;
overflow:hidden;
}
.logo{
background:#fff;
height:100px;
width:250px;
position:absolute;
align-items:center;
display:flex;
justify-content:center;
z-index:2;
}
.logo h2{
color:#000;
cursor:pointer;
text-align:center;
}
.sidebar{
width:250px;
height:100vh;
left:0;
top:0;
background-color:rgba(255,255,255,.5);
position:absolute;
}
.txtbox{
position:absolute;
top:50%;
text-align:center;
transform:rotate(-90deg);
margin-left:30px;
}
.txtbox h1{
font-size:28px;
font-weight:100;
letter-spacing:2;
}
.txtbox h4{
margin:7px 0 10px; letter-spacing:2;
}
.line{
width:80px;
height:1px;
background:#000;
margin:auto;
}
.line2{
width:150px;
height:1px;
background:#fff;
margin:auto;
}
.content{
color:#fff;
position:absolute;
right:200px;
top:100px;
transform:translate(10%);
}
.content span{
font-size:150px; font-family:Reey; font-weight:lighter;
}
.content p{
font-family:century gothic; letter-spacing:3; font-weight:bolder;
}
strong{
color:#ff0;
}
button{
width:150px;
height:50px;
background:rgba(255,255,255,.2);
font-size:18px;
font-family:changa;
letter-spacing:2;
padding:10px 0;
display:flex;
align-items:center;
justify-content:center;
border-radius:30px;
cursor:pointer;
outline:none;
border:solid #fff 1px;
}
button:hover{
border-left:solid 2px #006;
border-right:solid 2px #006;
background:#fff;
transition:.8s;
}
#bgvideo{
position:absolute;
right:0;
bottom:0;
display:none;
}
@media(min-aspect-ratio:16/9){
#bgvideo{ width:100%; height:auto;}
}
@media(max-aspect-ratio:16/9){
#bgvideo{ width:auto; height:100%;}
}
Download Image & Video:
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.