Aditya Gupta

my college task

Aditya Gupta's photo
Aditya Gupta
·

1 min read



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>


  <form action="">
    <div class="head"> 
    <h1>Don't have an account?! What to join us?!</h1>
</div> 
<div class="all-content">
<div class="element">
<label for="name">First Name :</label>
<input type="text"  id="name" placeholder="First Name ">
<br>
<label for="Last-name">Last Name :</label>
<input type="text"  id="Last-name" placeholder="Last Name ">
<div class="g">
Gender
  <input type="radio"  id="Male">
<label for="Male"> Male</label>

  <input type="radio" id="Female">
<label for="Female">Female</label>

 <input type="radio" id="Other">
 <label for="Other"> Other</label>

</div>
Select city
 <select name="select" id="select">
    <option value="Noida">Noida
    <option value="Noida">Gorakhpur
    <option value="Noida">Panjab

    </option>
 </select>
<br>
<br>
 <label for="address"> Address</label>
 <textarea id="address" cols="30" rows="5" placeholder="Full address"></textarea>
 <br>
<label for="password">password :</label>
 <input type="password" id="password">
<br>

 Select file <input type="file" id="select">
<br>
<input type="checkbox" id="agree">
<label for="agree">I agree to the terms and condition</label>
<br>

<button>Submit</button>
<button>Reset</button>
</div>
</div>


</form>


</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;

}
.head{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
body{
width: 100%;
height: 100%;
    background-color: #31f12b94;
}

.all-content{
    margin-top: 20px;
   margin-left: 15%;
background-color: #3ae4b9;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 70%;
height: 70%;


}
.all-content input{
margin:15px;
padding: 8px;
}
.element{
margin: 20px;

padding: 30px;
}

button{

    margin-top: 20px;
    margin-left: 30px;
    width: 100px;
    height: 40px;
font-size: 15px;
border-radius: 10px;
}