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