Прикладной визуальный дизайн

Задача «Дополнительные (комплиментарные) цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более яркими, если разместить их рядом. Однако сильный визуальный контраст может раздражать, если он чрезмерно используется на веб-сайте, и иногда может затруднить чтение текста, если он размещен на дополнительном цветном фоне. На практике один из цветов обычно является доминирующим, а дополнение используется для привлечения визуального внимания к определенному контенту на странице.

На этой странице будет использоваться оттенок бирюзового (# 09A7A1) в качестве доминирующего цвета и его оранжевый (# FF790E) дополнительный цвет, чтобы визуально выделить кнопки регистрации. Измените цвет фона как верхнего, так и нижнего колонтитула (header и footer ) с черного на бирюзовый цвет. Затем измените цвет текста h2 на бирюзовый. В конце, измените цвет фона кнопки на оранжевый.

Задание:

Элемент header должен иметь цвет фона #09A7A1.

Элемент footer должен иметь цвет фона #09A7A1.

Тег h2 должен иметь ЦВЕТ ТЕКСТА (color) #09A7A1

Элемент button должен иметь цвет фона # FF790E.

<header>
  <h1>Cooking with FCC!</h1>
</header>
<main>
  <article>
    <h2>Machine Learning in the Kitchen</h2>
    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
    <button>Sign Up</button>
  </article>
  <article>
    <h2>Bisection Vegetable Chopping</h2>
    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
    <button>Sign Up</button>
  </article>
</main>
<br>
<footer>&copy; 2018 FCC Kitchen</footer>

body {
    background-color: white;
  }
  header {
    background-color: black;
    color: white;
    padding: 0.25em;
  }
  h2 {
    color: black;
  }
  button {
    background-color: white;
  }
  footer {
    background-color: black;
    color: white;
    padding: 0.5em;
  }

Result

Прикладной визуальный дизайн

Отрегулируйте цвет различных элементов до дополнительных (комплиментарных) цветов

IT Junior

Курсы

Полезные ссылки

Контакты