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">
    <title>Sign-up Form</title>
    <meta name="author" content="Harmeet Matharoo">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    
    
</head>
<body>
    <div class="sign-up-div">
        <div class="left"></div>
        <div class="content-div">
            <div class="logo-div">
                <img class="logo-img" src="images/add-user1.png" alt="logo">
            </div>
            <div class="content">
                <h1>Welcome!</h1>
                <p>Create an account or Log-in</p>

                <div class="form-div">
                    <div class="form-inner-div">
                        <form action="#">
                            
                            <div class="form-bg">

                                <div class="first-last-name">
                                    <div class="spacing">
                                        <div><label for="first_name">First Name:</label></div>
                                        <div>
											<input type="text" name="first_name" id="first_name" pattern="^[^0-9_!¡?÷?¿/\\+=@#$%^&*(){}|~<>;:[\]]{2,}$" maxlength="128" minlength="1" placeholder="John" required>
											<span id="firstNameVal"></span>
										</div>
                                    </div>
                                    <div class="spacing">
                                        <div><label for="last_name">Last Name:</label></div>
                                        <div>
											<input type="text" name="last_name" id="last_name" pattern="^[^0-9_!¡?÷?¿/\\+=@#$%^&*(){}|~<>;:[\]]{2,}$" maxlength="128"  minlength="1" placeholder="Doe" required>
											<span id="lastNameVal"></span>
										</div>
                                    </div>
                                </div>
                                <div class="email-phone">
                                    <div class="spacing">
                                        <div><label for="mail">Email:</label></div>
                                        <div id="emailVal">
											<input type="email" id="mail" name="mail" required minlength="8" maxlength="128" placeholder="example@example.com">
											<span class="error" id="error" aria-live="polite"></span>
										</div>
                                    </div>
                                    <div class="spacing" >
                                        <div><label for="phone_number">Phone Number:</label></div>
                                        <div id="phoneVal" >
											<input type="tel" id="phone_number" name="phone_number" pattern="^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]{8,14}$" placeholder="123-456-7890" required>
											<span id="phoneNumberVal" class="validity"></span>
										</div>
                                    </div>
                                </div>
                                
                            
                                <div class="pass-confirm">
                                    <div class="spacing" id="usrPwd">
                                        <div><label for="user_password">*Password:</label></div>
                                        <div id="passVal">
											<input type="password" id="user_password" name="user_password" maxlength="128" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
											<span id="userPasswordVal" class="validity"></span>
										</div>

										<div id="message">
											<h3 id="pwdMsg">Password must contain the following:</h3>
											<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
											<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
											<p id="number" class="invalid">A <b>number</b></p>
											<p id="length" class="invalid">Minimum <b>8 characters</b></p>
										</div>

                                    </div>
                                    <div class="spacing">
                                        <div><label for="user_password_confirm">*Confirm Password:</label></div>
                                        <div id="confirmPassVal">
											<input type="password" id="user_password_confirm" maxlength="128" name="user_password_confirm" required>
											<span id="userPasswordConfirmVal" class="validity"></span>
										</div>
										<div id="divCheckPassword"></div>
                                    </div>
                                </div>

                            </div>
            
							

                            <div>
                                <button id="submitBtn" type="submit" onclick="return false">Create Account</button>
                            </div>
                        </form>
                    </div>

                    <h3 class="have-account">Already have an account? 
                        <a class="login" href="#">Log in</a>    
                    </h3>
                    
                </div>

                
                
                
            </div>
        </div>
        <div class="right">
            <img src="images/bg-img-min.jpg" alt="image">

        </div>
       
    </div>
    
    <footer>
        <div class="copyright">
            
            <p>
                Harmeet Matharoo <span>&copy</span> 2022 &nbsp; | &nbsp;
                <a class="github-link" href="https://github.com/hmjatt" alt="github">GitHub</a>
                &nbsp; | &nbsp;
            </p>
        </div>

        <div class=attribute>
            <p>

            </p>
            <p>
                Add icons created by 
                <a href="https://www.flaticon.com/free-icons/add" title="add icons">Freepik</a>
                on 
                <a href="https://www.flaticon.com/" title="flaticon">Flaticon</a>
           
                &nbsp; | &nbsp;Photo by 
                <a href="https://unsplash.com/@pawel_czerwinski" title="photo author">Pawel Czerwinski</a>
                on 
                <a href="https://unsplash.com/photos/g0eRErPBoTA" title="photo author">Unsplash</a>
            </p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>