added some basic css and a header
This commit is contained in:
		
							parent
							
								
									77b20785a5
								
							
						
					
					
						commit
						35af22fa68
					
				
					 2 changed files with 112 additions and 10 deletions
				
			
		
							
								
								
									
										83
									
								
								app/App.css
									
										
									
									
									
								
							
							
						
						
									
										83
									
								
								app/App.css
									
										
									
									
									
								
							|  | @ -0,0 +1,83 @@ | |||
| /* app.css */ | ||||
| 
 | ||||
| * { | ||||
|   margin: 0; | ||||
|   padding: 0; | ||||
|   box-sizing: border-box; | ||||
| } | ||||
| 
 | ||||
| /* Basic body styling */ | ||||
| body { | ||||
|   background-color: #f4f4f4; | ||||
|   color: #333; | ||||
|   line-height: 1.6; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   min-height: 100vh; | ||||
| } | ||||
| 
 | ||||
| /* Header styling */ | ||||
| .header { | ||||
|   background-color: #333; | ||||
|   color: #fff; | ||||
|   padding: 20px; | ||||
|   text-align: center; | ||||
|   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||||
|   width: 100%; | ||||
| } | ||||
| 
 | ||||
| .header h1 { | ||||
|   font-size: 24px; | ||||
|   margin-bottom: 10px; | ||||
| } | ||||
| 
 | ||||
| .header nav { | ||||
|   margin-top: 10px; | ||||
| } | ||||
| 
 | ||||
| .header button { | ||||
|   margin: 0 10px; | ||||
|   padding: 10px 20px; | ||||
|   border-radius: 4px; | ||||
|   background-color: #4a90e2; | ||||
|   color: #fff; | ||||
|   font-size: 16px; | ||||
|   cursor: pointer; | ||||
|   transition: background-color 0.3s ease; | ||||
|   border: none; | ||||
| } | ||||
| 
 | ||||
| .header button:hover { | ||||
|   background-color: #357ab8; | ||||
| } | ||||
| 
 | ||||
| /* Content container */ | ||||
| .content { | ||||
|   padding: 20px; | ||||
|   flex: 1; | ||||
|   text-align: center; | ||||
|   max-width: 1200px; | ||||
|   margin: 0 auto; | ||||
|   background-color: #fff; | ||||
|   border-radius: 8px; | ||||
|   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||||
|   margin-top: 20px; | ||||
| } | ||||
| 
 | ||||
| /* Responsive layout */ | ||||
| @media (max-width: 768px) { | ||||
|   .header h1 { | ||||
|     font-size: 20px; | ||||
|   } | ||||
| 
 | ||||
|   .header button { | ||||
|     margin: 5px 0; | ||||
|     padding: 10px; | ||||
|     font-size: 14px; | ||||
|   } | ||||
| 
 | ||||
|   .content { | ||||
|     padding: 15px; | ||||
|     margin-top: 15px; | ||||
|   } | ||||
| } | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Sage The DM
						Sage The DM