<!DOCTYPE html>
<html>
<head>
<title> Singup Form Design</title>
  <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>
  <div id="login-box">
    <div class="left-box">
      <h1> Sign Up </h1>
      <input type="text" name="username" placeholder="Username"/>
      <input type="text" name="email" placeholder="Email" required/>
      <input type="password" name="password" placeholder="Password" required/>
      <input type="password" name="password2" placeholder="Retype Password"/>
      <input type="submit" name="singup-button" placeholder="Sing Up"/>
    </div>
    <div class="right-box">
      <span class="signinwith">Sign in with</br>Social Network </span>
      <button class="social facebook">Log in with Facebook</button>
      <button class="social twitter">Log in with Twitter</button>
      <button class="social google">Log in with Google+</button>
    
    </div>
    <div class="or">OR</div>
  </div> 
</body>
</html>
body {
  margin:0;
  padding:0;
  background:#efefef;
  font-size:16px;
  color:#777;
  font-family:sans-serif;
  font-weight:300;
}
#login-box {
  position:relative;
  margin: 5% auto;
  height:400px;
  width:600px;
  background:#fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.left-box {
  position:absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  padding:40px;
  width:300px;
  height:400px;
}
h1 {
  margin:0 0 20px 0;
  font-weight:300;
  font-size:28px;
}
input[type="text"], input[type="password"] {
  display:block;
  box-sizing:border-box;
  margin-bottom:20px;
  padding:4px;
  width:220px;
  height:32px;
  border:none;
  outline:none;
  border-bottom:1px solid #aaa;
  font-family:sans-serif;
  font-weight:400;
  font-size:15px;
  transition: 0.2s ease;
}
input[type="submit"] {
  margin-bottom:28px;
  width:120px;
  height:32px;
  background:#f44336;
  border:none;
  border-radius:2px;
  color:#fff;
  font-family:sans-serif;
  font-weight:500;
  text-transform:uppercase;
  transition:0.25s ease;
  cursor:pointer;
}
input[type="submit"]:hover,input[type="submit"]:focus {
  background:#ff5722;
  transition: 0.2s ease;
}
.right-box {
  position:absolute;
  top:0;
  right:0;
  box-sizing:border-box;
  padding:40px;
  width:300px;
  height:400px;
  background-image:url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg);
  background-size:cover;
  background-position:center;
}
.or {
  position:absolute;
  top:180px;
  left:280px;
  width:40px;
  height:40px;
  background:#efefef;
  border-radius:50%;
  box-shadow: 0 2px 4px rgba( 0,0,0,0.6);
  line-height:40px;
  text-align:center;
}
.right-box .signinwith {
  display:block;
  margin-bottom:40px;
  font-size:28px;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 4px rgba( 0,0,0,0.6);
}
button.social {
  margin-bottom:20px;
  width:220px;
  height:36px;
  border:none;
  border-radius:2px;
  color:#fff;
  font-family:sans-serif;
  font-weight:500;
  transition: 0.2s ease;
  cursor:pointer;
}
.facebook {
  background:#32508e;
}
.twitter {
  background:#55acee;
}
.google {
  background:#dd4b39;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.