<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;
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>
</html>
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;
justify-content: center;
vertical-align: center;
width:700px;
transition: transform .4s;
transform: perspective(800px) scale(1) translateX(0) rotateY(0);
transform-style: preserve-3d;
background:rbga(0,0,0,1);
width:100%;
overflow:hidden;
}
nav ul{
padding-left: 66.66%;
font-size: larger;
line-height: 2;
}
nav ul li{
list-style-type: none;
padding:10px;
}
nav ul li a{
text-decoration: none;
color:#cae8fc;
padding:15px;
font-size:40px;
font-weight:1000;
text-shadow:0px 0px 15px black;
transform:scale(0.9);
}
body:hover .front{
transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(-25deg) rotateZ(10deg);
transition: all 0.7s;
left:10%;
border-radius:6px;
-webkit-filter: grayscale(100%);
filter: grayscale(90%);
}
body:hover .fa-angle-double-up{
display:none;
transition:all 0.7s;
}
.saadmoh{
font-size:40px;
font-weight:900;
width:100%;
height:100%;
font-family:bold;
padding-top:30%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
color:white;
background:rgba(0,0,0,0.7);
}
nav a:hover{
color:black;
transition:all 0.7s;
}
.fa-angle-double-up{
transform:rotateZ(120deg);
color:rgba(0,0,0,0.5);
position:absolute;
font-weight:700;
letter-spacing:2px;
animation-name: ani;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes ani{
from{opacity:0.2;top:0;left:10}
to{opacity:1;top:10px;left:20px;}
}
<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>
