<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 15px 0; }
        .grid .card { background: white; padding: 25px; border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: 0.3s; }
        .grid .card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
        .grid .card i { font-size: 2rem; margin-bottom: 10px; }

        .layout { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; gap: 10px; height: 400px; }
        .layout div { padding: 15px; border-radius: 10px; color: white; font-weight: bold; }
        .layout .header { grid-column: 1 / -1; background: #1B3A5C; }
        .layout .sidebar { background: #2E86AB; }
        .layout .main { background: #27AE60; }
        .layout .footer { grid-column: 1 / -1; background: #1B3A5C; }
    </style>
</head>
<body>
    <h2>Grid Kartochkalar</h2>
    <div class="grid">
        <div class="card" style="color:#E44D26"><div style="font-size:2rem">&#60;/&#62;</div><h3>HTML</h3><p>Tuzilma</p></div>
        <div class="card" style="color:#264DE4"><div style="font-size:2rem">#</div><h3>CSS</h3><p>Dizayn</p></div>
        <div class="card" style="color:#F7DF1E"><div style="font-size:2rem">{}</div><h3>JS</h3><p>Dinamika</p></div>
    </div>
    <h2>Grid Layout</h2>
    <div class="layout">
        <div class="header">HEADER</div>
        <div class="sidebar">SIDEBAR</div>
        <div class="main">MAIN CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>