Vistas de Registro

Tinyflora

tip

Para ver la página en pantalla completa ir al siguiente 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>

Como funciona

Como funciona

1. Actualizamos las variables según el estilo de la página

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

2. Instalamos fuentes, para este caso vamos a usar la fuente Lato desde Google Fonts

3. Agregamos la fuente al estilo del proyecto

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

4. Creamos clases propias del proyecto

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

5. La imágen que se muestra al lado derecho solo se debe mostrar cuando la pantalla es mayor a md, para lograr esto vamos a agregarle las clases is-hidden md:is-flex ocultando el elemento por defecto y volviendolo flex cuando la pantalla es mayor a md

6. El contenedor principal que tiene el formulario debe ser también responsive, tomando todo el ancho en pantallas pequeñas y una proporcion de 5/12 cuando la pantalla es mayor a md. Para esto vamos a agregarle al contenedor padre la clase is-grid y al contenedor del formulario las clases is-col-12 md:is-col-5

Gitfrog

tip

Para ver la página en pantalla completa ir al siguiente 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>