Post
Ask Question

Create modern Sign Up page Using HTML, CSS And Bootstrap

1. Create Sign Up HTML (signup.html)

<html>
    <head>
        <title>Sign Up</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="mystyle.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div>
         <img src="images/online-sign-up-7964199-6381809.png" style="margin-left:70px ; width: 500px;margin-top:50px;">
     </div>
    <div class="container">
      <div id="signupcard" class="card">
        <div class="card-header">
          <h3 class="text-center text-gray-dark">Sign Up <span><img src="images/signup_3.png" width="50px" height="50px"></span></h3>
        </div>  
        <div class="card-body">
          <form id="signupform">
            <div class="row">    
                 <div class="form-group col-md-6">
                      <label for="fname">First Name :</label>
                      <input type="text" class="form-control" id="firstName" placeholder="Enter first name">
                  </div>  
                  <div class="form-group col-md-6">
                      <label for="lname">Last Name :</label>
                      <input type="text" class="form-control" id="lastName" placeholder="Enter last name">
                  </div>
            </div>
           <div class="row">
                <div class="form-group col-md-12">
                      <label for="gender">Gender :</label>
                      <select class="gender form-control">
                        <option>Select Gender</option>
                        <option>Male</option>
                        <option>Female</option>
                        <option>Other</option>
                      </select>
                  </div>
           </div>
           <div class="row">
                <div class="form-group col-md-6">
                      <label for="DOB">Birth Date :</label>
                      <input type="date" class="form-control" name="DOB">
                  </div>
                <div class="form-group col-md-6">
                      <label for="mobile">Phone :</label>
                    <input type="phone" class="form-control" maxlength="13" placeholder="Enter mobile Number">
                  </div>
           </div>
              <div class="form-group">
                <label for="email">Email :</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email address">
              </div>
              <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-primary float-right">Register</button>
              </div>
        </form>
        </div> 
      </div> 
      </div>
    </body>
</html>

2. Create a Style Sheet for modern designing (mystyle.css)

.signup{
    color:black;
    padding-top:80px;
    float:right;
    padding-right:300px;
}
   
h1{
    border-style: ridge;
}

.logo{
    background-color:black!important;
    color: #f4511e!important;
}

.bg1{
      background-repeat:no-repeat;
}

.jumbotron{
    background-color: #f4511e!important; /* Orange */
    color: #ffffff!important;
}

.btnlink{
    text-decoration: none;
}

#logincard{
    width:400px;
    height:350px;
    border-top-color:blueviolet;
    border-bottom-color:seagreen;
    /* border-left-color: blue;
    border-right-color:red; */
    margin-top:-450px;
    margin-left:580px ;
}

#signupcard{
    width:400px;
    height:535px;
    border-top-color:blue;
    border-bottom-color:blueviolet;
    border-left-color: green;
    border-right-color:red;
    margin-top:-530px;
    margin-left:580px ;
}

Show As Your Sign-Up Page

Sign Up
Next Recommended Reading Create Modern Login Page Using HTML, CSS And Bootstrap