Have you been looking to enhance your web development skills and create a visually stunning sign-up and sign-in page using HTML, CSS, and JS? Then look no further as we guide you through the process of building a modern and stylish user interface using the latest trend in design – Neumorphism CSS.
In this tutorial, we will provide step-by-step instructions on how to create a new project folder and files, set up the basic HTML structure, style the layout using CSS, and add interactive features with JS. By following our instructions, you will learn how to create a sleek and professional-looking user interface that is responsive on different devices.
Setting Up the Project:
To get started, create a new project folder on your computer and add two files: “index.html” and “style.css”. Inside “index.html”, add the necessary HTML tags such as <html>, <head>, <body>, and <form> to structure your page. In “style.css”, we will begin to use Neumorphism CSS to create a soft and elevated appearance.
Use Neumorphism CSS:
Next, we will add input fields for the sign-up and sign-in forms and style them using CSS to create a simple and elegant layout. Then we will add interactive buttons and icons, and style them using Neumorphism CSS to create a 3D effect. We will also add hover and focus effects to enhance the user experience.
Add JavaScript Functionality:
Finally, we will add JS to create validation for the input fields and enable form submission. This will ensure that the user inputs the correct information in the correct format before submission. We will also add error messages to notify the user of any mistakes.
Testing and Responsiveness:
Once you have completed the tutorial, you will have a beautiful sign-up and sign-in page that not only looks amazing but also has functional features that provide a seamless user experience. You can compare your code with the provided source codes to identify any potential errors or issues and test your page on different devices and browsers to ensure that it is fully responsive.
Conclusion
In conclusion, by following the steps outlined in this tutorial, you will be able to create a modern and stylish sign-up and sign-in page using HTML, CSS, and JS. So go ahead and start building your own Neumorphism CSS sign-up and sign-in page today!
Happy coding!
Video Tutorial
Source Codes
index.html
<!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>Sign-in Sign-up</title>
</head>
<body>
<div class="container">
<div class="signin-sign-up">
<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>
<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="email" 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>
styles.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #e0e0e0;
}
a {
text-decoration: none;
}
.container {
width: 350px;
height: 500px;
background: #e0e0e0;
border-radius: 40px;
box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
}
.signin-sign-up {
display: grid;
grid-template-columns: 1fr;
}
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;
}
.title {
font-size: 35px;
color: #5ab9ea;
margin-bottom: 10px;
text-transform: uppercase;
}
.input-field {
width: 280px;
height: 50px;
margin: 10px 0;
background: #e0e0e0;
border-radius: 40px;
display: flex;
align-items: center;
box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}
.input-field i {
flex: 1.2;
text-align: center;
font-size: 20px;
color: #999;
}
.input-field input {
flex: 5;
width: 100%;
color: #444;
font-size: 18px;
font-weight: 600;
border: none;
outline: none;
background: none;
}
.input-field input::placeholder {
color: #999;
}
p,
a {
font-size: 14px;
color: #999;
}
.forgot-password {
align-self: flex-end;
}
.btn {
width: 130px;
height: 45px;
background: #e0e0e0;
outline: none;
border: none;
font-size: 18px;
text-transform: uppercase;
font-weight: 600;
margin: 20px 0;
color: #5ab9ea;
cursor: pointer;
border-radius: 40px;
box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 1);
}
.account-text {
color: #5ab9ea;
}
.container.sign-up-mode form.sign-in-form {
visibility: hidden;
}
.container.sign-up-mode form.sign-up-form {
visibility: visible;
}
/* responsive starts here */
@media(max-width: 400px) {
.container {
width: 100vw;
height: 100vh;
border-radius: 0;
}
}
app.js
const sign_up_link = document.querySelector("#sign-up-link");
const sign_in_link = document.querySelector("#sign-in-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");
})
Don’t forget to Subscribe to our YouTube Channel for more
