Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form autocomplete="off" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="zR59RWkCDDP0gI8F4wbSf0ZnFEJd-A6kOvHukii2AuYVIZBZBlJEiLQxjEo_Cyt7Tt_HOIs5YwY5V16mEDSSTw" autocomplete="off" />
  <fieldset class="card flex flex-col gap">
    <legend class="i-fit font-medium leading-none">Login to your account</legend>
    <div class="flex items-start gap">
      <p class="text-sm text-subtle flex-item-grow">Enter your email below to login to your account</p>
      <a class="btn btn--plain" href="#">Sign Up</a>
    </div>
    <div class="flex flex-col gap">
      <div class="flex flex-col gap-half">
        <label class="text-sm font-medium leading-none" for="email">Email</label>
        <input placeholder="m@example.com" required="required" class="input" type="email" name="email" id="email" />
      </div>
      <div class="flex flex-col gap-half">
        <div class="flex items-center">
          <label class="text-sm font-medium leading-none" for="password">Password</label>
          <a class="text-sm mis-auto" href="#">Forgot your password?</a>
        </div>
        <input required="required" class="input" type="password" name="password" id="password" />
      </div>
    </div>
    <div class="card__footer flex flex-col gap-half">
      <input type="submit" name="commit" value="Login" class="btn btn--primary" data-disable-with="Login" />
      <button type="button" class="btn">Login with Google</button>
    </div>
  </fieldset>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%= form_with url: nil, html: { autocomplete: "off" }, contents: true do |form| %>
  <fieldset class="card flex flex-col gap">
    <legend class="i-fit font-medium leading-none">Login to your account</legend>
    <div class="flex items-start gap">
      <p class="text-sm text-subtle flex-item-grow">Enter your email below to login to your account</p>
      <%= link_to "Sign Up", "#", class: "btn btn--plain" %>
    </div>
    <div class="flex flex-col gap">
      <div class="flex flex-col gap-half">
        <%= form.label :email, class: "text-sm font-medium leading-none" %>
        <%= form.email_field :email, placeholder: "m@example.com", required: true, class: "input" %>
      </div>
      <div class="flex flex-col gap-half">
        <div class="flex items-center">
          <%= form.label :password, class: "text-sm font-medium leading-none" %>
          <%= link_to "Forgot your password?", "#", class: "text-sm mis-auto" %>
        </div>
        <%= form.password_field :password, required: true, class: "input" %>
      </div>
    </div>
    <div class="card__footer flex flex-col gap-half">
      <%= form.submit "Login", class: "btn btn--primary" %>
      <button type="button" class="btn">Login with Google</button>
    </div>
  </fieldset>
<% end %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.card {
  --card-padding: var(--size-4);
  background-color: var(--color-surface);
  border-radius: var(--rounded-xl);
  border-width: var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding, var(--size-4));
}
.card__footer {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-block-start-width: var(--border);
  margin-block-end: calc(var(--card-padding) * -1);
  margin-inline: calc(var(--card-padding) * -1);
  padding: var(--card-padding);
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.