diff --git a/README.md b/README.md index e76792d..b42ff88 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # login-page-css -[![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-) ![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/) @@ -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. diff --git a/screenshoots/20-twitter.png b/screenshoots/20-twitter.png new file mode 100644 index 0000000..eab1994 Binary files /dev/null and b/screenshoots/20-twitter.png differ diff --git a/screenshoots/21-github.png b/screenshoots/21-github.png new file mode 100644 index 0000000..a0c16d5 Binary files /dev/null and b/screenshoots/21-github.png differ diff --git a/src/20-twitter/index.html b/src/20-twitter/index.html new file mode 100644 index 0000000..2d19144 --- /dev/null +++ b/src/20-twitter/index.html @@ -0,0 +1,51 @@ + + + + + + + Login on Twitter + + + + + + + + +
+
+ twitter_logo +

Log in to Twitter

+
+
+
+ + +
+
+ + +
+ +
+
+ Forgot password? + . + Sign up for Twitter +
+
+ + + + diff --git a/src/20-twitter/style.css b/src/20-twitter/style.css new file mode 100644 index 0000000..9f5d5fc --- /dev/null +++ b/src/20-twitter/style.css @@ -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; + } diff --git a/src/21-github/index.html b/src/21-github/index.html new file mode 100644 index 0000000..36beff7 --- /dev/null +++ b/src/21-github/index.html @@ -0,0 +1,47 @@ + + + + Login on GitHub + + + + + + + + + +
+
+
+
+ github_logo +
+

Sign in to GitHub

+
+
+
+
+ + +
+
+ + + +
+ +
+
+
+
+ New to GitHub? Create an account. +
+
Terms     Privacy      Security      Contact GitHub
+
+
+
+
+ + + diff --git a/src/index.html b/src/index.html index 90a2b24..a7765f0 100644 --- a/src/index.html +++ b/src/index.html @@ -208,6 +208,14 @@

Whatsapp Web Login Page

Code by @abhj

+ + Github +
+

Github Login Page

+

From Github Login Page

+

Code by @abhj

+
+