How to beautiful leanding page with smoke effect video using html ,css , bootstrap.| webpage
How to set video in navigation bar ?
Here You can Watch In Youtube Video How
We can set smoke Effect Video in Home page.
It’s look like cool If You have any Query Then contact us via email.
Top 10 game Engine click here
How attach Video in Home Lending page?
So It.s Video.html page
<!doctype html>
<html lang="en">
<head>
<!-- Required
meta tags -->
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!--
Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link
rel="stylesheet" href="video.css">
<title>Planics dev!</title>
</head>
<body>
<nav
class="navbar navbar-expand-lg fixed-top">
<div
class="container">
<a
class="navbar-brand text-white" href="#">Planics
dev</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="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul
class="navbar-nav ml-auto">
<li
class="nav-item active">
<a
class="btn btn-light" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#">Contact</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
<li
class="nav-item dropdown">
<a
class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown">
<a
class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something
else here</a>
</div>
</li>
</div>
</div>
</nav>
<div
class="myinfo">
<h1>Hey !</h1>
<h1>Hello Planics dev</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing
elit.<br> Facere harum deleniti, dignissimos unde laborum
blanditiis!</p>
<a href="#" class="btn btn-danger
mr-3">contact</a>
<a href="#" class="btn btn-light">Login</a>
</div>
<video
autoplay loop play-inline muted >
<source src="video/video1.mp4">
video is not load
</video>
<!-- Optional
JavaScript -->
<!-- jQuery
first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
|
Now It’s CSS file:-
.myinfo
{
position:
relative;
top: 250px;
left: 80px;
width: 500px;
color:white;
font-family:
Arial, Helvetica, sans-serif;
}
.nav-link
{
color:white;
}
.nav-link:hover
{
color: gray;
}
video
{
position:
absolute;
left:00px;
bottom: 00px;
z-index: -2;
height: auto;
width: auto;
min-width: 100%;
min-height:
100%;
}
|
|
Download
|
Download then Click Here:-
Hello, it's there a link for smoke footage?
ReplyDeleteNVM, I found it, Thank! good work!
ReplyDeleteWhere it is?
DeleteThis comment has been removed by the author.
Delete