<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="main">
      <div class="center">
        <div class="first">
          <img src="/images/first.svg" alt="" />
        </div>
        <div class="cards">
          <div class="header">
            <h1 class="header_text">gusto</h1>
            <div
              class="starter"
              style="display: flex; flex-direction: column; gap: 5px"
            >
              <h4>Welcome back to gusto</h4>
              <p>
                Already a member?
                <a href="/login" style="color: #45a3a4">Login</a>
              </p>
            </div>
          </div>
          <div class="form">
            <form action="/register" method="post">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >First Name</label
                >
                <input
                placeholder="first name"
                name="firstname"
                  type="text"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >Last Name</label
                >
                <input
                placeholder="last name"
                  type="text"
                  name="lastname"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >Username</label
                >
                <input
                placeholder="Username"
                name="username"
                  type="text"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                  >Email address</label
                >
                <input
                placeholder="email"
                name="email"
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                />
                <div id="emailHelp" class="form-text">
                  We'll never share your email with anyone else.
                </div>
              </div>
              <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label"
                  >Password</label
                >
                <input
                placeholder="password"
                  type="password"
                  name="password"
                  class="form-control"
                  id="exampleInputPassword1"
                />
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>
          <div class="footer">
            <p>or sign in with</p>
          </div>
          <div class="auth">
            <a href=""><img src="/images/icons8-google-48 (1).png" alt="" /></a>
            <div class="icons" style="padding: 1vw">
              <a href=""><i class="ri-github-fill"></i></a>
              <a href=""><i class="ri-linkedin-box-fill"></i></a>
            </div>
          </div>
        </div>
        <div class="second">
          <img src="/images/second.svg" alt="" />
        </div>
      </div>
    </div>

    <script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
