how to create a responsive website with background video using html , css and javascript

Hello Designer today you will learn how to create a responsive Website with video background using html , css and javascript .

WEBSITE DESIGN VIEW

Full Website Homepage View

Full Website Menu View

Homepage View When Screen Size 725px

Homepage View When Screen Size is 425px

Menu Homepage View When Screen Size 425px

What is in this design ?

1.Responsive Behaviour .

2.Search Box with Icon inside it .

3.Bar animation ( On click menu open from top to bottom) .

4. Cool hover effect.

Why we use javascript in this ?

Javascript is used to hide and unhide menu on click Menu bar .

openMenu() function - It is used to make the height of the menu 100% onclick menu bar icon by default we make height of the menu zero.

closeMenu() function - It is used to make the height of the menu 0% onclick menu bar icon .

Website show a responsive behaviour when you start decrease the size of the webpage when the screen size is full that time the width of the content class div is 70% of the full screen and the margin from the top 25% of the height .The width of the input-search class is 50% of the div class content .

when the screen size is725px that time the width of the content class div is 90% of the full screen and the margin from the top 20% of the height .The width of the input-search class is 60% of the div class content .

when the screen size is425px that time the width of the content class div is 90% of the full screen and the margin from the top 15% of the height .The width of the input-search class is 100% of the div class content .

Font

We are going to use font family Poppins on our homepage design .

Icons

We take all the icons from the FontAwesome.com except website logo .

Video Tutorial

CODE PREVIEW

HTML FILE

 
  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Travel Site with video background || Coding Zone</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>

 <section>

  <img src="logo.png">
  <span class="menu-bar" onclick="openMenu()">☰</span>

  <div id="NavBar" class="overlay">
    <a href="#" class="closebtn" onclick="closeMenu()">×</a>
   
     <div class="overlay-content">

       <a href="#">About</a>
       <a href="#">Services</a>
       <a href="#">Clients</a>
       <a href="#">Contact</a>

     </div>

  </div>

  <video src="travel.mp4" autoplay muted loop></video>
   <div class="color"></div>

   <div class="content">
          
       <h1>Travel the World With us</h1>
       <br>
       <div class="input-search">          
          <input type="search">
          <span><i class="fas fa-search"></i></span>
       </div>
       <br>
       <p>
        Best travel websites in the world because it gives you access to hundreds of travel resources in any and every category you can think of           from one online platform. You can find the best travel websites for hotels, the best travel websites for flights, travel booking   websites,the best website for vacation packages, exciting last minute solo travel deals, and so much more in one place.
       
       </p>
       <br>
       <button>Know More About us</button>
      
   </div>

   <div class="social-media"> 

    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-linkedin-in"></i>
    <i class="fab fa-instagram"></i>


   </div>


 </section>
  
</body>
</html>

CSS FILE

 
  
  
  @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body{

  font-family: 'Poppins', sans-serif;
}

section{

  height: 100vh;
  width: 100%;
}

section img{

  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 5px;
  left: 20px;
}

section video{

  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.menu-bar{

  position: absolute;
  font-size: 30px;
  cursor: pointer;
  right: 5px;
  top:5px;
  z-index: 50;
 color:#E7E8E9;
  
}

.overlay{

  width: 100%;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0,0,0,0.9);
  transition: 0.5s;
}

.overlay-content{

  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 25px;
}

.overlay .overlay-content a{

  padding: 10px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  transition: 0.4s;
}

.overlay .overlay-content a:hover,
.overlay .overlay-content a:focus{

  color: #E6E7E8;

}

.overlay .closebtn{

  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 30px;
  cursor: pointer;
  text-decoration: none;
  color: #818181;
 
  
}


section .color{

  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  background:linear-gradient(to left,#78141e,#0a1c4f);
  mix-blend-mode: overlay;
}

section .content{

  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  text-align: justify;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  color:#E6E7E8;
  width:70%;
}


.input-search{

  position: relative;
  width: 50%;
  border-radius: 50px;
}

input[type="search"]{

  padding: 10px 20px;
  outline: none;
  width: 100%;

}

.input-search span{

  position: absolute;
  right: 0;
  top:0;
  cursor: pointer;
  width: 50px;
  height: 100%;
  background-color: #818181;

}


.input-search .fa-search{

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}



section button{

  background: none;
  outline: none;
  border: none;
  color: #E6E7E8;
  padding:10px 20px;
  background-color: blue;
  font-weight: 800;
  cursor:pointer;
  
}


section button:hover{

  transition: 0.5s;
  color: blue;
   background-color: #E6E7E8;
}

.social-media{

  position: absolute;
  left: 10px;
  color: #E6E7E8;
  bottom: 10px;

}

.social-media i{

  margin-right: 10px;
  font-size:30px;
  cursor: pointer;
  transition: 0.2s linear;
}

.fa-facebook-f:hover{

  color:#4267B2;

}

.fa-twitter:hover{

  color:#00acee;

}

.fa-linkedin-in:hover{

  color:#0e76a8;

}
.fa-instagram:hover{

  color:#E1306C;

}

@media(max-width:725px){

  .input-search{

    width:60%;
  }

  section .content{

    top:20%;
    width:90%;
  }

  .social-media i{

    font-size: 25px;
  }

}



@media(max-width:450px){

  .input-search{

    width:100%;
  }

  section .content{

    top:15%;
   
  }

  .social-media i{

    font-size: 20px;
  }

}

JAVASCRIPT FILE

 
  
  
   <script>

   function openMenu(){

  document.getElementById("NavBar").style.height="100%";

   }

   function closeMenu(){

    document.getElementById("NavBar").style.height="0%";
   }


 </script>

Download Full Code :Click here to download full code

You can follow us on for more coding related knowledge

Facebook

Instagram

Linked In

Keep Visiting 😁

Full Website Homepage View

Full Website Menu View

Homepage View When Screen Size 725px

Homepage View When Screen Size is 425px

Menu Homepage View When Screen Size 425px

Video Tutorial

CODE PREVIEW

Post a Comment

Post a Comment

About Us

Contact Form

how to create a responsive website with background video using html , css and javascript

Full Website Homepage View

Full Website Menu View

Homepage View When Screen Size 725px

Homepage View When Screen Size is 425px

Menu Homepage View When Screen Size 425px

Video Tutorial

CODE PREVIEW

You might like

Post a Comment

Post a Comment

Contact Form