Skip to content

Instantly share code, notes, and snippets.

@segebee
Created October 6, 2019 10:48
Show Gist options
  • Save segebee/2c0cd58ffe03ffe4849bf740ca50d1f4 to your computer and use it in GitHub Desktop.
Save segebee/2c0cd58ffe03ffe4849bf740ca50d1f4 to your computer and use it in GitHub Desktop.
CSS Grid Login Page
body {
margin: 0;
font-family: Lato;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
height: 100vh;
}
.page-half {
height: 100vh;
}
#left {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
padding: 0 30px;
}
#right {
background: url("../img/bgs/bg3.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
header .logo {
margin: 10px 0;
}
.login-form {
width: 60%;
}
.login-form p {
color: #888;
margin-bottom: 30px;
}
.login-form label {
display: inline-block;
color: #444;
}
.login-form input {
display: block;
height: 40px;
width: 100%;
padding-left: 10px;
font-size: 18px;
margin-top: 15px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.login-form div {
margin: 20px 0;
}
.login-form .forgot-password {
float: right;
}
.login-form .forgot-password a {
color: #111;
text-decoration: none;
}
.login-form button {
height: 50px;
width: 100%;
border-radius: 5px;
border: 1px solid #27ae60;
background-color: #27ae60;
color: #fff;
font-size: 18px;
padding: 0 25px;
}
.login-form button:hover {
opacity: 0.9;
color: #fff;
}
footer {
align-self: end;
}
footer .author {
font-size: 12px;
}
@media only screen and (max-width: 600px) {
#right {
display: none;
}
.login-form {
width: 100%;
}
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Admin Portal</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="login.css" />
</head>
<body>
<div class="container">
<div id="left" class="page-half">
<header>
<div id="logo">
<img src="http://nlyvn.com.ng/wp-content/uploads/2015/07/nlyvnlogo1.png" class="logo" />
</div>
</header>
<div class="login-form">
<h2>Welcome Back !</h2>
<p>Sign in to access the Administrative Portal</p>
<form>
<div>
<label>Email</label>
<input type="text" name="email" id="email" autofocus required />
</div>
<div>
<label>Password</label>
<label class="forgot-password"><a href="#">Forgot your password?</a></label>
<input type="password" name="password" id="password" required />
</div>
<div>
<button name="submit" id="submit">Login</button>
</div>
</form>
</div>
<footer>
<p>&copy; 2019 Fictional Company</p>
<p class="author">Powered by NLYVN Media</p>
</footer>
</div>
<div id="right" class="page-half">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment