Bootstrap Snippet hover gate using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <html>
 <head>
     <title>Converter</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
       
 </head>
 <body>
     <div class="container-fluid">
 <i class="fa fa-angle-double-up fa-5x" aria-hidden="true"></i>
  <nav class="layer">
  <ul>
     <li> <a   href="converter.html"> <i class="fa fa-hourglass-end" aria-hidden="true"></i>Let's Converte</a></li>
    <li><a   href="physics.html"><i class="saad2 fa fa-flask" aria-hidden="true"></i>Physics Constants</a></li>
    <li><a  href="#"><i class="fa fa-superscript" aria-hidden="true"></i>Math Constants</a></li>
  </ul>
    </nav>
 
 <section class="saad  front">
 <div class="mySlides" href="https://static.pexels.com/photos/7837/pexels-photo.jpg"
  style="width:100%;height:100%;background:black"></div>
 <div class="mySlides" src="cover.jpg"
  style=" background:#006699;width:100%; height:100%;"></div>
  <div class="mySlides" src="cal.jpeg"
  style="background:aqua;width:100%;background-size:contain;height:100%;"></di>
  <div class="mySlides" src="pyd.jpeg"
  style="width:100%;height:100%; background:lightblue"></div>
 </section>
 </div>
 </body>
  <script>
  
    var myIndex = 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 body{@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
 font-family: 'Roboto Condensed';
    text-transform: uppercase;
    background:linear-gradient(45deg, aqua, #2496f9, #1dc3ad, #06ef48);
    height: 100%;
    overflow: hidden;
    margin:0;
    padding:4px;
 }
 
section{
 width:100%;
 height:100%;
 box-shadow:0px 0px 100px black;
 position:fixed;
background:orange;
 background-position:center center;
 background-size:cover;
 text-align:center;
 left:0;
 top:0;
 right:0;
 bottom:0;
 transition: transform .4s;
    transform: perspective(800px) scale(1) translateX(0.1%) rotateY(-8deg)  ;
    transform-style: preserve-3d;
}
nav{
    vertical-align: center;
    position:fixed;
    display:flex;
    top:40%;
    right:65%;
    
    align-items: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  
    var myIndex = 0;
    carousel();
    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 3000);
    }
    </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hover gate"
Bootstrap 3.0.0 Snippet by saadmohmedfsociety

Related: See More

Questions / Comments:

"hover gate" Bootstrap 3.0.0 Snippet by saadmohmedfsociety

Related: See More

Questions / Comments:

"hover gate"
Bootstrap 3.0.0 Snippet by saadmohmedfsociety