심심할때마다 하는 css
소스 html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = 'stylesheet' href = 'css/style.css'>
<link href = 'https://cdn.boxicons.com/3.0.6/fonts/basic/boxicons.min.css' rel='stylesheet'>
<title>CSS Test 01</title>
</head>
<body>
<div class = "container" id = "container">
<div class = "form-container sign-up">
<form>
<h1>Create Account</h1>
<div class = "social-icons">
<a href="#" class = "icons"><i class = 'bx bxl-google'></i></a>
<a href="#" class = "icons"><i class = 'bx bxl-facebook'></i></a>
<a href="#" class = "icons"><i class = 'bx bxl-github'></i></a>
<a href="#" class = "icons"><i class = 'bx bxl-linkedin'></i></a>
</div>
<span>Register with E-mail</span>
<input type = "text" placeholder="Name">
<input type = "email" placeholder="Enter E-mail">
<input type = "password" placeholder="Enter Password">
<button>Sign Up</button>
</form>
</div>
<div class = "form-container sign-in">
<form>
<h1>Sign In</h1>
<div class = "social-icons">
<a href="#" class = "icons"><i class = 'bx bxl-google'></i></a>
<a href="#" class = "icons"><i class = 'bx bxl-facebook'></i></a>
<a href="#" class = "icons"><i class = 'bx bxl-github'></i></a>
<a href="#" class = "icons"><i class = 'bx bxl-linkedin'></i></a>
</div>
<span>Login with Email & Password</span>
<input type = "email" placeholder="Enter E-mail">
<input type = "password" placeholder="Enter Password">
<button>Sign In</button>
</form>
</div>
<div class = "toggle-container">
<div class = "toggle">
<div class = "toggle-panel toggle-left">
<h1>Welcome To <br>Code with Patel</h1>
<p>Sign in With ID & Password</p>
<button class = "hidden" id = "login">Sign In</button>
</div>
<div class = "toggle-panel toggle-right">
<h1>Hi Coder</h1>
<p>Join "Code With Patel" to Improve Your Codeing Skiils</p>
<button class = "hidden" id = "register">Sign Up</button>
</div>
</div>
</div>
</div>
<script src = "js/script.js"></script>
</body>
</html>
css - 현재 transition 일부가 안되는것 같음
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background-color: rgba(0, 0, 0, 0.795);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.container {
background-color: #fff;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.35);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.container p {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.3px;
margin: 20px 0;
}
.container span {
font-size: 12px;
}
.container a {
color: #333;
font-size: 13px;
text-decoration: none;
margin: 15px 0 10px;
}
.container button {
background-color: rgba(255, 13, 13);
color: #fff;
font-size: 12px;
padding: 10px 45px;
border: 1px solid transparent;
border-radius: 8px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
.container button.hidden {
background-color: transparent;
border-color: #fff;
}
.container form {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
height: 100%;
}
.container input {
background-color: #eee;
border: none;
margin: 8px 0;
padding: 10px 15px;
font-size: 13px;
border-radius: 8px;
width: 100%;
outline: none;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in {
left: 0;
width: 50%;
z-index: 2;
}
.container.active .sign-in {
transform: translateX(100%);
}
.sign-up {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.active .sign-up {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: move 0.6s;
}
@keyframes move {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.social-icons {
margin: 20px 0;
}
.social-icons a {
border: 1px solid #ccc;
border-radius: 20%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 3px;
width: 40px;
height: 40px;
}
.toggle-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: all 0.6s ease-in-out;
border-radius: 20px;
z-index: 1000;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.active .toggle-container {
transform: translateX(-100%);
border-radius: 20px;
}
.toggle {
background-color: rgba(255, 4, 4, 0.952);
height: 100%;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}
.container.active .toggle {
transform: translateX(50%);
}
.toggle-panel {
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 30px;
text-align: center;
top: 0;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}
.toggle-left {
transform: translateX(-200%);
}
.container.active .toggle-left {
transform: translateX(0);
}
.toggle-right {
right: 0;
transform: translateX(0);
}
js
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});