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

Pinterest #101

Open
ismaila5623 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Pinterest #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
956bcc2
Pinterest Login Page
ismaila5623 Nov 3, 2022
a9c022a
update README.md with login page infor. Also in main index.html, chan…
ismaila5623 Nov 3, 2022
a5bb3bc
add Title of login infor in README.md
ismaila5623 Nov 3, 2022
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
View file
Open in desktop
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)

### 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.
Expand Down
Binary file added screenshoots/21-pinterest.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.
Empty file added src/21-Pinterest/app.js
View file
Open in desktop
Empty file.
Binary file added src/21-Pinterest/images/fb-logo.JPG
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 src/21-Pinterest/images/google-logo.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 src/21-Pinterest/images/img-1.jpg
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 src/21-Pinterest/images/img-2.jpg
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 src/21-Pinterest/images/img-3.jpg
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 src/21-Pinterest/images/img-4.jpg
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 src/21-Pinterest/images/img-5.jpg
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 src/21-Pinterest/images/img-6.jpg
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.
110 changes: 110 additions & 0 deletions src/21-Pinterest/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Pinterest Login Page</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="bg-container">
<div class="bg-img--container">
<img src="./images/img-1.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-2.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-3.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-4.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-5.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-6.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-6.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-6.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-3.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-1.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-2.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-3.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-4.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-5.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-6.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-6.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-6.jpg" alt="" class="bg-img">
</div>
<div class="bg-img--container">
<img src="./images/img-3.jpg" alt="" class="bg-img">
</div>
</div>
<a href="" class="btn btn-signup">Sign Up</a>
<div class="login-container">
<img src="../assets/logo.png" alt="" class="logo pinterest-logo">
<h2 class="title">Log in to see more</h2>
<form action="" class="form">
<div class="label-input--container">
<label for="email" class="form-label">Email address</label>
<input type="email" placeholder="Email" class="form-input">
</div>
<div class="label-input--container">
<label for="email" class="form-label">Password</label>
<input type="password" placeholder="Password" class="form-input">
</div>
<a href="" class="forgot-password">Forgotten your password?</a>
<button class="btn btn-login">Log in</button>
<p class="desc">Or</p>
<a href="#" class="btn btn-fb--link">
<img src="./images/fb-logo.JPG" alt="" class="logo fb-logo">
<p class="desc">Continue with Facebook</p>
</a>
<a href="#" class="btn btn-google--link">
<img src="./images/google-logo.png" alt="" class="logo google-logo">
<p class="desc">Continue with Google</p>
</a>
<span class="terms-services">
By continuing you agree to Pinterest's <br>
<strong>Terms of Service</strong> and acknowledge
that you've<br> read our <strong>Privacy Policy</strong>
</span>
<span class="terms-services">
<strong><a href="">Not on Pinterest yet? Sign-up</a></strong>
</span>
<span class="terms-services">
<strong>Are yo a business? <a href="">Get started here</a></strong>
</span>
</form>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
228 changes: 228 additions & 0 deletions src/21-Pinterest/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
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 @@ -216,6 +216,14 @@ <h4><b>Twitter Login Page</b></h4>
<p>Code by @abhj</p>
</div>
</a>
<a class="card" href="21-Pinterest/index.html">
<img src="../screenshoots/21-pinterest.PNG" alt="Pinterest" style="width: 100%" />
<div class="container">
<h4><b>Pinterest Login Page</b></h4>
<p>From Pinterest Login Page</p>
<p>Code by @ismaila5623</p>
</div>
</a>
</div>
</div>
</div>
Expand Down