<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <!-- :: Meta Tags :: -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="theme-color" content="#0060fe">
  <meta name="description" content="Access your HostGate account securely. Log in to our intuitive hosting control panel and manage your web hosting, domains, and other services with ease.">
  <meta name="keywords" content="login, log in, hosting control panel, secure hosting, HostGate">
  <meta name="language" content="en">
  <!-- :: Title :: -->
  <title>Log in to Your HostGate Account - Secure Hosting Control Panel</title>
  <!-- :: Favicon :: -->
  <link rel="shortcut icon" href="assets/images/logo/favicon.ico" type="image/x-icon">
  <!-- :: CSS Files :: -->
  <link rel="stylesheet" href="assets/css/bundle.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/pages/login.css">
</head>

<body >
  <!-- :: CONTENT :: -->
  <div class="content">
    <!-- row -->
    <div class="row">
      <!-- col -->
      <div class="col-lg-6 left-col d-flex align-items-center justify-content-center">
        <!-- form-container -->
        <div class="form-container">
          <!-- form-logo -->
          <div class="form-logo">
            <img src="./assets/images/logo/logo-black.svg" class="img-fluid" alt="HostGate">
          </div>
          <!-- form-head -->
          <div class="form-head">
            <!-- form-title -->
            <h2 class="form-title">
              <img src="./assets/images/icons/waving-hand-emoji.png" class="img-fluid" alt="Icon">
              We're waiting<br>for you back
            </h2>
          </div>
          <!-- login-form -->
          <form action="#" class="login-form">
            <!-- f-label -->
            <label class="f-label" for="email">
              <!-- f-input -->
              <input class="f-input" type="email" name="email" id="email" placeholder="Email Address" required>
              <!-- state -->
              <span class="state"></span>
            </label>
            <!-- f-label -->
            <label class="f-label" for="password">
              <!-- f-input -->
              <input class="f-input" type="password" name="password" id="password" placeholder="Password" required>
              <!-- state -->
              <span class="state"></span>
            </label>
            <!-- div -->
            <div class="text-right">
              <!-- pass-link -->
              <a href="reset-pass.php" class="pass-link">Forget Password?</a>
            </div>
            <!-- btns -->
            <div class="btns mt-1">
              <button type="submit" class="theme-btn --fill-primary text-uppercase w-100">Login</button>
            </div>
          </form>
          <!-- or -->
          <div class="or">or</div>
          <!-- options -->
          <div class="options">
            <!-- row -->
            <div class="row small-gutters">
              <!-- col -->
              <div class="col-6">
                <!-- social-btn -->
                <a href="#" class="theme-btn --outline --social-btn w-100 justify-content-center text-nowrap mb-1">
                  <img src="assets/images/icons/social/google.png" class="img-fluid mr--sm-2" alt="Google">
                  Google
                </a>
              </div>
              <!-- col -->
              <div class="col-6">
                <!-- social-btn -->
                <a href="#" class="theme-btn --outline --social-btn w-100 justify-content-center text-nowrap mb-1">
                  <img src="assets/images/icons/social/facebook.png" class="img-fluid mr--sm-2" alt="Google">
                  Facebook
                </a>
              </div>
            </div>
          </div>
          <!-- comment -->
          <p class="comment text-center mt-3">Don't have a account? <a href="register.php">Create an account</a></p>
        </div>
      </div>
      <!-- col -->
      <div class="col-lg-6 right-col d-flex align-items-center justify-content-center">
        <!-- rc-img -->
        <img src="./assets/images/elements/cloud-storage.png" class="rc-img img-fluid d-lg-block d-none" alt="Image">
        <!-- text -->
        <div class="text">
          <!-- links -->
          <div class="links d-flex align-items-center justify-content-lg-start justify-content-center" data-gap-x="15px">
            <a href="index.php" class="d-inline-flex">Home</a>
            <a href="kb-2.php" class="d-inline-flex">Help Center</a>
            <a href="terms.php" class="d-inline-flex">Privacy Policy</a>
          </div>
          <!-- para-3 -->
          <p class="para-3 text-lg-left text-center">Use of this Site is subject to express terms of use.<br>By using this site, you signify that you agree to be bound by these <a href="terms.php">Universal Terms of Service</a>.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- :: SCRIPTS :: -->
  <script src="assets/js/jquery-3.7.0.min.js"></script>
  <script src="assets/js/bundle.js"></script>
  <script src="assets/js/script.js"></script>
</body>

</html>