First Project

NachiketJD — Thu, 11 May 2023 07:26:24 +0000

Access Link :

html:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML CSS Register Form</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form class="signup-form" action="/register" method="post">

      <!-- form header -->
      <div class="form-header">
        <h1>Registration for internships.</h1>
      </div>

      <!-- form body -->
      <div class="form-body">

        <!-- Firstname and Lastname -->
        <div class="horizontal-group">
          <div class="form-group left">
            <label for="firstname" class="label-title">First name *</label>
            <input type="text" id="firstname" class="form-input" placeholder="enter your first name" required="required" />
          </div>
          <div class="form-group right">
            <label for="lastname" class="label-title">Last name</label>
            <input type="text" id="lastname" class="form-input" placeholder="enter your last name" />
          </div>
        </div>

        <!-- Email -->
        <div class="form-group">
          <label for="email" class="label-title">Email*</label>
          <input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
        </div>

        <!-- Passwrod and confirm password -->
        <div class="horizontal-group">
          <div class="form-group left">
            <label for="password" class="label-title">Password *</label>
            <input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
          </div>
          <div class="form-group right">
            <label for="confirm-password" class="label-title">Confirm Password *</label>
            <input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
          </div>
        </div>
        <label>   
Qualification :  
</label>   
<select>  
<option value="Course">Qualification</option>  
<option value="BCA">BCA</option>  
<option value="BBA">BBA</option>  
<option value="B.Tech">B.Tech</option>  
<option value="MBA">MBA</option>  
<option value="MCA">MCA</option>  
<option value="M.Tech">M.Tech</option>  
</select>  

        <!-- Gender and Hobbies -->
        <div class="horizontal-group">
          <div class="form-group left">
            <label class="label-title">Gender:</label>
            <div class="input-group">
              <label for="male"><input type="radio" name="gender" value="male" id="male"> Male</label>
              <label for="female"><input type="radio" name="gender" value="female" id="female"> Female</label>
            </div>
          </div>
          Domain :  
</label>   
<select>  
<option value="Domain">Domain</option>  
<option value="Frontend">Frontend</option>  
<option value="Backend">Backend</option>  
<option value="Fullstack">Fullstack</option>  
<option value="IOS">IOS</option>  
<option value="Android">Android</option>  
<option value="Tech support">Tech support</option>
  <option value="Mangement">Management</option>
  <option value="Content">Content</option>

</select>  

        <!-- Source of Income and Income -->
        <div class="horizontal-group">
          <div class="form-group left" >
            <label class="label-title"> Earlier applied for an internship</label>
            <select class="form-input" id="level" >
              <option value="B">Yes</option>
              <option value="I">NO</option>
              <option value="A"></option>
            </select>
          </div>
          <div class="form-group right">
            <div class="form-group">
          <label for="choose-file" class="label-title">Write your reason to grab this internship.</label>
          <textarea class="form-input" rows="4" cols="50" style="height:auto"></textarea>
        </div>
      </div>
            <label for="experience" class="label-title">Expected Stipend</label>
            <input type="range" min="20" max="100" step="5"  value="0" id="experience" class="form-input" onChange="change();" style="height:28px;width:78%;padding:0;">
            <span id="range-label">20K</span>
          </div>
        </div>

        <!-- Profile picture and Age -->
        <div class="horizontal-group">
          <div class="form-group left" >
            <label for="choose-file" class="label-title">Upload Profile Picture</label>
            <input type="file" id="choose-file" size="80">
          </div>
          <div class="form-group right">
            <label for="experience" class="label-title">Age</label>
            <input type="number" min="18" max="80"  value="18" class="form-input">
          </div>
        </div>

        <!-- Bio -->
        <div class="form-group">
          <label for="choose-file" class="label-title">Bio</label>
          <textarea class="form-input" rows="4" cols="50" style="height:auto"></textarea>
        </div>
      </div>

      <!-- form-footer -->
      <div class="form-footer">
        <span>* required</span>
        <button type="submit" class="btn">Register</button>
      </div>

    </form>

    <!-- Script for range input label -->
    <script>
      var rangeLabel = document.getElementById("range-label");
      var experience = document.getElementById("experience");

      function change() {
      rangeLabel.innerText = experience.value + "K";
      }
    </script>

  </body>
</html>

Css:

/---------------------------------------/
/* Font /
/---------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto');

/---------------------------------------/
/* Register Form /
/---------------------------------------*/
body {
font-family:Arial;
background: -webkit-linear-gradient(to right, #155799, #159957);
background: linear-gradient(to right, #155799, #159957);
color:whitesmoke;
}
}

.signup-form {
font-family: "Roboto", sans-serif;
width:650px;
margin:30px auto;
background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
border-radius: 10px;
}

/---------------------------------------/
/* Form Header /
/---------------------------------------*/
.form-header {
background-color: #EFF0F1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.form-header h1 {
font-size: 30px;
text-align:center;
color:#666;
padding:20px 0;
border-bottom:1px solid #cccccc;
}

/---------------------------------------/
/* Form Body /
/---------------------------------------*/
.form-body {
padding:10px 40px;
color:#666;
}

.form-group{
margin-bottom:20px;
}

.form-body .label-title {
color:#1BBA93;
font-size: 17px;
font-weight: bold;
}

.form-body .form-input {
font-size: 17px;
box-sizing: border-box;
width: 100%;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: #333333;
text-align: left;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}

.horizontal-group .left{
float:left;
width:49%;
}

.horizontal-group .right{
float:right;
width:49%;
}

input[type="file"] {
outline: none;
cursor:pointer;
font-size: 17px;
}

range-label {

width:15%;
padding:5px;
background-color: #1BBA93;
color:white;
border-radius: 5px;
font-size: 17px;
position: relative;
top:-8px;
}

::-webkit-input-placeholder {
color:#d9d9d9;
}

/---------------------------------------/
/* Form Footer /
/---------------------------------------*/
.signup-form .form-footer {
background-color: #EFF0F1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px 40px;
text-align: right;
border-top: 1px solid #cccccc;
clear:both;
}

.form-footer span {
float:left;
margin-top: 10px;
color:#999;

font-style: italic;
font-weight: thin;
}

.btn {
display:inline-block;
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}

.btn:hover {
background-color: #169c7b;
color:lightgreen;
}

rcoemnd/pen/vYayoBZ %}

DEV Community: NachiketJD

First Project

range-label {