Web-дизайн. 4 курс. Лабораторное занятие №1. Подгруппа 1. Flat-дизайн

Вам нужно создать страницу, реализованную по принципам плоского дизайна, включающую в себя:

- три иллюстрации

- три блока текста со стартовыми буквами

- три градиент-разделителя

При этом переход градиента должен в целом совпадать с логикой иллюстраций и начинаться с того же цвета, что и каждая из стартовых букв.

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

Рекомендуемая тема для выполнения задания: Contempo 1. В настройках темы необходимо отключить фоновую картинку.

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

1) Через директиву импорта указываем шрифты, которые будут использоваться на странице:

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

2) В идентификаторе задаем размеры страницы – в моем случае 100%:

#main {

 width: 100%;

 padding: 0;

}

.content-asset p {

 margin: 0 auto;

}

.breadcrumb {

 display: none;

}

3) Задаем отступы сверху и снизу:

.margin-top-10 {

 padding-top: 10px;

}

.margin-bot-10 {

 padding-bottom: 10px;

}

4) Для каждого заголовка указываем шрифт, кегль, цвет и отступы:

#flat h1 {

 font-family: 'Oswald', sans-serif;

 font-size: 24px;

 font-weight: 400;

 text-transform: uppercase;

 color: black;

 padding: 0;

 margin: 0;

}

#flat h2 {

 font-family: 'Oswald', sans-serif;

 font-size: 70px;

 letter-spacing: 10px;

 text-align: center;

 color: white;

 font-weight: 400;

 text-transform: uppercase;

 z-index: 10;

 opacity: .9;

}

#flat h3 {

 font-family: 'Oswald', sans-serif;

 font-size: 14px;

 line-height: 0;

 font-weight: 400;

 letter-spacing: 8px;

 text-transform: uppercase;

 color: black;

}

5) Та же история для абзацев текста:

#flat p {

 font-family: 'Source Sans Pro', sans-serif;

 font-weight: 400;

 font-size: 14px;

 line-height: 24px;

}

6) И стартовых букв:

.first-character {

 font-weight: 400;

 float: left;

 font-size: 84px;

 line-height: 64px;

 padding-top: 4px;

 padding-right: 8px;

 padding-left: 3px;

 font-family: 'Source Sans Pro', sans-serif;

}

7) Теперь создаем классы самих стартовых букв – их цвета будут зависеть от используемого вами градиента. В каждом классе указываете цвет для соответствующей буквы.

8) Заголовочная часть:

#flat .title {

 background: white;

 padding: 60px;

 margin: 0 auto;

 text-align: center;

}

#flat .title h1 {

 font-size: 35px;

 letter-spacing: 8px;

}

9) Блоки текста и с цветом фона и отступами:

#flat .block {

 background: white;

 padding: 6px;

 width: 820px;

 margin: 0 auto;

 text-align: justify;

}

#flat .block-gray {

 background: #f2f2f2;

 padding: 6px;

}

10) Маска блоков поверх иллюстраций:

#flat .section-overlay-mask {

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

 background-color: black;

 opacity: 0.70;

}

11) Уровни параллакса плоского дизайна для каждой из картинок. Это первый блок:

#flat .parallax-one {

 padding-top: 200px;

 padding-bottom: 200px;

 overflow: hidden;

 position: relative;

 width: 100%;

 background-image: url("https://sites.google.com/site/konoplevmedia/coverstart2.png");

 background-attachment: fixed;

 background-size: cover;

 -moz-background-size: cover;

 -webkit-background-size: cover;

 background-repeat: no-repeat;

 background-position: top center;

}

12) Это второй:

#flat .parallax-two {

 padding-top: 200px;

 padding-bottom: 200px;

 overflow: hidden;

 position: relative;

 width: 100%;

 background-image: url("https://sites.google.com/site/konoplevmedia/covertwo.jpg");

 background-attachment: fixed;

 background-size: cover;

 -moz-background-size: cover;

 -webkit-background-size: cover;

 background-repeat: no-repeat;

 background-position: center center;

}

13) Это третий:

#flat .parallax-three {

 padding-top: 200px;

 padding-bottom: 200px;

 overflow: hidden;

 position: relative;

 width: 100%;

 background-image: url(https://sites.google.com/site/konoplevmedia/coverthree.jpg);

 background-attachment: fixed;

 background-size: cover;

 -moz-background-size: cover;

 -webkit-background-size: cover;

 background-repeat: no-repeat;

 background-position: center center;

}

14) Градиент разделитель (у вас их будет три) задает параметры перехода цветов через запятую, в той последовательности, которая вам нужна. Для того чтобы использовать разные разделители используйте различные имена их классов.

#flat .line-break {

 background: linear-gradient(60deg, #008000, #ffd700, #dc143c);

 width: 100%;

 margin: 0 auto;

}

15) Это параметры адаптивной верстки:

@media screen and (max-width: 959px) and (min-width: 768px) {

 #flat .block {

  padding: 40px;

  width: 620px;

 }

}

@media screen and (max-width: 767px) {

 #flat .block {

  padding: 30px;

  width: 420px;

 }

 #flat h2 {

  font-size: 30px;

 }

 #flat .block {

  padding: 30px;

 }

 #flat .parallax-one, #flat .parallax-two, #flat .parallax-three {

  padding-top: 100px;

  padding-bottom: 100px;

 }

}

@media screen and (max-width: 479px) {

 #flat .block {

  padding: 30px 15px;

  width: 290px;

 }

}

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

16) Указываем doctype, внутри <head> прописываем метаданные и стандартный заголовок:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Flat design</title>

17) Встраиваем CSS и закрываем хэдер.

18) Открываем  <body> и внутри него указываем идентификатор, заявленный в CSS -

 <div id="flat">

19) Создаем заголовочный блок:

  <section>

   <div class="title">

    <h3>Заголовок старта</h3>

    <h1>Крупный заголовок</h1>

    <h3>Заголовок финала</h3>

   </div>

  </section>

20) Создаем блок с классом первого параллакса и его заголовком:

  <section>

   <div class="parallax-one">

    <h2>Заголовок раздела</h2>

   </div>

  </section>

21) Создаем блок текста. Обратите внимание, что первая буква текста задается цветом в классе указанном в теге <span> и соответствует соответствующему классу из CSS (в данном случае у меня это fl, у вас - ваш класс, который вы указали в пункте 7):

  <section>

   <div class="block">

    <p><span class="first-character fl">В</span>ваш текст.</p>

22) После первой части текста ставим разделитель с градиентом с тем именем класса, который вам нужен по цвету:

    <p class="line-break margin-top-10"></p>

23) После разделителя текст продолжается:

    <p class="margin-top-10">Продолжение вашего текста </p>

   </div>

  </section>

 24) Второй и третий блок текста задаются аналогичным образом – вы выполняете действия пунктов 20-23, меняя только класс параллакса (вместо parallax-one ставите parallax-two и так далее), класс стартовой буквы и класс разделителя. Разумеется, также меняется заголовок второго уровня и сам текст.

25) Создав три блока текста вы закрываете оставшиеся теги – это </div>, </body> и </html>

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevtech4.blogspot.com/2019/08/gm-page.html

Ссылки на выполненное задание принимаются в комментариях к этому посту до 23:59 21 сентября.