Created
July 24, 2020 18:20
-
-
Save hharzer/e375e7dbfff83774b48c78d64eee2235 to your computer and use it in GitHub Desktop.
Bulma Login Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="hero is-fullheight"> | |
<div class="hero-body"> | |
<div class="container"> | |
<div class="columns is-centered"> | |
<div class="column is-6-tablet is-5-desktop is-4-widescreen"> | |
<form action="" class="box is-shadowless"> <h1 class="title">Please sign in</h1> <div class="card"> | |
<div class="card-content"> | |
<div class="field"> | |
<label for="" class="label">Email</label> | |
<div class="control has-icons-left"> | |
<input type="email" placeholder="e.g. bobsmith@gmail.com" class="input" required> | |
<span class="icon is-small is-left"> | |
<i class="fa fa-envelope"></i> | |
</span> | |
</div> | |
</div> | |
<div class="field"> | |
<label for="" class="label">Password</label> | |
<div class="control has-icons-left"> | |
<input type="password" placeholder="*******" class="input" required> | |
<span class="icon is-small is-left"> | |
<i class="fa fa-lock"></i> | |
</span> | |
</div> | |
</div> | |
<div class="field"> | |
<label for="" class="checkbox"> | |
<input type="checkbox"> | |
Remember me | |
</label> | |
</div> | |
<div class="field buttons"> | |
<button class="button is-fullwidth is-success"> | |
<span class="icon"><i class="gg-log-in"></i></span><span>Login</span> | |
</button></div></div> | |
<div class="card"> | |
<div class="card-content"> | |
<div class="field buttons"> | |
<button class="button is-google is-fullwidth"> <span class="icon"> | |
<i class="gg-google"></i> | |
</span> | |
<span>Google</span></button> | |
<button class="button is-facebook is-fullwidth"> <span class="icon"> | |
<i class="gg-facebook"></i> | |
</span> | |
<span>Facebook</span></button> | |
<button class="button is-github is-fullwidth"> | |
<span class="icon"> | |
<i class="fa fa-github"></i> | |
</span> | |
<span>Github</span></button> | |
<button class="button is-microsoft is-fullwidth"> <span class="icon"> | |
<i class="gg-microsoft"></i> | |
</span> | |
<span>Microsoft</span></button> | |
<button class="button is-twitter is-fullwidth"> <span class="icon"> | |
<i class="gg-twitter"></i> | |
</span> | |
<span>Twitter</span></button> | |
</div></div></div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> | |
<link href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css" rel="stylesheet" /> | |
<link href="https://cdn.jsdelivr.net/npm/css.gg/icons/all.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment