diff --git a/README.md b/README.md index 12cef59..41e5f11 100644 --- a/README.md +++ b/README.md @@ -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) +### Pinterest Login Page + +- [Source Design](https://www.pinterest.com/login/) +- [Demo](https://mazipan.github.io/login-page-css/21-Pinterest/index.html) +- [@ismaila5623](https://github.com/ismaila5623) + ## 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/21-pinterest.PNG b/screenshoots/21-pinterest.PNG new file mode 100644 index 0000000..b0a4f7f Binary files /dev/null and b/screenshoots/21-pinterest.PNG differ diff --git a/src/21-Pinterest/app.js b/src/21-Pinterest/app.js new file mode 100644 index 0000000..e69de29 diff --git a/src/21-Pinterest/images/fb-logo.JPG b/src/21-Pinterest/images/fb-logo.JPG new file mode 100644 index 0000000..8b8e69a Binary files /dev/null and b/src/21-Pinterest/images/fb-logo.JPG differ diff --git a/src/21-Pinterest/images/google-logo.png b/src/21-Pinterest/images/google-logo.png new file mode 100644 index 0000000..3ca4d39 Binary files /dev/null and b/src/21-Pinterest/images/google-logo.png differ diff --git a/src/21-Pinterest/images/img-1.jpg b/src/21-Pinterest/images/img-1.jpg new file mode 100644 index 0000000..311d858 Binary files /dev/null and b/src/21-Pinterest/images/img-1.jpg differ diff --git a/src/21-Pinterest/images/img-2.jpg b/src/21-Pinterest/images/img-2.jpg new file mode 100644 index 0000000..4fa04b1 Binary files /dev/null and b/src/21-Pinterest/images/img-2.jpg differ diff --git a/src/21-Pinterest/images/img-3.jpg b/src/21-Pinterest/images/img-3.jpg new file mode 100644 index 0000000..b08469e Binary files /dev/null and b/src/21-Pinterest/images/img-3.jpg differ diff --git a/src/21-Pinterest/images/img-4.jpg b/src/21-Pinterest/images/img-4.jpg new file mode 100644 index 0000000..cd24a60 Binary files /dev/null and b/src/21-Pinterest/images/img-4.jpg differ diff --git a/src/21-Pinterest/images/img-5.jpg b/src/21-Pinterest/images/img-5.jpg new file mode 100644 index 0000000..d63546b Binary files /dev/null and b/src/21-Pinterest/images/img-5.jpg differ diff --git a/src/21-Pinterest/images/img-6.jpg b/src/21-Pinterest/images/img-6.jpg new file mode 100644 index 0000000..81d1d8a Binary files /dev/null and b/src/21-Pinterest/images/img-6.jpg differ diff --git a/src/21-Pinterest/index.html b/src/21-Pinterest/index.html new file mode 100644 index 0000000..0313ea3 --- /dev/null +++ b/src/21-Pinterest/index.html @@ -0,0 +1,110 @@ + + + + + + + + Pinterest Login Page + + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/src/21-Pinterest/styles.css b/src/21-Pinterest/styles.css new file mode 100644 index 0000000..b480d60 --- /dev/null +++ b/src/21-Pinterest/styles.css @@ -0,0 +1,228 @@ +*{ + padding:0; + margin:0; + box-sizing: border-box; +} +body{ + +} +img{ + width:100%; + height:100%; +} +.container{ + max-width: 18500px; + height:100vh; + margin: 0 auto; +} +.container::after{ + content:''; + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + background-color: black; + opacity: .4; +} +.wrapper{ + width:100%; + height:100%; + display:flex; + justify-content: center; + align-items: center; + position: relative; + background-color: white; + overflow: hidden; + padding:0 5em; +} + +.bg-container{ + position:absolute; + top:0; + left:50%; + transform: translateX(-50%); + width:90%; + height:100vh; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-auto-rows: auto; + grid-auto-rows: 350px; + grid-auto-flow: dense; + grid-gap: 1em; + padding:1em; + overflow: hidden; +} +.bg-img--container{ + +} +.bg-img{ + border-radius: 10px; +} +.btn{ + width:100%; + height:40px; + border-radius: 20px; + border:none; + outline:1px solid gray; + text-decoration: none; +} +.btn-signup{ + position:absolute; + top:2em; + left:1.5em; + width:fit-content; + padding:.8em; + background-color: white; + color:rgb(49, 48, 48); + font-weight: bold; + text-decoration: none; + z-index: 10; +} +.login-container{ + width: 500px; + height:700px; + background-color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap:.5em; + padding: 2em 3em; + border-radius: 30px; + z-index:10; +} +@media(max-width:600px){ + .login-container{ + width:400px; + } +} +.logo{ + width:50px; + height:50px; +} +.pinterest-logo{ + width:80px; + height:50px; +} +.title{ + color:rgb(71, 69, 69); + font-size: 1.9rem; + font-weight: 600; + font-family: sans-serif; +} +.form{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap:1em; + height:100%; + width:300px; + padding:0 .5em; +} +.label-input--container{ + display: flex; + flex-direction: column; + justify-content: flex-start; + gap:.5em; + width:100%; +} +.form-label{ + color:gray; +} +.form-input{ + width:700x; + height:45px; + border-radius: 15px; + border:none; + outline:1px solid gray; + color:gray; + padding:0 1em; + font-size: .9rem; +} +.form-input:hover{ + outline:1px solid black; +} +.forgot-password{ + color:rgb(71, 69, 69); + text-decoration: none; + font-size: .9rem; + font-weight: 550; + font-family: sans-serif; + align-self: flex-start; +} +.btn-login{ + background-color: red; + color:white; + font-weight: bold; + font-family: sans-serif; + font-size: .9rem; + cursor: pointer; +} +.desc{ + +} +.btn-fb--link, .btn-google--link{ + display:flex; + justify-content: space-between; + align-items: center; + padding:0 .5em; +} +.btn-fb--link > p, .btn-google--link > p{ + flex:1; + text-align: center; + color:gray; +} +.btn-fb--link{ + background-color: rgb(40, 94, 209); +} +.btn-fb--link .desc{ + color:white; + font-size: 1.2rem; + font-weight: bold; +} +.fb-logo, .google-logo{ + border-radius: 50%; + width:30px; + height:30px; +} +.fb-logo{ + +} +.btn-google--link{ + +} +.google-logo{ + +} +.terms-services{ + text-align: center; + font-size: .8rem; + color: gray; +} +.terms-services strong{ + color:rgb(71, 69, 69); +} +.terms-services a{ + text-decoration: none; +} +a{ + cursor: pointer; +} +@media(max-width:420px){ + .wrapper{ + padding:0 1em; + } + .login-container{ + width:100%; + } + .form{ + width:100%; + min-width: 250px; + } + .form-input{ + width:100%; + height:45px; + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index d863ecf..c055d63 100644 --- a/src/index.html +++ b/src/index.html @@ -216,6 +216,14 @@

Twitter Login Page

Code by @abhj

+ + Pinterest +
+

Pinterest Login Page

+

From Pinterest Login Page

+

Code by @ismaila5623

+
+