HTML/CSS - My First Animation Online Editor and JavaScript Compiler

html

<html>
    <head>
        <title>My first <span> Animation </span> </title>
    </head>
    <body>
    <!--¡ w¡ll @dd $ome d€¢orat¡on $oon!∆•∆-->
   <marquee direction="right" scrollamount="20">Thanks Every body😊!!</marquee>
    <div>   
     <a class="a" href="http://www.example.com">Don't Click😶'</a>
    <div style="background-color:green; color:white; padding:20px;">
        <h1 class="id"> My First <span> Animation </span> 😊</h1>
     <div style="background-color:blue; color:white; padding:20px;">
     <nav>
    <ul>
        <li><a class="f" href="#"> please   </a></li>
        <li><a class="f" href="#"> like </a></li>
        <li><a class="f" href="#"> it </a></li>
        <li><a class="f" href="#"> !!👍 </a></li>
    </ul>
    </nav>
  <form onsubmit="return validate()" method="post">
    Number/Word: <input class="cs" type="text" name="num1" id="num1" /><br />
    Repeat: <input class="cs" type="text" name="num2" id="num2" /><br />
    <input type="submit" value="Submit" />
</form>
    </body>
</html>
<svg width="900" height="200">

css

h1.id {
    font-family: Florence, cursive;
    font-style:italic;
}
a.f{
   color: pink;
}
body{
   background-color: #87CEAF;
}
ul {
    list-style-image: url("http://www.sololearn.com/images/bullet.jpg");
    list-style-position: inside;
}
a:hover.a {
    color:  red;
}
a.a{
   color: #FFFEFF; 
}
h1 {
    width: 350px;
    border:4px  aquamarine;
    text-decoration:overline;
    color: aquamarine;
    background-color: rgba(250,250,250,.1);
    font-weight:bolder;
    text-shadow: 5px 10px 2px  #FFFFFF, -3px 6px 5px  #58d1e3;

var r = new Date
var Hours = r.getHours();
var Minutes = r.getMinutes();
var secs = r.getSeconds();
var Milliseconds = r.getMilliseconds;
if (2 == 2) {
   alert("time:" + Hours +"."+ Minutes + "." + secs) 
}
alert("This is my first  animation .don't forget to like it!👍👍😆 and never put same number/letter in the box!;-)  💂 '" )
function validate() {
    var n1 = document.getElementById('num1');
    var n2 = document.getElementById('num2');
    if(n1.value != '' && n2.value != '') {
        if(n1.value == n2.value) {
            alert("it is right");
        }else{
           alert("type the same number/type number") 
        }
    }
  } 
  var images = [
    'http://www.sololearn.com/uploads/slider/1.jpg', 
    'http://www.sololearn.com/uploads/slider/2.jpg', 
    'http://www.sololearn.com/uploads/slider/3.jpg'
];
var num = 0;
function next() {
    var slider = document.getElementById('slider');

BROWSER

Console