Web-дизайн. Лабораторное занятие №4. Блочный дизайн на CSS GL

Вам нужно создать страницу, выполненную по правилам CSS GL
Для этого потребуется конфигурация стилей в файле .css и подключение этого файла к коду страницы в HTML

I) Параметры стиля:
1) Сначала прописываются параметры для браузера, в случае, если он не поддерживает GL:

* {
     box-sizing-border: box;
}
.support-warning {
     background: #ccb11c;
     color: #000;
     display: block;
     font-family: 'Raleway', sans-serif;
     font-weight: 700;
     opacity: 0.95;
     padding: 3rem;
     position: fixed;
     text-align: center;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 5;
}

.support-warning a {
     color: inherit;
}

2) Указываем обертку грида:

/* flexbox fallback */
.grid {
     display: flex;
     flex-wrap: wrap;
}

3) Задаем размеры грида:

.grid--4x4 > .grid__item {
     flex: 1 0 auto;   
}


@supports(display: grid) {
     .support-warning {
          display: none;
     }
     
     .grid {
         display: grid;
     }
     
}

4) Соотношение долей:

.grid--4x4 {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(auto-fit, minmax(50vh, auto) minmax(50vh, auto));
}

5) Параметры выравнивания:

.align-center {
     align-items: center;
     justify-content: center;
}

.content {
     padding: 3.5rem;
     max-width: 400px;
}

6) Блок заголовка - в нем вы задаете свой шрифт:

.heading {
     font-family: 'Gill Sans', serif;
     font-size: 2rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1rem;
}

7) Блок описания - также смените шрифт на парный или сочетаемый с тем, который вы использовали в пункте 6:

.description {
     font-family: 'Raleway', sans-serif;
     font-size: 1rem;
     line-height: 1.5;
}

8) Далее вы создаете цветовые темы по числу блоков - у меня их четыре. В каждом параметре блока нужно указать цвет фона и цвет шрифта.
Ваша задача чтобы все элементы в дизайне смотрелись гармонично:

.theme-gray {
   background: #808080;
   color: #ffffff;
}

.theme-navy {
    background: #000080; 
    color: #ffffff;
}

.theme-aqua {
   background: #00ffff;
   color: #000000;
}

.theme-teal {
  background: #008080;
  color: #ffffff;
}

8) Готовый файл стилей вы сохраняется как .css и загружаете на https://sites.google.com/


II) Собственно HTML:

9) Перед скриптом HTML вы указываете откуда взять параметры стилей:

<link href="расположение вашего скрипта" rel="stylesheet" type="text/css"></link>

10) Далее параметры для не распознающих браузеров:

<div class="support-warning">
    This demo requires CSS Grid. The current browser you're using doesn't support it and is using a Flexbox fallback. Find a <a href="https://igalia.github.io/css-grid-layout/enable.html">grid-enabled browser</a>.
</div>
<div class="grid grid--4x4">

11) Далее прописываете стиль грида, его заголовок и содержимое:

<div class="grid__item theme-gray grid align-center">
          
          <div class="content">
               <h2 class="heading">
               Заголовок грида

          </h2>
 <p class="description">В этой части блока может находиться любое содержимое, которое вы пропишите в исходном коде.</p>
          </div>
     </div>

И так четыре раза - то есть по числу ваших блоков. Для каждого в параметре grid__item меняете цветовую тему на ту, что используете.
Готовый грид публикуете у себя в блоге. Ссылки принимаются в комментариях к данному посту до 18:00 25 октября.

This demo requires CSS Grid. The current browser you're using doesn't support it and is using a Flexbox fallback. Find a grid-enabled browser.

Заголовок грида

В этой части блока может находиться любое содержимое, которое вы пропишите в исходном коде.

Заголовок второго грида

Та же самая история с описанием - второй блок и второй текст для соответствующей части грида.

Третий заголовок

Описание под заголовком - устроено аналогичным образом, что и предыдущие

Четвертый заголовок грида

Здесь также предусмотрен текст, который будет вписан в грид.