ЖМК-201/2. Веб-дизайн. Практическое занятие №1. Flat-дизайн cо статичными элементами

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

- одну иллюстрацию в формате .png, загруженную в репозиторий;

- один заголовочный блок;

- один абзац текста;

- шесть вкладок, две из которых реализованы как кнопки;

- фоновый градиент, построенный на трех цветах.

Итоговый результат должен корректно отображаться и с десктопа и со смартфона.

Настройки блога для верного отображения задания: тема: Notable.

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

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

1) Объявляем универсальный селектор со свойством отображения элемента border-box:

* {

  box-sizing: border-box;

}

2) Задаем отображение цвета на фоне страницы. Для этого используем линейный градиент. Используйте три базовых цвета. При необходимости измените градус перехода:

body {

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

  background: linear-gradient(120deg, цвет1, цвет2, цвет3);

}

3) Указываем цвета ссылок во вкладках: цвет по умолчанию, цвет посещенной ссылки и цвет ссылки при наведении курсора:

      

a {

  color: ваш цвет;

}

a:visited {

  

  color: ваш цвет;

      }

      

a:hover {

  color: ваш цвет;

      }

4) Задаем параметры отображения меню ссылок:

      

ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

5) Создаем класс контейнера, в котором будут находится все элементы:

      

.container {

  padding-left: 5px;

  padding-right: 5px;

  margin-left: auto;

  margin-right: auto;

  margin-top: -70px;

}

6) Добавляем точки перехода для адаптивной верстки для корректного отображения страницы на смартфонах: 

      

@media (min-width: 780px) {

  .container {

    width: 760px;

  }

}

@media (min-width: 992px) {

  .container {

    width: 970px;

  }

}

@media (min-width: 767px) {

  .container {

    width: 1170px;

  }

}

7) Задаем параметры отображения хэдера:

      

.flat-page header {

  min-height: 80px;

  display: flex;

}

      

@media (max-width: 767px) {

  .flat-page header {

    min-height: auto;

    display: initial;

  }

}

8) Контейнера внутри него:

      

.flat-page header .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

      

@media (max-width: 767px) {

  .flat-page header .container {

    flex-direction: column;

    justify-content: center;

  }

}

9) Ссылок-вкладок:

.flat-page header .links {

  display: flex;

  align-items: center;

}

      

@media (max-width: 900px) {

  .flat-page header .links {

    text-align: center;

    gap: 20px;

  }

}

10) Прописываем их цвет - он должен совпадать (желательно) с цветом из параметра ссылки с псевдоклассом hover (меняет цвет при наведении курсора):

      

.flat-page header .links li {

  margin-left: 10px;

  color: ваш цвет;

  cursor: pointer;

  transition: .3s;

}

11) Задаем цвет последней вкладки, оформленной как кнопка:

@media (max-width: 900px) {

  .flat-page header .links li {

    margin-left: auto;

  }

}

.flat-page header .links li:last-child {

  border-radius: 20px;

  padding: 10px 20px;

  color: #FFF;

  background-color: цвет кнопки;

}

 

12) Указываем расположение кнопок и контента на странице:    

.flat-page .content .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 140px;

  min-height: calc(100vh - 80px);

}

      

@media (max-width: 767px) {

  .flat-page .content .container {

    gap: 0;

    min-height: calc(100vh - 101px);

    justify-content: center;

    flex-direction: column-reverse;

  }

}

      

@media (max-width: 767px) {

  .flat-page .content .info {

    text-align: center;

    margin-bottom: 15px 

  }

}

13) Размер шрифта в заголовке:

      

.flat-page .content .info h1 {

  color: white;

  font-size: 38px;

}

14) Размер и цвет шрифта в абзаце:

      

.flat-page .content .info p {

  margin: 0;

  line-height: 1.6;

  font-size: 15px;

  color: white;

}

14) Размер и цвет (укажите свой) кнопки внизу страницы:

.flat-page .content .info button {

  border: 0;

  border-radius: 20px;

  padding: 12px 30px;

  margin-top: 30px;

  cursor: pointer;

  color: #FFF;

  background-color: ваш цвет;

}

15) Максимальный размер картинки и отступ картинки от верхней границы экрана. Второй параметр выставляйте - если необходимо - опираясь на расположение иллюстрации на экране смартфона:

      

.flat-page .content .image img {

  max-width: 120%;

  margin-top: 50px;

}

Сохраните файл стилей как css. Имя файла может быть любое, но только латиницей, без пробелов. Для сохранения в Notepad++ выберите: file - save as. Выберите расширение файла .css

О дальнейших действиях с файлом - далее.

II) HTML

16) Открываем теги страницы:

<!DOCTYPE html>

<html lang="en">

17) Внутри  <head> указываем мета-тег

<meta charset="UTF-8">

18) Добавляем ваш заголовок вкладки:

<title>Заголовок вкладки</title>

19) Встраиваем шрифты и минимальные значения библиотеки CSS:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>

20) Встраиваете ваш CSS через тег link предварительно загрузив его в репозиторий, получив прямую ссылку по кнопке raw и, затем:

либо конвертировав эту ссылку через http://raw.githack.com/ (development link) 

либо изменив стандартную ссылку из репозитория в CDN следующим образом:

Для Github:

Исходная: https://github.com/Dmitrykonn/specimen/blob/master/file.css

CDN: https://cdn.statically.io/gh/Dmitrykonn/specimen/master/file.css

Для Gitlab:

Исходная: https://gitlab.com/Dmitrykonn/landings/-/blob/main/file.css

CDN: https://cdn.statically.io/gl/Dmitrykonn/landings/main/file.css

Но! Такая ссылка (с полем statically) работает только сутки.

Для встраивания используйте либо тег link - принцип встраивания в лекции про CSS, либо разместите CSS напрямую в HTML внутри тега <style></style>

21) Закрываете  </head> внутри <body> разворачиваем класс страницы:

<div class="flat-page">

22) Открываем <header> в нем открываем класс контейнера и класс ссылок:

<div class="container">

<ul class="links">

23) Создаем пять ссылок по типу:

<li><a href="" target="_blank">имя вкладки</a></li>

В анкоре пишем отображаемый текст, в поле ссылки - адресацию (используйте любую). Кликабельный текст у всех ссылок должен быть разный

24) Закрываем классы ссылок и контейнера, а также хэдер:

 

</ul>

</div>

</header>

25) Открываем классы контента, контейнера и инфоблока:

<div class="content">

<div class="container">

<div class="info">

26) Указываем основной заголовок страницы:

<h1>Ваш заголовок</h1>

27) Абзац с текстом:

<p>Ваш текст абзаца</p>

28) Добавляем кнопку также с вашим текстом и ссылкой:

<button><a href="" target="_blank">ваш текст</a></button>

29) Закрываем класс инфоблока:

</div>

30) Добавляем класс фото и указываем ссылку на фото, также загруженное в репозиторий. Используйте ссылку вида raw.githubusercontent.com:

<div class="image">

<img src="ссылка на фото">

31) Закрываем оставшиеся классы:

</div>

</div>

</div>

</div>

32) Закрываем оставшиеся теги  </body> и </html>

Откройте ваш блог. Создайте новое сообщение или страницу. Переключитесь с режима "карандаш" в режим HTML. Вставьте ваш код HTML со встроенным css в блог и сохраните. Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/p/simple-flat-page.html

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

РЕЗУЛЬТАТЫ:

Бакиров Александр - 4

Баранова Вероника - 5

Баянов Александр - 5

Безрукова Екатерина - 4

Ваулин Павел - 4

Глушенкова Анна - 5

Головина Алёна - 5

Горбунова Виктория - 5

Грищук Ульяна  - 5

Дрофа Вероника - 5

Исхакова Илона - 5

Касимова Кира - 5

Коломытцев Егор - 5

Кравченко Ксения - 5

Кудряшова Екатерина - 4

Кузарман Вероника - 5

Липсберг Ксения - 5

Лопатина Ирина - 4

Лубнина Вероника - 5

Лысенко Влада - 5

Мартынова Ангелина - 4

Машнина Елизавета - 5

Михина Полина - 5

Нефедова Софья - 5

Петрова Мария - 5

Петухова Елизавета - 5

Плюхина Екатерина - 5

Поликанов Андрей - 4

Попова Дарья - 5

Сурашева Дарина - 5

Суржик Анастасия - 5

Уфимцева Елизавета - 5

Хатипова Милана - 5

Шульгина Виктория - 5

Юдин Никита - 5

Юсупова Диана - 4