| |
| body { |
| font-family: Arial, sans-serif; |
| margin: 0; |
| padding: 0; |
| background: #f4f4f9; |
| color: #333; |
| transition: all 0.3s ease; |
| } |
|
|
| |
| header { |
| background: #6200ea; |
| padding: 15px; |
| color: white; |
| text-align: center; |
| position: relative; |
| } |
|
|
| header nav ul { |
| display: flex; |
| justify-content: center; |
| list-style: none; |
| padding: 0; |
| } |
|
|
| header nav ul li { |
| margin: 0 15px; |
| } |
|
|
| header nav ul li a { |
| color: white; |
| text-decoration: none; |
| font-size: 1.1rem; |
| transition: color 0.3s ease; |
| } |
|
|
| header nav ul li a:hover { |
| color: #ffcc00; |
| } |
|
|
| .burger-menu { |
| display: none; |
| font-size: 1.5rem; |
| cursor: pointer; |
| } |
|
|
| |
| section { |
| padding: 40px; |
| text-align: center; |
| } |
|
|
| .project { |
| border: 1px solid #ccc; |
| padding: 20px; |
| margin: 10px auto; |
| max-width: 500px; |
| border-radius: 10px; |
| background: #f9f9f9; |
| transition: transform 0.3s ease; |
| } |
|
|
| .project:hover { |
| transform: scale(1.05); |
| } |
|
|
| footer { |
| text-align: center; |
| padding: 10px; |
| background: #6200ea; |
| color: white; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| header nav ul { |
| display: none; |
| flex-direction: column; |
| background: #6200ea; |
| position: absolute; |
| top: 60px; |
| right: 0; |
| width: 100%; |
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); |
| } |
|
|
| header nav ul.active { |
| display: flex; |
| } |
|
|
| .burger-menu { |
| display: block; |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| } |
|
|
| section { |
| padding: 20px; |
| } |
|
|
| .project { |
| max-width: 90%; |
| margin: 10px auto; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| body { |
| font-size: 14px; |
| } |
|
|
| h1, h2 { |
| font-size: 1.5rem; |
| } |
|
|
| button, a { |
| font-size: 1rem; |
| } |
|
|
| footer { |
| font-size: 0.8rem; |
| } |
| } |
