New file for login's style
This commit is contained in:
		| @ -1,7 +1,7 @@ | |||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html> | <html> | ||||||
| <body> |   <body> | ||||||
| <div class="logBoxCenterer"> |     <div class="logBoxCenterer"> | ||||||
|       <div class='loginBox'> |       <div class='loginBox'> | ||||||
|         <div class="form"> |         <div class="form"> | ||||||
|           <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1> |           <h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1> | ||||||
| @ -23,7 +23,7 @@ | |||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|     <script type="module" src="/src/main.js"></script> |     <script type="module" src="/src/main.js"></script> | ||||||
| </body> |   </body> | ||||||
| </html> | </html> | ||||||
|  |  | ||||||
|  |  | ||||||
|  | |||||||
| @ -2,80 +2,3 @@ body { | |||||||
|    background-color: rgb(53, 25, 60); |    background-color: rgb(53, 25, 60); | ||||||
|    margin:0; |    margin:0; | ||||||
| } | } | ||||||
|  |  | ||||||
| .logBoxCenterer { |  | ||||||
|   position: absolute; |  | ||||||
|   width: 100%; |  | ||||||
|   height:  100%; |  | ||||||
|   display: flex; |  | ||||||
|   align-items: center; |  | ||||||
|   justify-content: center;  |  | ||||||
|   overflow: hidden; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| .loginBox { |  | ||||||
|   background-color: rgb(24,24,24); |  | ||||||
|   position : absolute; |  | ||||||
|   width: 400px; |  | ||||||
|   display:flex; |  | ||||||
|   justify-content: center; |  | ||||||
|   padding: 40px; |  | ||||||
|   border-radius: 20px; |  | ||||||
|   box-shadow:0 5px 25px #000000; |  | ||||||
|    |  | ||||||
| } |  | ||||||
| .form { |  | ||||||
|   position:relative; |  | ||||||
|   width:100%; |  | ||||||
|   display: flex; |  | ||||||
|   flex-direction: column; |  | ||||||
|   justify-content: center; |  | ||||||
|   align-items:center; |  | ||||||
|   gap: 15px; |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |  | ||||||
| .inputBox input { |  | ||||||
|   width:100%; |  | ||||||
|   background:rgb(255, 0 255); |  | ||||||
|   border: none; |  | ||||||
|   margin-right: 50px; |  | ||||||
|   padding-left: 10px; |  | ||||||
|   padding-top:10px; |  | ||||||
|   padding-bottom:10px; |  | ||||||
|   outline:none; |  | ||||||
|   border-radius: 4px; |  | ||||||
|   font-size:1.35em; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| .inputBox p{ |  | ||||||
|   position:relative; |  | ||||||
|   z-index: 100; |  | ||||||
|   font-family:sans-serif ;  |  | ||||||
|   color:rgb(239,60,168); |  | ||||||
|   transition:0.5; |  | ||||||
|  |  | ||||||
| } |  | ||||||
|  |  | ||||||
| .register{ |  | ||||||
|   color:rgb(239,60,168); |  | ||||||
|   width: 100%; |  | ||||||
|   align-items:center; |  | ||||||
|   display:flex; |  | ||||||
|   justify-content: center; |  | ||||||
|   cursor: pointer; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| input[type = "submit"] { |  | ||||||
|   background-color: rgb(239,60,168); |  | ||||||
|   cursor: pointer; |  | ||||||
|   padding:10px; |  | ||||||
|   font-size:1.35em; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| input[type = "submit"]:active{ |  | ||||||
|   opacity:0.8; |  | ||||||
|  |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |  | ||||||
|  | |||||||
							
								
								
									
										77
									
								
								frontend/src/assets/styleLogin.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								frontend/src/assets/styleLogin.css
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,77 @@ | |||||||
|  |  | ||||||
|  | .logBoxCenterer { | ||||||
|  |   position: absolute; | ||||||
|  |   width: 100%; | ||||||
|  |   height:  100%; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: center;  | ||||||
|  |   overflow: hidden; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .loginBox { | ||||||
|  |   background-color: rgb(24,24,24); | ||||||
|  |   position : absolute; | ||||||
|  |   width: 400px; | ||||||
|  |   display:flex; | ||||||
|  |   justify-content: center; | ||||||
|  |   padding: 40px; | ||||||
|  |   border-radius: 20px; | ||||||
|  |   box-shadow:0 5px 25px #000000; | ||||||
|  |    | ||||||
|  | } | ||||||
|  | .form { | ||||||
|  |   position:relative; | ||||||
|  |   width:100%; | ||||||
|  |   display: flex; | ||||||
|  |   flex-direction: column; | ||||||
|  |   justify-content: center; | ||||||
|  |   align-items:center; | ||||||
|  |   gap: 15px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  |  | ||||||
|  | .inputBox input { | ||||||
|  |   width:100%; | ||||||
|  |   background:rgb(255, 0 255); | ||||||
|  |   border: none; | ||||||
|  |   margin-right: 50px; | ||||||
|  |   padding-left: 10px; | ||||||
|  |   padding-top:10px; | ||||||
|  |   padding-bottom:10px; | ||||||
|  |   outline:none; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   font-size:1.35em; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .inputBox p{ | ||||||
|  |   position:relative; | ||||||
|  |   z-index: 100; | ||||||
|  |   font-family:sans-serif ;  | ||||||
|  |   color:rgb(239,60,168); | ||||||
|  |   transition:0.5; | ||||||
|  |  | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .register{ | ||||||
|  |   color:rgb(239,60,168); | ||||||
|  |   width: 100%; | ||||||
|  |   align-items:center; | ||||||
|  |   display:flex; | ||||||
|  |   justify-content: center; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | input[type = "submit"] { | ||||||
|  |   background-color: rgb(239,60,168); | ||||||
|  |   cursor: pointer; | ||||||
|  |   padding:10px; | ||||||
|  |   font-size:1.35em; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | input[type = "submit"]:active{ | ||||||
|  |   opacity:0.8; | ||||||
|  |  | ||||||
|  | } | ||||||
|  |  | ||||||
|  |  | ||||||
| @ -1,5 +1,5 @@ | |||||||
| import './assets/main.css' | import './assets/main.css' | ||||||
|  | import './assets/styleLogin.css' | ||||||
| import 'vue3-toastify/dist/index.css'; | import 'vue3-toastify/dist/index.css'; | ||||||
|  |  | ||||||
| import { createApp } from 'vue' | import { createApp } from 'vue' | ||||||
|  | |||||||
		Reference in New Issue
	
	Block a user