Путеводитель по культовым местам Санкт-Петербурга

Страница: 1

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

Поделиться12021-08-08 13:06:19

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/0013/bb/c8/84711.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>МОЗАИЧНЫЙ ДВОРИК МАЛОЙ АКАДЕМИИ ИСКУССТВ</span>
     <div>
      В 1984 году в Санкт-Петербурге была основана уникальная детская школа воспитания искусством «Вулкан». Преображение двора дома, в котором находится академия, началось сразу после ее открытия.
Руководитель школы совместно со своими учениками создал яркие скульптуры и барельефы и украсил все доступные поверхности мозаикой.
Особенно эффектно мозаичный дворик выглядит в солнечные дни. При ярком естественном освещении каждый кусочек замысловатых картин блестит и переливается на солнце.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться22021-08-08 13:06:48

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/0013/bb/c8/48988.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>ЧИЖИК - ПЫЖИК</span>
     <div>
      Со времени установки скульптуры его семь раз крали. Несколько раз она была обнаружена в пунктах сдачи цветного металла. Последний раз бронзовая птица так и не была найдена и по сохранившейся модели она была заново отлита за счет средств одного из московских меценатов, пожелавшего остаться неизвестным.
Поговаривают, что последний раз чижика установили так, что унести его можно только с вместе с набережной.
Памятник находится на постаменте почти у самой воды рядом с Пантелеймоновским мостом.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться32021-08-08 13:12:28

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/0013/bb/c8/51180.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>ГРАНД МАКЕТ РОССИЯ</span>
     <div>
     В Санкт-Петербурге стартовал необычный проект – Гранд макет России – где на площади 800 кв. метров изображены города и поселки, леса и моря, люди и животные, действующие автомобильные и железные дороги.
Экспозиция содержит все ключевые и характерные для каждой территории объекты. При их создании использовались самые новые разработки. Создаваемая композиция превосходит Европейские аналоги по технической новизне, а по своим размерам занимает лидирующую позицию среди подобных проектов мира.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться42021-08-08 13:17:24

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/0013/bb/c8/35638.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>ИЗУМРУДНЫЙ ГОРОД</span>
     <div>
      На улице Правды, во дворах домов 2-8 живёт сказка! Того, кто побывает в этом чудном месте, ожидают невероятные эмоции, ведь здесь живут любимые персонажи «Изумрудного города».
Страшила и его компания сделаны как целостные фигуры, которые можно разглядеть со всех сторон,  а другие фигуры как бы приклеены к стене.
Только Гудвин сделан в виде фигурной клумбы, ведь по задумке авторов его обличье должно меняться с изменением цветочного покрова. Если Вы посетите сказочный двор зимой, таинственного Гудвина Вы не увидите - он будет под снегом.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться52021-08-08 13:22:24

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/0013/bb/c8/34396.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>БАШНЯ ГРИФОНОВ</span>
     <div>
      Башня грифонов в Санкт-Петербурге - одна из необычных и загадочных достопримечательностей, ее нет в туристических схемах и знают о ней не все жители города.
Расположена Башня грифонов в Квартале аптекарей. Она имеет высоту около 11-ти метров и диаметр около 2-х метров, в ней нет ни окон, ни дверей, покрыта жестяной крышей, а почти все кирпичи, из которых она построена, пронумерованы.
Очень противоречивы мнения об этой достопримечательности:
двор посещают люди, которые верят, что башня может исполнять их желания, а в других же она вселяет страх.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться62021-08-08 13:29:03

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/0013/bb/c8/13188.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>АВСТРИЙСКАЯ ПЛОЩАДЬ</span>
     <div>
    Оказавшись среди нескольких пятиэтажных зданий, гости города здесь совершенно забывают о России. На этой небольшой достопримечательности Санкт-Петербурга, имеющей 8 углов, особенно явственно чувствуется европейский дух.
В дни новогодних торжеств все здесь напоминает далекую Вену, архитектурный стиль которой абсолютно совпадает с этим петербургским уголком. В одном из доходных домов находится квартира Леонида Андреева – талантливого русского писателя. В зданиях неподалеку жили известные в прошлом живописцы, медицинские светила и архитекторы.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться72021-08-08 13:36:52

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001b/44/2b/19655.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>ДВОРЫ-КОЛОДЦЫ</span>
     <div>
     Некоторые горожане думают, что такие дома строились специально для защиты от шквалистого ветра, который постоянно дул с реки или залива. От него сложно укрыться на площадях и улицах, а внутри дворовых территорий стоит звенящая тишина.
Петербуржцы говорят, что воздух здесь застаивается до такой степени, что его можно потрогать, а небо здесь особенное.
Есть в городе несколько подвесных дворов, стоящих на воздушной подушке, тут под землей находится не грунт, а пустое пространство, где раньше хранились дрова и уголь.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться82021-08-08 13:44:19

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001b/44/2b/81773.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>ДАЦАН</span>
     <div>
     Даже не всем петербуржцам известно о Гунзэчойнэй – восстановленном в 1990 г. дацане, хотя его здание украшает городской квартал с 1915 г. Регистрация буддийской общины и возобновление службы в храме способствовали дальнейшему распространению буддизма в Санкт-Петербурге.
В дацан приезжают тибетские и западные учителя, читают лекции по буддийской философии, дают специальные учения и посвящения мирянам, проводят медитационные ретриты, которые, по вероучению буддистов, служат практикой для накопления благих заслуг и способом самопознания.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться92021-08-08 13:49:40

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001b/44/2b/42140.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>"КАМЧАТКА"</span>
     <div>
     Ни одно развлекательное заведение города не может сравниться с этим клубом-музеем, расположившимся в 1986 г. в реконструированном помещении старой котельной. Здесь когда-то работало несколько известных рок-музыкантов «перестроечных» 80-х гг. Среди них особенно выделялся культовый теперь Виктор Цой, работавший в ней в ней в должности кочегара.
Благодаря предметам, фотографиям и концертам, организуемым здесь, посетителям легко окунуться в атмосферу тех непростых, но насыщенных событиями лет.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться102021-08-08 14:00:53

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001b/44/2b/46630.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>"МУЗЕЙ ВОДКИ"</span>
     <div>
    Появившись в 2008 г. в реконструированном здании бывших казарм, этот музей, неожиданный для гостей Петербурга, пока не успел превратиться в место, активно посещаемое туристами. Хотя немало российских знаменитостей уже побывало в нем.
Здесь посетителей ждет увлекательное знакомство с историей знаменитого русского напитка. Коллекции необычных сосудов, изделий из фарфора и стекла, а также бутылок наглядно представят перед любознательными посетителями этапы развития не только водочной индустрии, но и традиций, связанных с употреблением водки.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Поделиться112021-08-08 14:06:06

Автор: Твой Питер
Администратор
лз:
питер fmЭкзистенциальный Питер: ленивые админы, безысходность во флуде, 50 оттенков депрессии амс, по субботам — еле живые отыгрыши.
Уважение: +14
Сообщений: 134
Последний визит:
2022-09-05 00:02:08

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001b/44/2b/18395.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>ПАМЯТНИК "НОС МАЙОРА КОВАЛЕВА"</span>
     <div>
     Памятник установили в октябре 1995 года на фасаде дома № 11 по Вознесенскому проспекту, а 27 ноября его торжественно открыли участники Фестиваля сатиры и юмора «Золотой Остап».
Памятник представляет собой серую известняковую путиловскую плиту размером 60 на 35 см, в нижней части которой расположено изображение носа, выполненное из розового украинского мрамора, а в верхней части написано «Нос майора Ковалева».
Если вспомнить повесть, то нос майора имел привычку покидать своего владельца и самостоятельно разгуливал по городу.
      </div></div>
  </div>
</div>
  
<style>
 /* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute; 
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div { 
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 20px Poiret One; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>

Страница: 1