<!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="Sign up for a HostGate account and unlock a world of reliable web hosting services. Join thousands of satisfied customers and experience top-notch performance and support.">
  <meta name="keywords" content="create account, sign up, web hosting services, reliable hosting, HostGate">
  <meta name="language" content="en">
  <!-- :: Title :: -->
  <title>Create an Account - HostGate Web Hosting Services</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/register.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">
              Welcome in<br>HostGate Website
            </h2>
          </div>
          <!-- login-form -->
          <form action="#" class="login-form">
            <!-- f-label -->
            <label class="f-label" for="fName">
              <!-- f-input -->
              <input class="f-input" type="text" name="fName" id="fName" placeholder="Full Name" required>
              <!-- state -->
              <span class="state"></span>
            </label>
            <!-- 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>
            <!-- btns -->
            <div class="btns mt-1">
              <button type="submit" class="theme-btn --fill-primary text-uppercase w-100">Register</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">Have an account? <a href="login.php">Sign in</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>