Skip to main content

How To Make A Registration Form Using HTML CSS



            [HTML FILE

<!DOCTYPE html>
<html lang="en" dir="ltr">    
    <!-- Designed By CodingBihar -->
  <head>
    <meta charset="UTF-8">
    <title>Registration Form Example | CodingBihar</title>
    <link rel="stylesheet" href="file:///storage/emulated/0/Android/data/com.teejay.trebedit/files/TrebEdit%20user%20files/style.css">
       </head>
<body>
  <div class="wrapper">
    <h2> New User Registration</h2>
    <form action="#">
      <div class="input-box">
        <input type="text" placeholder="Enter your name" required>
      </div>
      <div class="input-box">
        <input type="Email" placeholder="Enter your email" required>
      </div>
      <div class="input-box">
        <input type="password" placeholder="Create password" required>
        <!-- Designed By Coding Bihar -->
      </div>
      <div class="input-box">
        <input type="password" placeholder="Confirm password" required>
      </div>
      <div class="policy">
        <input type="checkbox">
        <h3>I accept all terms & condition</h3>
      </div>
      <div class="input-box button">
        <input type="Submit" value="Register Now">
      </div>
      <!-- Designed By Coding Bihar -->
      <div class="text">
        <h3>Already have an account? <a href="https://youtube.com/c/ProCreationsayush">Login now</a></h3>
     
      </div>
    </form>
  </div>
</body>
</html>

<!-- Designed By Coding Bihar -->



   CSS FILE -↓
  @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
}
.wrapper{
  position: relative;
  max-width: 430px;
  width: 100%;
  background: #fff;
  padding: 34px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper h2{
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  padding-bottom: 3px;
}
.wrapper h2::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 190px;
  border-radius: 12px;
  background: #7d2ae8;
}
.wrapper form{
  margin-top: 30px;
}
.wrapper form .input-box{
  height: 52px;
  margin: 18px 0;
}
form .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.input-box input:focus,
.input-box input:valid{
  border-color: #4070f4;
}
form .policy{
  display: flex;
  align-items: center;
}
form h3{
  color: #707070;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}
.input-box.button input{
  color: #fff;
  letter-spacing: 1px;
  border: none;
  background: #7d2ae8;
  cursor: pointer;
}
.input-box.button input:hover{
  background: #0e4bf1;
}
form .text h3{
 color: #333;
 width: 100%;
 text-align: center;
}
form .text h3 a{
  color: #4070f4;
  text-decoration: none;
}
form .text h3 a:hover{
  text-decoration: underline;
}





Popular posts from this blog

How To Make A Digital Clock Using HTML CSS & JS With Glowing Effect

Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to manage the minute is the secret of success.Each minute is a little thing, and yet, with respect to our personal productivity, to
Read more

How To Learn Coding || Coding कैसे सीखें || हिन्दी में

YouTube
Read more

Typing Speed Test Game in HTML CSS & JS

        Typing Speed Test Game in HTML CSS & JS Typing :> Stimulate your mind as you test your typing speed with this standard English paragraph typing test. Watch your typing speed and accuracy increase as you learn about a variety of new topics! Over 40 typing test selections available. If you don't like a test prompt, you can get a different (random) prompt with the "change test" button - or select a specific paragraph to type from the list below. To find out how fast you type, just start typing in the blank textbox on the right of the test prompt. You will see your progress, including errors on the left side as you type. In order to complete the test and save your score, you need to get 100% accuracy. You can fix errors as you go, or correct them at the end with the help of the spell checker.                  <HTML> + (JS) <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <meta charset="utf-8
Read more