How to create a responsive Login and signup form - Informatic Point

How to create a responsive Login and signup form

In this tutorial, you will learn How to create a responsive login and Signup form with the help of HTML and CSS. As we know every website developer/owner wants to collect user data. The best way to collect user data is to create a user sign up and sign in form. So, without wasting time let’s start to write code.

HTML:

<!DOCTYPE html>
<html lang="en">
<head
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<body translate="no">
<div class="form">
<ul class="soft-codeon">
<li class="tab active"><a href="#signup">Sign Up</a></li>
<li class="tab"><a href="#login">Log In</a></li>
</ul>
<div class="soft-codeon-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<button type="submit" class="button button-block" />Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<p class="forgot"><a href="#">Forgot Password?</a></p>
<button class="button button-block" />Log In</button>
</form>
</div>
</div>
</div>
</body>
</html>

CSS Code:

<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body ,html {
  background-image: url('https://softcodeon.com/wp-content/uploads/2020/05/abstract-bg-1-1-1.jpg');
  font-family: 'Titillium Web', sans-serif;
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 ;
}
a {
  text-decoration: none;
  color: #1ab188;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}
.form {
background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%); padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.soft-codeon {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.soft-codeon:after {
  content: "";
  display: table;
  clear: both;
}
.soft-codeon li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 1.5s ease;
  transition: .5s ease;
}
.soft-codeon li a:hover {
  background: #dfdfds;
  color: #ffffff;
}
.soft-codeon .active a {
  background: #000;
  color: #ffffff;
}

.soft-codeon-content > div:last-child {
  display: none;

}
h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px; 
  }
label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}

label.active {
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}
label.highlight {
  color: #ffffff;
}
input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}
textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
.field-wrap {
  position: relative;
  margin-bottom: 40px;
}
.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}
.button {
  border-radius: 20px;
  outline: none;
  padding: 15px 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
background-color: #6b0f1a;
background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
  cursor:pointer;
}
.button:hover, .button:focus {
background-color: #6b0f1a;
background-image: linear-gradient(315deg, #b91372 4%,  #6b0f1a 74%);
}
.button-block {
  display: block;
  width: 100%;
}
.forgot {
  margin-top: -20px;
  text-align: right;
}
</style

Javascript Code:

<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
$('.form').find('input, textarea').on('keyup blur focus', function (e) {

  var $this = $(this),
  label = $this.prev('label');

  if (e.type === 'keyup') {
    if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.addClass('active highlight');
    }
  } else if (e.type === 'blur') {
    if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.removeClass('highlight');
    }
  } else if (e.type === 'focus') {

    if ($this.val() === '') {
      label.removeClass('highlight');
    } else
    if ($this.val() !== '') {
      label.addClass('highlight');
    }
  }

});

$('.tab a').on('click', function (e) {

  e.preventDefault();

  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');

  target = $(this).attr('href');

  $('.soft-codeon-content > div').not(target).hide();

  $(target).fadeIn(600);

});
//# sourceURL=pen.js
    </script>

Well, everything is Okey. Copy all above code one by one and paste it into your html file and then save all and open this file to your web browser to see good result.

Here is a demo,

Leave a Reply

Your email address will not be published. Required fields are marked *