У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается
это место не из тех, где захочешь оказаться, но из тех, куда частенько наведывается смерть. потому что её здесь обычно ждут. можно даже сказать «приглашают». вот и сегодня тоже. за лабиринтом простыней, которые уже никогда не станут кипенно-белыми, жнец встречает свою визави....
читать далее
ЛОНДОН, МИСТИКА, МАРТ 2024
13/12
о которых давно нужно было поговорить

Halazia

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Halazia » I need to explain » туристический справочник


туристический справочник

Сообщений 1 страница 4 из 4

1

Код:
<!--HTML-->
<div class="html_wrapper theme">
<div class="html_item2 darkcover">
<p>занимательные места</p>
</div>
<div class="html_item lightcover">
<p>Здесь представленные самые яркие и знаменитые места лондонского конгломерата, вокруг которых так или иначе завязана жизнь халазийцев. Некоторые из этих заведений с определенными ограничениями открывают свои двери и для обывателей, некоторые - успешно балансируют между двумя мирами. Но каждое из них в той или иной степени заслуживает вашего внимания</p>
</div></div>

+1

2

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"сумерки"</span>
      <em> "twilight"| 34 Redchurch St, London E2 7DP </em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">частный ночной клуб</span>
        <div>'последние три этажа невзрачного здания склада занимают сокрытые от взгляда обывателя "сумерки". некоторые считают, что попасть сюда сложнее, чем добиться аудиенции королевы, но для владельцев антрацитовой карты с золотым тиснением нет ничего невозможного. два этажа занимает танцпол с лаконичным и богатым интерьером, в котором магия сплетается с выдумкой лучших дизайнеров, зона бара и небольшой лаундж с отменной звукоизоляцией. третий этаж отведен под проведение частных мероприятий, является вотчиной лорда протектора - владельца "сумерек". изюминкой клуба по праву считается крыша, где удачно расположился бассейн под открытым небом, а также застекленная терраса, с которой можно насладиться потрясающим видом ночного города.</br>
статус заведения гарантирует высокий сервис и конфиденциальность. о вечерах, проведенных в "сумерках" принято говорить с придыханием восторга и трепетом. клуб открыт ежедневно с 23.00 до 06:00.</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/334386.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"призрачный город"</span>
      <em> "ghost town"| 34 Kingly Street, London W1B 5QH </em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">игорный дом</span>
        <div>в богатейшем районе лондонского конгломерата расположился "призрачный город" - игорный дом, где можно выиграть состояние и проиграть жизнь. здесь вы не увидите одноруких бандитов - покер, рулетка, игра в кости. интерьер удачно совмещает лучшее от французского арт-деко и азиатского колорита. после полуночи каждое полнолуние двери "призрачного города" распахиваются для всех желающих. чарующая музыка, тихих смех, шелест шелка и звон хрусталя, едва уловимый запах благовоний и призрачная дымка опиума. за закрытыми дверьми делают ставки на годы жизни, способности и даже души в надежде ухватит лакомый кусок. помимо ставок, "призрачный город" удачно совмещает в себе все прелести порочных наслаждений</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/83479.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"серебряный маркет"</span>
      <em> "silver market"| Nine Elms Ln, Nine Elms, London SW8 5BH </em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">центральный "плавучий рынок"</span>
        <div>в отличие от стихийных "плавучих рынков" "серебренный маркет" уже давно обосновался на территории ковен-гардена. он не может похвастаться переменчивым расписанием и не порадует искушенного клиента запретными товарами, однако сохраняет лучшие традиции своих младших братьев - гибкие цены, разнообразный ассортимент и легкая точка входа, как для предпринимателей, так и для покупателей. когда пустеют лавки обывателей и в торговом павильоне гаснет свет, тогда помещение наполняется призрачным гвалтом магического народца. здесь больше не купить необоснованно дорогих сувениров и не найти брендовой одежды. в час, когда ковен-граден заполняет "серебряный маркет" балом правят артефакты, редкие ингредиенты, фамильяры, диковинные снадобья и прочая магическая снедь. любой желающий предприниматель может представить свой товар - некоторые дельцы предлагают не только продажу, но и обмен. приглядитесь внимательно к тем ребятам, что выставляются на пестрых коврах. в воздухе витают сказочные светлячки, играет приятная музыка, а лотки с уличной едой дразнят манящими ароматами. </div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/22972.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

+1

3

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"черная кошка"</span>
      <em> "the black cat"| 80 Brady St, London E1 5DL </em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">отель</span>
        <div>в японии существует суеверие о том, что цифра четыре несет за собой смерть. где-то там, где всходит солнце, люди предпочитают не использовать в нумерации это число, пропускать при подсчете этажей, перескакивая с тройки сразу на пятерку. но никто бы и не подумал о том, что недалеко от парка виктория, в не самом примечательном доме из красного кирпича это суеверие обретет свою истинную силу.</br>
небольшой восьмиэтажный отель внешне производит впечатление старинного дома, где придется тащить руками свой чемодан на последний этаж и ютиться в маленькой комнате, где, дай бог, поместится лишь кровать да тумбочка, но благодаря стараниям своих хозяев, внутренние помещения претерпели если не десятки тысяч, то сотни самых разных изменений. И все блага цивилизации вполне доступны для гостей по не самым чудовищным ценникам. </br>
здесь мало совершенно случайных гостей, туристы выбирают места поближе к достопримечательностям, а до делового центра нужно ещё суметь добраться, но зато всегда можно отдохнуть от суеты и шума. если вас конечно не пугает, что порой на третьем и пятом этажах, проходя мимо старого лифта, которым раньше пользовалась кухня, можно услышать странные шорохи и шепот. </br>
не задавайте вопросы, вы не хотите получать на них ответы. не пытайтесь заглянуть в окна на четвертом этаже, вам вряд ли понравится то, как ваше зрение может вас обмануть. не пытайтесь выяснить, какие черные кошки прячутся на четвертом этаже здания, у них пустые желудки и они очень кровожадны по сути своей. </br>
наслаждайтесь тишиной и спокойствием, для этого здесь созданы все условия.
</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/3/718308.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"белые холмы"</span>
      <em> "white hills"| 1 Falmouth Rd, London SE1 4JX </em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">библиотека</span>
        <div>большое светлое помещение, поделенное на коридоры высокими стеллажами, на которых свою жизнь проживают десятки самых разных книг, привезённых со всех концов земли. несколько зон для отдыха и небольшая кофейня в одном центральных залов, чтобы не уснуть во время подготовки к экзаменам. чаще всего в библиотеке наступает период аврала именно в дни подготовки к очередной сессии. а вот на летний период библиотека практически замирает, позволяя персоналу выдохнуть и заняться инвентаризацией имущества. </br>
помимо привычной всем художественной и специализированной литературы, за которой в библиотеку наведываются обыватели, здесь можно найти и нужные данные по магическому миру: справочники и классификации, исторические выписки по магическим событиям, несколько стеллажей со свитками по ритуалам и проклятиям, а также сотни сборников зелий со всего мира. глава библиотеки слишком сильно любит свою коллекцию, чтобы не пополнять её буквально из любого возможного источника. </br>
учитывая объемы библиотеки несколько администраторов всегда присутствуют в залах и с удовольствием помогут вам отыскать нужный материал. стоит только верно сформулировать свой вопрос. для интровертов также существует и электронный путеводитель, но разобраться в переплетении коридоров и полок здесь способны не все. потеряться никто никогда не терялся, но зайти в раздел любовных романов, а вынырнуть где-то около атласов древнего мира вполне возможно. и не то, чтобы они были как-то связаны между собой.</br>
есть в библиотеке и та часть, о которой не догадываются ни обыватели, ни большинство магически одаренных жителей халазии. в одном из дальних помещений хранятся несколько действительно бесценных книг, которые никто и никогда не сможет прочесть. здесь хранятся сама жизнь и смерть каждого из людей конгломерата. помещение "харон корпорейтид" занимает несколько внутренних комнат, доступ в которые находится у ограниченного количества лиц, связанных контрактом с самой смертью. туда невозможно попасть случайно, даже если вдруг вам захочется свернуть за дверь "только для служебного пользования".
</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/949842.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

+2

4

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"пристань лотоса"</span>
      <em> "Lotus pier" | London | Little Venice</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">ресторанчик китайской кухни</span>
        <div>для обывателей — приличная двухэтажная закусочная в "маленькой венеции": вкусная национальная кухня, адекватные цены, аутентичный интерьер и бонусом очаровательный вид на пестрящий лодочками риджентс-канал. но для существ более тонкой душевной организации — убежище и лавка, где, по законам чайна-тауна, можно найти практически всё. нейтральная зона, исключающая применение грубой магической силы. существа, носящие печать лотоса на запястье, находятся под протекцией владельца "пристани"</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/233217.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]
[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"пророчество уитби"</span>
      <em> "whitbys prophecy"| 57 Wapping Wall, London E1W 3SH</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">портовый паб</span>
        <div>в первые десятилетия работы завсегдатаями паба были пираты, моряки и контрабандисты. с ходом времени, конечно, публика стала более респектабельной, однако ни интерьер, ни общая атмосфера здесь остались точно такими же, какими в свое время задумывались сестрами утби. в пабе и по сей день преобладает типичная морская тематика: штурвалы, фонари мачт и корабельные веревки. настенные стеллажи хранят старинные бутылки рома и сундуки с награбленными драгоценностями, среди которых можно встретить как проклятое золото, так и занятные артефакты. у барной стойки есть медная рында, чей троекратный звон ежедневно ознаменует открытие и закрытие паба - говорят, морская душа, где бы не была, всегда услышит этот зов. летом посетители с большой охотой располагаются на террасе, наблюдая за тем, как лениво ползут по желтым водам реки торговые и экскурсионные суда. однако, истинная изюминка "пророчества" - вечерние выступления сирен.  </div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/57229.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

  <div class="gallean_wrap">
    <div class="gallean_first_wrap">
      <span>"термитник"</span>
      <em> "termitary"| 77 St John's Wood Terrace, London NW8 6LR </em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">бедный квартал</span>
        <div>за глаза зовется "обочиной жизни" или "дном, с которого уже не постучатся". узкий квартал, где невысокие дома жмутся друг к другу, заглядывают в соседние окна, недружелюбно скалятся пустыми витринами заброшенных лавок. здесь находят для себя приют не только маргинальные личности, но и те, кто так или иначе столкнулся с непосильными жизненными трудностями и финансовыми неприятностями. недвижимость в "термитнике" стоит копейки, но соседство предлагает не из приятных. сюда не приезжает полиция и не доезжает скорая, даже стражи цитадели в этом квартале гости редкие. складывается впечатление, что редкое лондонское солнце тоже сознательно избегает это место. столетиями впитывавший в себя темную энергетику, район оброс своими призраками и миазмами, утонув в плотной дымке перманентного тумана. очень высок шанс встретить здесь вампира, чернокнижника или запойного наркомана. обывателей от "термитника" отводит чутье и наложенные Цитаделью чары отвода глаз.</div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #867561;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #FDF8F8;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
  --g-calc: 100% - 60px;  /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/001c/14/71/4/721097.png);  /* фон картинкой */
  background-size: cover;
  box-sizing: border-box;
  padding: var(--g-padding)
}

.gallean_first_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--g-text-title);
  text-shadow: var(--g-text-shadow);
  letter-spacing: .1em;
  transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}

.gallean_first_wrap span {
  font: 900 normal 70px inter;  /* шрифт shadowsong */
}

.gallean_first_wrap em {
  font: 500 normal 13px inter !important;  /* шрифт Death, it's shadows, spreads its wings around me. */
}

.gallean_second_wrap {
  background: var(--g-bg);
  box-shadow: var(--g-box-shadow);
  position: absolute;
  width: calc(var(--g-calc));
  height: calc(var(--g-calc));
  top: 30px;
  left: 30px;
  box-sizing: border-box;
  padding: var(--g-padding);
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
  transform: scale(2);
  opacity: 0
}

.gallean_scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.gallean_second_wrap .header {
  display: block;
  color: var(--g-text-accent);
  font: 900 normal 40px inter; /* шрифт long live death */
  text-transform: lowercase;
}

.gallean_scroll div {
  color: var(--g-base-text);
  text-align: justify;
  font: 500 12px/150% inter;  /* шрифт основного текста*/
}

.gallean_wrap:hover .gallean_first_wrap {
  transform: scale(0);
  filter: blur(40px)
}

.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
  opacity: 1;
  transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s,  opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]

0


Вы здесь » Halazia » I need to explain » туристический справочник


Рейтинг форумов | Создать форум бесплатно