Skip to content
This repository was archived by the owner on Feb 3, 2025. It is now read-only.

Fix readme contribution #99

Open
AbhJ wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Fix readme contribution #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2009f12
Added 20-twitter
AbhJ Oct 24, 2021
41d6743
replace center tag with inline css
AbhJ Oct 25, 2021
3c9214d
added 21-github
AbhJ Oct 25, 2021
b9cb876
added 21-github
AbhJ Oct 25, 2021
fba3206
removed inline css
AbhJ Oct 25, 2021
51afb31
Removed 20-twitter from 21-github
AbhJ Oct 25, 2021
f5d29de
Updates
AbhJ Oct 25, 2021
c02981e
Merge branch 'fix-readme-contribution' of https://github.com/AbhJ/log…
AbhJ Oct 25, 2021
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
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# login-page-css

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-13-brightgreen.svg)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-13-brightgreen.svg)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

![Deploy](https://github.com/mazipan/login-page-css/workflows/Deploy/badge.svg?branch=master) ![PRs Welome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
Expand Down Expand Up @@ -125,6 +125,12 @@ https://mazipan.github.io/login-page-css/
- [Demo](https://mazipan.github.io/login-page-css/19-whatsapp/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 added screenshoots/20-twitter.png
View file
Open in desktop
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
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions src/20-twitter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login on Twitter</title>
<link rel="stylesheet" href="../shared/normalize.css">
<link rel="stylesheet" href="../shared/additional.css">
<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" type="text/css" href="./style.css">
</head>

<body>
<div class="container">
<div class="header">
<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">
<div class="form-group">
<input type="text" name="username" id="username" required class="inputField" autocomplete="off">
<label for="username">Phone,email, or username</label>
</div>
<div class="form-group">
<input type="password" name="password" id="password" required class="inputField" autocomplete="off">
<label for="password">Password</label>
</div>
<button type="submit" class="submitButton">Log in</button>
</form>
<div class="footer">
<a href="#">Forgot password?</a>
<span>.</span>
<a href="#">Sign up for Twitter</a>
</div>
</div>
</body>
<footer>
<a href="/login-page-css">
Back to Home
</a>
<span class="author">
Crafted with ❤️ by <a href="https://github.com/abhj" rel="noopener noreferrer" target="_blank">@abhj</a>, © 2021
</span>
<a href="https://github.com/mazipan/login-page-css" rel="noopener noreferrer" target="_blank">
Github Repo
</a>
</footer>

</html>
88 changes: 88 additions & 0 deletions src/20-twitter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}

img {
margin-left:auto;
margin-right:auto;
display: block;
}

body,
html {
width: 100%;
height: 100%;
display: grid;
place-items: center;
text-align: center;
font-family: "Roboto", sans-serif;
}
.container {
padding: 20px;
max-width: 350px;
width: 95%;
margin: 0 auto;
}
.container .header {
text-align: left;
}
.container .header h1 {
margin-top: 30px;
}

.container form .form-group {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
.container form .inputField {
height: 55px;
border-radius: 4px;
border: 2px solid rgb(29, 161, 242);
padding: 10px 10px 0;
width: 100%;
box-shadow: none;
outline: none;
font-size: 14px;
}
.container form label {
position: absolute;
top: 50%;
left: 10px;
transform: translate(0, -50%);
transition: all 0.3s;
}
.container form .inputField:focus + label,
.container form .inputField:valid + label {
transform: translate(0, -125%);
}
button.submitButton {
width: 100%;
height: 40px;
outline: none;
color: #fff;
font-weight: bold;
border: 1px solid rgb(29, 161, 242);
border-radius: 30px;
background: rgb(29, 161, 242);
cursor: pointer;
transition: all 0.3s;
}
button.submitButton:hover {
opacity: 0.7;
}
.footer {
color: rgb(29, 161, 242);
margin-top: 30px;
}
.footer a {
color: rgb(29, 161, 242);
text-decoration: none;
}
.footer span {
padding: 10px;
}
47 changes: 47 additions & 0 deletions src/21-github/index.html
View file
Open in desktop
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">
<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>
<br>
<p style="font-family: segoe UI; font-size: 24px; color:#333333; font-weight: 400px;"> Sign in to GitHub </p>
<br>
<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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,14 @@ <h4><b>Whatsapp Web 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