Skip to content
Snippets Groups Projects
Commit 3dfa745c authored by Yulong Wang's avatar Yulong Wang
Browse files

Delete regist.css

parent 284d727c
No related branches found
No related tags found
No related merge requests found
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins",sans-serif;
}
body{
/*height: 100vh;*/
width: 100%;
background: #000;
}
.background{
background: url(../img/backgroud3.jpg) no-repeat;
background-position: center;
background-size:cover ;
height: 100vh;
width: 100%;
filter: blur(10px);
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 25px 13%;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.navbar a{
position: relative;
font-size: 16px;
color: black;
margin-right: 30px;
text-decoration: none;
}
.navbar a::after{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: black;
bottom: -5px;
border-radius: 5px;
transform: translateY(10px);
opacity: 0;
transition: .5s ease;
}
.navbar a:hover:after{
transform: translateY(0);
opacity: 1;
}
.search-bar{
width: 250px;
height: 45px;
background-color: transparent;
border: 2px solid #000000;
border-radius: 6px;
display: flex;
align-items: center;
}
.search-bar input{
width: 100%;
background-color: transparent;
border: none;
outline: none;
color: black;
font-size: 16px;
padding-left: 10px;
}
.search-bar button{
width: 40px;
height: 100%;
background: transparent;
outline: none;
border: none;
color:black;
cursor: pointer;
}
.search-bar input::placeholder{
color: black;
}
.search-bar button i{
font-size: 22px;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 75%;
height: 550px;
margin-top: 20px;
background: url(../img/backgroud3.jpg) no-repeat;
background-position: center;
background-size:cover ;
border-radius: 20px;
overflow: hidden;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
color: black;
background: transparent;
padding: 80px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.item .logo{
color: black;
font-size: 30px;
}
.text-item h2{
font-size: 40px;
line-height: 1;
}
.text-item p{
font-size: 16px;
margin: 20px 0;
}
.social-icon a i{
color: black;
font-size: 24px;
margin-left: 10px;
cursor: pointer;
transition: .5s ease;
}
.social-icon a:hover i{
transform: scale(1.2);
}
.container .login-section{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 58%);
height: 100%;
color: black;
backdrop-filter: blur(10px);
}
.form-box .input-box{
width: 340px;
height: 50px;
border-bottom: 2px solid #000000;
margin: 30px 0;
position: relative;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
padding-right: 28px;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
font-weight: 600px;
pointer-events: none;
transition: .5s ease;
}
.input-box .icon{
position: absolute;
top: 13px;
right: 0;
font-size: 19px;
}
.input-box input:focus~ label,
.input-box input:valid~ label{
top: -5px;
}
.remember-password{
font-size: 14px;
font-weight: 500;
margin: -15px 0 15px ;
display: flex;
justify-content: space-between;
}
.remember-password label input{
accent-color: black;
margin-right: 3px;
}
.remember-password a{
color: black;
text-decoration: none;
}
.remember-password a:hover{
text-decoration: underline;
}
.btn{
background: black;
width: 100%;
height: 45px;
outline: none;
border: none;
border-radius: 4px;
cursor: pointer;
background: #84b9db;
font-size: 16px;
color: black;
box-shadow: rgba(0,0,0,0.4);
}
.create-account{
font-size: 14.5px;
text-align: center;
margin: 25px;
}
.create-account p a{
color: black;
font-weight: 600px;
text-decoration: none;
}
.create-account p a:hover{
text-decoration: underline;
}
/* Input Box */
.input-box {
width: 340px;
height: 50px;
border-bottom: 2px solid #000000;
margin: 30px 0;
position: relative;
}
.input-box input,
.input-box select {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: black;
padding-right: 28px;
appearance: none;
}
.input-box label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s ease;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label,
.input-box select:focus ~ label {
top: -5px;
}
.input-box select {
cursor: pointer;
color: black;
font-size: 16px;
border-radius: 4px;
}
.input-box .icon {
position: absolute;
top: 13px;
right: 0;
font-size: 19px;
color: black;
}
.error-message {
color: red;
font-size: 12px;
margin-top: 5px;
display: none;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment