Login/register

login page

by moshfeu

HTML

<HTML DOCTYPE />
<HTML>

  <head>
    <title>SOUNDS</title>
    <link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
  </head>

  <body>
    <div id="container">
      <header id="title">SOUNDS</header>
      <div class="cont">
        <div class="form sign-in">
          <h2 id="h2welcome">Welcome back,</h2>
          <label>
            <span>Email</span>
            <input type="email" />
          </label>
          <label>
            <span>Password</span>
            <input type="password" />
          </label>
          <button class="forgot-pass">Forgot password?</button>
          <form action="main.html">
            <button href="main.html" type="submit" class="submit">Sign In</button>
          </form>
        </div>
        <div class="sub-cont">
          <div class="img">
            <div class="img__text m--up">
              <h2>New here?</h2>
              <p>Sign up and discover great amount of new opportunities!</p>
            </div>
            <div class="img__text m--in">
              <h2>One of us?</h2>
              <p>If you already has an account, just sign in. We've missed you!</p>
            </div>
            <div class="img__btn">
              <span class="m--up">Sign Up</span>
              <span class="m--in">Sign In</span>
            </div>
          </div>
          <div class="form sign-up">
            <h2 id="h2welcome">Let your sound be heard,</h2>
            <label>
              <span>Name</span>
              <input type="text" />
            </label>
            <label>
              <span>Email</span>
              <input type="email" />
            </label>
            <label>
              <span>Password</span>
              <input type="password" />
            </label>
            <button type="button" class="submits">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="/JS/loginScript.js"></script>

</HTML>

CSS

@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  background: #85CEF9;
  background: -webkit-radial-gradient(right, #85CEF9, #102C73);
  background: -moz-radial-gradient(right, #85CEF9, #102C73);
  background: radial-gradient(to left, #85CEF9, #102C73);
}

#title {
  font-family: 'Monoton', cursive;
  font-size: 75px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 40px;
  transition: transform 0.5s;
}

#h2welcome {
  font-size: 35px;
  color: #0f0f0f;
}

input,
button {
  border: none;
  outline: none;
  background: none;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.tip {
  font-size: 20px;
  margin: 40px auto 50px;
  text-align: center;
}

.cont {
  overflow: hidden;
  position: relative;
  width: 900px;
  height: 550px;
  margin: 0 auto 100px;
  background: none;
}

.form {
  position: relative;
  width: 640px;
  height: 100%;
  border-radius: 25px;
  transition: transform 1.2s ease-in-out;
  padding: 50px 30px 0;
  background: rgba(219, 212, 212, 0.6);
}

.sub-cont {
  overflow: hidden;
  position: absolute;
  border-radius: 25px;
  left: 640px;
  top: 0;
  width: 900px;
  height: 100%;
  padding-left: 260px;
  transition: transform 1.2s ease-in-out;

}

.cont.s--signup .sub-cont {
  transform: translate3d(-640px, 0, 0);
}

button {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.img {
  overflow: hidden;
  z-index: 1;
  border-radius: 25px;
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  padding-top: 360px;
}

.img:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 900px;
  height: 100%;
  background-size: cover;
 ...

JavaScript

document.querySelector('.img__btn').addEventListener('click', function() {
  document.querySelector('.cont').classList.toggle('s--signup');
});