<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 ---------->
<!-- Demo navbar -->
<!--================Header Area =================-->
<header class="main_header_area">
<nav class="navbar navbar-expand-lg navbar-inner">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="index.html">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us</a>
<ul class="dropdown-menu">
<li><a href="#">Our Company</a></li>
<li><a href="#">Team</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Products</a></li>
<li class="nav-item"><a href="#" class="nav-link">What's New</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resources</a>
<ul class="dropdown-menu">
<li><a href="#">Resources</a></li>
<li><a href="#">Colleteral</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Enquiry</a></li>
<li class="nav-item"><a href="#" class="nav-link">Conatct Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<!-- End -->
<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 -->
.navbar-inner {
background:transparent;
}
/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* main_header_area css
==============================================*/
.main_header_area {
position: absolute;
width: 100%;
z-index: 25;
/*background: #fff;*/
/*border-bottom: 1px solid rgba(255, 255, 255, 0.08);*/
top: 0px;
}
.header_top .header_top_inner {
font: 500 14px/30px "Poppins", sans-serif;
color: #fff;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.149);
}
.header_top .header_top_inner ul li {
display: inline-block;
color: #fff;
}
.header_top{
background-color: #030502;
color: #fff;
}main_header_area
.header_top .header_top_inner ul li a {
color: #fff;
position: relative;
}
.header_top .header_top_inner ul li a:before {
content: "";
position: absolute;
width: 2px;
height: 12px;
left: 15px;
top: 50%;
left: -18px;
margin-top: -6px;
background: #000;
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg);
}
.header_top .header_top_inner ul li a:hover {
color: #0D2891;
}
.header_top .header_top_inner ul li:first-child a:before {
display: none;
}
.header_top .header_top_inner ul li + li {
margin-left: 30px;
}
.header_top.h_top_two .header_top_inner ul li a {
color: #948ea1;
}
.header_top.h_top_two .header_top_inner ul li a:before {
background: #948ea1;
}
.navbar {
padding: 0px;
}
.navbar .navbar-brand img + img {
display: none;
}
.navbar .nav .nav-item a {
color: #ffffff;
padding: 0px;
}
.navbar .nav .nav-item a:after {
display: none;
}
.navbar .nav .nav-item:hover a, .navbar .nav .nav-item.active a {
color: #0D2891;
}
.navbar .nav .nav-item.submenu {
position: relative;
}
.navbar .nav .nav-item.submenu ul {
border: none;
padding: 0px 15px;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
margin: 0px;
}
@media (min-width: 992px) {
.navbar .nav .nav-item.submenu ul {
position: absolute;
top: 100%;
left: -40px;
min-width: 200px;
background: #fff;
-webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
text-align: left;
opacity: 0;
-webkit-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
visibility: hidden;
display: block;
border: none;
padding: 0px;
border-radius: 0px;
}
}
.navbar .nav .nav-item.submenu ul:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
.navbar .nav .nav-item.submenu ul li {
display: block;
float: none;
margin-right: 0px;
margin-left: 0px;
}
.navbar .nav .nav-item.submenu ul li a {
line-height: 45px;
color: #242424;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 15px;
padding: 0px 30px;
text-transform: capitalize;
-webkit-transition: all 150ms linear;
-o-transition: all 150ms linear;
transition: all 150ms linear;
display: block;
}
.navbar .nav .nav-item.submenu ul li:last-child {
border-bottom: none;
}
.navbar .nav .nav-item.submenu ul li:hover a {
background: #f2f2f2;
color: #4466d7;
}
@media (min-width: 992px) {
.navbar .nav .nav-item.submenu:hover ul {
left: 0px;
visibility: visible;
opacity: 1;
}
}
.navbar .nav .nav-item + li {
margin-left: 30px;
}
.navbar .nav .search_dropdown {
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
position: relative;
}
.navbar .nav .search_dropdown a:before {
content: "";
width: 1px;
height: 15px;
background: rgba(255, 255, 255, 0.249);
left: 0;
top: 0px;
position: relative;
display: inline-block;
margin: 0px 20px;
}
.navbar .nav .search_dropdown .search {
background: #fff;
height: 35px;
padding: 0px;
line-height: 35px;
border-radius: 0px;
width: 200px;
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.navbar .nav .search_dropdown .search li .search-form {
padding: 1px 10px 0px;
}
.navbar .nav .search_dropdown .search li .search-form .form-control {
background: transparent;
border: 0;
font: 400 14px/31px "Open Sans", sans-serif;
padding: 0px 0px 1px 7px;
-webkit-box-shadow: none;
box-shadow: none;
color: rgba(64, 64, 64, 0.5);
font-style: italic;
text-shadow: none;
border-radius: 0px;
}
.navbar .nav .search_dropdown .search li .search-form .form-control.placeholder {
color: rgba(64, 64, 64, 0.5);
}
.navbar .nav .search_dropdown .search li .search-form .form-control:-moz-placeholder {
color: rgba(64, 64, 64, 0.5);
}
.navbar .nav .search_dropdown .search li .search-form .form-control::-moz-placeholder {
color: rgba(64, 64, 64, 0.5);
}
.navbar .nav .search_dropdown .search li .search-form .form-control::-webkit-input-placeholder {
color: rgba(64, 64, 64, 0.5);
}
.navbar .nav .search_dropdown .search li .search-form .input-group-addon {
background: transparent;
border: 0px;
padding: 0px;
border-radius: 0px;
}
.navbar .nav .search_dropdown .search li .search-form .input-group-addon button {
background: transparent;
border: 0px;
color: rgba(64, 64, 64, 0.5);
}
.navbar .nav .search_dropdown.open .search {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
.navbar-toggler[aria-expanded="false"] span:nth-child(2) {
opacity: 1;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.navbar-toggler[aria-expanded="true"] span:first-child {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position: relative;
top: 7.7px;
}
.navbar-toggler[aria-expanded="true"] span:last-child {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
bottom: 4px;
position: relative;
}
.navbar-toggler {
border: 0px;
padding: 0px;
cursor: pointer;
}
.navbar-toggler span {
display: block;
width: 25px;
height: 2px;
background: #fff;
margin: auto;
margin-bottom: 4px;
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.navbar-toggler span:last-child {
margin-bottom: 0px;
}
/*===================== main_header_area_two css ===================*/
.main_header_area_two {
background: transparent;
}
/*============== main_header_area_three css ================*/
.main_header_area_three {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 25;
}
.header_top_two {
padding: 14px 0px;
}
.header_top_two a {
color: #fff;
}
.h_info a {
font-size: 15px;
line-height: 20px;
font-family: "Poppins", sans-serif;
}
.h_info a i {
padding-right: 10px;
}
.h_info a + a {
margin-left: 36px;
}
.h_info a:hover {
color: #0D2891;
}
.h_social_icon a {
font-size: 18px;
margin-left: 18px;
}
.h_social_icon a:hover {
color: #0D2891;
}
.nav_three {
border-radius: 5px;
background: #182557;
padding: 0px 40px;
}
.nav_three .nav .nav-item a {
line-height: 95px;
}
/*=============== affix css ===============*/
.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 .nav-item > a {
color: #242424;
line-height: 40px;
}
.navbar_fixed .navbar .nav .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;
}
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.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;
}
/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
code {
padding: 0 0.15rem;
background: #f5f5f5;
border-radius: 0.2rem;
}
@charset "utf-8";
/* CSS Document */
body {
font-family: Arial, sans-serif;
background: url(http://www.clovisbookbarn.com/wp-content/uploads/2013/10/Blue-Sea-Sky-Clouds1.jpg) no-repeat;
background-size: cover;
}
.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;
}
$(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();
});
