bulma-login-template/index.html at master · aldi/bulma-login-template · GitHub

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="github.com/aldi" />
  <meta name="description" content="Free Bulma Login Template, part of Awesome Bulma Templates" />
  <meta name="keywords" content="bulma, login, page, website, template, free, awesome" />
  <link rel="canonical" href="https://aldi.github.io/bulma-login-template/" />
  <title>Bulma Login - Free Bulma Template</title>
  <meta name="theme-color" content="#ffffff" />
  <meta name="referrer" content="strict-origin-when-cross-origin" />
  <link rel="preload" href="media/background.webp" as="image" type="image/webp" />
  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@3/css/all.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.2.0/css/all.min.css" />
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <main id="main-content" class="hero is-fullheight">
    <div class="hero-body">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-12-mobile is-8-tablet is-8-desktop is-4-widescreen">
            <div class="box p-6 mb-0 glass">
              <h1 class="title is-4 mb-5 has-text-centered has-text-weight-semibold">Please log in to proceed</h1>
              <form action="#" method="post">
                <div class="field">
                  <label class="label sr-only" for="email">Email</label>
                  <div class="control has-icons-left">
                    <input id="email" name="email" class="input is-medium" type="email" placeholder="Email"
                      autocomplete="email" autocapitalize="none" spellcheck="false" inputmode="email" required />
                    <span class="icon is-medium is-left">
                      <i class="fa-solid fa-envelope" aria-hidden="true"></i>
                    </span>
                  </div>
                </div>
                <div class="field">
                  <label class="label sr-only" for="password">Password</label>
                  <div class="control has-icons-left">
                    <input id="password" name="password" class="input is-medium" type="password" placeholder="Password"
                      autocomplete="current-password" required />
                    <span class="icon is-small is-left">
                      <i class="fa-solid fa-lock" aria-hidden="true"></i>
                    </span>
                  </div>
                </div>
                <div class="field mb-4">
                  <label for="remember" class="checkbox has-text-weight-medium">
                    <input type="checkbox" id="remember" name="remember" />
                    Remember me
                  </label>
                </div>
                <div class="field">
                  <div class="control">
                    <button type="submit" class="button is-info is-medium is-fullwidth has-text-weight-normal">
                      Login
                    </button>
                  </div>
                </div>
                <p class="subtitle is-6 mt-5 mb-3 has-text-centered has-text-weight-semibold">Login using social media
                </p>
                <div class="buttons is-centered">
                  <a class="button is-medium is-facebook" href="https://facebook.com" aria-label="Login with Facebook">
                    <span class="icon">
                      <i class="fa-brands fa-facebook-f fa-lg" aria-hidden="true"></i>
                    </span>
                  </a>
                  <a class="button is-medium is-twitter" href="https://twitter.com" aria-label="Login with Twitter">
                    <span class="icon">
                      <i class="fa-brands fa-twitter fa-lg" aria-hidden="true"></i>
                    </span>
                  </a>
                  <a class="button is-medium is-github" href="https://github.com/aldi" aria-label="Login with GitHub">
                    <span class="icon">
                      <i class="fa-brands fa-github fa-lg" aria-hidden="true"></i>
                    </span>
                  </a>
                </div>
              </form>
            </div>
            <p class="is-size-7 has-text-centered has-text-grey-dark mt-4 mb-2">
              <a class="has-text-link" href="#">Sign up</a> · <a class="has-text-link" href="#">Forgot password</a> ·
              <a class="has-text-link" href="#">Need help?</a>
            </p>
            <div class="has-text-centered">
              <div class="select is-small is-rounded mt-2">
                <label for="language-select" class="sr-only">Select language</label>
                <select id="language-select" name="language">
                  <option selected>English</option>
                  <option>French</option>
                  <option>German</option>
                  <option>Italian</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="hero-foot pb-2">
      <div class="container has-text-centered">
        <a class="has-text-grey-dark is-size-7"
          href="https://www.aldi.st?utm_source=Github&utm_medium=bulma-login-template">
          Designed with <i class="fa-solid fa-heart fa-xs has-text-danger" aria-hidden="true"></i> by aldi
        </a>
      </div>
    </footer>
  </main>
</body>

</html>