ZEbdKYB

index.html

<main>
  <section id='login-sections'>
    <section id="signin" class="login-section">
      <h2>Sign in</h2>
      <form>
        <div>
          <label for='email'>email</label>
          <input type="email" id="email" name="email" required>
        </div>

        <div>
          <label for='password'>password</label>
          <input type="password" id="password" name="password" required>
        </div>

        <button type="submit">Log in to asoidjasodijasodijaoisdjassoidjasioddsasdasdasdasdasdasdj</button>
      </form>
    </section>

    <section id="reset-password" class="login-section">
      <h2>Reset my password</h2>

      <form>
        <div>
          <label for='email'>email</label>
          <input type="email" id="email" name="email" required>
        </div>

        <button type="submit">Recover my password</button>
      </form>
    </section>
  </section>
  
  <section class='third-party-logins'>
    <ul>
      <li>Google</li>
      <li>Apple</li>
    </ul>
  </section>
  
  <nav>
    <ul>
      <li><button type="button" name="login-section-switch" value="signin">Login</button></li>
      <li><button type="button" name="login-section-switch" value="reset-password">Reset Password</button></li>
    </ul>
  </nav>
</main>

script.js

document.addEventListener('DOMContentLoaded', function(){
  var loginSections = document.querySelectorAll(".login-section")
  var loginSectionSwitchButtons = document.querySelectorAll("button[name=login-section-switch]")

  var switchLoginSection = function(event){
    loginSectionIDToShow = event.target.value
    
    loginSectionSwitchButtons.forEach(function(button){     
      button.disabled = false
    })
    
    loginSections.forEach(function(section){
      section.classList.add('inactive')
    })
    document.getElementById(loginSectionIDToShow).classList.remove("inactive")
    event.target.disabled=true
  }
  
  loginSectionSwitchButtons.forEach(function(button) {
    button.addEventListener('click', switchLoginSection)
  });
  
  document.querySelector('button[name=login-section-switch][value=signin]').click()
})

style.scss

main{
  background: rgba(200, 241, 245, 1.000);
  
  width: 70vw;
  position: absolute;
  right: 0;
  top: 20vh;
    
  display: grid;
  grid-template-areas:
    "login-sections login-sections"
    "third-party-logins navigation";
  
  #login-sections{
    grid-area: login-sections;
  
    .login-section{
      background: rgba(134, 172, 42, 1.000);
      min-height: 40vh;

      &.inactive{
        display: none;
      }
    }
  }
  
  .third-party-logins{
    grid-area: third-party-logins;
  }
  
  form{
    display: grid;
    min-height: 30vh;
    
    label{
      display: block;
    }
    
    button{       
      width: -moz-fit-content;
      width: fit-content;
      max-width: 70vw;
      height: 3em;

      position: relative;
      left: -1.5em;
      
      cursor: pointer;

      font-weight: bold;
      text-transform: uppercase;

      text-overflow: ellipsis;
      white-space: nowrap;
      // overflow: hidden;

      // margin-top: 1em;
      background: rgba(227, 98, 149, 1.000);
      border: none;
      color: white;
      //padding: 1em;
      
      transition: 0.1s;
      
      &:before{
        position: absolute;
        left: -0em;
        top: -1em;
        
        z-index: -1;
        
        content: "";
        width: 0;
        height: 0;
        border-bottom: 1em solid rgba(177, 70, 108, 1.000);
        border-right: 2em solid transparent;
        border-left: 2em solid transparent;
      }
      
      &:after{
        position: absolute;
        top: -0.4em;
        right: -2em;
        content: "";
        width: 0; 
        height: 0; 
        border-top: 2em solid transparent;
        border-bottom: 2em solid transparent;
        border-left: 2em solid rgba(227, 98, 149, 1.000);
      }

      &:focus,
      &:hover{
        // transform: scale(1.075);
      }
    }
  }

  nav{
    grid-area: navigation;
    
    ul{
      // position: absolute;
      // right: 3vw;
      
      background: grey;
      margin: 0;
      padding: 0;
      
      li{
        list-style: none;
        display: inline-block;

        button{
          background: purple;
          padding: 1em;
          color: white;
          
          &:disabled{
            display: none;
          }
        }
      }
    }
  }
}

@media(min-width: 600px){
  #login-sections{
      .login-section{
        form{
          &:invalid{
            button{
              background: rgba(227, 98, 149, 0.800);
              
              &:before{
                border-bottom-color: rgba(177, 70, 108, 0.800);
              }
              
              &:after{
                border-left-color: rgba(227, 98, 149, 0.800);
              }
            }
          }
        }
    }
  }
}


@media(max-width: 600px){
  body{
    background: rgba(228, 58, 119, 1.000);
    color: white;
    padding: 0.1em;
  }
  
  main{
    grid-template-areas:
    "login-sections"
    "navigation"
    "third-party-logins";
    
    width: initial;
    background: rgba(200, 241, 245, 0.600);
    
    position: initial;
    // background: none;
    margin: auto;
    
    #login-sections{
      .login-section{
        background: none;

        form{
          &:invalid{
            button{
              opacity: 0.6;
            }
          }
          
          input{
            width: 100%;
            box-sizing: border-box;
          }

          button{
            position: initial;
            background: white;
            color: rgba(228, 58, 119, 1.000);
            border-radius: 3px;
            
            width: initial;
            max-width: initial;
            overflow: hidden;
            
            margin-top: 1em;

            &:after{
              display: none;
            }

            &:focus,
            &:hover{
              transform: none;
            }
          }
        }
      }
    }
    
    
    nav{
      margin-top: 1em;

      ul{
        position: initial;
        li{
          display: block;
          button{
            border: none;
            border-radius: 3px;
            width: 100%;
          }
        }
      }
    }
  }
}

zebdkyb.markdown

ZEbdKYB

A Pen by Thomas Cannon on CodePen.

License.