Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } header { background: #35424a; color: #ffffff; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 2rem; } .nav-links a { color: #ffffff; text-decoration: none; transition: color 0.3s; } .nav-links a:hover { color: #ff7b00; } .container { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; padding: 2rem; max-width: 1200px; margin: 0 auto; } main { background: #f4f4f4; padding: 1.5rem; border-radius: 5px; } aside { background: #e2e2e2; padding: 1.5rem; border-radius: 5px; } aside ul { list-style: none; } aside li { padding: 0.5rem 0; border-bottom: 1px solid #ccc; } footer { background: #35424a; color: #ffffff; text-align: center; padding: 1rem; margin-top: 2rem; } .burger { display: none; cursor: pointer; } .burger div { width: 25px; height: 3px; background-color: #fff; margin: 5px; transition: all 0.3s ease; } @media (max-width: 768px) { .container { grid-template-columns: 1fr; } .nav-links { position: absolute; right: 0; top: 70px; background: #35424a; flex-direction: column; align-items: center; width: 100%; transform: translateX(100%); transition: transform 0.5s ease-in; } .nav-links li { margin: 1rem 0; } .burger { display: block; } .nav-active { transform: translateX(0%); } } const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); burger.addEventListener('click', () => { nav.classList.toggle('nav-active'); // Burger animation burger.classList.toggle('toggle'); }); } navSlide();