A Pen by Mason Stenquist on CodePen.
Created
August 14, 2018 23:09
-
-
Save lamsan/c24332d93eac99cdbc57a477d3dc5984 to your computer and use it in GitHub Desktop.
Semantic UI - Login
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
<div class="ui middle aligned center aligned grid"> | |
<div class="column"> | |
<h2 class="ui image header"> | |
<div class="content"> | |
Log-in to your account | |
</div> | |
</h2> | |
<form action="https://s.codepen.io/voltron2112/debug/PqrEPM?" method="get" class="ui large form"> | |
<div class="ui stacked secondary segment"> | |
<div class="field"> | |
<div class="ui left icon input"> | |
<i class="user icon"></i> | |
<input type="text" name="email" placeholder="E-mail address"> | |
</div> | |
</div> | |
<div class="field"> | |
<div class="ui left icon input"> | |
<i class="lock icon"></i> | |
<input type="password" name="password" placeholder="Password"> | |
</div> | |
</div> | |
<div class="ui fluid large teal submit button">Login</div> | |
</div> | |
<div class="ui error message"></div> | |
</form> | |
<div class="ui message"> | |
New to us? <a href="https://s.codepen.io/voltron2112/debug/PqrEPM?">Register</a> | |
</div> | |
</div> | |
</div> |
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
$(document) | |
.ready(function() { | |
$('.ui.form') | |
.form({ | |
fields: { | |
email: { | |
identifier : 'email', | |
rules: [ | |
{ | |
type : 'empty', | |
prompt : 'Please enter your e-mail' | |
}, | |
{ | |
type : 'email', | |
prompt : 'Please enter a valid e-mail' | |
} | |
] | |
}, | |
password: { | |
identifier : 'password', | |
rules: [ | |
{ | |
type : 'empty', | |
prompt : 'Please enter your password' | |
}, | |
{ | |
type : 'length[6]', | |
prompt : 'Your password must be at least 6 characters' | |
} | |
] | |
} | |
} | |
}) | |
; | |
}) | |
; |
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
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.js"></script> |
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
body > .grid { | |
height: 100%; | |
} | |
.image { | |
margin-top: -100px; | |
} | |
.column { | |
max-width: 450px; | |
} |
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/semantic-ui/2.0.8/semantic.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment