LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
* {
  box-sizing: border-box;
}

body, .container, form, .sections, .signup, .login {
  display: flex;
}

body {
	background: #3A8EFF;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  flex-direction: column;
  width: 960px;
  height: 600px;
  position: relative;
}

.sections {
  flex-direction: row;
  width: 100%;
  height: 600px;
}

.sections > div {
  width: 50%;
  color: white;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.signup {
  background: #4E4A59;
}

.login {
  background: #394053;
}

form {
  width: 440px;
  height: 600px;
  background: white;
  position: absolute;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
	left: 40px;
  bottom: 40px;
	margin-left: auto; margin-right: auto;
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, 0.3);
}

input {
  width: 360px;
  height: 44px;
  margin: .5em;
  padding: 0 1em;
  outline: none;
  border: none;
  border-bottom: 2px solid lightgray;
  font-size: 1em;
  margin-bottom: 1em;
}

button {
  width: 360px;
  height: 64px;
  font-size: 1.2em;
  outline: none;
  border: none;
  color: white;
}

button.formButton {
  background: #3A8EFF;
  font-weight: 500;
  margin-bottom: 80px;
	margin-top: 40px;
}

button.outline {
  background: none;
  border: 1px solid white;
  margin-bottom: 120px;
  margin-top: 30px;
  transition: all .5s;
}

button.outline:hover {
  background: white;
  cursor: pointer;
  color: black;
}

input:focus {
  border-bottom: 2px solid rebeccapurple;
}

p {
  font-size: 1.2em;
}

form a {
	color: lightgray;
	margin-bottom: 30px;
}
JS
$(".outline").on('click', function(e){
  e.preventDefault();
  let id = $(this).attr("name");
  if (id === "login") {
    $("form").animate({
      "right": null,
      "left": "440px"
    }, "swing");
		$("input[name*='Name']").fadeOut("slow").slideUp("slow");
		$(".formButton").text('Login');
  } else if (id === "signup") {
    $("form").animate({
      "left": null,
			"right": "440px"
    });
		$("input[name*='Name']").fadeIn("slow").slideDown("slow");
		$(".formButton").text('Sign Up');
  }
});
Host Instantly Drag and Drop Website Builder

 

Description

My jQuery is not good yet. But somehow I managed to toggle this form between Sign Up and Login. Feel free to fork and improve the code better. If you have a much cleaner solution to this, let me know, I'd like to learn more.
Term
Wed, 11/29/2017 - 11:23

Related Codes

Pen ID
Pen ID
Pen ID