<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening Portfoliom</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; }
        body { background: #f0f4f8; color: #333; }
        header { background: linear-gradient(135deg, #1B3A5C, #2E86AB); color: white; padding: 60px 20px; text-align: center; }
        header h1 { font-size: 2.5rem; margin-bottom: 10px; }
        header p { font-size: 1.2rem; opacity: 0.8; }
        nav { background: #1B3A5C; padding: 12px; text-align: center; position: sticky; top: 0; }
        nav a { color: white; text-decoration: none; margin: 0 15px; font-weight: bold; }
        nav a:hover { color: #D4A533; }
        section { max-width: 900px; margin: 30px auto; padding: 0 20px; }
        .skills { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
        .skill { background: white; padding: 20px 30px; border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); min-width: 150px; }
        .skill h3 { color: #2E86AB; }
        .projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .project { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .project h3 { color: #1B3A5C; }
        footer { background: #1B3A5C; color: white; text-align: center; padding: 20px; margin-top: 40px; }
    </style>
</head>
<body>
    <header>
        <h1>Islombek Boltabayev</h1>
        <p>Web Dasturchi | Talaba</p>
    </header>
    <nav>
        <a href="#skills">Ko'nikmalar</a>
        <a href="#projects">Loyihalar</a>
        <a href="#contact">Aloqa</a>
    </nav>
    <section id="skills">
        <h2 style="text-align:center;margin-bottom:20px;color:#1B3A5C">Ko'nikmalarim</h2>
        <div class="skills">
            <div class="skill"><h3>HTML5</h3><p>90%</p></div>
            <div class="skill"><h3>CSS3</h3><p>85%</p></div>
            <div class="skill"><h3>JavaScript</h3><p>75%</p></div>
            <div class="skill"><h3>Laravel</h3><p>70%</p></div>
        </div>
    </section>
    <section id="projects">
        <h2 style="text-align:center;margin-bottom:20px;color:#1B3A5C">Loyihalarim</h2>
        <div class="projects">
            <div class="project"><h3>WebDastur</h3><p>Web dasturlash o'rgatuvchi platforma</p></div>
            <div class="project"><h3>Portfolio</h3><p>Shaxsiy portfolio sayti</p></div>
        </div>
    </section>
    <footer>&copy; 2024 Islombek Boltabayev. Barcha huquqlar himoyalangan.</footer>
</body>
</html>