Загрузка данных

<html>
<head>
    <title>Задание 19.4</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        .glavny {
            width: 150px;
            height: 80px;
            background: rgb(97, 97, 202);
            color: white;
            margin: 0 auto 40px auto; 
            display: flex;
        }

        .block {
            width: 120px;
            height: 60px;
            background: rgb(203, 44, 252);
            color: white;
            margin: 0 auto 40px auto; 
            display: flex;
        }
        .p1 { transform: translate(40px, 20px); }
        .p2 { transform: rotate(30deg); }
        .p3 { transform: rotate(-30deg); }
        .p4 { transform: scale(1.5, 2); }
        .p5 { transform: scale(0.5, 0.5); }
        .p6 { transform: scaleX(2); }
        .p7 { transform: skewX(15deg); }
        .p8 { transform: skew(15deg, 5deg); }
        .p9 { transform: matrix(1, 0.1, -0.1, 1, 10, 10); }
    </style>
</head>
<body>
    <div class="glavny">Главный блок</div>

    <div>
        <h3>Пример 1</h3>
        <div class="block p1">Блок 1</div>
    </div>

    <div>
        <h3>Пример 2</h3>
        <div class="block p2">Блок 2</div>
    </div>

    <div>
        <h3>Пример 3</h3>
        <div class="block p3">Блок 3</div>
    </div>

    <div>
        <h3>Пример 4</h3>
        <div class="block p4">Блок 4</div>
    </div>

    <div>
        <h3>Пример 5</h3>
        <div class="block p5">Блок 5</div>
    </div>

    <div>
        <h3>Пример 6</h3>
        <div class="block p6">Блок 6</div>
    </div>

    <div>
        <h3>Пример 7</h3>
        <div class="block p7">Блок 7</div>
    </div>

    <div>
        <h3>Пример 8</h3>
        <div class="block p8">Блок 8</div>
    </div>

    <div>
        <h3>Пример 9</h3>
        <div class="block p9">Блок 9</div>
    </div>
</body>
</html>