New Design of registration page for University

on

 As I always try to provide clean and neat code for various templates freely. Today I am going to share the code of the registration page for university websites. Follow the below-mentioned steps to create this page.



Step 1 Use this HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/style5.css?v=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
">
</head>
<body>
<br>

<div class="container">
  <h2>Toggleable Tabs</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#basic"><i class="fa fa-user" aria-hidden="true"></i>  Basic</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#quali"><i class="fa fa-file-text" aria-hidden="true"></i>  Qualification</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#skill"><i class="fa fa-snowflake-o" aria-hidden="true"></i>  Skills</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#media"><i class="fa fa-file-image-o" aria-hidden="true"></i>  Media</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#seo"><i class="fa fa-desktop" aria-hidden="true"></i>  SEO</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content course-tabs">
    <div id="basic" class="container tab-pane active"><br>
      <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="student_name">Student Name<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="student_name" name = "Sname" placeholder="Enter Student Name" required>
      </div>
      </div>
      <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="email_id">Student Email-ID<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="email_id" name = "Semailid" placeholder="Enter Email-ID" required>
      </div>
      </div>
      <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="mobile_no">Mobile Number<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="mobile_no" name = "mobileNo" placeholder="Enter Mobile Number" required>
      </div>
      </div>
      <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="branch">Branch<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="branch" name = "branch" placeholder="Enter Branch" required>
      </div>
      </div>
      <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="semester">Semester<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="semester" name = "semester" placeholder="Enter Semester" required>
      </div>
      </div>
    </div>
    <div id="quali" class="container tab-pane fade"><br>
       <div class="row">
        <label class="col-md-2 col-form-label" for="degree">Degree<span class="required">*</span> </label>
        <label class="col-md-2 col-form-label" for="major">Major<span class="required">*</span> </label>
        <label class="col-md-2 col-form-label" for="university">University<span class="required">*</span> </label>
        <label class="col-md-2 col-form-label" for="yearr">Year of Passing<span class="required">*</span> </label>
        <label class="col-md-2 col-form-label" for="percentage">Percentage<span class="required">*</span> </label>
       </div>
       <div class="row">
        <div class="col-md-2">
      <input type="text" class="form-control" id="degree" name = "degree" placeholder="Enter Degree" required>
      </div>
      <div class="col-md-2">
      <input type="text" class="form-control" id="major" name = "major" placeholder="Enter Major" required>
      </div>
      <div class="col-md-2">
      <input type="text" class="form-control" id="university" name = "university" placeholder="Enter University" required>
      </div>
      <div class="col-md-2">
      <input type="text" class="form-control" id="year" name = "year" placeholder="Enter Year of Passing" required>
      </div>
      <div class="col-md-2">
      <input type="text" class="form-control" id="percentage" name = "percentage" placeholder="Enter Percentage" required>
      </div>
      <div class="col-md-2">
        <button name="course" class="btn btn-success">Add More</button>
      </div>
       </div>
    </div>
    <div id="skill" class="container tab-pane fade"><br>
       <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="skills">Skills<span class="required">*</span> </label>
      <div class="col-md-8">
      <input type="text" class="form-control" id="skills" name = "skills" placeholder="Enter Skills" required>
      </div>
      <div class="col-md-2">
        <button name="course" class="btn btn-success">Add More</button>
      </div>
      </div>
    </div>
    <div id="media" class="container tab-pane fade"><br>
       <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="img">Image<span class="required">*</span> </label>
      <div class="col-md-8">
      <input type="text" class="form-control" id="img" name = "imgFile" placeholder="Enter Image" required>
      </div>
      <div class="col-md-2">
        <button name="fileupload" class="btn btn-success">Upload</button>
      </div>
      </div>
    </div>
    <div id="seo" class="container tab-pane fade"><br>
       <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="meta-title">Meta-Title<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="meta-title" name = "metatitle" placeholder="Enter Meta-Title" required>
      </div>
      </div>
      <div class="form-group row mb-3">
      <label class="col-md-2 col-form-label" for="meta-description">Meta-Description<span class="required">*</span> </label>
      <div class="col-md-10">
      <input type="text" class="form-control" id="meta-description" name = "metadescription" placeholder="Enter Meta-Description" required>
      </div>
      </div>
      <div class="form-group row mb-3">
         <button name="submit" class="btn btn-success btn-block">Save</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Step 2: Use this CSS

.course-tabs
{
	border-left: 1px solid #e1dede;
    border-right: 1px solid #e1dede;
    border-bottom: 1px solid #e1dede;
    padding: 30px 10px;
}

Comments

Post a Comment