| |
| header { |
| background: #6a0dad; |
| color: white; |
| padding: 1rem 0; |
| position: sticky; |
| top: 0; |
| z-index: 1000; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| } |
|
|
| header .container { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 1rem; |
| } |
|
|
| header h1 { |
| font-size: 1.5rem; |
| margin: 0; |
| } |
|
|
| header nav { |
| display: flex; |
| align-items: center; |
| gap: 1.5rem; |
| } |
|
|
| .nav-links { |
| list-style: none; |
| display: flex; |
| gap: 1rem; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .nav-links li a { |
| text-decoration: none; |
| color: white; |
| font-weight: bold; |
| font-size: 1rem; |
| transition: color 0.3s ease; |
| } |
|
|
| .nav-links li a:hover { |
| color: #ffd700; |
| } |
|
|
| |
| .menu-toggle { |
| display: none; |
| font-size: 1.5rem; |
| color: white; |
| background: none; |
| border: none; |
| cursor: pointer; |
| } |
|
|
| @media (max-width: 768px) { |
| .nav-links { |
| display: none; |
| flex-direction: column; |
| gap: 0.5rem; |
| background: #6a0dad; |
| position: absolute; |
| top: 60px; |
| right: 10px; |
| width: 200px; |
| padding: 1rem; |
| border-radius: 8px; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .nav-links.show { |
| display: flex; |
| } |
|
|
| .menu-toggle { |
| display: block; |
| } |
| } |
