UI SignUp Form Using HTML and CSS

Manish Kumar

3925

UI SignUp Form Using HTML and CSS. Wonderful UI Form You can Create Using Basic Knowledge of HTML and CSS. Thank You...

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Forum&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Profile Card</title>
</head>

<body>
  <div class="container">
    <h1>Sign up</h1>
    <div class="form-group">
      <label for="">UserName</label>
      <br>
      <input type="text" class="form-control" name="" id="txt" aria-describedby="emailHelpId" placeholder="UserName">

    </div>
    <div class="form-group">
      <label for="">Password</label>
      <br>
      <input type="password" class="form-control" name="" id="txt" placeholder="Password">
    </div>
    <p>Forgot Password?</p>
    <button type="button" class="btn"><a href="index.html">Sign up</a></button>
    <p class="or">OR</p>
    <p class="signup">Sign up using </p>
    <div class="icons">
      <i class="fa fa-facebook-square" aria-hidden="true"></i>
      <i class="fa fa-twitter-square" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
    </div>
  </div>
</body>

</html>

Try it Yourself >>

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(108, 210, 241);
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.container {
  height: 500px;
  width: 300px;
  background-color: rgb(108, 210, 241);
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  text-align: center;
  font-family: "Forum", cursive;
  color: rgb(5, 151, 196);
  font-weight: 600;
}

.container h1 {
  padding: 40px;
  color: rgb(9, 168, 216);
}

#txt {
  padding: 8px;
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  box-shadow: inset 2px 2px 5px 0 rgba(0, 0, 0, 0.3),
    inset -4px -4px 10px 0 rgba(255, 255, 255, 0.4);
  background-color: rgb(108, 210, 241);
  color: rgb(19, 120, 151);
}

#txt:focus {
  outline: none;
}

#txt::placeholder {
  color: rgb(5, 151, 196);
}

.or {
  padding: 20px;
}

.signup {
  margin-bottom: 15px;
}

.icons {
  margin-left: 8px;
}

.icons i {
  margin-right: 10px;
  font-size: larger;
  transition: 0.3s;
}

.icons i:hover {
  color: white;
}

.btn {
  padding: 10px 30px;
  margin-top: 10px;
  background-color: rgb(108, 210, 241);
  box-shadow: inset 2px 2px 5px 0 rgba(0, 0, 0, 0.3),
    inset -4px -4px 10px 0 rgba(255, 255, 255, 0.4);
  border: none;
  border-radius: 20px;
}

.btn a {
  text-decoration: none;
  color: rgb(9, 168, 216);
  font-weight: 600;
}

Try it Yourself >>