```php
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'></script>
  <script src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js'></script>
  <![endif]--></head><style>
    .update-nag {display:none !important;}
    #wpadminbar{display:none !important;}
    #adminmenumain{display:none !important;}
    #wpcontent, #wpfooter{margin-left: 0;}
    #wpcontent{padding-left:0px;}
    #wpfooter{position: relative !important;}
    </style><style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 5% 0 0;
  margin: auto;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 10px;
  padding: 25px 35px 35px 35px;
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 12px;
  box-sizing: border-box;
  font-size: 14px;
}

.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #3c8dbc;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #337ab7;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}

.form .message a {
  color: #b3b3b3;
  text-decoration: none;
}

.reference {
  font-family: "Roboto", sans-serif;
  text-align: center;
  color: #b3b3b3;
  font-size: 12px;
}

.reference a {
  color: #b3b3b3;
  text-decoration: none;
}

body {
  background: #ecf0f5;
  /* fallback for old browsers */
}

.logo {
  -webkit-background-size: 84px;
  background-size: 84px;
  background-position: center top;
  background-repeat: no-repeat;
  color: #444;
  height: 84px;
  font-size: 20px;
  line-height: 1.3em;
  margin: 0 auto 15px;
  padding: 0;
  text-decoration: none;
  width: 84px;
  outline: 0;
  display: block;
}

.form label {
  text-align: left !important;
  font-weight: normal;
  color: #72777c;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}
</style>
<div class="login-page">
  <div class="logo"><img src="https://qeneacademy.com/wp-content/plugins/wpschoolpress/img/wpschoolpresslogo.jpg" height="84" width="84"></div>
  <div class="form">
    <form class="login-form" action="https://qeneacademy.com/wp-login.php" method="post">
      <label>Username or Email</label>
      <input type=" text" placeholder="username" name="log" id="user_login">
      <label>Password</label>
      <input type="password" placeholder="password" name="pwd" id="user_pass">
      <button>login</button>
      <p class="message left"><a href="https://qeneacademy.com/wp-login.php?action=lostpassword">Forgot password?</a></p>
      <p class="message right"><a href="https://qeneacademy.com/wp-login.php?action=register">Register</a></p>
    </form>
  </div>
  <p class="reference">Powered by<a href="http://wpschoolpress.com" title="school management system" target="_blank">WPSchoolPress</a></p>
</div>