Skip to main content

Register Views

Tinyflora​

tip

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

Preview​

Ver en pantalla completa

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>

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

  2. 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>
  1. 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>

  1. 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.

  2. 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​

Ver en pantalla completa