Вёрстка и веб-дизайн. 3 курс. Лабораторное занятие №3. Верстка на 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) Указываем обертку грида:

.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;
}


Обратите внимание, что сначала цвет блока указывается в имени класса (.theme-grаy - то есть серый, затем этот же цвет указывается в параметре background, а параметр color - это цвет букв в блоке)

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


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

9) Встраиваете CSS.


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 меняете цветовую тему на ту, что используете.

Обратите внимание, что цвета в CSS должны совпадать с цветами в HTML. То есть, если вы пишете в CSS цвет первого блока серый, то затем в пункте 11 вы указываете тот же цвет - и там и там будет theme-gray.Если второй цвет в CSS у вас красный, он должен быть красный и в HTML и так далее во всех четырех цветах.

Готовый грид публикуете у себя в блоге. Ссылки принимаются в комментариях к данному посту до 20:00 7 апреля.

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.

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

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

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

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

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

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

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

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