SHARE
TWEET

Untitled

a guest Oct 18th, 2019 122 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title>iframes</title>
  7.     <link rel="stylesheet" href="normalize.css" />
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <div class="page">
  12.       <header class="header">
  13.         <div class="header__container">
  14.           <div class="header__title-container">
  15.             <h1 class="header__title">
  16.               Steppe и Tayga: самое длинное железнодорожное путешествие в мире
  17.             </h1>
  18.             <p class="header__description">
  19.               Пирожки с ливером, дембеля, проводницы Таня и Надя, ряженка на
  20.               станциях, Хабаровск, Ижевск, Москва — всего 18 дней в пути. Так
  21.               музыкант Дэвид Боуи добирался в Европу после тура по Японии весной
  22.               1973 года. Боуи боялся летать, поэтому поехал на поезде.
  23.             </p>
  24.           </div>
  25.           <div class="header__counter-container">
  26.             <div class="header__counter header__counter_km">
  27.               <span class="header__counter-value" id="header__counter-value_km">0</span>
  28.               км.
  29.             </div>
  30.             <div class="header__counter header__counter_days">
  31.               <span class="header__counter-value" id="header__counter-value_days">0</span>
  32.               дней.
  33.             </div>
  34.             <div class="header__icon header__icon_sound">
  35.               <audio loop сontrols>
  36.                 <source src="https://pictures.s3.yandex.net/iframes_topic/audio.mp3" type="audio/mp3"></source>
  37.               </audio>
  38.             </div>
  39.           </div>
  40.         </div>
  41.       </header>
  42.       <section class="cities">
  43.         <div class="cities__container">
  44.           <div class="cities__city" id="cities__city_kostroma">
  45.             <div class="cities__video-container cities__video-container_kostroma">
  46.               <video src="https://pictures.s3.yandex.net/iframes_topic/1.mp4" poster="https://pictures.s3.yandex.net/iframes_topic/msk-kostroma.jpg"></video>
  47.             </div>
  48.             <p class="cities__text cities__text_kostroma">
  49.               Сначала — привычные пейзажи европейской части России: поля, дачи,
  50.               деревни, лесополосы, линии электропередач. Абрамцево, Берендеево,
  51.               Ростов Великий, Нерехта: кажется, что едешь то ли по стране хоббитов,
  52.               то ли в прошлое, в 1973 год, и сейчас из соседнего купе выйдет
  53.               высокий нескладный человек в японском кимоно и ярких штанах.
  54.             </p>
  55.           </div>
  56.           <div class="cities__city" id="cities__city_ekb">
  57.             <div class="cities__video-container cities__video-container_ekb">
  58.               <video src="https://pictures.s3.yandex.net/iframes_topic/2.mp4" poster="https://pictures.s3.yandex.net/iframes_topic/kostroma-ekb.jpg"></video>
  59.            
  60.             </div>
  61.             <p class="cities__text cities__text_ekb">
  62.               Пора налаживать быт. В Костроме вы купили всё, что забыли взять с
  63.               собой — растворимый кофе, водку, дошик. Устраивайтесь поудобнее.
  64.               Мы ещё даже не доехали до Урала.
  65.             </p>
  66.           </div>
  67.           <div class="cities__city" id="cities__city_omsk">
  68.             <div class="cities__video-container cities__video-container_omsk">
  69.               <video src="https://pictures.s3.yandex.net/iframes_topic/3.mp4" poster="https://pictures.s3.yandex.net/iframes_topic/ekb-omsk.jpg"></video>
  70.             </div>
  71.             <p class="cities__text cities__text_omsk">
  72.               Путешествие окончательно перестало быть путешествием и стало
  73.               трипом. Этот мистический опыт погружения в глубины России вы точно
  74.               не забудете никогда. Европа осталась позади, но Азия и не думает
  75.               начинаться. Возможно, вы вообще стояли на месте всё это время. С
  76.               другой стороны, если долго смотреть в окно (а что ещё
  77.               делать), можно увидеть армию Колчака, идущую в атаку на красных.
  78.               Или мамонтов, бродивших здесь когда-то вдоль рельс.
  79.             </p>
  80.           </div>
  81.           <div class="cities__city" id="cities__city_yablonovy-pereval">
  82.             <div class="cities__video-container cities__video-container_yablonovy-pereval">
  83.               <video src="https://pictures.s3.yandex.net/iframes_topic/4.mp4" poster="https://pictures.s3.yandex.net/iframes_topic/pereval.jpg"></video>
  84.             </div>
  85.             <p class="cities__text cities__text_yablonovy-pereval">
  86.               Байкал — позади. Вы в самом сердце континента, здесь нет ни
  87.               эллина, ни иудея, ни Европы, ни Азии. Поезд проходит самую высокую
  88.               точку Транссиба, за которой начинается путь к морю. Когда-то
  89.               дорога сужалась здесь до одной колеи и шла через узкий туннель,
  90.               на портале которого красовалось хтоническое указание направления:
  91.               «К великому океану».
  92.             </p>
  93.           </div>
  94.           <div class="cities__city" id="cities__city_khabarovsk">
  95.             <div class="cities__video-container cities__video-container_khabarovsk">
  96.               <video src="https://pictures.s3.yandex.net/iframes_topic/5.mp4" poster="https://pictures.s3.yandex.net/iframes_topic/pereval-khb.jpg"></video>
  97.             </div>
  98.             <p class="cities__text cities__text_khabarovsk">
  99.               Хабаровск появляется, когда уже кажется, что остаток жизни вы
  100.               проведёте в поезде. О соседях по вагону вы уже знаете больше, чем
  101.               о своих ближайших родственниках. Но ещё каких-то 800
  102.               километров — и Владивосток.
  103.             </p>
  104.           </div>
  105.           <div class="cities__city" id="cities__city_vladivostok">
  106.             <div class="cities__video-container cities__video-container_vladivostok">
  107.               <div class="cities__video-title">Владивосток</div>
  108.             </div>
  109.             <p class="cities__text cities__text_vladivostok">
  110.               Это как путешествие на Зону в «Сталкере» Тарковского.
  111.               С каждым происходит что-то своё, но, проделав этот путь,
  112.               никто не остаётся тем же человеком, который выехал из Москвы
  113.               неделю назад.
  114.             </p>
  115.           </div>
  116.         </div>
  117.       </section>
  118.       <section class="iframes">
  119.         <div class="iframes__container">
  120.           <div class="iframe iframe__tickets">
  121.             <div class="iframe__title">Посмотреть расписание ⟶</div>
  122.             <div class="iframe__item">
  123.               <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>
  124.             </div>
  125.           </div>
  126.           <div class="iframe iframe__music">
  127.             <div class="iframe__title">Что послушать ⟶</div>
  128.             <div class="iframe__item">
  129.               <!--тут будет iframe-->
  130.               <iframe style="border: 1px solid red" frameborder="0" style="border:none;width:100%;height:450px;" width="100%" height="450" src="https://music.yandex.ru/iframe/#playlist/yamusic-bestsongs/631822">Слушайте <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>
  131.             </div>
  132.           </div>
  133.           <div class="iframe iframe__books">
  134.             <div class="iframe__title">Что почитать ⟶</div>
  135.             <div class="iframe__item">
  136.               <!--тут будет iframe-->
  137.               <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_iLEQDbX6BBSGB" ></iframe>
  138.             </div>
  139.           </div>
  140.           <div class="iframe iframe__map">
  141.             <div class="iframe__title">Карта пути ⟶</div>
  142.             <div class="iframe__item">
  143.               <a href="https://yandex.ru/maps/?um=constructor%3A8ff7f728c871c15cc911df5f2cfa3e9026de9f90bfd1c3a6af509a918ed53ead&amp;source=constructorStatic" target="_blank"><img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A8ff7f728c871c15cc911df5f2cfa3e9026de9f90bfd1c3a6af509a918ed53ead&amp;width=600&amp;height=400&amp;lang=ru_RU" alt="" style="border: 0;" /></a>
  144.             </div>
  145.           </div>
  146.           <div class="iframe iframe__social">
  147.             <div class="iframe__title">Мой отчёт ⟶</div>
  148.             <div class="iframe__item">
  149.               <!--тут будет iframe-->
  150.               <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>
  151.             </div>
  152.           </div>
  153.         </div>
  154.       </section>
  155.     </div>
  156.   </body>
  157. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top