Skip to content
This repository was archived by the owner on Feb 3, 2025. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,12 @@ https://mazipan.github.io/login-page-css/
- [Demo](https://mazipan.github.io/login-page-css/20-twitter/index.html)
- [@abhj](https://github.com/abhj)

### Github Login Page

- [Source Design](https://github.com)
- [Demo](https://mazipan.github.io/login-page-css/21-github/index.html)
- [@abhj](https://github.com/abhj)

## Contribution

This project is very far from perfect, any contributions from you is very welcomed. You can help me with submit any issues you found, fixing any bugs, submit awesome login page design inspiration, or adding new login page by your self.
Expand Down
Binary file modified screenshoots/20-twitter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshoots/21-github.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/20-twitter/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<body>
<div class="container">
<div class="header">
<a href=""><img src="../assets/logo.png" alt="twitter_logo" width="70px" height="70px"><span></span></a>
<a href=""><img src="../assets/logo.png" alt="twitter_logo" width="70px" height="70px"><span></span></a>
<h1>Log in to Twitter</h1>
</div>
<form action="#" method="post" autocomplete="off">
Expand Down
47 changes: 47 additions & 0 deletions src/21-github/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Login on GitHub</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="../shared/normalize.css">
<link rel="stylesheet" href="../shared/additional.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color: #F9F9F9;">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using Bootstrap, try to create from scratch

<div class="container" style="padding: 60px">
<div class="row">
<div class="text-center">
<div class="col-xs-12 col-md-4 col-md-offset-4">
<a href=""><img style="margin-left:auto; margin-right:auto; display: block" src="../assets/logo.png" alt="github_logo" width="70px" height="70px"><span></span></a>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As my previous comments, avoid using inline styles

<br>
<p style="font-family: segoe UI; font-size: 24px; color:#333333; font-weight: 400px;"> Sign in to GitHub </p>
<br>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using <br/> as much as possible

<div class="well" style="background-color: #F9F9F9;" >
<form>
<div class="form-group">
<label for="exampleInputEmail1" style=" float: left;">Username or Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1" style="float: left;">Password</label>
<a href="#"> <label style="float: right;">Forgot Password?</label></a>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="">
</div>
<button type="submit" class="btn btn-success" style=" width: 100% ">Sign In</button>
</form>
<br/>
</div>
<div class="well" style="background-color: #F9F9F9;" >
<span > New to GitHub?</span> <a href="#"> Create an account.</a>
</div>
<div style="padding-top: 20px"><a href="#"> Terms</a>&nbsp&nbsp&nbsp&nbsp <a href="#"> Privacy</a> &nbsp&nbsp&nbsp&nbsp <a href="#"> Security</a> &nbsp&nbsp&nbsp&nbsp<a class="ex5" href="#" > Contact GitHub</a></div>
</div>
</div>
</div>
</div>
</link>
</body>
</html>
8 changes: 8 additions & 0 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,14 @@ <h4><b>Twitter Login Page</b></h4>
<p>Code by @abhj</p>
</div>
</a>
<a class="card" href="21-github/index.html">
<img src="../screenshoots/21-github.png" alt="Github" style="width: 100%" />
<div class="container">
<h4><b>Github Login Page</b></h4>
<p>From Github Login Page</p>
<p>Code by @abhj</p>
</div>
</a>
</div>
</div>
</div>
Expand Down