Post by alexmaracinaru

Made by

@alexmaracinaru

Theme:

Light

#login#form

#e8e8e8

15K views

CSSAdd prefixes

1.card {
2  width: 190px;
3  height: 254px;
4  background: #F4F6FB;
5  border: 1px solid white;
6  box-shadow: 10px 10px 64px 0px rgba(180, 180, 207, 0.75);
7  -webkit-box-shadow: 10px 10px 64px 0px rgba(186, 186, 202, 0.75);
8  -moz-box-shadow: 10px 10px 64px 0px rgba(208, 208, 231, 0.75);
9}
10
11.form {
12  padding: 25px;
13}
14
15.card_header {
16  display: flex;
17  align-items: center;
18}
19
20.card svg {
21  color: #7878bd;
22  margin-bottom: 20px;
23  margin-right: 5px;
24}
25
26.form_heading {
27  padding-bottom: 20px;
28  font-size: 21px;
29  color: #7878bd;
30}
31
32.field {
33  padding-bottom: 10px;
34}
35
36.input {
37  border-radius: 5px;
38  background-color: #e9e9f7;
39  padding: 5px;
40  width: 100%;
41  color: #7a7ab3;
42  border: 1px solid #dadaf7
43}
44
45.input:focus-visible {
46  outline: 1px solid #aeaed6;
47}
48
49.input::placeholder {
50  color: #bcbcdf;
51}
52
53label {
54  color: #B2BAC8;
55  font-size: 14px;
56  display: block;
57  padding-bottom: 4px;
58}
59
60button {
61  background-color: #7878bd;
62  margin-top: 10px;
63  font-size: 14px;
64  padding: 7px 12px;
65  height: auto;
66  font-weight: 500;
67  color: white;
68  border: none;
69}
70
71button:hover {
72  background-color: #5f5f9c;
73}

.card {
  width: 190px;
  height: 254px;
  background: #F4F6FB;
  border: 1px solid white;
  box-shadow: 10px 10px 64px 0px rgba(180, 180, 207, 0.75);
  -webkit-box-shadow: 10px 10px 64px 0px rgba(186, 186, 202, 0.75);
  -moz-box-shadow: 10px 10px 64px 0px rgba(208, 208, 231, 0.75);
}

.form {
  padding: 25px;
}

.card_header {
  display: flex;
  align-items: center;
}

.card svg {
  color: #7878bd;
  margin-bottom: 20px;
  margin-right: 5px;
}

.form_heading {
  padding-bottom: 20px;
  font-size: 21px;
  color: #7878bd;
}

.field {
  padding-bottom: 10px;
}

.input {
  border-radius: 5px;
  background-color: #e9e9f7;
  padding: 5px;
  width: 100%;
  color: #7a7ab3;
  border: 1px solid #dadaf7
}

.input:focus-visible {
  outline: 1px solid #aeaed6;
}

.input::placeholder {
  color: #bcbcdf;
}

label {
  color: #B2BAC8;
  font-size: 14px;
  display: block;
  padding-bottom: 4px;
}

button {
  background-color: #7878bd;
  margin-top: 10px;
  font-size: 14px;
  padding: 7px 12px;
  height: auto;
  font-weight: 500;
  color: white;
  border: none;
}

button:hover {
  background-color: #5f5f9c;
}

HTML

1<form class="form card">
2  <div class="card_header">
3    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
4      <path fill="none" d="M0 0h24v24H0z"></path>
5      <path fill="currentColor" d="M4 15h2v5h12V4H6v5H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6zm6-4V8l5 4-5 4v-3H2v-2h8z"></path>
6    </svg>
7    <h1 class="form_heading">Sign in</h1>
8  </div>
9  <div class="field">
10    <label for="username">Username</label>
11    <input class="input" name="username" type="text" placeholder="Username" id="username">
12  </div>
13  <div class="field">
14    <label for="password">Password</label>
15    <input class="input" name="user_password" type="password" placeholder="Password" id="password">
16  </div>
17  <div class="field">
18    <button class="button">Login</button>
19  </div>
20</form>

<form class="form card">
  <div class="card_header">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path fill="currentColor" d="M4 15h2v5h12V4H6v5H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6zm6-4V8l5 4-5 4v-3H2v-2h8z"></path>
    </svg>
    <h1 class="form_heading">Sign in</h1>
  </div>
  <div class="field">
    <label for="username">Username</label>
    <input class="input" name="username" type="text" placeholder="Username" id="username">
  </div>
  <div class="field">
    <label for="password">Password</label>
    <input class="input" name="user_password" type="password" placeholder="Password" id="password">
  </div>
  <div class="field">
    <button class="button">Login</button>
  </div>
</form>