Skip to content

Instantly share code, notes, and snippets.

@talbs

talbs/signin.html

Last active January 9, 2017 15:11
Show Gist options
  • Save talbs/2ae89c80cf4fa7f1558e02d91541fe89 to your computer and use it in GitHub Desktop.
Save talbs/2ae89c80cf4fa7f1558e02d91541fe89 to your computer and use it in GitHub Desktop.
Download ZIP
Sample: Font Awesome CDN Sign In + Tachyons (HTML)
Raw
signin.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Mockup: Sign In</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Font Awesome makes it easy to add vector icons and social logos to your website. And Pro gives 1,000+ more icons and SVG support!">
<meta name="csrf-token" content="m4C7yg4JWwZw5X779pf5WEROpcXM0EPhW3z6bArN">
<link rel="apple-touch-icon" href="">
<link rel="stylesheet" href="/css/app.css">
<script src="https://use.fontawesome.com/efc5cb6ae2.js"></script>
<script src="https://use.fortawesome.com/41eb490e.js"></script>
<script src="https://use.fortawesome.com/2e4d17ea.js"></script>
<script>
window.Laravel = {"csrfToken":"m4C7yg4JWwZw5X779pf5WEROpcXM0EPhW3z6bArN"}</script>
</head>
<body class="view-signin animated fadeIn bg-near-white no-js">
<div class="wrapper-view">
<div class="view flex flex-column min-vh-100">
<div class="flex-grow-1 flex-shrink-none flex-basis-auto flex flex-column items-center justify-center bg-img bg-img-o-0025 bg-img-fa-icons">
<div class="w-100 ph4">
<div class="mw3 center">
<div class="tc mb4">
<a class="teal dim link ph3 pv1" href="/mockups/facdn">
<i class="dib v-mid mr2 fac fac-lg fac-flag"></i>
<span class="dib v-mid f4 fw6">Font Awesome CDN</span>
</a>
</div>
<section class="bg-white pa4 shadow-3 br2">
<h1 class="mt0 mb4 tc fw6">
<span class="db f7 darker-gray mb2">Sign in</span><span class="sr-only"> -</span>
<span class="db f3 gray ttu tracked">Hey, you look fa fa-bulous today!</span>
</h1>
<form class="signin" id="signin-form" action="" method="post">
<div class="mb3">
<label class="sr-only" for="session_email">Email Address</label>
<div class="relative">
<input class="input-reset w-100 bg-white db shadow-inset-2 ba b--lighter-gray br2 pa3 lh-solid darkest-gray f4" type="email" name="session[email]" id="session_email" value="" placeholder="Email" required>
<i class="fa fa-lg fa-fw fa-envelope lighter-gray absolute center-v right-1"></i>
</div>
</div>
<div class="mb3">
<label class="sr-only" for="session_password">Password</label>
<div class="relative">
<input class="input-reset w-100 bg-white db shadow-inset-2 ba b--lighter-gray br2 pa3 lh-solid darkest-gray f4" type="password" name="session[password]" id="session_password" value="" placeholder="Password" required>
<i class="fac fac-lock fac-fw fac-lg lighter-gray absolute center-v right-1"></i>
</div>
</div>
<div class="dt w-100 mb5">
<div class="dtc w-50">
<label class="f2 darker-gray">
<input class="mr1" checked="checked" id="session_remember" name="session[remember]" type="checkbox" value="true">
Remember me
</label>
</div>
<div class="dtc w-50 tr">
<a href="#" class="f2 teal dim">Forgot password?</a>
</div>
</div>
<button type="submit" class="db f4 fw6 w-100 btn-depth no-underline bg-teal white ba b--black-20 hover-b--black-30 hover-bg-dark-teal br2 ph4 pv3 pointer tc">
<i class="fa fa-sign-in fa-lg mr1"></i>
Sign in
</button>
</form>
</section>
<div class="mv5 relative">
<hr class="b--lightest-gray bt-0 br-0 bl-0 mb4 w-100 z-0">
<span class="bg-near-white gray ttu tracked pa2 absolute top--1 z-1 center-h">or</span>
</div>
<a href="#" class="dib w-100 border-box f4 fw6 btn-depth no-underline ba b--black-20 teal bg-white hover-b--black-30 hover-bg-dark-teal hover-white hover-b--black-30 br2 ph4 pv3 pointer tc">Become a CDN user!</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment