parent
							
								
									edf81c7074
								
							
						
					
					
						commit
						9d3223090f
					
				
				 6 changed files with 202 additions and 0 deletions
			
			
		@ -0,0 +1,9 @@ | 
				
			|||||||
 | 
					import React from 'react' | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default function Login() { | 
				
			||||||
 | 
					  return ( | 
				
			||||||
 | 
					    <div> | 
				
			||||||
 | 
					      
 | 
				
			||||||
 | 
					    </div> | 
				
			||||||
 | 
					  ) | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,9 @@ | 
				
			|||||||
 | 
					import React from 'react' | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default function Profile() { | 
				
			||||||
 | 
					  return ( | 
				
			||||||
 | 
					    <div> | 
				
			||||||
 | 
					      
 | 
				
			||||||
 | 
					    </div> | 
				
			||||||
 | 
					  ) | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,89 @@ | 
				
			|||||||
 | 
					.signup { | 
				
			||||||
 | 
					  width: 100%; | 
				
			||||||
 | 
					  height: 100vh; | 
				
			||||||
 | 
					  position: relative; | 
				
			||||||
 | 
					  font-family: numeralLight; | 
				
			||||||
 | 
					  img { | 
				
			||||||
 | 
					    transform: rotate(-90deg); | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  background: linear-gradient( | 
				
			||||||
 | 
					    135deg, | 
				
			||||||
 | 
					    hsla(0, 0%, 31%, 1) 0%, | 
				
			||||||
 | 
					    hsla(0, 0%, 0%, 1) 100% | 
				
			||||||
 | 
					  ); | 
				
			||||||
 | 
					  background: -moz-linear-gradient( | 
				
			||||||
 | 
					    135deg, | 
				
			||||||
 | 
					    hsla(0, 0%, 31%, 1) 0%, | 
				
			||||||
 | 
					    hsla(0, 0%, 0%, 1) 100% | 
				
			||||||
 | 
					  ); | 
				
			||||||
 | 
					  background: -webkit-linear-gradient( | 
				
			||||||
 | 
					    135deg, | 
				
			||||||
 | 
					    hsla(0, 0%, 31%, 1) 0%, | 
				
			||||||
 | 
					    hsla(0, 0%, 0%, 1) 100% | 
				
			||||||
 | 
					  ); | 
				
			||||||
 | 
					  .footer { | 
				
			||||||
 | 
					    position: fixed; | 
				
			||||||
 | 
					    bottom: 0px; | 
				
			||||||
 | 
					    left: 0px; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width: 1441px) { | 
				
			||||||
 | 
					  .signup { | 
				
			||||||
 | 
					    section { | 
				
			||||||
 | 
					      width: 410px; | 
				
			||||||
 | 
					      b { | 
				
			||||||
 | 
					        color: white; | 
				
			||||||
 | 
					        font-size: 20px; | 
				
			||||||
 | 
					        margin-bottom: 30px; | 
				
			||||||
 | 
					        font-weight: 500; | 
				
			||||||
 | 
					        p{ | 
				
			||||||
 | 
					          font-size: 16px; | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      input { | 
				
			||||||
 | 
					        text-align: center; | 
				
			||||||
 | 
					        background-color: #2a2a2a; | 
				
			||||||
 | 
					        border: 1px solid #a2a2a2; | 
				
			||||||
 | 
					        border-radius: 8px; | 
				
			||||||
 | 
					        font-size: 23px; | 
				
			||||||
 | 
					        padding: 8px 0px; | 
				
			||||||
 | 
					        color: white; | 
				
			||||||
 | 
					        direction: ltr; | 
				
			||||||
 | 
					        &:focus { | 
				
			||||||
 | 
					          border: 1px solid #84de56; | 
				
			||||||
 | 
					          &::placeholder { | 
				
			||||||
 | 
					            color: #84de56; | 
				
			||||||
 | 
					            opacity: 0.3; | 
				
			||||||
 | 
					          } | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      button { | 
				
			||||||
 | 
					        margin-top: 25px; | 
				
			||||||
 | 
					        background-color: #84de56; | 
				
			||||||
 | 
					        color: white; | 
				
			||||||
 | 
					        font-size: 20px; | 
				
			||||||
 | 
					        padding: 10px 0px; | 
				
			||||||
 | 
					        border: 0px; | 
				
			||||||
 | 
					        border-radius: 10px; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    &__info { | 
				
			||||||
 | 
					      width: 350px; | 
				
			||||||
 | 
					      margin: 20px auto 0px; | 
				
			||||||
 | 
					      text-align: center; | 
				
			||||||
 | 
					      color: white; | 
				
			||||||
 | 
					      font-size: 13px; | 
				
			||||||
 | 
					      a { | 
				
			||||||
 | 
					        color: #84de56; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    &__back { | 
				
			||||||
 | 
					      margin-bottom: 60px; | 
				
			||||||
 | 
					      a { | 
				
			||||||
 | 
					        color: white; | 
				
			||||||
 | 
					        font-size: 13px; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,15 @@ | 
				
			|||||||
 | 
					import React from 'react'; | 
				
			||||||
 | 
					import SignUp from './SignUp/index'; | 
				
			||||||
 | 
					import Profile from './Profile/index'; | 
				
			||||||
 | 
					import Login from './Login/index'; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default function Auth(props : any) { | 
				
			||||||
 | 
					  const {page} = props; | 
				
			||||||
 | 
					  return ( | 
				
			||||||
 | 
					    <> | 
				
			||||||
 | 
					      { page === 'signup' && <SignUp /> } | 
				
			||||||
 | 
					      { page === 'login' && <Login /> } | 
				
			||||||
 | 
					      { page === 'profile' && <Profile /> } | 
				
			||||||
 | 
					    </> | 
				
			||||||
 | 
					  ) | 
				
			||||||
 | 
					} | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue