<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Singup Form</title>
 <link rel="stylesheet" href="style.css">
 <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" rel="stylesheet"> 
</head>
<body>
 
 <div class="container">
  <div class="form">
   <div class="form-section">
    <form action="">
     <div class="group">
      <h3 class="heading">Create account</h3>
     </div>
     <div class="group">
      <input type="text" name="name" class="control" placeholder="Enter Name...">
     </div>
     <div class="group">
      <input type="email" name="name" class="control" placeholder="Enter Email..">
     </div>
     <div class="group">
      <input type="password" name="name" class="control" placeholder="Create Password...">
     </div>
     <div class="group">
      <input type="password" name="name" class="control" placeholder="Confirm Password...">
     </div>
     <div class="group m20">
      <input type="submit" name="name" class="btn" value="Create account &rarr;">
     </div>
     <div class="group m20">
      <a href="login.html" class="link">Already have an account ?</a>
     </div>
    </form>
   </div>
  </div>
 </div>


</body>
</html>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
    font-family: 'Raleway', sans-serif;
}

.container {
 width: 100%;
 height: 100vh;
 background-image: url(https://www.mywebcode.com/wp-content/uploads/2018/03/project9-785x523.jpg);
 background-size: cover;
 background-repeat: no-repeat;
}

.form {
 position: absolute;
 top: 0;
 right: 0;
 width: 50%;
 height: 100%;
 background: #fff;
}

.form-section {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 80%;
}

.group {
 margin-bottom: 10px;
}

.control {
 width: 100%;
 padding: 12px;
 border-top: 0;
 border-left: 0;
 border-right: 0;
 border-bottom: 1px solid silver;
 border-radius: 0;
 transition: all 2s;
}

.control:focus {
 outline: none;
 border-bottom-color: blue;
}

.btn {
 display: block;
 width: 100%;
 padding: 13px;
 border-radius: 30px;
 background-image: linear-gradient(to right, #08CCFD, #0379FD);
 color: #fff;
 border:0;
 font-size: 18px;
 font-weight: 200;
}

.m20 {
 margin-top: 20px;
}

.link {
 text-decoration: none;
 color: silver;
 font-weight: 300;
}

.heading {
 font-size: 25px;
 letter-spacing: 2px;
 font-weight: 200;

}

@media screen and (max-width: 765px){
 .form {
 width: 100%;
}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Raleway:200,300,400

External JavaScript

This Pen doesn't use any external JavaScript resources.