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">
              <audio
                controls
                loop
                src="https://pictures.s3.yandex.net/iframes_topic/audio.mp3"
                type="audio/mp3"
              ></audio>
            </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">
              <video
                src="https://pictures.s3.yandex.net/iframes_topic/1.mp4"
                poster="https://pictures.s3.yandex.net/iframes_topic/msk-kostroma.jpg"
                muted
                controls
              ></video>
            </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">
              <video
                src="https://pictures.s3.yandex.net/iframes_topic/2.mp4"
                poster="https://pictures.s3.yandex.net/iframes_topic/kostroma-ekb.jpg"
                controls
                muted
              ></video>
            </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">
              <video
                src="https://pictures.s3.yandex.net/iframes_topic/3.mp4"
                controls
                poster="https://pictures.s3.yandex.net/iframes_topic/ekb-omsk.jpg"
              ></video>
            </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">
              <video
                src="https://pictures.s3.yandex.net/iframes_topic/4.mp4"
                controls
                muted
                poster="https://pictures.s3.yandex.net/iframes_topic/pereval.jpg"
              ></video>
            </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">
              <video
                src="https://pictures.s3.yandex.net/iframes_topic/5.mp4"
                controls
                muted
                poster="https://pictures.s3.yandex.net/iframes_topic/pereval-khb.jpg"
              ></video>
            </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>
              <iframe
                width="100%"
                height="720px"
                src="https://www.youtube.com/embed/O6wuDwzhDvY"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
              ></iframe>
            </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">
                <iframe
                  frameborder="0"
                  style="-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); overflow: hidden; border: 0; width: 700px; height: 350px;"
                  src="https://rasp.yandex.ru/informers/search/?fromId=c213&amp;toId=c75&amp;size=5&amp;color=1&amp;type=train"
                >
                </iframe>
            </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">
                <a href="https://yandex.ru/maps/?um=constructor%3Ae7584623c950d87f6c1c62ca98f65bfc25b13470edb5148fcb924a3959925319&amp;source=constructorStatic" target="_blank"><img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3Ae7584623c950d87f6c1c62ca98f65bfc25b13470edb5148fcb924a3959925319&amp;width=600&amp;height=400&amp;lang=ru_RU" alt="" style="border: 0;" /></a>
            </div>
          </div>
          <div class="iframe iframe__social">
            <div class="iframe__title">Мой отчёт ⟶</div>
            <div class="iframe__item">
              <iframe
                src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FDrachiosaurus%2Fposts%2F1857733597882973&width=500"
                width="500"
                height="688"
                style="border:none; overflow:hidden;"
                scrolling="no"
                frameborder="0"
                allowTransparency="true"
                allow="encrypted-media"
              >
              </iframe>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>