html/lab2/task7/styles.css - master - Coderdev/web-static-labs

html/lab2/task7/styles.css
81 строка2 KB
Coderdev
12 май 2026, 12:37
12 май 2026, 12:37d8ecd0f
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
}

.box {
    padding: 10px;
    color: white;
    font-weight: bold;
}

.cyan { background-color: #4fc3f7; }
.green { background-color: #2ecc71; }
.orange-yellow{background-color: #e79821;}
.blue { background-color: #4285f4; }
.teal { background-color: #00bcd4; }
.dark-teal { background-color: #009688; }
.orange { background-color: #ff9800; }
.purple { background-color: #9c27b0; }
.yellow { background-color: #ffc107; }
.footer { background-color: #34495e; }

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 1280px;
    min-height: 1400px;
    padding: 20px;
    box-sizing: border-box;
}

.cyan { grid-column: span 2; height: 60px; }
.green { grid-column: span 9; height: 60px; }
.orange-yellow{grid-column:span 1; height:60px}
.blue { grid-column: span 12; height: 180px; }
.teal { grid-column: span 4; height: 260px; }
.dark-teal { grid-column: span 4; height: 260px; }
.orange { grid-column: span 4; height: 260px; }
.purple { grid-column: span 6; height: 420px; }
.yellow { grid-column: span 6; height: 420px; }
.footer { grid-column: span 12; height: 250px; }

@media (max-width: 1279px) {
    .grid-wrapper {
        width: 810px;
    }
    .cyan { grid-column: span 2; }
    .green { grid-column: span 10; }
    .orange-yellow{display: none;}
    .teal { grid-column: span 5;grid-row:3; }
    .dark-teal { display: none; }
    .orange { display: none; }
    .yellow { grid-column: span 7; height: auto;grid-row:3/5 }
    .purple { grid-column: span 5; grid-row:4;height: 500px; }
}

@media (max-width: 809px) {
    .grid-wrapper {
        width: 400px;
        grid-template-columns: repeat(4, 1fr);
        min-height: auto;
    }
    .cyan, .green, .blue, .teal, .orange, .yellow, .purple {
        grid-row: auto; 
    }
    .cyan { grid-column: span 1; height:60px;}
    .green { grid-column: span 3; height:60px;}
    .orange-yellow{display: none;}
    .blue { grid-column: span 4 ;height:180px;}
    .teal { grid-column: span 2;height:260px; }
    .dark-teal { display: none; }
    .orange {display:grid; grid-column: span 2;height:260px; }
    .purple { display:none;}
    .yellow { grid-column: span 4; height:400px;}
    .footer { grid-column: span 4; }
}