<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header class="main_header_area">
<nav class="navbar navbar-expand-sm navbar_inner ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="feedback">
<a href="#popup1">Quick Enquiry</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<div class="div1" style="background:#fff">
<a class="close" href="#">×</a>
<div class="content" id="quickenquire">
<h3 style="text-align:center">Send Enquiry</h3>
<form action="#">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email Id</label>
<input type="email" id="email" name="email">
<label for="comment">Your Message</label>
<textarea></textarea>
<label for="contact">Contact No</label>
<input type="text" id="contact" name="contact">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
<!-- Background video -->
<div class="video-background-holder">
<div class="video-background-overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.coverr.co/videos/Nv4Gqow7scn9XalkdfhPSLNjwNWrYYpE?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjMzMzkzNjUzfQ.EElJb38kbaq_0OTzJpPnInZjpR8pLDoxwLGskhuoBBc" type="video/mp4">
</video>
<div class="video-background-content container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-4">Bootstrap video background</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
<p class="lead">Snippet by <a href="https://bootstrapious.com/snippets" class="text-white">
<u>Bootstrapious</u></a>
</p>
</div>
</div>
</div>
</div>
<!-- End -->
<!-- For demo purpose -->
<section class="py-5">
<div class="container py-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="lead">The whole content is wrapped into <code>.video-background-holder</code>, this class is mainly used to set the content dimensions, location and the fallback background in case the browser doesn't support the video format.</p>
<p class="lead">Change your video source from <code>source</code> tag, and the overlay color from <code>.video-background-overlay</code>.</p>
<p class="lead">The content text wrapped into <code>.video-background-content</code> is vertically centered using flex utilities.</p>
</div>
</div>
</div>
</section>
<!-- End -->
body{
height:900px;
}
/* main_header_area css
==============================================*/
.navbar_inner {
background:transparent;
}
.main_header_area {
position: absolute;
width: 100%;
z-index: 25;
/*background: #fff;*/
/*border-bottom: 1px solid rgba(255, 255, 255, 0.08);*/
top: 0px;
}
.navbar_fixed.main_header_area_three .navbar .nav-item > a {
line-height: 40px;
}
.navbar_fixed {
width: 100%;
left: 0;
top: -70px;
background: #fff;
position: fixed;
-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
border-bottom: 0px;
z-index: 999;
-webkit-transform: translateY(70px);
-ms-transform: translateY(70px);
transform: translateY(70px);
transition: background 100ms linear, -webkit-transform 500ms ease;
-webkit-transition: background 100ms linear, -webkit-transform 500ms ease;
-o-transition: transform 500ms ease, background 100msheader linear;
transition: transform 500ms ease, background 100ms linear;
transition: transform 500ms ease, background 100ms linear, -webkit-transform 500ms ease;
-webkit-transition: transform 500ms ease, background 100ms linear;
-webkit-backface-visibility: hidden;
}
.navbar_fixed .header_top, .navbar_fixed .header_top_two {
display: none;
}
.navbar_fixed .navbar .navbar-brand img {
display: none;
}
.navbar_fixed .navbar .navbar-brand img + img {
display: block;
}
.navbar_fixed .navbar .nav-item > a {
color: #242424;
line-height: 70px;
}
.navbar_fixed .navbar .nav-item:hover > a, .navbar_fixed .navbar .nav .nav-item.active > a {
color: #0D2891;
}
.navbar_fixed .navbar .navbar-toggler span {
background: #0D2891;
}
.navbar_fixed.main_header_area_three {
top: -70px;
-webkit-transform: translateY(70px);
-ms-transform: translateY(70px);
transform: translateY(70px);
transition: transform 300ms ease, background 100ms linear, -webkit-transform 300ms ease;
border-radius: 0px;
position: fixed;
background: #fff;
}
.navbar_fixed.main_header_area_three .navbar {
background: #fff;
border-radius: 0px;
}
.navbar_fixed.main_header_area_three .navbar .nav .nav-item > a {
line-height: 70px;
}
.navbar .nav-item:hover a, .navbar .nav-item.active a {
color: #0D2891;
}
.navbar .nav-item a {
color: #ffffff;
padding: 0px;
}
.navbar_fixed .navbar .nav-item > a {
color: #242424;
line-height: 40px;
}
/*video */
.video-background-holder {
position: relative;
background-color: black;
height: calc(100vh - 72px);
min-height: 25rem;
width: 100%;
overflow: hidden;
}
.video-background-holder video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.video-background-content {
position: relative;
z-index: 2;
}
.video-background-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/*video*/
/*enquiry*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
z-index:11;
}
.popup {
margin: 30px auto;
padding: 15px;
border-radius: 5px;
width: 49%;
position: absolute;
left: 35%;
/* transition: all 5s ease-in-out; */
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 35px;
left: 25px;
background: #00495d;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #fff;
padding: 0px 5px;
}
.search {
position: absolute;
top: 19px;
left: 45%;
/* background: #ce00ff; */
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #000;
padding: 0px 5px;
}
.popup .close:hover {
color: #ffffff;
}
.popup .content {/* max-height: 30%;
*/overflow: auto;border-top: 2px dashed #d1d6d8;margin-top: 16px;}
.div1 {
width: 50%;
padding: 20px;
/* float: left; */
height: auto;
background:#fff;
border-radius: 25px;
}
.content h3 { text-align: center;
margin: 15px 0 -1px 0;
text-transform: uppercase;
color: #00495d;
}
@media screen and (max-width: 1024px) {
.box {
width: 70%;
}
.popup {
width: 70%;
left:20%;
}
.div1 {
width: 70%;
padding: 20px;
float: left;
}
}
/* sticky button */
#feedback1 {
height: 0px;
width: 85px;
position: fixed;
right: 0;
top: 30%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback1 a {
display: block;
background:url(pc.png) no-repeat;
height: 52px;
width: 155px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
#feedback1 a:hover {
background:url(pc-over.png) no-repeat;
}
#feedback {
height: 0px;
width: 85px;
position: fixed;
right: 0;
top: 50%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback a {
display: block;
background:#000;
height: 52px;
padding-top: 10px;
width: 155px;
text-align: center;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
#feedback a:hover {
background:#00495d;
}
/* enquiry form */
#quickenquire input[type=text], input[type=email], textarea, select {
width: 100%;
padding: 5px 15px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#quickenquire label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 0px!important;
margin: 0px!important;
}
#quickenquire input[type=submit] {
width: 100%;
background-color: #00495d;
color: white;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
padding: 7px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#quickenquire input[type=submit]:hover {
background-color: #000000;
}
/*enquiry*/
$(document).ready(function(){
"use strict";
var nav_offset_top = $('header').height() + 100;
//* Navbar Fixed
function navbarFixed(){
if ( $('header').length ){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= nav_offset_top) {
$("header").addClass("navbar_fixed");
} else {
$("header").removeClass("navbar_fixed");
}
})
}
}
navbarFixed();
});
