html/lab2/task7/style.css - main - Coderdev/web-static-labs

html/lab2/task7/style.css
115 строк3 KB
Coderdev
finish
03 мар 2026, 11:54
03 мар 2026, 11:545e81a6d
/* ============================= */
/* ОБЩИЕ НАСТРОЙКИ */
/* ============================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#eeeeee;
  font-family:Arial, sans-serif;
}

/* ============================= */
/* ОБЩИЙ КОНТЕЙНЕР */
/* ============================= */

.container{
  margin:40px auto;
  background:#ffffff;
  padding:20px;
  display:grid;
  gap:20px;
}

/* ============================= */
/* МАКЕТ 1 (1280-80-20-12) */
/* ============================= */

.layout1{
  width:1280px;
  padding-left:80px;
  padding-right:80px;
  grid-template-columns:repeat(12, 1fr);
}

.layout1 .b1{ grid-column:span 2; height:80px; background:#7ec8e3;}
.layout1 .b2{ grid-column:span 8; height:80px; background:#4cbf8c;}
.layout1 .b3{ grid-column:span 2; height:80px; background:#f0b04f;}

.layout1 .b4{ grid-column:span 12; height:300px; background:#5a7bd8;}

.layout1 .b5{ grid-column:span 6; height:300px; background:#5fbab5;}
.layout1 .b6{ grid-column:span 6; height:300px; background:#e28b52;}

.layout1 .footer{ grid-column:span 12; height:120px; background:#2f2a3a;}


/* ============================= */
/* МАКЕТ 2 (400-80-20-4) */
/* ============================= */

.layout2{
  width:400px;
  padding-left:80px;
  padding-right:80px;
  grid-template-columns:repeat(4, 1fr);
}

.layout2 .b1{ grid-column:span 1; height:80px; background:#7ec8e3;}
.layout2 .b2{ grid-column:span 3; height:80px; background:#4cbf8c;}

.layout2 .b4{ grid-column:span 4; height:250px; background:#5a7bd8;}

.layout2 .b5{ grid-column:span 2; height:250px; background:#5fbab5;}
.layout2 .b6{ grid-column:span 2; height:250px; background:#e28b52;}

.layout2 .footer{ grid-column:span 4; height:120px; background:#2f2a3a;}


/* ============================= */
/* МАКЕТ 3 (АДАПТИВНЫЙ) */
/* ============================= */

.adaptive{
  width:100%;
  max-width:1280px;
  padding-left:80px;
  padding-right:80px;
  grid-template-columns:repeat(12, 1fr);
}

/* Desktop */
.adaptive .b1{ grid-column:span 2; height:80px; background:#7ec8e3;}
.adaptive .b2{ grid-column:span 8; height:80px; background:#4cbf8c;}
.adaptive .b3{ grid-column:span 2; height:80px; background:#f0b04f;}

.adaptive .b4{ grid-column:span 12; height:300px; background:#5a7bd8;}

.adaptive .b5{ grid-column:span 6; height:300px; background:#5fbab5;}
.adaptive .b6{ grid-column:span 6; height:300px; background:#e28b52;}

.adaptive .footer{ grid-column:span 12; height:120px; background:#2f2a3a;}


/* Mobile */
@media (max-width:600px){

  .adaptive{
    max-width:400px;
    grid-template-columns:repeat(4, 1fr);
  }

  .adaptive .b1{ grid-column:span 1;}
  .adaptive .b2{ grid-column:span 3;}
  .adaptive .b3{ display:none;}

  .adaptive .b4{ grid-column:span 4; height:200px;}
  .adaptive .b5{ grid-column:span 2;}
  .adaptive .b6{ grid-column:span 2;}

  .adaptive .footer{ grid-column:span 4;}
}