Веб-дизайн. 4 курс. Практическое занятие №1. Flat-дизайн

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

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

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

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

Настройки блога для верного отображения задания: тема: soho neon, ширина боковой панели: 440px, стандартный хедер страницы сделайте прозрачным (все настройки в левом сайдбаре блога). В настройках темы также необходимо отключить фоновую картинку.

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

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

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) В селекторе указываете высоту страницы и ее фон (задайте нужный вам):

html, body {

  font-family: 'Open Sans', sans-serif;

  height: 100%;

  margin: 0;

  background-color: ?;

}

3) Создайте класс упаковки страницы. В нем указывается расположение элементов и их размер:

  

.box {

    width: 80%;

    position: absolute;

    margin: auto;

  overflow: auto;

}

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

#main {

 width: 100%;

 padding: 0;

}

.content-asset p {

 margin: 0 auto;

}

.breadcrumb {

 display: none;

}

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

.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) Создайте уровни перехода иллюстраций для каждой из картинок (все три картинки загрузите в репозиторий). Для этого создайте идентификатор класса, меняя класс для каждой из картинок. Для первой расположение (параметр background-position) укажите так как внизу: top center, для двух картинок, которые будут ниже верхней укажите center center. Первая иллюстрация будет выглядеть так:

#flat .parallax-one {

 padding-top: 200px;

 padding-bottom: 200px;

 overflow: hidden;

 position: relative;

 width: 100%;

 background-image: url("адрес фото в репозитории");

 background-attachment: fixed;

 background-size: cover;

 -moz-background-size: cover;

 -webkit-background-size: cover;

 background-repeat: no-repeat;

 background-position: top center;

}

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

#flat .line-break {

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

 width: 100%;

 margin: 0 auto;

}

13) Это параметры адаптивной верстки для мобильных устройств. Просто скопируйте их в CSS:

@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:

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

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <titleFlat</title>

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

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

<div class="box">

 <div id="flat">

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

  <section>

   <div class="title">

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

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

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

   </div>

  </section>

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

  <section>

   <div class="parallax-one">

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

   </div>

  </section>

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

  <section>

   <div class="block">

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

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

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

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

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

   </div>

  </section>

 22) Второй и третий блок текста задаются аналогичным образом – вы выполняете действия пунктов 18-21, меняя только класс фото в идентификаторе класса, класс стартовой буквы и класс разделителя. Разумеется, также меняется заголовок второго уровня и сам текст.

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

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

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