HTML/CSS - https://codepen.io/yahiarefaiea/pen/xyNWQq Online Editor and JavaScript Compiler

html

<html>
  
  <head>
    <title> html4 örnek </title>
    <link rel="stylesheet" href="html4.css">
    <script src="html4.js"> </script>   
  </head>
<body>
  
<div class="wrapper">
  <canvas id="stars"></canvas>
  <canvas id="yahia"></canvas>
  <div class="container">
    <div class="template color-yellow" data-template="home">
      <main>
        <h1><span>A 
            <mark>21 years</mark> old</span><span> interaction designer</span></h1>
        <div class="p"><span>hello@yahiarefaiea.com</span><span>(+963) 96 2295 406</span></div>
        <div class="links">
          <a class="link color-yellow" href="https://beta.yahiarefaiea.com/#bucket" title="View my bucket list" target="_blank">View my bucket list</a>
          <a class="link color-green" href="https://beta.yahiarefaiea.com/#secret" title="Tell me a secret" target="_blank">Tell me a secret</a>
          <a class="link color-red" href="https://beta.yahiarefaiea.com/Yahia_Refaiea_Resume.pdf" title="Download my résumé" target="_blank">Download my résumé</a>
        </div>
      </main>
      <footer>
        <div class="links"><a class="link small alt" href="http://facebook.com/YahiaRefaiea" title="Facebook (@YahiaRefaiea)" target="_blank">Facebook</a><a class="link small alt" href="http://twitter.com/YahiaRefaiea" title="Twitter (@YahiaRefaiea)" target="_blank">Twitter</a><a class="link small alt" href="http://codepen.io/YahiaRefaiea" title="Codepen (@YahiaRefaiea)" target="_blank">Codepen</a><a class="link small alt" href="http://github.com/YahiaRefaiea" title="GitHub (@YahiaRefaiea)" target="_blank">GitHub</a></div>

css

.mCustomScrollbar {
  -ms-touch-action: pinch-zoom;
  touch-action: pinch-zoom;
/* direct pointer events to js */
}
.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
  -ms-touch-action: auto;
  touch-action: auto;
}
.mCustomScrollBox {
/* contains plugin's markup */
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: none;
  direction: ltr;
}
.mCSB_container {
/* contains the original content */
  overflow: hidden;
  width: auto;
  height: auto;
}
.mCSB_inside > .mCSB_container {
  margin-right: 30px;
}

$(document).ready(function 
() {
  var input = $('.field').
find('input, textarea');
  input.keyup(function () {
    inputTest(this);
  });
});
function inputTest(that) {
  var field = $(that).closest
('.field');
  var form = $(that).closest
('form, .form');
  var length = $.trim($(that)
.val()).length;
  //  FILLED
  if (length > 0) field.
addClass('filled');else 
field.removeClass('filled');
  //  VALIDATED
  if (length >= 4) {
    field.addClass
('validated');
    form.addClass
('validated');

BROWSER

Console