Web-дизайн. Лабораторное занятие №5. Dead-zone дизайн на CSS GL

Вам нужно создать страницу, выполненную по правилам CSS GL

Для этого потребуется конфигурация стилей в файле .css и подключение этого файла к коду страницы в HTML

I) Параметры стиля:

1) Как и в прошлом задании сначала укажите параметры для браузера, если он не поддерживает GL:

* {
     box-sizing: border-box;
}

.support-warning {
     background: #000000;
     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) Затем стили шрифтов и цветов (замените на свои шрифт, цвет шрифта, фон шрифта, шрифт и цвет заголовка и плашки):

body {
     background: #000000;
     color: #00ffff;
     padding: 3rem;
}

3) Далее прописываются параметры отступа колонок:

/* fallbacks using flexbox */
.l-grid {
     display: flex;
     flex-wrap: wrap;
}

.l-grid--2-col > .l-grid__item {
     flex: 1 0 auto;
     width: 50%;
     margin-bottom: 4rem;
}

.l-grid--gutter-large {
     margin-left: -2rem;
}

.l-grid--gutter-large > .l-grid__item {
     padding-left: 2rem;
}

@supports(display: grid) {
     .support-warning {
          display: none;
     }
     
     /* Resets of non-grid */
     .l-grid--gutter-large {
          margin: initial;
     }
     
     .l-grid--2-col > .l-grid__item {
          margin-bottom: initial;
          width: initial;
     }
     
     .l-grid--gutter-large > .l-grid__item {
          padding-left: initial;
     }
     
     .l-grid {
         display: grid;
     }    
}

.l-grid--2-col {
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-rows: 1fr;
}

.l-grid--gutter-large {
     grid-gap: 2rem;  
}

4) Сценарий их заполнения страницы с учетом "мертвых зон":

.l-column-start-2 {
     grid-column-start: 2;
}

.l-column-start-3 {
     grid-column-start: 3;
}

.l-column-start-4 {
     grid-column-start: 4;
}

.l-full-height {
     min-height: 100vh;
}

.align-bottom {
     align-items: end;
}

.content {
     padding: 1rem;
}

5) Стили заголовочной части:

.heading {
     position: relative;
     font-weight: 700;
     font-size: 2rem;
     margin-bottom: 1rem;
     line-height: 1.3;
     font-family: 'Libre Baskerville', serif;
}

.heading::before {
     content: '';
     position: absolute;
     width: 20%;
     height: 5px;
     top: -16px;
     border-top: 5px solid #fe5c5d;
}

.description {
     font-size: 1rem;
     line-height: 1.55;
     color: #00ffff;
     font-family: 'Raleway', sans-serif;
}

6) Готовый файл стилей вы сохраняется как .css и загружаете на https://sites.google.com/
7) Встраиваете в новую публикацию как .css
8) После этого размещаете сам HTML-код, начиная с предупреждения для несовместимых браузеров:

<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. 
</div>

9) Далее прописываете блок заголовка:

<div class="l-grid l-grid--2-col l-grid--gutter-large l-full-height">
     <div class="l-grid__item align-bottom l-grid l-column-start-3">
          <div class="content">
          <h2 class="heading">Тут ваш заголовок</h2>

10) И текст для следующей за ним колонки:

          <p class="description">Ваш текст</p>
          </div>
     </div>

11) Вторая колонка:


      <div class="l-grid__item">
          <div class="content">
          <p class="description"><p class="description">Ваш текст</p>
          </div>
     </div>

12) Третья:

      <div class="l-grid__item l-column-start-2">
          <div class="content">
          <p class="description">Ваш текст</p>
          </div>
     </div>

13) И четвертая, после которой вы закрываете скрипт:

     <div class="l-grid__item l-column-start-4">
          <div class="content">
          <p class="description">Ваш текст</p>
          </div>
     </div>
  
</div>

В итоге у вас должна получиться страница с расположением текста в столбик с мертвыми зонами, цветным фоном и шрифтом определенного цвета. Ссылки на выполненное задание оставлять в комментариях к данному посту.

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

The Great Below

Staring at the sea Will she come? s there hope for me After all is said and done Anything at any price All of this for you All the spoils of a wasted life All of this for you All the world has closed her eyes Tired faith all worn and thin For all we could have done And all that could have been

Ocean pulls me close And whispers in my ear The destiny I've chose All becoming clear The currents have their say The time is drawing near Washes me away Makes me disappear And I descend from grace In arms of undertow I will take my place In the great below

this is how it begins push it away but it all comes back again all the flesh all the sin there was a time when it used to mean just about everything just like now breathe, echoing the sound time starts slowing down sink until I drown (please) I don't ever want to make it stop and it keeps repeating will you please complete me? never be enough to fill me up

watch the white turn to red it fills up the hole but it grows somewhere else instead all my life yeah yeah yeah yeah, but it just left me dead (well guess what?) the world is over and I realize it was all in my head now everything is clear I erase the fear I can disappear (please) I don't ever want to make it stop you can never leave me will you please complete me never be enough to fill me up