<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; }
        header { background: #1B3A5C; color: white; padding: 20px; text-align: center; }
        nav { background: #2E86AB; padding: 10px; text-align: center; }
        nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; }
        main { padding: 20px; display: flex; gap: 20px; }
        article { flex: 3; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        aside { flex: 1; background: #f0f4f8; padding: 15px; border-radius: 10px; }
        footer { background: #1B3A5C; color: white; padding: 15px; text-align: center; margin-top: 20px; }
    </style>
</head>
<body>
    <header><h1>Mening Saytim</h1></header>
    <nav>
        <a href="#">Bosh sahifa</a>
        <a href="#">Haqida</a>
        <a href="#">Aloqa</a>
    </nav>
    <main>
        <article>
            <h2>Asosiy maqola</h2>
            <p>Bu yerda asosiy kontent joylashadi.</p>
        </article>
        <aside>
            <h3>Yon panel</h3>
            <p>Qo'shimcha ma'lumotlar.</p>
        </aside>
    </main>
    <footer><p>&copy; 2024 WebDastur</p></footer>
</body>
</html>