Login

In this example below you will see how to do a Login with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Login </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
	<div class="row justify-content-center">
		<div class="col-8 text-center">
			<h1>Welcome Back</h1>
			<div class="jumbotron">
				<form>
					<input type="text" placeholder="User Name" name="user" required />
					<input type="password" placeholder="Password" name="pass" required />
					<button class="btn btn-primary btn-lg">login</button>
				</form>
			</div>
		</div>
	</div>
	
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/login-rvZNdY */
body {
  background: #5DADEC;
}

.col-8 {
  margin: 35vh auto;
}

input {
  width: 50%;
  display: block;
  margin: 0 auto;
  padding-bottom: 10px;
}

.jumbotron {
  opacity: .7;
}

Comments