Hello developers! Are you looking to create a sleek and stylish dark-themed login and registration page for your website or app? Let’s get started with this step-by-step tutorial.
Step 1: Set Up the HTML Structure
First, create an HTML file and set up the basic HTML structure for our dark-themed login and registration page. We have two forms: one for signing in and another for signing up. We include external CSS and JavaScript files for styling and functionality. Inside the <body> tag, we have a container div that wraps our sign-in and sign-up forms.
<!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="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Signin and Signup</title>
</head>
<body>
<div class="container">
<div class="signin-signup">
<!-- Sign-in Form -->
<form action="" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username">
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password">
</div>
<a href="#" class="forgot-password">Forgot password?</a>
<input type="submit" value="Login" class="btn">
<p>Don't have an account? <a href="#" class="account-text" id="sign-up-link">Sign up</a></p>
</form>
<!-- Sign-up Form -->
<form action="" class="sign-up-form">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username">
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Email">
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password">
</div>
<input type="submit" value="Sign up" class="btn">
<p>Already have an account? <a href="#" class="account-text" id="sign-in-link">Sign in</a></p>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Step 2: Global CSS (styles.css)
In our global CSS, w begin by resetting default styles to create a clean slate for our design. We specify the font-family as ‘Poppins’ for a consistent font throughout our page. We also remove underlines from links to make them more visually appealing and in line with our design.
/* Reset default styles and set the font */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* Remove underlines from links */
a {
text-decoration: none;
}
Step 3: Page and Container Styles (styles.css)
We define styles for the overall page and container that holds the forms. The page is designed to be centered both vertically and horizontally using display: flex and justify-content: center properties. The background is set to a dark color (#333) to achieve the dark theme.
/* Create a centered, dark-themed container */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #333;
}
.container {
width: 350px;
height: 500px;
background: #333;
box-shadow: 10px 20px 20px 0 rgba(0, 0, 0, 0.4), -10px 20px 20px 0 rgba(0, 0, 0, 0.4), 0 -2px 20px 0 rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
Step 4: Sign-in and Sign-up Form Styles (styles.css)
This section is where we style our sign-in and sign-up forms. we begin by defining styles for the grid layout that contains our forms. Then, we style the forms themselves, setting properties for form titles, input fields, icons, buttons, paragraphs, and links. Initially, the sign-up form is hidden (visibility: hidden) and becomes visible when in sign-up mode. Conversely, the sign-in form is hidden when in sign-up mode.
/* Style the grid layout containing forms */
.signin-signup {
display: grid;
grid-template-columns: 1fr;
}
/* Style the forms and hide the sign-up form initially */
form {
grid-column: 1 / 2;
grid-row: 1/2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
form.sign-up-form {
visibility: hidden;
}
/* Style form titles, input fields, icons, and buttons */
.title {
font-size: 35px;
color: #999;
margin-bottom: 10px;
}
.input-field {
width: 280px;
height: 50px;
border-bottom: 2px solid #999;
margin: 10px 0;
display: flex;
align-items: center;
}
.input-field i {
flex: 1;
text-align: center;
font-size: 20px;
color: #999;
}
.input-field input {
flex: 5;
border: none;
outline: none;
background: none;
font-size: 18px;
color: #f0f0f0;
font-weight: 600;
}
/* Style paragraphs and links */
p,
a {
font-size: 14px;
color: #999;
}
.forgot-password {
align-self: flex-end;
}
.btn {
width: 130px;
height: 40px;
background: none;
outline: none;
border: 2px solid #999;
text-transform: uppercase;
font-size: 18px;
font-weight: 600;
margin: 20px 0;
color: #999;
}
.btn:hover {
color: #333;
border: none;
background: #999;
}
.account-text {
color: #f0f0f0;
}
/* Make the sign-up form visible when in sign-up mode */
.container.sign-up-mode form.sign-up-form {
visibility: visible;
}
/* Hide the sign-in form when in sign-up mode */
.container.sign-up-mode form.sign-in-form {
visibility: hidden;
}
Step 5: Responsive Styles (styles.css)
Finally, we include responsive styles for screens with a maximum width of 400 pixels (typically smaller screens like mobile devices). In this media query, we adjust the container’s size to ensure that our design looks good on smaller screens.
/* Adjust container styles for smaller screens */
@media (max-width: 400px) {
.container {
width: 100vw;
height: 100vh;
}
}
Section 6: JavaScript for Form Toggling (app.js)
This JavaScript code adds interactivity to our page. It allows users to switch between the sign-in and sign-up forms when they click on the respective links.
const sign_in_link = document.querySelector("#sign-in-link");
const sign_up_link = document.querySelector("#sign-up-link");
const container = document.querySelector(".container");
sign_up_link.addEventListener("click", () => {
container.classList.add("sign-up-mode");
})
sign_in_link.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
})
By following this structured approach, your dark-themed login and registration page is designed to be visually appealing and responsive to different screen sizes. It provides a seamless user experience for both sign-in and sign-up processes while maintaining a consistent design throughout.
Congratulations! You’ve successfully created a dark-themed login and registration page for your website or application. You’ve learned how to structure your HTML, apply global and form-specific styles, and add interactivity with JavaScript.
Feel free to customize and expand upon this template to meet your specific design and functionality requirements. Happy coding!
Video Tutorial
Don’t forget to Subscribe to our YouTube Channel for more
I like the helpful info you provide in your articles.
I’ll bookmark your blog and check again here
regularly. I am quite certain I will learn many new stuff
right here! Best of luck for the next!
I have been surfing online more than 4 hours today,
yet I never found any interesting article like yours.
It is pretty worth enough for me. In my opinion,
if all webmasters and bloggers made good content as you did,
the net will be much more useful than ever before.
Good day! I could have sworn I’ve visited your
blog before but after going through many of the articles I realized
it’s new to me. Nonetheless, I’m definitely delighted I discovered it and I’ll be book-marking
it and checking back often!