Creating a Stylish/Trending Signup Page[1]: Complete Guide with HTML, CSS, and JavaScript:

by
signup page

First impressions matter more than ever in the quickly changing digital world of today. One of the first things people do when they visit a website is frequently to navigate to the signup page. The signup page is where users choose whether to proceed and interact with your brand, be it to create an account, subscribe to a service, or join a community. It is an important part of the entire user experience (UX) and goes beyond just a functional form. Your website will appear more reliable and professional with an attractive and popular signup page. When consumers are met with a modern and eye-catching design, they are more assured that they are interacting with a trustworthy company.

The user’s experience on your website can be positively or negatively impacted by the signup page’s functionality, layout, and design. An attractive signup page can give your website the advantage over thousands of other websites fighting for the same user’s attention in the fiercely competitive online world. Making an easy-to-use process that turns visitors into devoted users is just as important as making a statement. An effective signup page is one of the most important components for success because it establishes the tone for the user’s interaction with the website.

Why Design Matters for Signup Pages:

One of the first interactions a potential user has with your website or app is through the signup page. This page frequently acts as the entry point for user engagement.

This first interaction is critical because it can influence how they perceive your brand overall. A disorganized, unclear, or outdated signup page may discourage visitors before they’ve had a chance to explore your offerings.

On the other hand, a simple and welcoming design promotes professionalism and trust, motivating users to register. Remember, first impressions matter. A well-designed signup page can create a favorable impression on visitors.

As we move through 2024, several web design trends are influencing contemporary signup pages. Users appreciate the clarity and simplicity of minimalist design, making it a popular choice. This approach frees users from unnecessary clutter, allowing them to focus on completing the signup process.

Vibrant gradients are another trend that can enhance visual appeal and direct users’ attention to key components, like the signup button. Additionally, subtle animations play an important role, giving the form a dynamic feel and keeping users engaged as they fill it out.

To improve the user experience (UX) overall, a well-designed signup page is essential. Users are more inclined to complete the signup process when they encounter a simplified and easy-to-understand flow. A streamlined approach not only minimizes frustration but also encourages users to engage with your brand.

The signup button plays a critical role in this process. It should be prominent and clearly labeled, making it easy for users to understand the next action they need to take. Elements like a clear call-to-action (CTA) are crucial for guiding users effectively through the signup journey. By drawing attention to the button and ensuring its visibility, you help users feel confident in their decision to sign up.

In today’s digital landscape, where an increasing number of people access websites from mobile devices, responsive design is vital. It’s important to ensure that your signup page looks and functions seamlessly on all screen sizes. A responsive layout enhances accessibility, allowing users to complete the signup process regardless of the device they are using.

How to create these Trending Signup page useing HTML ,CSS,JavaScript:

HTML

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Create Login Form | Html CSS</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
  <link rel="shortcut icon" href="./final upscale.png" type="image/x-icon">
</head>

<body>
<div class="wrapper">
<div class="card login-size">
      <!-- Login Form -->
  <div class="login-form"> 
    <h2>Login</h2>
    <div class="input-group">
      <i class="fas fa-envelope"></i>
      <input type="email" placeholder="Email">
    </div>
    <div class="input-group">
      <i class="fas fa-lock"></i>
      <input type="password" placeholder="Password">
    </div>
    <a href="#" class="forgot-password">Forgot Password?</a>
    <button class="btn btn-login">Login</button>
    <p class="toggle-text">Don't have an account? <a href="#" class="toggle">Register Now</a></p>
  </div>
</div>

    <div class="content">
      <!-- Registration Form -->
      <h2>Registration</h2>
      <div class="input-group">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="First Name">
      </div>
      <div class="input-group">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="Last Name">
      </div>
      <div class="input-group">
        <i class="fas fa-envelope"></i>
        <input type="email" placeholder="Email">
      </div>
      <div class="input-group">
        <i class="fas fa-lock"></i>
        <input type="password" placeholder="Password">
      </div>
      <button class="btn">Register</button>
      <p class="toggle-text">Already have an account? <a href="#" class="toggle">Login Now</a></p>
    </div>
  </div>
</body>
<script src="index.js"></script>

</html>

CSS

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  background: url('nature.jpeg') no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.wrapper {
  height: 430px;
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
  backdrop-filter: blur(5px);
}

.wrapper .card.login-size {
  height: 393px;
}

.wrapper .card,
.wrapper .content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
  background: rgba(212, 0, 255, 0.26);
  color: #fff;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
  backface-visibility: hidden;
  border: 1px solid #40175815;
  /* Hide the back side of the card */
}

.wrapper .card {
  transform: rotateY(0);
}

.wrapper .content {
  transform: rotateY(90deg);
}

.wrapper.flip .card {
  transform: rotateY(-90deg);
}

.wrapper.flip .content {
  transform: rotateY(0);
}

.wrapper h2 {
  margin-bottom: 20px;
  margin-top: -10px;
  font-weight: 600;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffffcf;
}

.input-group input {
  width: 100%;
  padding: 10px 35px 10px 10px;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.input-group input::placeholder {
  color: #fff;
  letter-spacing: 1px;
  font-size: 12px;
}

.forgot-password {
  display: block;
  margin-left: 160px;
  margin-top: -15px;
  font-size: 10px;
  font-weight: 600;
  color: #060606;
}

.btn-login {
  margin: 20px 0;
}

.btn {
  padding: 10px 20px;
  width: 100%;
  background-color: #dfeaf7;
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  color: #000;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.toggle-text {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 300;
}

.toggle {
  color: #050506;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0;
}

.toggle:hover {
  text-decoration: underline;
}

JavaScript

JavaScript
document.querySelectorAll('.toggle').forEach(toggle => {
    toggle.addEventListener('click', () => {
       document.querySelector('.wrapper').classList.toggle('flip');
    });
 });

when you create a file of HTML , CSS , JavaScript -> have make a change in your index.css in that ->

CSS
body {
  background: url('nature.jpeg') no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

download a image or copy the image which is mention is there in the github or downlaod the image which i used in the code directly below and place the image in place of ‘nature.jpeg’

Download the image that i have used in the code

Download here

Download the complete code of the project:

if you have a good knowledge in makeing a lone of a repository in git hub you can direclty do that below :

GITHUB link direct

Github link

Explaination of code which i have used in the page

 
<body>
<div class="wrapper">
  <div class="card login-size">
  • body: The main content of the webpage.
  • div class="wrapper": The container for the login and registration forms. The class wrapper will be styled for positioning and layout purposes.
  • div class="card login-size": The card class defines the form's container. The login-size class likely defines specific dimensions for the login form.
 <div class="login-form">
    <h2>Login</h2>
  • div class="login-form": Contains the login form elements.
  • h2: Displays a heading for the login form.
   <div class="input-group">
      <i class="fas fa-envelope"></i>
      <input type="email" placeholder="Email">
    </div>
  • div class="input-group": Groups the input field with an associated icon.
  • i class="fas fa-envelope": Inserts an envelope icon from Font Awesome next to the input field for better UI/UX.
  • input type="email": The email input field. The placeholder text “Email” indicates what users should enter.
   <div class="input-group">
      <i class="fas fa-lock"></i>
      <input type="password" placeholder="Password">
    </div>
  • Same structure as the email input, but here it’s for the password. The lock icon represents security.
   <a href="#" class="forgot-password">Forgot Password?</a>
  • a href="#": A link for users to recover their password (functionality not implemented here).
   <button class="btn btn-login">Login</button>
    <p class="toggle-text">Don't have an account? <a href="#" class="toggle">Register Now</a></p>
  • button: A button to submit the login form.
  • p: Displays a message prompting users to switch to the registration form using the toggle link.
 </div>
</div>
  • Ends the login form container.
<div class="content">
  <h2>Registration</h2>
  <div class="input-group">
    <i class="fas fa-user"></i>
    <input type="text" placeholder="First Name">
  </div>
  • div class="content": The container for the registration form.
  • h2: Displays the "Registration" heading.
  • input type="text" placeholder="First Name": The first name input field with an associated user icon.
 <div class="input-group">
    <i class="fas fa-user"></i>
    <input type="text" placeholder="Last Name">
  </div>
  • Same structure as the first name input, but for the last name.
  <div class="input-group">
    <i class="fas fa-envelope"></i>
    <input type="email" placeholder="Email">
  </div>
  • Email input field in the registration form.
 <div class="input-group">
    <i class="fas fa-lock"></i>
    <input type="password" placeholder="Password">
  </div>
  • Password input field in the registration form.
<button class="btn">Register</button>
  <p class="toggle-text">Already have an account? <a href="#" class="toggle">Login Now</a></p>
</div>
</div>
  • button class="btn": A button to submit the registration form.
  • p: Displays a message for users who want to switch back to the login form using the toggle link.
</body>
<script src="index.js"></script>
</html>
  • script src="index.js": Loads an external JavaScript fil

CSS EXPLANATION 

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  • Imports the Poppins font from Google Fonts to style the text.
code* {
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}
  • Applies global styles: removes default padding and margins, sets the font family to "Poppins," and ensures consistent box sizing.
codebody {
  background: url('nature.jpeg') no-repeat;
  background-size: cover;
  background-position: center;
}
  • Sets a background image (nature.jpeg) for the entire page, ensuring it covers the whole viewport and is centered.
.wrapper {
  height: 430px;
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}
  • Centers the form on the page and sets up a 3D perspective for the flip animation.
.wrapper.flip .card {
  transform: rotateY(-90deg);
}

.wrapper.flip .content {
  transform: rotateY(0);
}
  • Defines the flipping behavior for the forms. When the wrapper has the class flip, the login form rotates out, and the registration form rotates in.
.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffffcf;
}
  • Styles the input group and icons, positioning the icons within the input fields.

JavaScript EXPLANATION 

document.querySelectorAll('.toggle').forEach(toggle => {
  toggle.addEventListener('click', () => {
    document.querySelector('.wrapper').classList.toggle('flip');
  });
});
  • querySelectorAll('.toggle'): Selects all elements with the toggle class.
  • addEventListener('click'): Adds a click event listener to each toggle element. When clicked, it toggles the flip class on the .wrapper element, causing the login and registration forms to flip.

Please refer our recent blog post how to create Day-Night Mode Toggle Button :

Our recent blog posts

Leave a Comment

You have been successfully Subscribed! Ops! Something went wrong, please try again.
Twitter Facebook X-twitter

Important Pages

About us

Contact us

Disclaimer

Privacy policy

Terms and conditions

Recent blogs

  • All Post
  • Automobile
  • BOOKS
  • Business
  • Codeing
  • Community
  • Computer & Electronics
  • Education
  • Entertainment
  • Jobs & Education
  • Lifestyle
  • Technology
  • Travel

© 2023 Aspirepages   •  Terms and Conditions • Privacy policy  •  Disclaimer