Saved!

Google Login Box - GNCvI0hK

HTML CSS JavaScript Frontend Development

Google Login Box

  
  <header>
One account. All of Google.
</header>
<div class="login">
		<span style="font-size:18px;color:blue;font-family:Source Sans Pro;">G</span>
		<span style="font-size:18px;color:red;font-family:Source Sans Pro;">o</span>
		<span style="font-size:18px;color:#fc3;font-family:Source Sans Pro;">o</span>
		<span style="font-size:18px;color:blue;font-family:Source Sans Pro;">g</span>
		<span style="font-size:18px;color:#6cc;font-family:Source Sans Pro;">l</span>
		<span style="font-size:18px;color:red;font-family:Source Sans Pro;">e</span>
	<h3>Sign in</h3>
	<span>Use your Google Account</span>
<form action="" id="login-form">
<div id="u" class="form-group">
  <input id="username" spellcheck=false class="form-control" name="username" type="text" size="18" alt="login" required="">
  <span class="form-highlight"></span>
  <span class="form-bar"></span>
  <label for="username" class="float-label">Email</label>
  <erroru>
  	Username is required
  	<i>		
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
		    <path d="M0 0h24v24h-24z" fill="none"/>
		    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
		</svg>
  	</i>
  </erroru>
</div>
<div id="p" class="form-group">
  <input id="password" class="form-control" spellcheck=false name="password" type="password" size="18" alt="login" required="">
  <span class="form-highlight"></span>
  <span class="form-bar"></span>
  <label for="password" class="float-label">Password</label>
  <errorp>
  	Password is required
  	<i>		
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
		    <path d="M0 0h24v24h-24z" fill="none"/>
		    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
		</svg>
  	</i>
  </errorp>
</div>
<div class="form-group">
<input type="checkbox" id="rem">
<label for="rem">Stay Signed in</label>
<button id="submit" type="submit" ripple>Sign in</button>
</div>
</form>
<footer><a href="#0">Create an account</a></footer>
</div>


      
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js