비전공자 개발일기

Slide Sign In & Up 본문

HTML _CSS

Slide Sign In & Up

HiroDaegu 2022. 9. 20. 22:38
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SLIDE SIGN IN AND UP</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container right-panel-active">  
        <!-- Sign Up -->  
        <div class="container__form container--signup">  
             <form action="#" class="form" id="form1">  
                  <h2 class="form__title">Sign Up</h2>  
                  <input type="text" placeholder="User" class="input" />  
                  <input type="email" placeholder="Email" class="input" />  
                  <input type="password" placeholder="Password" class="input" />  
                  <button class="btn">Sign Up</button>  
             </form>  
        </div>  
        <!-- Sign In -->  
        <div class="container__form container--signin">  
             <form action="#" class="form" id="form2">  
                  <h2 class="form__title">Sign In</h2>  
                  <input type="email" placeholder="Email" class="input" />  
                  <input type="password" placeholder="Password" class="input" />  
                  <a href="#" class="link">Forgot your password?</a>  
                  <button class="btn">Sign In</button>  
             </form>  
        </div>  
        <!-- Overlay -->  
        <div class="container__overlay">  
             <div class="overlay">  
                  <div class="overlay__panel overlay--left">  
                       <button class="btn" id="signIn">Sign In</button>  
                  </div>  
                  <div class="overlay__panel overlay--right">  
                       <button class="btn" id="signUp">Sign Up</button>  
                  </div>  
             </div>  
        </div>  
   </div>  
</body>
</html>
:root {  
    /* COLORS */  
    --white: #e9e9e9;  
    --gray: #333;  
    --blue: #0367a6;  
    --lightblue: #008997;  
    /* RADII */  
    --button-radius: 0.7rem;  
    /* SIZES */  
    --max-width: 758px;  
    --max-height: 420px;  
    font-size: 16px;  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,  
         Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;  
}  
body {  
    align-items: center;  
    background-color: var(--white);  
    background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");  
    background-attachment: fixed;  
    background-position: center;  
    background-repeat: no-repeat;  
    background-size: cover;  
    display: grid;  
    height: 100vh;  
    place-items: center;  
}  
.form__title {  
    font-weight: 300;  
    margin: 0;  
    margin-bottom: 1.25rem;  
}  
.link {  
    color: var(--gray);  
    font-size: 0.9rem;  
    margin: 1.5rem 0;  
    text-decoration: none;  
}  
.container {  
    background-color: var(--white);  
    border-radius: var(--button-radius);  
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),  
         0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);  
    height: var(--max-height);  
    max-width: var(--max-width);  
    overflow: hidden;  
    position: relative;  
    width: 100%;  
}  
.container__form {  
    height: 100%;  
    position: absolute;  
    top: 0;  
    transition: all 0.6s ease-in-out;  
}  
.container--signin {  
    left: 0;  
    width: 50%;  
    z-index: 2;  
}  
.container.right-panel-active .container--signin {  
    transform: translateX(100%);  
}  
.container--signup {  
    left: 0;  
    opacity: 0;  
    width: 50%;  
    z-index: 1;  
}  
.container.right-panel-active .container--signup {  
    animation: show 0.6s;  
    opacity: 1;  
    transform: translateX(100%);  
    z-index: 5;  
}  
.container__overlay {  
    height: 100%;  
    left: 50%;  
    overflow: hidden;  
    position: absolute;  
    top: 0;  
    transition: transform 0.6s ease-in-out;  
    width: 50%;  
    z-index: 100;  
}  
.container.right-panel-active .container__overlay {  
    transform: translateX(-100%);  
}  
.overlay {  
    background-color: var(--lightblue);  
    background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");  
    background-attachment: fixed;  
    background-position: center;  
    background-repeat: no-repeat;  
    background-size: cover;  
    height: 100%;  
    left: -100%;  
    position: relative;  
    transform: translateX(0);  
    transition: transform 0.6s ease-in-out;  
    width: 200%;  
}  
.container.right-panel-active .overlay {  
    transform: translateX(50%);  
}  
.overlay__panel {  
    align-items: center;  
    display: flex;  
    flex-direction: column;  
    height: 100%;  
    justify-content: center;  
    position: absolute;  
    text-align: center;  
    top: 0;  
    transform: translateX(0);  
    transition: transform 0.6s ease-in-out;  
    width: 50%;  
}  
.overlay--left {  
    transform: translateX(-20%);  
}  
.container.right-panel-active .overlay--left {  
    transform: translateX(0);  
}  
.overlay--right {  
    right: 0;  
    transform: translateX(0);  
}  
.container.right-panel-active .overlay--right {  
    transform: translateX(20%);  
}  
.btn {  
    background-color: var(--blue);  
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);  
    border-radius: 20px;  
    border: 1px solid var(--blue);  
    color: var(--white);  
    cursor: pointer;  
    font-size: 0.8rem;  
    font-weight: bold;  
    letter-spacing: 0.1rem;  
    padding: 0.9rem 4rem;  
    text-transform: uppercase;  
    transition: transform 80ms ease-in;  
}  
.form > .btn {  
    margin-top: 1.5rem;  
}  
.btn:active {  
    transform: scale(0.95);  
}  
.btn:focus {  
    outline: none;  
}  
.form {  
    background-color: var(--white);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-direction: column;  
    padding: 0 3rem;  
    height: 100%;  
    text-align: center;  
}  
.input {  
    background-color: #fff;  
    border: none;  
    padding: 0.9rem 0.9rem;  
    margin: 0.5rem 0;  
    width: 100%;  
}  
@keyframes show {  
    0%,  
    49.99% {  
         opacity: 0;  
         z-index: 1;  
    }  
    50%,  
    100% {  
         opacity: 1;  
         z-index: 5;  
    }  
}
const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const fistForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");
signInBtn.addEventListener("click", () => {
  container.classList.remove("right-panel-active");
});
signUpBtn.addEventListener("click", () => {
  container.classList.add("right-panel-active");
});
fistForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Animated Skills bar  (0) 2022.09.26
Text Animation & BG  (0) 2022.09.25
Corner Text Parallax Effects  (0) 2022.09.17
Gradient Circle Text  (0) 2022.09.15
Christmas Tree  (0) 2022.09.13
'HTML _CSS' Related Articles more