Scribd
Upload
57 views3 pages

Css

This CSS document defines styles for a login/signup page including a loading screen, boxes for the login/signup forms, and styles for form inputs, buttons, and messages. Key elements include a #loader element for the loading screen, #box and #main elements for containing boxes, #loginform and #signupform elements for the forms, and styles for form inputs, buttons, and messages within these elements.

Uploaded by

Arun Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
57 views3 pages

Css

This CSS document defines styles for a login/signup page including a loading screen, boxes for the login/signup forms, and styles for form inputs, buttons, and messages. Key elements include a #loader element for the loading screen, #box and #main elements for containing boxes, #loginform and #signupform elements for the forms, and styles for form inputs, buttons, and messages within these elements.

Uploaded by

Arun Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

html,body{

margin: 0px;
padding: 0px;
width: 100%;
height: 100vh;

#loader{
position: fixed;
width: 100%;
height: 100vh;
z-index: 1;
overflow: visible;
background: transparent url('trailer.gif') no-repeat center center;
background-size: cover;
}

#box{
opacity: 0.8;
height: 200px;
width: 1000px;
background-color:#000000;
background-blend-mode: lighten;
border-radius: 5px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}

#main{
height: 350px;
width: 450px;
background-color:white;
border-radius: 5px;
position: absolute;
top:50%;
left: 70%;
transform: translate(-50%,-50%);
z-index: 99;
}

#loginform,#signupform{
position: absolute;
top:50%;
left: 70%;
transform: translate(-50%,-50%);
z-index: 999;
}

#signupform{
top:45%;
left: 75%;
visibility: hidden;
}

#loginform h1,#signupform h1{


font-family: arial;
font-size: 25px;
color:turquoise;
}

#loginform input,#signupform input{


height: 40px;
width: 300px;
border: 0px;
outline: none;
border-bottom: 1px solid black;
margin: 5px;
}

#loginform button,#signupform button{


height: 35px;
width: 130px;
background-color:turquoise;
font-family: monospace;
font-size: 16px;
color:white;
border: none;
outline: none;
border-radius: 5px;
margin-top: 30px;
margin-left: 175px;
}
#login_btn,#signup_btn{
height: 35px;
width: 120px;
background-color: transparent;
color:white;
border:1px solid white;
border-radius: 5px;
outline: none;
position: absolute;
left: 75%;
top:65%;
transform: translate(-50%,-50%);
transition: all .5s;
}
#signup_btn{
left: 25%;
}
#login_btn:hover,#signup_btn:hover{
background-color:white;
color:#2d2d2d;
cursor: pointer;
}
#login_msg,#signup_msg{
font-family: arial;
font-size: 25px;
color:white;
position: absolute;
top:35%;
left: 75%;
transform: translate(-50%,-50%);
z-index: 1;
}
#signup_msg{
left: 25%;
}

You might also like