Register Views

Tinyflora

tip

To view the page in full screen, go to the following link

Preview

Mobile

Ver en pantalla completa

Desktop

Ver en pantalla completa

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PucoUI | Tinyflora Signup</title>
    <link rel="stylesheet" href="/pucoui/styles/pucoui.min.css" />
    <link
      rel="icon"
      type="image/png"
      href="/pucoui/favicon/favicon-96x96.png"
      sizes="96x96"
    />
    <link rel="icon" type="image/svg+xml" href="/pucoui/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/pucoui/favicon/favicon.ico" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/pucoui/favicon/apple-touch-icon.png"
    />
    <meta name="apple-mobile-web-app-title" content="pucoui" />
    <link rel="manifest" href="/pucoui/favicon/site.webmanifest" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&amp;display=swap"
      rel="stylesheet"
    />
    <style>

      /* INIT THEME VARIABLES */
      :root {
        --pui-color-primary: #000000;
        --pui-ui-color-text-muted: #71777a;
      }


      /* SET FONT STYLES */
      html {
        font-family: &#x27;Lato&#x27;, sans-serif;
        font-style: normal;
        background-color: #fff;
        line-height: 1.25;
      }


      /* PROJECT CLASSES */
      .blur-card {
        background-color: rgba(128, 128, 128, 0.2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
    </style>
  </head>
  <body>
    <div class="w-100 is-grid" style="height:100vh">
      <!--  CONTENT  -->
      <div class="is-col-12 md:is-col-5 px-6">
        <div class="is-flex is-flex-column h-100">
          <!--  HEADER  -->
          <div class="py-5 is-vstack">
            <figure class="image w-100" style="max-width:160px">
              <img
                src="/pucoui/showcase/register/tinyflora/tinyflora-logo.svg"
                alt="Tinyflora logo"
              />
            </figure>
          </div>

          <!--  CONTENT  -->
          <div class="is-flex-1 is-stack is-justify-content-center is-gap-6">
            <!--  CONTENT HEADER  -->
            <div class="is-text-center is-vstack is-gap-2">
              <h1>Bienvenido</h1>
              <h6 class="is-font-normal is-text-muted">
                Para iniciar sesión en tu cuenta, ingresa tu dirección de correo
                electrónico y contraseña
              </h6>
            </div>

            <!--  CONTENT FORM  -->
            <section class="is-stack is-gap-4">
              <div class="field">
                <label class="label">Correo electrónico</label>
                <input
                  class="input"
                  type="password"
                  placeholder="Ingresa tu correo electrónico"
                />
              </div>
              <div class="field">
                <label class="label">Contraseña</label>
                <input
                  class="input"
                  type="password"
                  placeholder="Ingresa tu contraseña"
                />
              </div>
              <button class="btn is-md w-100 mt-4">Ingresar</button>
            </section>

            <!--  CONTENT FOOTER  -->
            <div class="is-vstack is-gap-1 is-text-center">
              <div>No dudes en ponerte en contacto con nosotros</div>
              <a href="#">support@pucoui.com</a>
            </div>
          </div>

          <!--  FOOTER  -->
          <div class="is-text-center py-5 is-text-muted-2 is-font-size-7">
            Todos los derechos reservados
          </div>
        </div>
      </div>

      <!--  IMAGE  -->
      <div
        class="is-col-7 is-vstack is-justify-content-center px-5 is-hidden md:is-flex"
        style="background-image:url(/pucoui/showcase/register/tinyflora/tinyflora-bg.png);background-repeat:no-repeat;background-position:center;background-size:cover"
      >
        <div
          class="px-5 py-6 w-100 is-rounded-4 blur-card elevation-5 is-color-white is-stack is-gap-4"
          style="max-width:400px"
        >
          <img
            src="/pucoui/showcase/register/tinyflora/tinyflora-icon-negative.svg"
            alt="Tinyflora"
            class="w-100"
            style="max-width:60px"
          />
          <div class="is-stack">
            <h3 class="is-font-semi-bold">Lorem ipsum dolor sit amet</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Reiciendis harum aut nesciunt ea.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

How it works

How it works

1. We update the variables according to the page's style.

<style>
  /* INIT THEME VARIABLES */
  :root {
    --pui-color-primary: #000000;
    --pui-ui-color-text-muted: #71777a;
  }
</style>

2. We install fonts, in this case we will use the Lato font from Google Fonts.

3. We add the font to the project's styles.

<style>
  /* SET FONT STYLES */
  html {
    font-family: &#x27;Lato&#x27;, sans-serif;
    font-style: normal;
    background-color: #fff;
    line-height: 1.25;
  }
</style>

4. We create custom classes for the project.

<style>
  /* PROJECT CLASSES */
  .blur-card {
    background-color: rgba(128, 128, 128, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
</style>

5. The image shown on the right side should only be displayed when the screen is larger than md. To achieve this, we will add the classes is-hidden md:is-flex to it, hiding the element by default and making it a flex container when the screen is larger than md.

6. The main container holding the form must also be responsive, taking the full width on small screens and a proportion of 5/12 when the screen is larger than md. For this, we will add the is-grid class to the parent container and the is-col-12 md:is-col-5 classes to the form container.

Gitfrog

tip

To view the page in full screen, go to the following link

Preview

Mobile

Ver en pantalla completa

Desktop

Ver en pantalla completa

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PucoUI | Gitfrog Signup</title>
    <link rel="stylesheet" href="/pucoui/styles/pucoui.min.css" />
    <link
      rel="icon"
      type="image/png"
      href="/pucoui/favicon/favicon-96x96.png"
      sizes="96x96"
    />
    <link rel="icon" type="image/svg+xml" href="/pucoui/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/pucoui/favicon/favicon.ico" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/pucoui/favicon/apple-touch-icon.png"
    />
    <meta name="apple-mobile-web-app-title" content="pucoui" />
    <link rel="manifest" href="/pucoui/favicon/site.webmanifest" />

    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@3.0.0/dist/iconify-icon.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&amp;display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;display=swap"
      rel="stylesheet"
    />
    <style>
      html {
        font-family: &#x27;Inter&#x27;, &#x27;Roboto&#x27;, sans-serif;
        font-style: normal;
        background-color: #fff;
        line-height: 1.25;
      }

      .gitfrog-pet {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -48px;
      }

      @media (min-width: 48rem) {
        .gitfrog-pet {
          bottom: 156px;
          opacity: 0.8;
          z-index: 0;
        }
      }

      .container {
        width: 100%;
        max-width: 600px;
      }
    </style>
  </head>
  <body>
    <div
      class="w-100 is-grid is-auto-rows-min md:is-auto-rows-fr"
      style="min-height:100vh;height:100%"
    >
      <div
        class="p-6 md:py-9 md:px-7 is-vstack is-col-12 md:is-col-6 is-color-white is-relative"
        style="background-image:url(/pucoui/showcase/register/gitfrog/pucoui-gitfrog-bg.jpg);background-repeat:no-repeat;background-position:top;background-size:cover"
      >
        <div class="is-stack is-gap-4 pb-6 container">
          <div class="is-block md:is-hidden">
            ¿Ya tienes una cuenta?
            <a href="#">Signin →</a>
          </div>
          <h1 class="h4">Crea una cuenta completamente gratis</h1>
          <div>
            Explora las funcionalidades que Gitfrog tiene para ti y las empresas
          </div>
          <details class="details">
            <summary>Mira nuestras funcionalidades</summary>
            <ul class="is-stack is-gap-4 mt-5">
              <li class="is-flex is-gap-2">
                <iconify-icon
                  class="icon"
                  icon="mdi:checkbox-marked-circle-auto-outline"
                ></iconify-icon>
                <div class="is-stack is-gap-1">
                  <div class="is-font-medium">Asistente de código con IA</div>
                  <div>
                    Impulsa tu productividad con un copiloto inteligente que
                    sugiere código mientras escribes.
                  </div>
                </div>
              </li>
              <li class="is-flex is-gap-2">
                <iconify-icon
                  class="icon"
                  icon="mdi:checkbox-marked-circle-auto-outline"
                ></iconify-icon>
                <div class="is-stack is-gap-1">
                  <div class="is-font-medium">Repos ilimitados</div>
                  <div>
                    Crea y colabora en proyectos públicos o privados sin
                    restricciones, con seguridad desde el primer commit.
                  </div>
                </div>
              </li>
              <li class="is-flex is-gap-2">
                <iconify-icon
                  class="icon"
                  icon="mdi:checkbox-marked-circle-auto-outline"
                ></iconify-icon>
                <div class="is-stack is-gap-1">
                  <div class="is-font-medium">
                    Revisiones de código integradas
                  </div>
                  <div>
                    Mejora la calidad de tu software con herramientas de
                    revisión colaborativas y fáciles de usar.
                  </div>
                </div>
              </li>
              <li class="is-flex is-gap-2">
                <iconify-icon
                  class="icon"
                  icon="mdi:checkbox-marked-circle-auto-outline"
                ></iconify-icon>
                <div class="is-stack is-gap-1">
                  <div class="is-font-medium">Comunidad global</div>
                  <div>
                    Comparte, aprende y colabora con devs de todo el mundo.
                    Porque el código no se escribe solo (todavía).
                  </div>
                </div>
              </li>
            </ul>
          </details>
        </div>
        <figure class="image is-size-96 gitfrog-pet elevation-4 is-rounded">
          <img
            src="/pucoui/showcase/register/gitfrog/pucoui-gitfrog-pet.png"
            alt=""
          />
        </figure>
      </div>
      <div class="is-vstack is-col-12 md:is-col-6 p-6 md:py-3 md:px-7">
        <div class="container is-stack is-gap-4">
          <div
            class="is-hstack is-gap-2 is-justify-content-flex-end is-hidden md:is-flex"
          >
            <span>¿Ya tienes una cuenta?</span>
            <a href="#">Signin →</a>
          </div>
          <h2 class="h3 mb-3 mt-4 md:mt-6">Registrate en Gitfrog</h2>
          <div class="field">
            <label class="label" for="email">Correo electrónico</label>
            <input
              class="input"
              type="email"
              placeholder="Ingresa tu correo electrónico"
              id="email"
            />
          </div>
          <div class="field">
            <label class="label" for="password">Contraseña</label>
            <input
              class="input"
              type="password"
              placeholder="Ingresa tu contraseña"
              id="password"
            />
            <span class="help">
              La contraseña debe tener al menos 8 caracteres
            </span>
          </div>
          <div class="field">
            <label class="label" for="country">País</label>
            <select class="select" id="country">
              <option>Perú</option>
              <option>Argentina</option>
              <option>Bolivia</option>
              <option>Brasil</option>
              <option>Chile</option>
              <option>Colombia</option>
              <option>Ecuador</option>
              <option>Estados Unidos</option>
              <option>Mexico</option>
              <option>Paraguay</option>
              <option>Venezuela</option>
            </select>
          </div>
          <div class="field">
            <label class="label">Preferencias de correo</label>
            <div class="field checkbox">
              <input type="checkbox" id="input2" />
              <label for="input2">
                Recibe ocacionalmente correos con nuevas funcionalidades de la
                aplicación, no te preocupes no te enviaremos SPAM
              </label>
            </div>
          </div>
          <button class="btn is-md w-100 mt-4">Crea una cuenta</button>
          <div class="is-text-muted">
            Al crear una cuenta tu aceptas nuestros
            <a href="#">Términos y condiciones</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>