Skip to content

Instantly share code, notes, and snippets.

@DmitriyKashin
Last active December 17, 2015 01:10
Show Gist options
  • Save DmitriyKashin/5526717 to your computer and use it in GitHub Desktop.
Save DmitriyKashin/5526717 to your computer and use it in GitHub Desktop.
HTML KoC template
<div class="norway">
<style type="text/css">
.norway {
position: relative;
color: #393939;
font-family: 'PFDinTextCompPro-Light', sans-serif;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0);
}
.b-plan__special-white-edging {
background-image: url('http://pst0.iknow.travel.s3.amazonaws.com/koc/white-border.png');
width: 40px;
height: 250px;
position: absolute;
left: 50%;
z-index: 1021;
margin-left: 466px;
margin-top: -10px;
}
.b-plan__special-white-edging.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
margin-left: -506px;
}
.b-plan__special-norway {
width: 1000px;
margin: 0 auto;
height: 240px;
/* Ссылка на бэкграунд картинку */
background-image: url('http://pst0.iknow.travel.s3.amazonaws.com/koc/norway-main.png');
/* ----------------------------------------------------------------------------------------*/
box-shadow: 0px 10px 4px -6px #b2b2b9;
moz-box-shadow: 0px 10px 4px -6px #b2b2b9;
-webkit-box-shadow: 0px 10px 4px -6px #b2b2b9;
border-bottom: none;
padding: 10px 0px 0px 0px;
}
.b-plan__special-logo {
background-image: url('http://pst0.iknow.travel.s3.amazonaws.com/koc/logo-grey-background.png');
width: 26px;
height: 122px;
position: absolute;
left: 50%;
margin-left: 513px;
margin-top: 62px;
}
</style>
<div class="b-plan__special-logo"></div>
<div class="b-plan__caption b-plan__special-norway">
<div class="b-plan__special-white-edging"></div>
<div class="b-plan__special-white-edging flip"></div>
<div class="b-plan__caption-details">
<!-- Если это гайд - вставляем лейбл -->
<div class="b-plan__caption-label pull-right">
<i class="avo-icon-em-label"></i>
<span class="b-plan__caption-label-text">Путеводитель</span>
</div>
<!-- _________________________________________________________ -->
<!-- Блок автора - ссылка на аватарку, имя автора. Необходимо заменить все зависимости
Как вариант : скопировать аналогичный блок с любого существующего плана нужного автора на сайте -->
<div class="b-plan__caption-author pull-left"><div class="b-plan__caption-author-portrait pull-left"><a href="#" title="Valentina Kolesnikova" class="b-portrait-holder47"><div class="portrait-shadow"></div><img src="http://st0.iknow.travel.s3-eu-west-1.amazonaws.com/img/avatars/small/zhcn4.jpg" alt="Valentina Kolesnikova" title="Valentina Kolesnikova" class="portrait"></a></div><div class="b-plan__caption-author-name"><a href="/valentina.killacat/plans" class="b-plan__caption-author-name-link">Valentina Kolesnikova</a></div></div>
<!-- _________________________________________________________ -->
<!-- Название плана \ гида -->
<h1 class="b-plan__caption-title b-caption__title">Гид по Норвегии</h1>
<!-- _________________________________________________________ -->
<div class="clear"></div>
</div>
<div class="b-plan__caption-details">
<div class="b-plan-caption__text-holder">
<!-- Описание вставляем сюда -->
<p>Велосипедный маршрут по Северному Брабанту мог бы занять и один день,
но лучше задержаться в сюрреалистичных парках, попробовать помидоры с
компьютерной фермы или монастырское пиво. Внезапно откроется, что
провинциальная Голландия это не только мельницы и виды с картин Ван Гога,
это еще и инновационный паблик-арт, современное искусство и архитектура.
Не зря кластер городов от Эйндховена до Ден Боша стоит в числе
претендентов на звание культурной столицы Европы.
Соавтор: Nathan de Groer </p>
<!-- _____________________________________________ -->
</div>
</div>
</div>
</div>
@Lendar
Copy link

Lendar commented May 6, 2013

Поправил ссылки на картинки и кавычки (чтобы bash съел).

 <div class="norway">
    <style type="text/css">
      .b-plan__special-white-edging {
        background-image: url("//pst0.iknow.travel/koc/white-border.png");
        width: 40px;
        height: 250px;
        position: absolute;
        left: 50%;
        z-index: 1021;
        margin-left: 466px;
      }
      .b-plan__special-white-edging.flip {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        margin-left: -506px;
      }
      .b-plan__special-norway {
        width: 1000px;
        margin: 0 auto;
        height: 240px;
        background-image: url("//pst0.iknow.travel/koc/norway-main.png");
        box-shadow: none;
        border-bottom: none;
      }
      .b-plan__special-logo {
        background-image: url("//pst0.iknow.travel/koc/logo-grey-background.png");
        width: 26px;
        height: 122px;
        position: absolute;
        left: 50%;
        margin-left: 513px;
        margin-top: 62px;
      }
    </style>
    <div class="b-plan__special-white-edging"></div>
    <div class="b-plan__special-white-edging flip"></div>
    <div class="b-plan__special-logo"></div>
    <div class="b-plan__caption i-common__caption b-plan__special-norway">
      <div class="b-plan__caption-details">
        <div class="b-plan__caption-label pull-right">
          <i class="avo-icon-em-label"></i>
          <span class="b-plan__caption-label-text">Путеводитель</span>
        </div>
        <div class="b-plan__caption-author pull-left">
          <div class="b-plan__caption-author-portrait pull-left">
            <a href="#" title="Natulya Ptukhina" class="b-portrait-holder47">
              <div class="portrait-shadow"></div>
              <img src="http://static.iknow.travel.s3-eu-west-1.amazonaws.com/img/avatars/medium/3c7il.jpg" alt="Natulya Ptukhina" title="Natulya Ptukhina" class="portrait">
            </a>
          </div>
          <div class="b-plan__caption-author-name">
            <a href="/natulya.ptulia/plans" class="b-plan__caption-author-name-link norway">Natulya Ptukhina</a>
          </div>
        </div>
        <h1 class="b-plan__caption-title b-caption__title">Другая Турция</h1>
        <div class="clear"></div>
      </div>
      <div class="b-plan__caption-details">
        <div class="b-plan-caption__text-holder">
          <p>Три года назад россияне смогли въезжать на территорию Турецкого государства без визы. С тех пор мест, где не встретишь соотечественников становится все меньше.  В нашей подборке – Турция, в которую пока еще нестыдно ехать. </p>
        </div>
      </div>
    </div>
  </div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment