This post will showcase three screens: one for logging in, one for signing up and one for requiring a password reset link.
Codepen demos:
Log in screen
Sign up screen
Password reset screen
First, the HTML code for the Log in screen:
<div class="login-screen">
<h1>Sign in to your account</h1>
<input type="email" placeholder="Email address" />
</br></br>
<input type="password" placeholder="Password" />
</br></br>
<a href="https://codepen.io/georgeflorinp1/pen/ExpmMvE">Forgot password?</a>
</br></br>
<button>Log in</button>
<hr>
<h4>Don't have an account?</h4>
<a href="https://codepen.io/georgeflorinp1/pen/KKBmEyW" class="sign-up-btn">Sign up</b>
</div>
Now, the HTML code for the Sign up screen:
<div class="signup-screen">
<h1>Create your account</h1>
<input type="text" placeholder="First name" />
</br></br>
<input type="text" placeholder="Last name" />
</br></br>
<input type="text" placeholder="Email address" />
</br></br>
<input type="password" placeholder="Password" />
</br></br>
<input type="password" placeholder="Confirm password" />
</br></br>
<button>Sign up</button>
<hr>
<h4>Already have an account?</h4>
<a href="https://codepen.io/georgeflorinp1/pen/poZPxXy?editors=1100" class="sign-up-btn">Sign in</b>
</div>
The HTML Code for the Password reset screen:
<div class="signup-screen">
<h1>Create your account</h1>
<input type="text" placeholder="First name" />
</br></br>
<input type="text" placeholder="Last name" />
</br></br>
<input type="text" placeholder="Email address" />
</br></br>
<input type="password" placeholder="Password" />
</br></br>
<input type="password" placeholder="Confirm password" />
</br></br>
<button>Sign up</button>
<hr>
<h4>Already have an account?</h4>
<a href="https://codepen.io/georgeflorinp1/pen/poZPxXy?editors=1100" class="sign-up-btn">Sign in</b>
</div>
Finally, the CSS code:
- for the Log in and Sign up screens:
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
body {
text-align: center;
font-family: "Lato", sans-serif;
background-color: #181818;
color: white;
}
input {
font-family: "Lato", sans-serif;
border: 2px solid white;
border-radius: 10px;
padding: 10px;
width: 15%;
background-color: #2e2e2e;
color: white;
}
button {
font-family: "Lato", sans-serif;
font-weight: 700;
border: 1px solid black;
border-radius: 20px;
padding: 10px;
width: 15%;
background-color: #1ed760;
color: white;
opacity: 1;
}
button:hover {
cursor: pointer;
opacity: 0.6;
transition: 0.3s;
}
a {
text-decoration: none;
}
hr {
width: 25%;
}
sign-up-btn {
font-family: "Lato", sans-serif;
font-weight: 700;
border: 1px solid black;
border-radius: 20px;
padding: 10px;
width: 15%;
background-color: #1ed760;
color: white;
opacity: 1;
}
- for the Password reset screen:
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
body {
text-align: center;
font-family: "Lato", sans-serif;
background-color: #181818;
color: white;
}
input {
font-family: "Lato", sans-serif;
border: 2px solid white;
border-radius: 10px;
padding: 10px;
width: 15%;
background-color: #2e2e2e;
color: white;
}
button {
font-family: "Lato", sans-serif;
font-weight: 700;
border: 1px solid black;
border-radius: 20px;
padding: 10px;
width: 15%;
background-color: #1ed760;
color: white;
opacity: 1;
}
button:hover {
cursor: pointer;
opacity: 0.6;
transition: 0.3s;
}
Top comments (0)