Untitled

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Формы ввода и шрифты</title>
  <link rel="stylesheet" href="https://code.s3.yandex.net/web-code/normalize.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="page">
    <section class="form">
      <div class="form__toggle">
        <img class="form__toggle-image" src="https://pictures.s3.yandex.net/html-forms/close_icon.png">
      </div>
      <div class="form__container">
        <form class="form__admin">
          <div class="form__main-container">
            <h2 class="form__heading">Задайте параметры</h2>
            <fieldset class="form__input-container form__input-container_ctrl_texts">
              <label for="heading" class="form__label">Заголовок</label>
              <input type="text" class="form__item form__item_el_heading" id="heading" name="heading" placeholder="О чем статья?">
              <label for="subheading" class="form__label">Подзаголовок</label>
              <input type="text" class="form__item form__item_el_subheading" id="subheading" name="subheading" placeholder="Краткое описание">
              <label for="main-text" class="form__label">Текст статьи</label>
              <textarea class="form__item form__item_el_main-text" id="main-text" name="main-text"></textarea>
              <label for="email" class="form__label">E-mail</label>
              <input type="email" class="form__item form__item_el_email" id="email" name="email">
            </fieldset>
            <div class="form__line"></div>
            <fieldset class="form__input-container form__input-container_ctrl_visual">
              <label for="font-family" class="form__label">Семейство шрифтов</label>
              <select class="form__item form__item_el_font-family" id="font-family" name="font-family">
                <option value="ibm">IBM Plex Serif</option>
                <option value="ubuntu">Ubuntu</option>
                <option value="istok">Istok Web</option>
              </select>
              <label for="heading-font-size" class="form__label">Размер текста заголовка</label>
              <input type="number" class="form__item form__item_el_heading-fontsize" min="24" max="80" id="heading-font-size" name="heading-font-size" value="32">
              <label for="text-font-size" class="form__label">Размер текста абзаца</label>
              <input type="number" class="form__item form__item_el_text-fontsize" min="12" max="40" id="text-font-size" name="text-font-size" value="24">
              <label for="pub-date" class="form__label">Дата создания статьи</label>
              <input type="date" class="form__item form__item_el_pubdate" id="pub-date" name="pub-date">
              <label for="image" class="form__label">Обложка статьи</label>
              <select class="form__item form__item_el_image" id="image" name="image">
                <option value="bombardier">Bombardier CS300</option>
                <option value="hobbit">Боинг-777 Хоббит</option>
                <option value="tiger">Тигролёт</option>
                <option value="connected">Connected to 01000010 01001100 01010101 01000101</option>
                </select>
            </fieldset>
            <fieldset class="form__input-container form__input-container_ctrl_additional">
              <h3 class="form__heading form__heading_type_ctrl-el-heading">Количество колонок</h3>
              <input type="radio" name="number-of-columns" id="one-column" class="form__item form__item_el_number-of-columns" value="one-column" checked>
              <label for="one-column" class="form__label form__label_direction_right">1</label>
              <input type="radio" name="number-of-columns" id="two-columns" class="form__item form__item_el_number-of-columns" value="two-columns">
              <label for="two-columns" class="form__label form__label_direction_right">2</label>
              <label for="text-color" class="form__label">Цвет текста</label>
              <input type="color" class="form__item form__item_el_text-color" id="text-color" name="text-color" value="#979797">
              <label for="content-width" class="form__label">Ширина контента</label>
              <input type="range" class="form__item form__item_el_content-width" min="30" max="80" step="10" id="content-width" name="content-width">
              <h3 class="form__heading form__heading_type_ctrl-el-heading">Дополнительные параметры</h3>
              <input type="checkbox" name="extra-option" id="black-background" class="form__item form__item_el_extra-options" value="black-background">
              <label for="black-background" class="form__label form__label_direction_right">Чёрный фон</label>
              <input type="checkbox" name="extra-option" id="bold-heading" class="form__item form__item_el_extra-options" value="bold-heading" checked>
              <label for="bold-heading" class="form__label form__label_direction_right">Жирный заголовок</label>
            </fieldset>
          </div>
          <fieldset class="form__handlers">
              <input type="submit" class="form__button">
              <input type="reset" class="form__button">
          </fieldset>
        </form>
      </div>
    </section>
    <section class="content">
      <div class="content__container">
        <header class="content__header">
          <h1 class="content__heading">Портрет Западной Швейцарии</h1>
          <h2 class="content__subheading">Примитивист Фиштр расписывает новый бюджетный авиалайнер</h2>
        </header>
        <div class="content__image">
          <img class="content__image-item" src="https://pictures.s3.yandex.net/html-forms/BOMBARDIER.jpg">
          <div class="content__image-copyright">
            Фото:
            <a class="content__link" href="https://www.flickr.com/photos/sloppyperfectionist/35863293766/" target="_blank">
              Hans-Peter Gauster
            </a>
            , "Bombardier CSeries CS300 HB-JCA" © 2017
            <a class="content__link" href="https://creativecommons.org/licenses/by-sa/2.0/legalcode" target="_blank">
              CC BY-SA 2.0
            </a>
            &nbsp;&nbsp;
            <img src="https://pictures.s3.yandex.net/html-forms/BOMBARDIER_CC.svg" alt="" height="10">
          </div>
        </div>
        <div class="content__text">
          <p class="content__paragraph">
            В конце 2016 года швейцарская авиакомпания Swiss получила свой первый канадский «Бомбардье CS300»
            для полётов малой и средней дальности. Чтобы придать новой 145-местной машине неповторимую индивидуальность,
            ливрею заказали живописцу. При условии, что эскиз он выполнит в одиночку и лично поправит роспись,
            когда её будут наносить на фюзеляж.
          </p>
          <p class="content__paragraph">
            Выбор пал на примитивиста Матиаса Форбаша, работающего под псевдонимом Фиштр. Ему поставили задачу
            изобразить всё лучшее во франкоговорящей части Швейцарии — горы, озёра, вина, сыры, доброжелательность
            и свободу. Заказ был выполнен в рекордный срок, всего за 5 месяцев. Самолёт получился похожим на самого
            художника: такой же добродушный и с улыбкой до ушей.
          </p>
          <p class="content__paragraph">
            С мая 2017 года "Бомбардье" носит имя "Швейцарская Романдия" и регистрационный номер
            <a class="content__link" href="https://www.flightradar24.com/data/aircraft/hb-jca" target="_blank">
              HB-JCA
            </a>
            ; совершает в среднем 4 коммерческих полёта в сутки. Его можно видеть в "Домодедово", а также в аэропортах
            Парижа, Валенсии, Кракова, Берлина, Вены, Загреба, на Майорке, Крите и Сицилии. Самолёт останется в той же
            ливрее, пока его не купит другая авиакомпания.
          </p>
        </div>
        <div class="content__date">10.10.18</div>
        <div class="content__author">
          Пишите автору на
          <a class="content__link content__link_type_email" href="mailto:mshifrin@yandex-team.ru">
            mshifrin@yandex-team.ru
          </a>
        </div>
      </div>
    </section>
    <footer class="footer">
      <div class="footer__container"></div>
    </footer>
  </div>
</body>
</html>