Untitled

<html><head>
<style>
  @import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
  body{
    font-family: sans-serif;
  }
  .login-box{
    width: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
  }
  .login-box h1{
    float: left;
    font-size: 40px;
    border-bottom: 6px solid #4CAF50;
    margin-bottom: 50px;
    padding: 13px 0;
  }
  .textbox{
    width: 90%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #4CAF50;
  }
  .textbox input{
    border: none;
    outline: none;
    background: none;
    color: white;
    font-size: 18px;
    width: 80%;
    float: left;
    margin: 0 10px;
  }
  .textbox i{
    width: 26px;
    float: left;
    text-align: center;
  }
 .btn{
    width: 100%;
    background: none;
    border: 2px solid #4CAF50;
    color: white;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
    margin: 12px 0;
  }
  .box{
    background-color:#383838;
    padding: 15px;
    width:350px;
    height:300px;
    border:3px solid #73AD21;
    position:absolute;
    left:400px;
    top:200px;
  }
  .dimScreen{
    position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
  }
</style></head>

<body>
  <canvas id="risciCanvas" width="410" height="300" style="z-index: 1;">
  </canvas>
  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Rizal_National_Science_High_School_Logo.png" style="width:100px; border:0; position:absolute; left:50px; top:40px">
  <div class="box">
    <div class="login-box">
      <h1>Welcome</h1>
      <div class="textbox">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="Username">
      </div>
      <input type="button" class="btn" value="Enter">
    </div>
   </div>

  <script>
    var c = document.querySelector("#risciCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0, 300);
    ctx.lineTo(0,0);
    ctx.lineTo(400, 0);
    ctx.closePath();
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#666666';
    ctx.stroke();
    ctx.fillStyle = "#FFCC00";
    ctx.fill();

  </script>

</body></html>