Веб-дизайн и верстка. ЖСО-201. Лабораторное занятие №7. Flat-дизайн

апреля 24, 2020

Веб-дизайн и верстка. ЖСО-201. Лабораторное занятие №7. 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>

<head>

<title>Flat design</title>

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

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

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

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

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

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

</div>

</section>

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

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

</div>

</section>

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

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

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

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

Ссылки на выполненное задание принимаются в комментариях к этому посту до 13:00 25 апреля. Просьба дублировать ответ здесь: http://moodle.uio.csu.ru/mod/assign/view.php?id=93139