/* ************************************************************************** */ /* */ /* ::: :::::::: */ /* loginPage.css :+: :+: :+: */ /* +:+ +:+ +:+ */ /* By: marvin +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/07 17:15:28 by edbernar #+# #+# */ /* Updated: 2024/08/13 13:30:43 by marvin ### ########.fr */ /* */ /* ************************************************************************** */ @keyframes anim1 { 0% { transform: translate(0, -150%); } 100% { transform: translateY(0, 0); } } @keyframes anim2 { 0% { backdrop-filter: blur(0px); background-color: rgba(0, 0, 0, 0); } 100% { backdrop-filter: blur(5px); background-color: rgba(0, 0, 0, 0.8); } } #mainText{ color: white; font-size: 50px; font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; margin-top: 125px; margin-bottom: 50px; align-content: center; text-align: center; } #inputLogin{ margin-top: 2px; margin-bottom: 15px; padding-left: 3%; padding-right: 3%; font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; border: none; text-decoration: none; height: 45px; width: 94%; } #inputPassword{ margin-top: 2px; margin-bottom: 25px; padding-left: 3%; padding-right: 3%; font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; border: none; text-decoration: none; height: 45px; width: 94%; } #styleButton{ font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal; height: 45px; width: 100%; border: none; text-decoration: none; transition: background-color 0.3s ease; } #styleButton:hover{ background-color: #b4b4b4; } #styleButton42{ font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal; height: 45px; width: 100%; border: none; text-decoration: none; transition: background-color 0.3s ease; } #styleButton42:hover{ background-color: #b4b4b4; } #createAccText{ margin-left: 10px; cursor: pointer; border-bottom: white 1px solid; transition: color 0.3s ease; } #createAccText:hover{ color: rgb(165, 165, 165); } #orText{ align-content: center; text-align: center; margin-top: 15px; margin-bottom: 15px; } #newAccDiv{ display: flex; flex-direction: row; margin-top: 15px; margin-bottom: 15px; justify-content: center; } #loginDiv { inset: 0; padding-block: 7rem; display: flex; position: absolute; z-index: 500; animation: anim1 0.4s; font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; justify-content: center; } #globalBg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); position: absolute; z-index: 499; top: 0; left: 0; backdrop-filter: blur(5px); animation: anim2 0.5s; } #threeDiv { width: 20%; height: 100%; background-color: white; } #connectDiv { width: 45%; height: 100%; background-color: #020202; display: flex; flex-direction: column; } #connectDiv #divCenter { width: 45%; height: 50%; margin-left: 27.5%; } #connectDiv form { width: 100%; height: 100%; display: flex; flex-direction: column; } #connectDiv form p{ color: white; } #connectDiv #button { width: 20%; height: 20px; margin: 10px; cursor: pointer; background-color: white; text-align: center; }