Simple HTML and CSS Sign Up Form




Hey guys in this post, we will create simple HTML and CSS sign up form with full coding example.

Create HTML file


Create index.html file and add the following content

<!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>Document</title>
</head>

<body>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <div class="container">
        <div class="box">
            <h1>Sign Up</h1>
            <div class="user">
                <i class="fas fa-user"></i>
                <input type="text" name="username" id="username" placeholder="Full name" />
                <i class="fas fa-envelope"></i>
                <input type="text" name="username" id="username" placeholder="Email Address" />
                <i class="fas fa-unlock-alt"></i>
                <input type="password" name="password" id="password" placeholder="Password" />
                <i class="fas fa-unlock-alt"></i>
                <input type="password" name="password" id="password" placeholder="Confirm Password" />
            </div>

            <div class="login-btn">
                <button class="btn">Submit</button>
                <p class="signup">Already have an account ? <span>Log in</span></p>
            </div>
        </div>
    </div>
</body>

</html>

Create CSS file


Create style.css file and add the following content

@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap");
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

h1 {
  font-weight: 900;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  flex-direction: column;
}
.box {
  width: 350px;
  height: 460px;
  font-size: 16px;
  padding: 40px 40px;
  background: #0F044C;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 30px;
}
.user {
  margin-top: 50px;
}

.fas {
  position: absolute;
}
input {
  width: 90%;
  margin-bottom: 25px;
  padding: 0px 30px 15px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #141E75;
  outline: none;
  background-color: #0F044C;
  color: #fff;
}
input:focus {
  border-bottom: 1px solid #EEEEEE;
}
.reset-password {
  color: #ff7f50;
  text-align: right;
  margin-top: 0px;
  font-size: 12px;
}
.login-btn {
    margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btn {
  display: block;
  width: 80%;
  padding: 15px;
  background-color: #EEEEEE;
  color: #0F044C;
  border: none;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 600;
  opacity: 0.8;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn:hover{
    opacity: 1;
}

.signup span{
    color: #7fb8e6;
}
.signup span:hover{
    color: #3793df;
}

Run the file


Open the index.html file in any browser –

Screenshot-2021-09-12-at-9-55-53-AM

That’s it for this post, if you like this post, share this with your friends and colleagues or you can share this within your social media platform. Thanks, I will see you in our next post.



About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *