Finally was able to fix header
This commit is contained in:
		
							parent
							
								
									d9c915d830
								
							
						
					
					
						commit
						978ab24728
					
				
					 11 changed files with 138 additions and 156 deletions
				
			
		|  | @ -1,4 +1,3 @@ | ||||||
| 
 |  | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
| <head> | <head> | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 5/5 |  | ||||||
| VS Codium |  | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
|     <head> |     <head> | ||||||
|  |  | ||||||
|  | @ -1,4 +1,4 @@ | ||||||
| s<!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
|     <head> |     <head> | ||||||
|         <meta charset="UTF-8"> |         <meta charset="UTF-8"> | ||||||
|  |  | ||||||
|  | @ -21,9 +21,67 @@ body { | ||||||
|   min-height: 100vh; |   min-height: 100vh; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | /* Header styles */ | ||||||
|  | header { | ||||||
|  |   background-color: rgba(0, 0, 0, 0.7); | ||||||
|  |   padding: 10px; | ||||||
|  |   width: 100%; | ||||||
|  |   position: fixed; | ||||||
|  |   top: 0; | ||||||
|  |   left: 0; | ||||||
|  |   z-index: 1000; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .header-content { | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: space-between; | ||||||
|  |   align-items: center; | ||||||
|  |   max-width: 1200px; | ||||||
|  |   margin: 0 auto; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .project-name { | ||||||
|  |   color: white; | ||||||
|  |   font-size: 1.5em; | ||||||
|  |   text-decoration: none; /* Ensure no underline */ | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .burger-menu { | ||||||
|  |   background: none; | ||||||
|  |   border: none; | ||||||
|  |   color: white; | ||||||
|  |   font-size: 1.5em; | ||||||
|  |   cursor: pointer; | ||||||
|  |   display: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .menu { | ||||||
|  |   list-style: none; | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: space-around; | ||||||
|  |   flex-grow: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | header li { | ||||||
|  |   margin: 0 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | header a { | ||||||
|  |   color: white; | ||||||
|  |   text-decoration: none; /* Ensure no underline */ | ||||||
|  |   padding: 10px; | ||||||
|  |   border-radius: 5px; | ||||||
|  |   transition: background-color 0.3s ease; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | header a:hover { | ||||||
|  |   background-color: rgba(255, 255, 255, 0.2); | ||||||
|  | } | ||||||
|  | 
 | ||||||
| /* Article styles */ | /* Article styles */ | ||||||
| article { | article { | ||||||
|   margin-top: 100px; |   margin-top: 100px; | ||||||
|  |   margin-bottom: 50px; | ||||||
|   padding: 20px; |   padding: 20px; | ||||||
|   width: 90%; |   width: 90%; | ||||||
|   max-width: 800px; |   max-width: 800px; | ||||||
|  | @ -103,83 +161,6 @@ nav { | ||||||
|   transform: scale(0.98); /* Slight scale down on click */ |   transform: scale(0.98); /* Slight scale down on click */ | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| /* Styles for the game lists */ |  | ||||||
| h2 { |  | ||||||
|   margin-top: 40px; |  | ||||||
|   color: #333; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| article ul { |  | ||||||
|   list-style-type: none; |  | ||||||
|   padding: 0; |  | ||||||
|   width: 50%; |  | ||||||
|   margin: 0 auto; |  | ||||||
|   background-color: #fff; |  | ||||||
|   border-radius: 8px; |  | ||||||
|   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |  | ||||||
|   overflow: hidden; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.fully-free { |  | ||||||
|   border: 2px solid #4CAF50; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.non-free-assets { |  | ||||||
|   border: 2px solid #FF5722; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul li { |  | ||||||
|   padding: 12px; |  | ||||||
|   border-bottom: 1px solid #ddd; |  | ||||||
|   text-align: center; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul li:last-child { |  | ||||||
|   border-bottom: none; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.fully-free li { |  | ||||||
|   background-color: #e8f5e9; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.non-free-assets li { |  | ||||||
|   background-color: #ffebee; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .fiveStar, .fourStar, .threeStar, .twoStar, .oneStar, .death{ |  | ||||||
|   margin-bottom: 1em; |  | ||||||
|   color: white; |  | ||||||
|   font-weight: bold; |  | ||||||
|   text-shadow: red; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.fiveStar { |  | ||||||
|   background: #01ab04; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.fourStar { |  | ||||||
|   background: #59ff00; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.threeStar { |  | ||||||
|   background: rgb(226, 226, 0); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.twoStar { |  | ||||||
|   background: #ff9d00; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.oneStar { |  | ||||||
|   background: #ff0000; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| ul.death { |  | ||||||
|   background: #920e0e; |  | ||||||
|   color: white; |  | ||||||
|   font-weight: bold; |  | ||||||
|   text-shadow: red; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| /* Mobile Styles */ | /* Mobile Styles */ | ||||||
| @media (max-width: 1000px) { | @media (max-width: 1000px) { | ||||||
|   .burger-menu { |   .burger-menu { | ||||||
|  | @ -233,59 +214,73 @@ ul.death { | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| 
 | article ul { | ||||||
| /* Header styles */ |   list-style-type: none; | ||||||
| header { |   padding: 0; | ||||||
|   background-color: rgba(0, 0, 0, 0.7); |   width: 50%; | ||||||
|   padding: 10px; |  | ||||||
|   width: 100%; |  | ||||||
|   position: fixed; |  | ||||||
|   top: 0; |  | ||||||
|   left: 0; |  | ||||||
|   z-index: 1000; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .header-content { |  | ||||||
|   display: flex; |  | ||||||
|   justify-content: space-between; |  | ||||||
|   align-items: center; |  | ||||||
|   max-width: 1200px; |  | ||||||
|   margin: 0 auto; |   margin: 0 auto; | ||||||
|  |   background-color: #fff; | ||||||
|  |   border-radius: 8px; | ||||||
|  |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||||||
|  |   overflow: hidden; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .project-name { | ul.fully-free { | ||||||
|  |   border: 2px solid #4CAF50; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.non-free-assets { | ||||||
|  |   border: 2px solid #FF5722; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | article ul li { | ||||||
|  |   padding: 12px; | ||||||
|  |   border-bottom: 1px solid #ddd; | ||||||
|  |   text-align: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul li:last-child { | ||||||
|  |   border-bottom: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.fully-free li { | ||||||
|  |   background-color: #e8f5e9; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.non-free-assets li { | ||||||
|  |   background-color: #ffebee; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .fiveStar, .fourStar, .threeStar, .twoStar, .oneStar, .death{ | ||||||
|  |   margin-bottom: 1em; | ||||||
|   color: white; |   color: white; | ||||||
|   font-size: 1.5em; |   font-weight: bold; | ||||||
|  |   text-shadow: red; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .burger-menu { | ul.fiveStar { | ||||||
|   background: none; |   background: #01ab04; | ||||||
|   border: none; | } | ||||||
|  | 
 | ||||||
|  | ul.fourStar { | ||||||
|  |   background: #59ff00; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.threeStar { | ||||||
|  |   background: rgb(226, 226, 0); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.twoStar { | ||||||
|  |   background: #ff9d00; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.oneStar { | ||||||
|  |   background: #ff0000; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | ul.death { | ||||||
|  |   background: #920e0e; | ||||||
|   color: white; |   color: white; | ||||||
|   font-size: 1.5em; |   font-weight: bold; | ||||||
|   cursor: pointer; |   text-shadow: red; | ||||||
|   display: none; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .menu { |  | ||||||
|   list-style: none; |  | ||||||
|   display: flex; |  | ||||||
|   justify-content: space-around; |  | ||||||
|   flex-grow: 1; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| header li { |  | ||||||
|   margin: 0 10px; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| header a { |  | ||||||
|   color: white; |  | ||||||
|   text-decoration: none; |  | ||||||
|   padding: 10px; |  | ||||||
|   border-radius: 5px; |  | ||||||
|   transition: background-color 0.3s ease; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| header a:hover { |  | ||||||
|   background-color: rgba(255, 255, 255, 0.2); |  | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 5/5 |  | ||||||
| Audacity |  | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
|     <head> |     <head> | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 5/5 |  | ||||||
| GIMP |  | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
|     <head> |     <head> | ||||||
|  |  | ||||||
|  | @ -1,8 +1,3 @@ | ||||||
| 5/5 |  | ||||||
| OBS Studio |  | ||||||
| 
 |  | ||||||
| 4/5 |  | ||||||
| ShareX |  | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
|     <head> |     <head> | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 1/5 |  | ||||||
| postmarketOS |  | ||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
|     <head> |     <head> | ||||||
|  |  | ||||||
|  | @ -31,7 +31,7 @@ | ||||||
|             <a class="folder-link" href="social_platforms/matrix_clients.html">Matrix Clients</a> |             <a class="folder-link" href="social_platforms/matrix_clients.html">Matrix Clients</a> | ||||||
|           </li> |           </li> | ||||||
|           <li class="folder-list-item"> |           <li class="folder-list-item"> | ||||||
|             <a class="folder-link" href="social_platforms/signal_clients.html">signal clients</a> |             <a class="folder-link" href="social_platforms/signal_clients.html">Signal Clients</a> | ||||||
|           </li> |           </li> | ||||||
|           <li class="folder-list-item"> |           <li class="folder-list-item"> | ||||||
|             <a class="folder-link" href="social_platforms/other_platforms.html">Other Platforms</a> |             <a class="folder-link" href="social_platforms/other_platforms.html">Other Platforms</a> | ||||||
|  |  | ||||||
|  | @ -27,11 +27,11 @@ | ||||||
|             <li>Element</li>             |             <li>Element</li>             | ||||||
|         </ul> |         </ul> | ||||||
|         <h1>4/5</h1> |         <h1>4/5</h1> | ||||||
|         <ul class="fiveStar"> |         <ul class="fourStar"> | ||||||
|             <li>FluffyChat</li>             |             <li>FluffyChat</li>             | ||||||
|         </ul> |         </ul> | ||||||
|         <h1>3/5</h1> |         <h1>3/5</h1> | ||||||
|         <ul class="fiveStar"> |         <ul class="threeStar"> | ||||||
|             <li>Cinny</li>             |             <li>Cinny</li>             | ||||||
|         </ul> |         </ul> | ||||||
|     </article> |     </article> | ||||||
|  |  | ||||||
|  | @ -80,6 +80,7 @@ header a:hover { | ||||||
| /* Article styles */ | /* Article styles */ | ||||||
| article { | article { | ||||||
|   margin-top: 100px; |   margin-top: 100px; | ||||||
|  |   margin-bottom: 50px; | ||||||
|   padding: 20px; |   padding: 20px; | ||||||
|   width: 90%; |   width: 90%; | ||||||
|   max-width: 800px; |   max-width: 800px; | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Sage The DM
						Sage The DM