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_heading" id="heading">
    <label for="subheading" class="form__label">Подзаголовок</label>
    <input type="text" class="form__item form__item_el_subheading" id="subheading">
    <label for="main-text" class="form__label">Текст статьи</label>
    <textarea class="form__item form__item_el_main-text" id="main-text"></textarea>
    <label for="email" class="form__label">E-mail</label>
    <input type="email" class="form__item form__item_el_email" id="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">
      <option>IBM Plex Serif</option>
      <option>Ubuntu</option>
      <option>Istok Web</option>
    </select>
    <label for="heading-font-size" class="form__label"></label>
    <input type="number" min="24" max="80"  class="form__item form__item_el_heading-fontsize" id="heading-font-size">
    <label for="text-font-size" class="form__label"></label>
    <input type="number" min="12" max="40" class=" form__item form__item_el_text-fontsize" id="text-font-size">
    <label for="pub-date" class="form__label"></label>
     <input type="date" class="form__item form__item_el_pubdate" id="pub-date">
    <label for="image" class="form__label"></label>
     <select class="form__item form__item_el_image" id="image">
      <option>Bombardier CS300</option>
      <option>Боинг-777 Хоббит</option>
      <option>Тигролёт</option>
      <option>Connected to 01000010 01001100 01010101 01000101</option>
      </select>
  </fieldset>
  <fieldset class="form__input-container form__input-container_ctrl_additional">
    <label for="text-color" class="form__label">Цвет текста</label>
    <input type="color" class="form__item form__item_el_text-color" id="text-color">
    <label for="content-width" class="form__label">Ширина контента</label>
    <input type="range" min="30" max="80" step="10" class="form__item form__item_el_content-width" id="content-width">
  </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>