arms(intermediate).html

<!DOCTYPE html>  
<html> 
<title>ARMS-INTERMEDIATE</title> 
<head>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>  

.container{width:100%}  
.left{width:22%;float:left;}  
.body{width:45%;float:left;}  
.right{width:22%;float:left;}  
body{
	background-color: black;
	color: white;
}
.i:hover{
	width: 160%;
	opacity: 0.8;

}

</style>  
</head>  
<body>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(window).on("load", function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();

      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity") == 0) {
          $(this).fadeTo(500, 1);
        }
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity") == 1) {
          $(this).fadeTo(500, 0);
        }
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});

  </script>

  <h1 align="center" style="background-color: blue;font-size: 40px;">ARMS-INTERMEDIATE</h1>
<div class="container">  
<div class="left">  
    <div class="fade">
<video src="images/armanticlock.mp4" width="150%" height="12%" autoplay="autoplay" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/armclock.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/milatary.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/hooks.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/skipping.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/burpees.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/tricepsright.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/tricepsleft.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
	
</div>  
<div class="body" align="center"> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
    
<fieldset style=" color: red; width: 30%;border-radius: 100%; background-color: grey; margin-left: 20%;">
	 <button onclick="my()" style="padding: 12px; border-radius: 50%">
            start
        </button>
        <b style="font-size: 20px;"><p id = "hi"></p>
        <button onclick="u()" style="padding: 12px; border-radius: 50%;">
            stop
        </button>
        <button onclick="re()" style="padding: 12px; border-radius: 50%">
            reset
        </button>
        </fieldset>


         <script>
        var t=[0]
        var f=[0]
        var te=new Array(1)
            function myAlert() {
                document.getElementById("hi").innerHTML = t[0]/100
                t[0]+=1    
            }
            
            function u(){
                clearInterval(te[0])
                f[0]=0
            }
            
            function my(){
                if (f[0]==0){
                   te[0] = setInterval(myAlert, 10) 
                   f[0]=1
                }
                              
            }
            
            function re(){
                t[0]=0
                myAlert()
            }
            function tired(){
                alert("Take A Break Of 90 Seconds")
            }
            function nottired(){
                alert("Continue ")
            }
        </script><br><br><br>
        
        <button onclick="tired()" style="padding:1%; border-radius: 30px; margin-left:20%;">Feeling Exausted?</button>
        <button onclick="nottired()" style="padding:1%; border-radius: 30px;">Not Exausted!!</button>
</div>  
<div class="right">
<div class="fade">  
<video src="images/floortriceps.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/standingleft.mp4" width="150%" height="12%" autoplay="true" muted="true"loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/standingright.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/punches.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/triceps.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/armrsaise.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/hooks.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>
<div class="fade">
<video src="images/burpees.mp4" width="150%" height="12%" autoplay="true" muted="true" loop="true" class="i"></video></div>
<br>
<br>

</div>  
</div>  

  
</body>  
</html>  