Untitled

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>iframes</title>
    <link rel="stylesheet" href="normalize.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="page">
      <header class="header">
        <div class="header__container">
          <div class="header__title-container">
            <h1 class="header__title">
              Steppe и Tayga: самое длинное железнодорожное путешествие в мире
            </h1>
            <p class="header__description">
              Пирожки с ливером, дембеля, проводницы Таня и Надя, ряженка на
              станциях, Хабаровск, Ижевск, Москва — всего 18 дней в пути. Так
              музыкант Дэвид Боуи добирался в Европу после тура по Японии весной
              1973 года. Боуи боялся летать, поэтому поехал на поезде.
            </p>
          </div>
          <div class="header__counter-container">
            <div class="header__counter header__counter_km">
              <span class="header__counter-value" id="header__counter-value_km">0</span>
              км.
            </div>
            <div class="header__counter header__counter_days">
              <span class="header__counter-value" id="header__counter-value_days">0</span>
              дней.
            </div>
            <div class="header__icon header__icon_sound">
            </div>
          </div>
        </div>
      </header>
      <section class="cities">
        <div class="cities__container">
          <div class="cities__city" id="cities__city_kostroma">
            <div class="cities__video-container cities__video-container_kostroma">
            </div>
            <p class="cities__text cities__text_kostroma">
              Сначала — привычные пейзажи европейской части России: поля, дачи,
              деревни, лесополосы, линии электропередач. Абрамцево, Берендеево,
              Ростов Великий, Нерехта: кажется, что едешь то ли по стране хоббитов,
              то ли в прошлое, в 1973 год, и сейчас из соседнего купе выйдет
              высокий нескладный человек в японском кимоно и ярких штанах.
            </p>
          </div>
          <div class="cities__city" id="cities__city_ekb">
            <div class="cities__video-container cities__video-container_ekb">
            </div>
            <p class="cities__text cities__text_ekb">
              Пора налаживать быт. В Костроме вы купили всё, что забыли взять с
              собой — растворимый кофе, водку, дошик. Устраивайтесь поудобнее.
              Мы ещё даже не доехали до Урала.
            </p>
          </div>
          <div class="cities__city" id="cities__city_omsk">
            <div class="cities__video-container cities__video-container_omsk">
            </div>
            <p class="cities__text cities__text_omsk">
              Путешествие окончательно перестало быть путешествием и стало
              трипом. Этот мистический опыт погружения в глубины России вы точно
              не забудете никогда. Европа осталась позади, но Азия и не думает
              начинаться. Возможно, вы вообще стояли на месте всё это время. С
              другой стороны, если долго смотреть в окно (а что ещё
              делать), можно увидеть армию Колчака, идущую в атаку на красных.
              Или мамонтов, бродивших здесь когда-то вдоль рельс.
            </p>
          </div>
          <div class="cities__city" id="cities__city_yablonovy-pereval">
            <div
              class="cities__video-container cities__video-container_yablonovy-pereval"
            >
            </div>
            <p class="cities__text cities__text_yablonovy-pereval">
              Байкал — позади. Вы в самом сердце континента, здесь нет ни
              эллина, ни иудея, ни Европы, ни Азии. Поезд проходит самую высокую
              точку Транссиба, за которой начинается путь к морю. Когда-то
              дорога сужалась здесь до одной колеи и шла через узкий туннель,
              на портале которого красовалось хтоническое указание направления:
              «К великому океану».
            </p>
          </div>
          <div class="cities__city" id="cities__city_khabarovsk">
            <div
              class="cities__video-container cities__video-container_khabarovsk"
            >
            </div>
            <p class="cities__text cities__text_khabarovsk">
              Хабаровск появляется, когда уже кажется, что остаток жизни вы
              проведёте в поезде. О соседях по вагону вы уже знаете больше, чем
              о своих ближайших родственниках. Но ещё каких-то 800
              километров — и Владивосток.
            </p>
          </div>
          <div class="cities__city" id="cities__city_vladivostok">
            <div
              class="cities__video-container cities__video-container_vladivostok"
            >
              <div class="cities__video-title">Владивосток</div>
            </div>
            <p class="cities__text cities__text_vladivostok">
              Это как путешествие на Зону в «Сталкере» Тарковского.
              С каждым происходит что-то своё, но, проделав этот путь,
              никто не остаётся тем же человеком, который выехал из Москвы
              неделю назад.
            </p>
          </div>
        </div>
      </section>
      <section class="iframes">
        <div class="iframes__container">
          <div class="iframe iframe__tickets">
            <div class="iframe__title">Посмотреть расписание ⟶</div>
            <div class="iframe__item">
            </div>
          </div>
          <div class="iframe iframe__music">
            <div class="iframe__title">Что послушать ⟶</div>
            <div class="iframe__item">
              <iframe
                frameborder="0"
                style="border:1px solid red; width:700px; height:600px;"
                width="900"
                height="600"
                src="https://music.yandex.ru/iframe/#playlist/yamusic-bestsongs/631822/show/cover/description/black/"
              >
                Слушайте
                <a href="https://music.yandex.ru/users/yamusic-bestsongs/playlists/631822">
                  Лучшее: A$AP Rocky
                </a>
                —
                <a href="https://music.yandex.ru/users/yamusic-bestsongs">Яндекс.Музыка</a>
                на Яндекс.Музыке
              </iframe>
            </div>
          </div>
          <div class="iframe iframe__books">
            <div class="iframe__title">Что почитать ⟶</div>
            <div class="iframe__item">
              <iframe
                type="text/html"
                width="336"
                height="550"
                frameborder="0"
                allowfullscreen
                style="max-width: 100%;"
                src="https://read.amazon.com/kp/card?asin=B073D36KNM&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_qmq.BbMTSMXNQ"
              >
              </iframe>
            </div>
          </div>
          <div class="iframe iframe__map">
            <div class="iframe__title">Карта пути ⟶</div>
            <div class="iframe__item">
            </div>
          </div>
          <div class="iframe iframe__social">
            <div class="iframe__title">Мой отчёт ⟶</div>
            <div class="iframe__item">
              <!--тут будет iframe-->
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>