create two files named:

  • index.html
  • style.css

Html Code:(index.html)


<html>

<head>

<title>Signup Form Design</title>
<link rel="stylesheet" href="style.css">
</head>

<body style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKOwXYIrtrIa_taYzkBNUE0sxs2UAugL2tzHNf4Oo4m2h5A4q-4E1wiLsy-VLVE45kUF7IkOYiYdFCAMjP-ni8F2aVrhpivrmFlSlZzDWYUQspEpuJL2ILSQhUpKTvEK-W0OFESXcKbhK/s1920/image1.jpg)">
    <section id="signup">
    <div id="login-box">
        <div class="social-box">
            <h2 class="signinwith">Sign in with<br/>Social Networks    </h2>      
          <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="signup-box">
        <h2> Sign Up</h2>      
          <input type="text" name="username" placeholder="Username"/>
          <input type="text" name="email" placeholder="Email"/>
          <input type="password" name="password" placeholder="Password"/>
          <input type="password" name="password2" placeholder="Retype password"/>    
          <input type="submit" name="signup-button" value="Sign Up"/>
          <a href="">Sign in</a>
        </div>
    </div>
    </section>
</body>    

</html>

Css Code:(style.css)


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
background: #efefef;
font-size: 16px;
color: #777;
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
}
#signup{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#login-box
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 600px;
background-color: green;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

}
.social-box
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
width: 350px;
height: 400px;
}
.social-box .signinwith
{
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-weight: 500;
transition: 0.2s ease;
cursor: pointer;
}
.facebook
{
background: #32508e;
}
.twitter
{
background: #55acee;
}
.google
{
background: #dd4b39;
}
.signup-box
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
width: 350px;
height: 400px;    
}
.signup-box h2
{
text-align: center;
margin-bottom: 15px;
color: white;
font-size: 28px;
}
input[type="text"],input[type="password"]
{
display: block;
box-sizing: border-box;
margin-bottom: 20px;
padding: 8px;
width: 220px;
height: 32px;
border: none;
outline: none;
border-bottom: 1px solid #aaa;
font-weight: 400;
font-size: 15px;
transition: 0.2s ease;
}
input[type="submit"]
{
margin-bottom: 28px;
width: 120px;
height: 32px;
background: #ff0080;
border: none;
border-radius: 2px;
color: #fff;
font-weight: 500;
text-transform: uppercase;
transition: 0.2s ease;
cursor: pointer;
padding: 10px;
}
input[type="submit"]:hover,
input[type="submit"]:focus
{
background: #ff0000;
transition: 0.2s ease;
}
.signup-box a{
text-decoration: none;
color: white;
cursor:pointer;
margin-bottom: 15px;
font-size: 18px;
}