ЖМК-301/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 предварительно загрузив его в репозиторий, получив прямую ссылку по кнопке 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

Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 до 17:00 6 февраля, для ЖМК-301 до 17:00 9 февраля.

РЕЗУЛЬТАТЫ (данные обновляются):

Жукова Виктория - 5
Ишмекеева Елизавета - 5
Маханек Вера - 5
Митюнин Андрей - 4
Панченко Валерия - 5
Широкоумова Полина - 5

Комментарии

Отправить комментарий

Популярные сообщения

Parallax