Frontend Forever

Flexible Sign Up Form

About this Code

Hello reader, I am codingfrontend. Nice to meet you again in this free code sharing website. In this post I am going to explain about Flexible Sign Up Form. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<div class="signupSection">
  <div class="info">
    <h2>Mission to Deep Space</h2>
    <i class="icon ion-ios-ionic-outline" aria-hidden="true"></i>
    <p>The Future Is Here</p>
  </div>
  <form action="#" method="POST" class="signupForm" name="signupform">
    <h2>Sign Up</h2>
    <ul class="noBullet">
      <li>
        <label for="username"></label>
        <input type="text" class="inputFields" id="username" name="username" placeholder="Username" value="" oninput="return userNameValidation(this.value)" required/>
      </li>
      <li>
        <label for="password"></label>
        <input type="password" class="inputFields" id="password" name="password" placeholder="Password" value="" oninput="return passwordValidation(this.value)" required/>
      </li>
      <li>
        <label for="email"></label>
        <input type="email" class="inputFields" id="email" name="email" placeholder="Email" value="" required/>
      </li>
      <li id="center-btn">
        <input type="submit" id="join-btn" name="join" alt="Join" value="Join">
      </li>
    </ul>
  </form>
</div>

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css');
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
 * {
	 font-family: 'Open Sans', sans-serif;
}
 body {
	 margin: 0;
	 padding: 0;
	 overflow: hidden;
	 background: #111;
	 background-repeat: no-repeat;
}
 .signupSection {
	 background: url(https://source.unsplash.com/TV2gg2kZD1o/1600x800);
	 background-repeat: no-repeat;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 width: 800px;
	 height: 450px;
	 text-align: center;
	 display: flex;
	 color: white;
	 box-shadow: 3px 10px 20px 5px rgba(0, 0, 0, .5);
}
 .info {
	 width: 45%;
	 background: rgba(20, 20, 20, .8);
	 padding: 30px 0;
	 border-right: 5px solid rgba(30, 30, 30, .8);
}
 .info h2 {
	 padding-top: 30px;
	 font-weight: 300;
}
 .info p {
	 font-size: 18px;
}
 .info .icon {
	 font-size: 8em;
	 padding: 20px 0;
	 color: rgba(10, 180, 180, 1);
}
 .signupForm {
	 width: 70%;
	 padding: 30px 0;
	 background: rgba(20, 40, 40, .8);
	 transition: 0.2s;
}
 .signupForm h2 {
	 font-weight: 300;
}
 .inputFields {
	 margin: 15px 0;
	 font-size: 16px;
	 padding: 10px;
	 width: 250px;
	 border: 1px solid rgba(10, 180, 180, 1);
	 border-top: none;
	 border-left: none;
	 border-right: none;
	 background: rgba(20, 20, 20, .2);
	 color: white;
	 outline: none;
}
 .noBullet {
	 list-style-type: none;
	 padding: 0;
}
 #join-btn {
	 border: 1px solid rgba(10, 180, 180, 1);
	 background: rgba(20, 20, 20, .6);
	 font-size: 18px;
	 color: white;
	 margin-top: 20px;
	 padding: 10px 50px;
	 cursor: pointer;
	 transition: 0.4s;
}
 #join-btn:hover {
	 background: rgba(20, 20, 20, .8);
	 padding: 10px 80px;
}

var alertRedInput = "#8C1010";
var defaultInput = "rgba(10, 180, 180, 1)";

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Flexible Sign Up Form

About this Code

Images

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever