initial layout and styles
This commit is contained in:
		
							parent
							
								
									4da2f1815c
								
							
						
					
					
						commit
						0dcc38dc3a
					
				
					 2 changed files with 101 additions and 0 deletions
				
			
		
							
								
								
									
										41
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										41
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,41 @@ | |||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
|     <head> | ||||
|         <meta charset="utf-8"> | ||||
|         <title>landing</title> | ||||
|         <link rel="stylesheet" type="text/css" href="style.css"> | ||||
|     </head> | ||||
|     <body> | ||||
|         <div class="wrapper"> | ||||
|             <div id="header"> | ||||
|                 <header> | ||||
|                     <h1>zoner.work</h1> | ||||
|                     <p><a href="https://status.zoner.work">Status Page</a></p> | ||||
|                 </header> | ||||
|             </div> | ||||
|             <div id="linkblock"> | ||||
|                 <h3>social</h3> | ||||
|                 <p><a href="https://zoner.work">Sharkey</a></p> | ||||
|                 <p><a href="https://wf.zoner.work">Writefreely</a></p> | ||||
|                 <p><a href="https://m.zoner.work">Matrix</a></p> | ||||
|             </div> | ||||
|             <div id="linkblock"> | ||||
|                 <h3>a/v</h3> | ||||
|                 <p><a href="https://inv.zoner.work">Invidious</a></p> | ||||
|             </div> | ||||
|             <div id="linkblock"> | ||||
|                 <h3>utility</h3> | ||||
|                 <p><a href="https://nc.zoner.work">Nextcloud</a></p> | ||||
|                 <p><a href="https://search.zoner.work">SearXNG</a></p> | ||||
|                 <p><a href="https://git.zoner.work">Forgejo</a></p> | ||||
|             </div> | ||||
|             <div id="description"> | ||||
|                 <hr> | ||||
|                 <p>zoner.work is a network of hosted services and community spaces administrated by <a href="https://zoner.work/@fen">fennel kora</a>. | ||||
|                 this network's purpose is to maintain inclusive, safe spaces for those who need them that stand apart from a corporatized, centralized web.</p> | ||||
|                 <p>All account-based services are open to registration by invite. Please reach out to fen for details. Sharkey is open for public registrations,  | ||||
|                     though accounts will still require systematic approval.</p> | ||||
|             </div> | ||||
|         </div> | ||||
|     </body> | ||||
| </html> | ||||
							
								
								
									
										60
									
								
								style.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										60
									
								
								style.css
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,60 @@ | |||
| body { | ||||
|     background-image: url("https://i.zoner.work/firefish/kyushu.jpg"); | ||||
|     background-repeat: no-repeat; | ||||
|     background-attachment: fixed; | ||||
|     background-size: cover; | ||||
|     font-family: sans-serif; | ||||
|     color: white; | ||||
| } | ||||
| 
 | ||||
| .wrapper { | ||||
|     display: flex; | ||||
|     flex-flow: row wrap; | ||||
|     margin-top: 150px; | ||||
|     margin-left: auto; | ||||
|     margin-right: auto; | ||||
|     width: 50%; | ||||
|     min-width: 600px; | ||||
|     padding:2em; | ||||
|     background-color: #0D1117; | ||||
|     border-radius: 40px; | ||||
|     box-shadow: 3px 3px 5px #111111; | ||||
|     justify-content: space-around; | ||||
| } | ||||
| 
 | ||||
| p { | ||||
|     padding: 0px; | ||||
|     margin: 0.8em; | ||||
|     font-size: 0.9em | ||||
| } | ||||
| 
 | ||||
| #linkblock { | ||||
|     flex: 1; | ||||
|     padding-left: 2em; | ||||
|     border-left: 1px solid rgba(255, 255, 255,0.3);  | ||||
| } | ||||
| 
 | ||||
| #header { | ||||
|     flex: 2; | ||||
|     text-align: center; | ||||
|     align-items: center; | ||||
|     margin-top: auto; | ||||
|     margin-bottom: auto; | ||||
| } | ||||
| 
 | ||||
| a { | ||||
|     color: white; | ||||
| } | ||||
| 
 | ||||
| a:hover { | ||||
|     color: orangered | ||||
| } | ||||
| 
 | ||||
| #description { | ||||
|     order: 6; | ||||
|     width: 100%; | ||||
| } | ||||
| 
 | ||||
| hr { | ||||
|     margin: 2em; | ||||
| } | ||||
		Loading…
	
		Reference in a new issue