html/lab2/task7/task7.css - main - maxxon/web-static-labs

html/lab2/task7/task7.css
159 строк4 KB
Dasha_10
добавление изменений
08 окт 2025, 08:44
08 окт 2025, 08:44a3869e1
@media all and (min-width: 1200px){
    .grid {
        padding: 30px;
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(12, 80px);
        grid-template-areas: 
                        "g1 g1 g2 g2 g2 g2 g2 g2 g2 g2 g2 g3"
                        "g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4"
                        "g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4"
                        "g5 g5 g5 g5 g6 g6 g6 g6 g7 g7 g7 g7"
                        "g5 g5 g5 g5 g6 g6 g6 g6 g7 g7 g7 g7"
                        "g5 g5 g5 g5 g6 g6 g6 g6 g7 g7 g7 g7"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10"
                        "g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10";
        color:black;
        width: 1280px;
        height: 1400px;
        justify-content: center;
    }
}

@media all and (min-width: 810px) and (max-width: 1200px) {
    .grid {
        padding: 30px;
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(12, 40px);
        grid-template-areas: 
                        "g1 g1 g1 g2 g2 g2 g2 g2 g2 g2 g2 g2"
                        "g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4"
                        "g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4 g4"
                        "g5 g5 g5 g5 g5 g5 g9 g9 g9 g9 g9 g9"
                        "g5 g5 g5 g5 g5 g5 g9 g9 g9 g9 g9 g9"
                        "g5 g5 g5 g5 g5 g5 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g8 g8 g8 g8 g8 g8 g9 g9 g9 g9 g9 g9"
                        "g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10"
                        "g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10 g10";
        color:black;
        width: 810px;
        height: 1400px;
        justify-content: center;
    }

    .g3 {
        display: none;
    }

    .g6 {
        display: none;
    }

    .g7 {
        display: none;
    }
}

@media all and (min-width: 400px) and (max-width: 810px) {
    .grid {
        padding: 30px;
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(4, 80px);
        grid-template-areas: 
                        "g1 g2 g2 g2"
                        "g4 g4 g4 g4"
                        "g4 g4 g4 g4"
                        "g4 g4 g4 g4"
                        "g5 g5 g7 g7"
                        "g5 g5 g7 g7"
                        "g5 g5 g7 g7"
                        "g9 g9 g9 g9"
                        "g9 g9 g9 g9"
                        "g9 g9 g9 g9"
                        "g9 g9 g9 g9"
                        "g9 g9 g9 g9"
                        "g10 g10 g10 g10"
                        "g10 g10 g10 g10"
                        "g10 g10 g10 g10";
        color:black;
        width: 400px;
        height: 1400px;
        justify-content: center;
    }

    .g3 {
        display: none;
    }

    .g6 {
        display: none;
    }

    .g8 {
        display: none;
    }
}

body {
    display: flex;
    justify-content: center;
}

.g1 {
    grid-area: g1;
    background-color: #5bc5e1;
}

.g2 {
    grid-area: g2;
    background-color: #34bc91;
}

.g3 {
    grid-area: g3;
    background-color: #feb54e;
}

.g4 {
    grid-area: g4;
    background-color: #6590e5;
}

.g5 {
    grid-area: g5;
    background-color: #1abdbd;
}

.g6 {
    grid-area: g6;
    background-color: #1b9293;
}

.g7 {
    grid-area: g7;
    background-color: #f0945b;
}

.g8 {
    grid-area: g8;
    background-color: #9a3d9b;
}

.g9 {
    grid-area: g9;
    background-color: #f2b00d;
}

.g10 {
    grid-area: g10;
    background-color: #423848;
}