Created
October 6, 2019 10:48
-
-
Save segebee/2c0cd58ffe03ffe4849bf740ca50d1f4 to your computer and use it in GitHub Desktop.
CSS Grid Login Page
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 { | |
| 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%; | |
| } | |
| } |
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
| <!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>© 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