пиу

Страница: 1

Ответить

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

Поделиться12021-07-19 16:12:44

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

авав

Цитировать Сообщение 1

Поделиться22021-10-12 21:48:50

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->
<div class="blackbird_relation">
    
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
  </div>

<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Merriweather:wght@700&display=swap');
.blackbird_relation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.bb_rel_block {
  width: 300px;
  height: 140px;
  border: 1px solid #91877a;
  box-shadow: 0 0 5px #c3b3a0;
  margin: 10px
}

.bb_rel_block_in {
    transition: all .6s ease-in-out 0s;
  overflow: hidden;
  background: #d2bfa6;
    width: 300px;
  height: 140px;
  position: relative
}

.bb_rel_block_in img {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  opacity: .9;
  width: 300px;
    transition: all .6s cubic-bezier(.53,.49,.86,.4) 0s;
}

.bb_rel_text {
  background: url(https://i.ibb.co/8z5f2Lm/image.png);
  width: 262px;
  height: 135px;
  position: absolute;
  z-index: 1;
  left: 20px;
  top: -135px;
  transition: all .6s cubic-bezier(.53,.49,.86,.4) 0s;
}

.bb_rel_text a {
  display: block;
  text-align: center;
  font: 700 11px Merriweather;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 6px
}

.bb_rel_text > div {
  font: normal 10px/150% ibm plex sans;
  text-align: justify;
  margin: 0 20px;
  overflow-y: auto;
  padding-right: 5px;
  height: 78px
}

.bb_rel_block_in:hover .bb_rel_text {
  top:0
}

.bb_rel_block_in:hover img {
  opacity: 1
}
</style>

Код:

<div class="blackbird_relation">
    
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
<div class="bb_rel_block"><div class="bb_rel_block_in">
<div class="bb_rel_text">
    <a href="ссылка">fenris</a>
<div>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.

</div></div>

     <img src="https://i.ibb.co/dPWqs8W/Dragon-Age-Fenris-DA-3857382.png">

    </div>
    </div>
    
  </div>

<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Merriweather:wght@700&display=swap');
.blackbird_relation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.bb_rel_block {
  width: 300px;
  height: 140px;
  border: 1px solid #91877a;
  box-shadow: 0 0 5px #c3b3a0;
  margin: 10px
}

.bb_rel_block_in {
    transition: all .6s ease-in-out 0s;
  overflow: hidden;
  background: #d2bfa6;
    width: 300px;
  height: 140px;
  position: relative
}

.bb_rel_block_in img {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  opacity: .9;
  width: 300px;
    transition: all .6s cubic-bezier(.53,.49,.86,.4) 0s;
}

.bb_rel_text {
  background: url(https://i.ibb.co/8z5f2Lm/image.png);
  width: 262px;
  height: 135px;
  position: absolute;
  z-index: 1;
  left: 20px;
  top: -135px;
  transition: all .6s cubic-bezier(.53,.49,.86,.4) 0s;
}

.bb_rel_text a {
  display: block;
  text-align: center;
  font: 700 11px Merriweather;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 6px
}

.bb_rel_text > div {
  font: normal 10px/150% ibm plex sans;
  text-align: justify;
  margin: 0 20px;
  overflow-y: auto;
  padding-right: 5px;
  height: 78px
}

.bb_rel_block_in:hover .bb_rel_text {
  top:0
}

.bb_rel_block_in:hover img {
  opacity: 1
}
</style>

Цитировать Сообщение 2

Поделиться32021-11-01 19:29:17

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->

<div class="shadowsong_wrap">
  
  <div class="shadowsong_block">
    <div class="shadowsong_bg"></div>
    <div class="shadowsont_cont">
      <h6>T. Shadowsong</h6>
      <em>
      Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.</em>
        <span>Brock O'Hurn</span>
    </div>
    <img src="https://i.ibb.co/Tg3cR96/Untitled-1.png">
  </div>
  
    <div class="shadowsong_block">
    <div class="shadowsong_bg"></div>
    <div class="shadowsont_cont">
      <h6>T. Shadowsong</h6>
      <em>
      Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву</em>
        <span>Brock O'Hurn</span>
    </div>
    <img src="https://i.ibb.co/Tg3cR96/Untitled-1.png">
  </div>
  
    <div class="shadowsong_block">
    <div class="shadowsong_bg"></div>
    <div class="shadowsont_cont">
      <h6>T. Shadowsong</h6>
      <em>
      Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.  </em>
        <span>Brock O'Hurn</span>
    </div>
    <img src="https://i.ibb.co/Tg3cR96/Untitled-1.png">
  </div>

    <div class="shadowsong_block">
    <div class="shadowsong_bg"></div>
    <div class="shadowsont_cont">
      <h6>T. Shadowsong</h6>
      <em>
      Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.  </em>
        <span>Brock O'Hurn</span>
    </div>
    <img src="https://i.ibb.co/Tg3cR96/Untitled-1.png">
  </div>

</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300;1,400&family=Rubik:wght@400;500;800;900&display=swap');

.shadowsong_wrap {
  width: 700px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
-webkit-text-size-adjust: 100%
}

.shadowsong_block {
  width: 240px;
  height: 340px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin: 10px
}

.shadowsong_block img {
  transition: all 1s cubic-bezier(.08,.83,.68,1.02) 0s
}

.shadowsong_bg {
  background: linear-gradient(to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%);;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 1s cubic-bezier(.38,.49,0,1.02) 0s;
  opacity: 0
}

.shadowsont_cont {
  position: absolute;
  z-index: 2;
  color: #efefef;
  padding: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  transform: translateY(55%);
  transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
  top:0;
  left: 0
}

.shadowsont_cont h6 {
  padding: 0;
  margin: 0 0 0px;
  font: 800 19px Rubik;
}

.shadowsont_cont em {
  font: 300 italic 11px/170% Merriweather;
  letter-spacing: .06em;
  margin: 25px 0 25px;
}

.shadowsont_cont span {
  display: block;
  font: 400 10px Rubik;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: #101010;
  padding: 10px 15px;
  border-radius: 2px;
}

.shadowsont_cont em, .shadowsont_cont span {
  transform: translateY(40px);
  opacity: 0;
  transition: all .4s cubic-bezier(.3,.71,.42,.84) .25s
}

.shadowsong_block:hover img {
  transform: translateY(-60px)
}

.shadowsong_block:hover .shadowsong_bg {
  opacity: 1
}

.shadowsong_block:hover .shadowsont_cont {
  transform: translateY(0%);
}

.shadowsong_block:hover .shadowsont_cont em, .shadowsong_block:hover .shadowsont_cont span {
  transform: translateY(0%);
  opacity: 1
}
</style>

Цитировать Сообщение 3

Поделиться42021-11-12 20:45:09

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->

<link href="https://fonts.googleapis.com/css2?family=Alice&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
<style>#necromancy {display:block; padding:40px 40px 10px 40px; margin: 1.2em auto 1.2em auto; background:#efe7e7; outline: 1px solid #6a1b9a; outline-offset:5px; max-width:600px; box-sizing:border-box;} 

/* картинки-блок */
.necrpic {
  display:block;
  text-align:center;
  margin: 35px auto auto;
}

/* картинки */
.necrav {
  display:inline-block;
  width: 80px;
  height: 80px;
  background:#6a1b9a;
  border: 1px solid #6a1b9a;
  margin: auto 10% auto auto;
  transform: translate(0%, -50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-position:50% 50%;
  background-size:cover;
}
.necrav:last-child {margin-right:0px;}

.necrav1 {
  display:inline-block;
  width: 20px;
  height: 20px;
  background:#6a1b9a;
  border: 1px solid #6a1b9a;
  margin: auto 10% auto auto;
  transform: translate(0%, -50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-position:50% 50%;
  background-size:cover;
}
.necrav1:last-child {margin-right:0px;}

/* текст */
#necromancy > .btext {
  margin: -30px auto auto;
  padding: 0 30px;
  font-size:14px;
  color:#262626;
  font-family:'Jost', sans-serif;
  text-align:justify;
}

/* название */
#necromancy > em {
  display:block;
  margin: 10px auto 8px auto;
  padding: 0 30px;
  text-align:right;
  font-style: normal !important;
  letter-spacing:1px;
  color:#6a1b9a;
  font-family: 'Alice', serif;
  font-size: 20px;
}
@media screen and (max-width: 540px) {
.necrpic {
  display:flex;
  text-align:center;
  margin: 35px auto auto;
  justify-content: space-between;
   flex-grow: 0;
  height: 60px;
}

/* картинки */
.necrav {
  flex: 1;
  width: 60px;
  height: 60px;
  background:#6a1b9a;
  border: 1px solid #6a1b9a;
  margin: auto 0% auto auto;
  transform: translate(0%, -50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-position:50% 50%;
  background-size:cover;
  display: flex;
  
}

  .necrav + .necrav {
    margin-left: 10px
  }

  #necromancy > .btext {
  margin: 0px auto auto;
  padding: 0 0px;
  font-size:14px;
  color:#262626;
  font-family:'Jost', sans-serif;
  text-align:justify;
    flex: 1 0 26%;
}
  .necrpic:last-child {
    height: 20px;
  }
  .necrav1 {
  width: 20px;
  height: 20px;
  background:#6a1b9a;
  border: 1px solid #6a1b9a;
  margin: auto 0% auto auto;
  transform: translate(-100%, -50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-position:50% 50%;
  background-size:cover;
}
  #necromancy > em {
  padding: 0 0px;
}
}
</style>


        <div id="necromancy"><div class="necrpic">
          <div class="necrav" style="background-image:url()"></div>
           <div class="necrav" style="background-image:url(https://forumupload.ru/uploads/001b/02/88/2/237141.png)"></div>
           <div class="necrav" style="background-image:url()"></div>
           </div>

                <div class="btext">

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis urna quam, sed commodo risus ultrices at. Phasellus eleifend leo in odio venenatis, ut tincidunt magna lobortis. Nam tincidunt mauris a nibh aliquam, quis porttitor erat pretium. Suspendisse erat mauris, vulputate ac aliquam nec, ullamcorper eget quam. Quisque posuere consectetur magna, quis lobortis purus. Aliquam erat volutpat. Maecenas non nulla nec sapien aliquam congue at at dolor. Duis magna erat, sodales in sodales quis, finibus at felis. Aenean mollis tincidunt nulla, dictum maximus nisi vehicula vel. Donec nec ligula at mi iaculis placerat eget ac lorem. Quisque fermentum pulvinar interdum. Curabitur in augue ut nibh sollicitudin eleifend quis eget lorem. Vivamus bibendum arcu non faucibus sodales. Mauris volutpat convallis sem, ut pellentesque tellus sodales nec. Ut feugiat nibh eget lectus bibendum ornare. Praesent rutrum mauris nec ipsum pharetra eleifend.

        </div>

<em>«Жизнь среди мертвых»<br>— Родомонт ван Хейгл</em>

<div class="necrpic">
          <div class="necrav1" style="background-image:url()"></div>
           <div class="necrav1" style="background-image:url()"></div>
           <div class="necrav1" style="background-image:url()"></div>
           </div>

</div>

Цитировать Сообщение 4

Поделиться52021-11-15 21:50:10

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!-- баннеры партнеров -->
<div class="bottombanners"><div>
<!-- Top.Roleplay.Ru -->
<script type="text/javascript" language="javascript">
var topRPGc="<img src='https://s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=25369&rnd=" + Math.random();
topRPGc += "&r="+escape(document.referrer)+"' width='0' height='0' border='0'><a href='https://rpgtop.su/25369' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'>"+
"<img src='//img.rpgtop.su/88x31x11x1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> ";
document.write(topRPGc);
</script>
<noscript>
<img src='//s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=25369' width='0' height='0' border='0'><a href='https://rpgtop.su/25369' target='_blank'><img src='//img.rpgtop.su/88x31x11x1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a>
</noscript>
<!-- /Top.Roleplay.Ru --> 
<a href="http://urchoice.rolka.su/" target="_blank"><img src="http://s2.uploads.ru/1tCcd.png" border="0" title="Каталог форумов" alt="LYL"></a> <a href="http://artishock.rusff.ru/" target="_blank"><img src="http://s2.uploads.ru/nzVxs.gif" title="ARTISHOCK" border="0" width="88" height="31"></a> <a href="http://andover.f-rpg.ru" target="_blank"> <img src="https://forumstatic.ru/files/001a/72/e1/69110.png" border="0" alt="АНДØВЕР: Недобрая старая Англия"></a> <a href="http://swmedley.rusff.ru" title="STAR WARS: Medley" target="_blank"><img src="https://forumstatic.ru/files/0018/1a/00/97746.gif" width="88" height="31" border="0" alt="STAR WARS: Medley"></a> <a href="http://rains.rusff.ru/"><img src="http://i.imgur.com/5Ym0dnF.png" border="0" alt="Рейнс: Новая империя. Политика, войны, загадки прошлого" width="88" height="31"></a> <a href="http://reilan.ru/"><img src="http://sd.uploads.ru/ga1JT.png" border="0"></a> <a href="http://except-us.ru"><img src="http://sh.uploads.ru/t/E4jHi.gif" border="0" alt="Кроме Нас" target="_blank"></a> <a target="_blank" href="http://elm.rolbb.ru/" title="Ролевая игра ELM AGENCY. Стань агентом!" alt="Ролевая игра ELM AGENCY. Стань агентом!"><img src="https://c.radikal.ru/c28/1809/bc/8f62fc29bb85.png" border="0"></a> <a href="http://kingscross.f-rpg.ru/" target="_blank"><img title="KINGSCROSS. Внимание, поезд отправляется!" src="https://i.imgur.com/WNhMtiG.jpg" border="0"></a> <a href="http://insideout.mybb.ru/" target=_blank><img src="https://i.imgur.com/emfYusS.gif" title="Inside Out"></a> <a href="http://298.rusff.me/" target=_blank> <img src="https://i.imgur.com/4eWQO82.png" border="0" alt="Game of Thrones. Win or Die" width="88" height="31"/></a> <a href="http://shelterme.rusff.me/"><img title="SHELTER ME" src="https://i.imgur.com/RjXt95o.gif" border="0" /></a> <a href="http://allnewmarvels.ru" title="Marvel: All-New"><img src="https://forumstatic.ru/files/0016/a4/af/28937.gif" height="31" width="88" border="0"></a> <a target="_blank" href="http://summerchronicles.rusff.ru/" title="Игра престолов: Хроники Долгого лета"><img src="http://s9.uploads.ru/mCcTy.png"></a> <a href="http://spacefiction.f-rpg.ru" target="_blank"><img src="http://sd.uploads.ru/t5aHV.gif" border="0" title="Space Fiction - Боевая фантастика"alt="Space Fiction"></a> <a href="http://holod.rusff.ru" target="_blank"><img src="http://s7.uploads.ru/YmQdR.gif" border="0" title="ХОЛОД" width="88" height="31"></a> <a href="http://kingdomtales.rusff.ru" title="Книга Авароса" target=_blank> <img src="http://s7.uploads.ru/zld3Y.png" border="0" alt="Книга Авароса"></a> <a href="https://crup.rusff.me/" target="_blank"><img src="https://i.imgur.com/PJ5omb0.png" title="hp 1982, postwar" alt="MBC" width="88" height="31"></a> <a href="http://lgchronicles.f-rpg.me/" ><img src="https://i.imgur.com/FWg4iAk.gif"></a> <a href="http://wwft.rusff.me/" target="_blank"><img src="https://forumstatic.ru/files/001a/e3/85/70979.jpg" title="WW fairy tales" width="88" height="31"></a> <a href="https://frpgsorta.ru" title="Sorta: World of Possibilities" target="blank"><img src="https://forumstatic.ru/files/0018/5f/a8/26171.png"></a> <a href="http://crosshearts.rusff.me" target="_blank"><img src="https://imgur.com/MPRiGrZ.gif" title="Crossed Hearts"></a>

</div></div>

Цитировать Сообщение 5

Поделиться62021-11-15 23:33:22

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

rtre

Цитировать Сообщение 6

Поделиться72021-11-17 22:42:04

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

~~аттракцион неслыханной щедрости [6]~~

Минималистичная анкета.

Достаточно гибкая. Картинку можно пихать своего размера - сохранять тот, который у меня, не обязательно. Мне просто минималистично красиво. Обратите внимание, что имя, дата рождения и строка с подробностями вертикально равняются относительно высоты блока с картинкой. То есть если там будет картинка в высоту 180px, то и строки встанут дальше от друга. Фон верхнего блока из двух изображений, можно из одного делать. Можно заливкой. Как угодно, короче. Нижнего блока, с пробным постом, - фон + заливка. Традиционное копи не вытирать, не воровать, на куски не разбирать, за своё не выдавать ну и будьте котиками.

Код:

<!--HTML-->
<div class="cheese_head_wrap">
<div class="cheese_head_first">
<div class="cheese_head_img">

      <img src="https://i.ibb.co/QCq9bNs/image.png">

</div>
<div class="cheese_head_info">

      <span>Алистер Тейрин</span>

      <em>08.09.2021, 37 лет</em>

      <em>Серый Страж. Король Ферелдена. Сырная булочка. Нализал себе на кувалду.</em>


</div>
</div>
<div class="cheese_head_quenta">


Когда Кристиан въехал в Потерянную Милю, было все еще жарко.</br></br>

Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</br></br>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.</br></br>

Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</br></br>

На обочине, у самой дороги, стояла девочка лет семи-восьми, но худенькая и сморщенная, как старушка, в синей рубашке, которая была ей сильно велика. Один рукав уныло болтался, наполовину оторванный. Девочка что-то вертела в руках. Поравнявшись с ней, Кристиан притормозил и опустил стекло. Девочка уставилась на него. Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</br></br>

– Что это за город? – спросил Кристиан. Девочка безразлично пожала худым плечом. Теперь Кристиан разглядел, что было у нее в руках – дохлая крыса с пропыленной шерстью. Ее размозженная голова и передние лапы ссохлись до состояния мумии.
 

</div>
<div class="cheese_head_last">
<div class="post_button" id="post_button">пробный пост</div>
<div id="postblock" style="display:none">

Когда Кристиан въехал в Потерянную Милю, было все еще жарко.</br></br>

Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</br></br>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.</br></br>

Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</br></br>

На обочине, у самой дороги, стояла девочка лет семи-восьми, но худенькая и сморщенная, как старушка, в синей рубашке, которая была ей сильно велика. Один рукав уныло болтался, наполовину оторванный. Девочка что-то вертела в руках. Поравнявшись с ней, Кристиан притормозил и опустил стекло. Девочка уставилась на него. Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</br></br>

– Что это за город? – спросил Кристиан. Девочка безразлично пожала худым плечом. Теперь Кристиан разглядел, что было у нее в руках – дохлая крыса с пропыленной шерстью. Ее размозженная голова и передние лапы ссохлись до состояния мумии.

</div>
</div>
</div>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/60/aa/87833.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
.cheese_head_wrap {
  background: #eae9e2; /* общий фон */
  width: 100%;
  height: auto;
  margin: auto
}

.cheese_head_first {
  background: 
    url(https://i.ibb.co/x6d7nTG/2.png) no-repeat top right,
    url(https://i.ibb.co/WGCHxnb/image.jpg); /* верхний темный фон в два изображения */
  padding: 23px;
  display: flex;
  color: #eae9e2;
  font-family: Merriweather;
}

.cheese_head_img {
  filter: grayscale(100%);
  border: 2px solid #eae9e2;
  padding: 4px;
  line-height: 0;
  margin-right: 23px;
  overflow: hidden
}

.cheese_head_img img {
  width: 180px; /* ширина изображения */
}

.cheese_head_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cheese_head_info span {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.cheese_head_info em {
  font-size: 10px;
  font-weight: 200;
}

.cheese_head_quenta {
  padding: 18px 23px;
  line-height: 150%;
  text-align: justify;
}

.cheese_head_last {
  padding: 23px;
  background: #1c1c1c url(https://i.ibb.co/Lhhh9BN/3.jpg) repeat top; /* нижний темный фон одно изображение и цвет */
}

#post_button {
  background: #212121;
  border: 1px solid #303030;
  text-align: center;
  font: 500 11px merriweather;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #eae9e2;
  padding: 7px;
  transition: all .6s ease-in-out 0s
}

#post_button.openpost {
  background: #373535;
  color: #939393;
  border-color: #303030
}

#postblock {
  background: #efeff1;
  padding: 18px 23px;
  margin-top: 23px;
}

/*РЕНО*/
#p25 .post-author,
#p25 .post-sig {
 display:none !important
}
#p25 .post-body,
#p25 .post-links,
#p25 .post-links ul,
#p25 h3>span {
 margin-left:0 !important
}
#p25 .pl-email,
#p25 .pl-website {
 float:  none
}
#p25 .pl-delete {
 border-left: 1px solid rgba(0,0,0,.2) !important;
 margin-left: 10px
}
#p25 .post-content {
 margin-top: 20px !important;
 margin-left: 0 !important;
 margin-right: 0 !important
}
#p25 .post-box {
 margin: 0px !important
}
</style>

Скрипт в хтмл низ

Код:

<!-- Скрываем профиль в постах © Deff -->
    <script type="text/javascript">
    (function () {
    function addStyle() { /*==123==;
    <style type="text/css">#### .post-author,#### .post-sig{display:none !important}#### .post-body,#### .post-links,#### .post-links ul,#### h3>span{margin-left:0 !important}#### .pl-email,#### .pl-website{float:  none}#### .pl-delete {border-left: 1px solid rgba(0,0,0,.2) !important;margin-left: 10px}#### .post-content {margin-top: 20px !important; margin-left: 0 !important;margin-right: 0 !important}#### .post-box {margin: 0px !important}</style>
    ==123==;*/
    } addStyle = addStyle.toString().split('==123==;')[1];
    $('.post .post-content img[alt="hide-autor2"]').each(function(){
       var id = $(this).parents('.post').prop('id');
       $(addStyle.replace(/####/gim,'#'+id)).insertBefore($(this));
    });}());
    </script>

В самый низ первого окна стилей

Код:

/* анкета от вещего духа */
.cheese_head_wrap {
  background: #eae9e2; /* общий фон */
  width: 100%;
  height: auto;
  margin: auto
}

.cheese_head_first {
  background: 
    url(https://i.ibb.co/x6d7nTG/2.png) no-repeat top right,
    url(https://i.ibb.co/WGCHxnb/image.jpg); /* верхний темный фон в два изображения */
  padding: 23px;
  display: flex;
  color: #eae9e2; /* цвет шрифта */
  font-family: Merriweather; /* название шрифта в верхнем блоке */
}

.cheese_head_img {
  filter: grayscale(100%); /* делает все картинки ч/б*/
  border: 2px solid #eae9e2; /* цвет обводки картинки */
  padding: 4px; /* отступ обводки */
  line-height: 0;
  margin-right: 23px;
  overflow: hidden
}

.cheese_head_img img {
  width: 180px; /* ширина изображения */
}

.cheese_head_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cheese_head_info span {
  font-size: 20px; /* размер шрифта имени персонажа */
  text-transform: uppercase;
  letter-spacing: 1px
}

.cheese_head_info em {
  font-size: 10px; /* размер шрифта в строках под именем */
  font-weight: 200;
}

.cheese_head_quenta {
  padding: 18px 23px;
  line-height: 150%;
  text-align: justify;
}

.cheese_head_last {
  padding: 23px;
  background: #1c1c1c url(https://i.ibb.co/Lhhh9BN/3.jpg) repeat top; /* нижний темный фон одно изображение и цвет */
}

#post_button {
  background: #212121; /* фон кнопки поста */
  border: 1px solid #303030; /* обводка кнопки поста */
  text-align: center;
  font: 500 11px merriweather; /* шрифт кнопки */
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #eae9e2; /* цвет шрифта */
  padding: 7px;
  transition: all .6s ease-in-out 0s
}

#post_button.openpost {
  background: #373535; /* цвет кнопки по нажатию */
  color: #939393; /* цвет шрифта */
  border-color: #303030 /* цвет обводки */
}

#postblock { 
  background: #efeff1; /* цвет выпадающего блока*/
  padding: 18px 23px;
  margin-top: 23px;
}
img[alt~="hide-autor2"], img[alt~="hide-autor"] {
    opacity: 0
  }

Код самой анкеты в сообщение

Код:

<style>@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');</style>
<div class="cheese_head_wrap">
<div class="cheese_head_first">
<div class="cheese_head_img">

      <img src="https://i.ibb.co/QCq9bNs/image.png">

</div>
<div class="cheese_head_info">

      <span>Алистер Тейрин</span>

      <em>08.09.2021, 37 лет</em>

      <em>Серый Страж. Король Ферелдена. Сырная булочка. Нализал себе на кувалду.</em>


</div>
</div>
<div class="cheese_head_quenta">


Когда Кристиан въехал в Потерянную Милю, было все еще жарко.</br></br>

Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</br></br>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.</br></br>

Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</br></br>

На обочине, у самой дороги, стояла девочка лет семи-восьми, но худенькая и сморщенная, как старушка, в синей рубашке, которая была ей сильно велика. Один рукав уныло болтался, наполовину оторванный. Девочка что-то вертела в руках. Поравнявшись с ней, Кристиан притормозил и опустил стекло. Девочка уставилась на него. Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</br></br>

– Что это за город? – спросил Кристиан. Девочка безразлично пожала худым плечом. Теперь Кристиан разглядел, что было у нее в руках – дохлая крыса с пропыленной шерстью. Ее размозженная голова и передние лапы ссохлись до состояния мумии.
 

</div>
<div class="cheese_head_last">
<div class="post_button" id="post_button">пробный пост</div>
<div id="postblock" style="display:none">

Когда Кристиан въехал в Потерянную Милю, было все еще жарко.</br></br>

Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</br></br>

Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.</br></br>

Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</br></br>

На обочине, у самой дороги, стояла девочка лет семи-восьми, но худенькая и сморщенная, как старушка, в синей рубашке, которая была ей сильно велика. Один рукав уныло болтался, наполовину оторванный. Девочка что-то вертела в руках. Поравнявшись с ней, Кристиан притормозил и опустил стекло. Девочка уставилась на него. Ее серые глаза были такими же пасмурными и выцветшими, как сегодняшнее небо.</br></br>

– Что это за город? – спросил Кристиан. Девочка безразлично пожала худым плечом. Теперь Кристиан разглядел, что было у нее в руках – дохлая крыса с пропыленной шерстью. Ее размозженная голова и передние лапы ссохлись до состояния мумии.

</div>
</div>
</div>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/60/aa/87833.js"></script>

Отдельно вне блока с кодом в том же сообщении с анкетой.

Код:

[img=hide-autor2]https://is.gd/ekiTPp[/img]

На выходе в сообщении должна быть конструкция такого плана:
[html]код анкеты[/html] или [code]код анкеты[/code]
[img=hide-autor2]https://is.gd/ekiTPp[/img]
Для упрощения пользователям заполнения лучше пилите автозаполнение темы при создании определенным кодом. Что это такое и как пользоваться можно посмотреть здесь. Или на этих скринах начало сообщения и конец.

Цитировать Сообщение 7

Поделиться82021-11-20 01:30:44

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>

<div class="world-container">


  <div class="world-block">
  <div class="header">
    <span>история</span>
  </div>
    <img src="https://i.ibb.co/cFHBz68/Untitled-1-copy-03.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
      <h5>Header text</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
 <h5>Header text</h5>
<p>Nulla ut leo mi. Quisque sagittis ligula ante, ac efficitur dolor accumsan vel. Quisque at mi felis. Cras congue felis at erat interdum posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sodales nunc lacus, ultricies lobortis mauris sodales at. Praesent mauris lorem, suscipit id dignissim ut, dapibus eget lacus. Vestibulum fermentum aliquet mauris id dictum. Aliquam fringilla erat suscipit dui aliquam, eget fringilla tellus pretium. Nullam varius maximus ante, non aliquam tortor sollicitudin ut. Nulla tincidunt hendrerit egestas. Nunc turpis nibh, fermentum ut blandit dapibus, ultricies sit amet nunc.<p>

<p>Sed dictum purus vel venenatis hendrerit. Cras mollis tincidunt metus, eu euismod massa euismod at. Cras egestas elit non mauris vehicula consectetur. Fusce finibus varius lectus maximus tincidunt. Fusce vehicula tristique purus id posuere. In feugiat justo sit amet ligula ornare maximus ac vitae nisl. Aenean in viverra mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi vehicula sem a elit malesuada, quis faucibus elit dignissim. Nulla quis erat vitae eros faucibus gravida ac congue magna. Cras tortor lectus, pharetra ac metus ac, euismod imperdiet libero. Phasellus eros ante, scelerisque in ultrices quis, scelerisque eu ipsum.</p>

<p>Vestibulum eu blandit risus. Donec rhoncus tristique eros, ullamcorper malesuada turpis laoreet vitae. Nullam in sollicitudin dui. Morbi et hendrerit purus. Donec in ullamcorper erat. Curabitur facilisis sagittis neque, eget tristique erat posuere a. Etiam et quam nec nunc cursus fermentum. Mauris rhoncus euismod risus, et vestibulum quam sollicitudin quis. Vivamus feugiat finibus porttitor. Mauris vel sem mauris. Nunc cursus eleifend dolor id semper. Maecenas consectetur nibh felis, sed commodo nisl fringilla at. Vestibulum condimentum ultrices massa, in lobortis urna. Aliquam et dolor quam. Mauris neque mauris, condimentum sit amet dui sit amet, sagittis faucibus magna.</p>

<p>Cras porttitor vel mi vitae dapibus. Mauris ultricies ante nec nulla luctus, quis varius tellus consectetur. Pellentesque ac tellus sed urna faucibus viverra vitae a libero. Maecenas pellentesque blandit ipsum ac laoreet. Aenean mattis ut ligula vel vulputate. Aliquam consequat vitae mi a vehicula. Nulla ullamcorper est velit, ut molestie purus molestie et. Vivamus nisl felis, tempus eget eros non, mollis efficitur odio. Nullam tempus ligula at rutrum volutpat. </p>

     </div></div>


  <div class="world-block">
  <div class="header">
    <span>религия и боги</span>
    </div>
   <img src="https://i.ibb.co/PzDPppW/Untitled-1-copy-12.png">
   </div>
     <div class="info2 closed">     
     <div class="close-btn">— свернуть блок —</div>
       <div>
<h5>Header text 2</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
    <div class="header">
    <span>решения стража</span>
    </div>
    <img src="https://i.ibb.co/NKgbMnM/Untitled-1-copy-05.png"></div>
  <div class="info3 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 3</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
        <div class="header">
    <span>решения хоука</span>
    </div>
    <img src="https://i.ibb.co/XjTwW91/Untitled-1-copy-08.png"></div>
  <div class="info4 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 4</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
        <div class="header">
    <span>решения инквизитора</span>
    </div>
    <img src="https://i.ibb.co/DGVdvtn/Untitled-1-copy-10.png"></div>
  <div class="info5 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 5</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

   <div class="world-block">
     <div class="header">
    <span>расы</span>
    </div>
     <img src="https://i.ibb.co/HpGjmWR/Untitled-1-copy-14.png"></div>
  <div class="info6 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 6</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
     <div class="header">
    <span>круги магов</span>
    </div>
    <img src="https://i.ibb.co/QCXxjdw/Untitled-1-copy-17.png"></div>
  <div class="info7 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 7</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');

.world-container {
  column-gap: 4px;  /* отступ между колонками */
  margin: 0px auto 20px auto;
  column-count: 2; /* количество столбцов*/
  width: 584px;  /* ширина контейнера с блоками*/
  position: relative;
  text-align: center;
}

 .world-block {
  margin: 1px 0px;  /* нижний и верхний отступ между блоками*/
  padding: 0px;
  display: inline-block;
  line-height: 0;
  width: 290px;  /* ширина блоков */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
}

.world-block .header {
  position: absolute;
background: linear-gradient(to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%);
  color: #fefefe;  /* цвет шрифта заголовков на картинках */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:  flex-end;
  align-items: center;
  font: 800 22px/150% 'Rubik';  /* шрифт заголовков на картинках */
  text-transform: uppercase;
  z-index: 1;
}

.world-block:hover {
  filter: grayscale(100%)
}

.world-block img {
    transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
}

.world-block:hover img {
  transform: scale(1.1);
  filter: blur(1px)
}

.world-block .header span {
  display: block;
  margin-bottom: 20px;
  text-align: center
}

.closed{
  background: #fefefe;  /* фон выпадающего описания */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  padding: 25px;
  text-align: left;
  display: none;
  box-shadow: 0 0 0 9px #fefefe inset, 0 0 0 10px rgba(0,0,0,.1) inset  /* обводка */
}

.closed > div:not(.close-btn) {
  overflow-y: auto;
  height: calc(100% - 35px);
  padding-right: 5px;
}

.close-btn {
  background: rgba(0,0,0,.04);  /* фон кнопки закрытия */
  border: 1px solid rgba(0,0,0,.06);  /* бордер кнопки закрытия */
  height: 15px;
  text-transform: uppercase;
  font: 300 10px/15px merriweather;  /* шрифт кнопки закрытия*/
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  letter-spacing: 2px
}

.closed h5 {
  font: 700 20px merriweather;  /* шрифт заголовков описания */
  margin: 20px 0px 10px;
  position: relative;
  padding-left: 45px
}

.closed h5:before {
  content: "";
  height: 2px;
  width: 30px;
  background: rgba(0,0,0,.7);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

.closed h5:first-child {
  margin-top: 0
}

.closed em {
  font: 300 italic 11px merriweather;  /* шрифт мини цитаток */
  display: block;
  border-right: 5px solid rgba(0,0,0,.1);  /* правый бордер мини цитаток*/
  padding-right: 10px;
  text-align: right;
  margin: 10px 0;
}
</style>

Цитировать Сообщение 8

Поделиться92021-11-20 20:21:15

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->
<div class="graham_wrap">
<div class="graham_section titlepage">
<div class="titlepage_info">

      <span>will graham</span>
      <span>20.11.2011, 38 years</span>  
      <span>FBI special agent, criminal profiler</span>
      <span>face: hugh dancy</span>

</div>

      <div class="titlepage_img"><img src="https://i.ibb.co/ftS2RBt/Rectangle-2.png"></div>

</div>
<div class="graham_section">
<div class="graham_story">
<span>история</span>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
<p>Nulla ut leo mi. Quisque sagittis ligula ante, ac efficitur dolor accumsan vel. Quisque at mi felis. Cras congue felis at erat interdum posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sodales nunc lacus, ultricies lobortis mauris sodales at. Praesent mauris lorem, suscipit id dignissim ut, dapibus eget lacus. Vestibulum fermentum aliquet mauris id dictum. Aliquam fringilla erat suscipit dui aliquam, eget fringilla tellus pretium. Nullam varius maximus ante, non aliquam tortor sollicitudin ut. Nulla tincidunt hendrerit egestas. Nunc turpis nibh, fermentum ut blandit dapibus, ultricies sit amet nunc.<p>

<p>Sed dictum purus vel venenatis hendrerit. Cras mollis tincidunt metus, eu euismod massa euismod at. Cras egestas elit non mauris vehicula consectetur. Fusce finibus varius lectus maximus tincidunt. Fusce vehicula tristique purus id posuere. In feugiat justo sit amet ligula ornare maximus ac vitae nisl. Aenean in viverra mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi vehicula sem a elit malesuada, quis faucibus elit dignissim. Nulla quis erat vitae eros faucibus gravida ac congue magna. Cras tortor lectus, pharetra ac metus ac, euismod imperdiet libero. Phasellus eros ante, scelerisque in ultrices quis, scelerisque eu ipsum.</p>

<p>Vestibulum eu blandit risus. Donec rhoncus tristique eros, ullamcorper malesuada turpis laoreet vitae. Nullam in sollicitudin dui. Morbi et hendrerit purus. Donec in ullamcorper erat. Curabitur facilisis sagittis neque, eget tristique erat posuere a. Etiam et quam nec nunc cursus fermentum. Mauris rhoncus euismod risus, et vestibulum quam sollicitudin quis. Vivamus feugiat finibus porttitor. Mauris vel sem mauris. Nunc cursus eleifend dolor id semper. Maecenas consectetur nibh felis, sed commodo nisl fringilla at. Vestibulum condimentum ultrices massa, in lobortis urna. Aliquam et dolor quam. Mauris neque mauris, condimentum sit amet dui sit amet, sagittis faucibus magna.</p>

<p>Cras porttitor vel mi vitae dapibus. Mauris ultricies ante nec nulla luctus, quis varius tellus consectetur. Pellentesque ac tellus sed urna faucibus viverra vitae a libero. Maecenas pellentesque blandit ipsum ac laoreet. Aenean mattis ut ligula vel vulputate. Aliquam consequat vitae mi a vehicula. Nulla ullamcorper est velit, ut molestie purus molestie et. Vivamus nisl felis, tempus eget eros non, mollis efficitur odio. Nullam tempus ligula at rutrum volutpat. </p>


</div>
</div>
<div class="graham_section">
<div class="graham_story">
<span>пробный пост</span>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
<p>Nulla ut leo mi. Quisque sagittis ligula ante, ac efficitur dolor accumsan vel. Quisque at mi felis. Cras congue felis at erat interdum posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sodales nunc lacus, ultricies lobortis mauris sodales at. Praesent mauris lorem, suscipit id dignissim ut, dapibus eget lacus. Vestibulum fermentum aliquet mauris id dictum. Aliquam fringilla erat suscipit dui aliquam, eget fringilla tellus pretium. Nullam varius maximus ante, non aliquam tortor sollicitudin ut. Nulla tincidunt hendrerit egestas. Nunc turpis nibh, fermentum ut blandit dapibus, ultricies sit amet nunc.<p>

<p>Sed dictum purus vel venenatis hendrerit. Cras mollis tincidunt metus, eu euismod massa euismod at. Cras egestas elit non mauris vehicula consectetur. Fusce finibus varius lectus maximus tincidunt. Fusce vehicula tristique purus id posuere. In feugiat justo sit amet ligula ornare maximus ac vitae nisl. Aenean in viverra mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi vehicula sem a elit malesuada, quis faucibus elit dignissim. Nulla quis erat vitae eros faucibus gravida ac congue magna. Cras tortor lectus, pharetra ac metus ac, euismod imperdiet libero. Phasellus eros ante, scelerisque in ultrices quis, scelerisque eu ipsum.</p>

<p>Vestibulum eu blandit risus. Donec rhoncus tristique eros, ullamcorper malesuada turpis laoreet vitae. Nullam in sollicitudin dui. Morbi et hendrerit purus. Donec in ullamcorper erat. Curabitur facilisis sagittis neque, eget tristique erat posuere a. Etiam et quam nec nunc cursus fermentum. Mauris rhoncus euismod risus, et vestibulum quam sollicitudin quis. Vivamus feugiat finibus porttitor. Mauris vel sem mauris. Nunc cursus eleifend dolor id semper. Maecenas consectetur nibh felis, sed commodo nisl fringilla at. Vestibulum condimentum ultrices massa, in lobortis urna. Aliquam et dolor quam. Mauris neque mauris, condimentum sit amet dui sit amet, sagittis faucibus magna.</p>

<p>Cras porttitor vel mi vitae dapibus. Mauris ultricies ante nec nulla luctus, quis varius tellus consectetur. Pellentesque ac tellus sed urna faucibus viverra vitae a libero. Maecenas pellentesque blandit ipsum ac laoreet. Aenean mattis ut ligula vel vulputate. Aliquam consequat vitae mi a vehicula. Nulla ullamcorper est velit, ut molestie purus molestie et. Vivamus nisl felis, tempus eget eros non, mollis efficitur odio. Nullam tempus ligula at rutrum volutpat. </p>


</div>
</div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Rubik:wght@800;900&display=swap');

.graham_wrap::-webkit-scrollbar {display:none;}
.graham_wrap {scrollbar-width: none;}

.graham_wrap {
  width: 750px; /* ширина блока */
  height: 408px; /* высота блока */
  background: #F0F0F0; /* цвет фона */
  margin: auto;
  scroll-snap-type: y mandatory;
  scroll-snap-points-y: repeat(100%);
  scroll-behavior: smooth;
  position: relative;
  overflow-y: scroll;
}

.graham_section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 750px; /* ширина болока*/
  height: auto;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.1) /* нижний бордер между секциями*/
}

.titlepage_img {
  width: 750px; /* ширина изображения */
  height: 408px; /* высота изображения */
  position: relative;
}

/* затемнение на картинке */
.titlepage_img:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  z-index: 1;
  opacity: .7
}

/* градиент на картинке */
.titlepage_img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, rgba(77,76,76,.25) 10%, rgba(255,0,0,.08) 80%);
  z-index: 2;
}

.titlepage_info {
  width: calc(100% - 50px);
  height: calc(100% - 40px);
  position: absolute;
  left: 50px;
  top: 40px;
  z-index: 3;
  color: #F0F0F0; /* цвет текст на титульной секции */
  text-shadow: 1px 1px 1px rgba(0,0,0,.77); /* тень */
}

.titlepage_info span:first-child {
  font: 800 36px rubik; /* шрифт имени персонажа */
  text-transform: uppercase;
  letter-spacing: 2px;
}

.titlepage_info span {
  display: block;
  margin-bottom: 12px;
  font: 300 13px IBM Plex Sans /* шрифт даты рождения и професии*/
}

.titlepage_info span:last-child {
  position: absolute;
  bottom: 30px;
  right: 50px;
  text-transform: uppercase;
  font-size: 12px; /* размер шрифта занятой внешности*/
  letter-spacing: 1px
}

.graham_story {
  padding: 20px 40px;
  text-align: justify;
  font: 400 13px/150% IBM Plex Sans; /* шрифт в биографии и пробном посте*/
  height: 100%
}

.graham_story p {
  text-align: justify;
  font: 400 13px/150% IBM Plex Sans !important; /* шрифт в биографии и пробном посте*/
}

.graham_story span {
  font: 800 36px rubik; /* шрифт заголовков био и пробного поста*/
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2D2D2D;
  margin-bottom: 10px !important;
  display: block
}
/*РЕНО*/
#p30 .post-author,
#p30 .post-sig {
 display:none !important
}
#p30 .post-body,
#p30 .post-links,
#p30 .post-links ul,
#p30 h3>span {
 margin-left:0 !important
}
#p30 .pl-email,
#p30 .pl-website {
 float:  none
}
#p30 .pl-delete {
 border-left: 1px solid rgba(0,0,0,.2) !important;
 margin-left: 10px
}
#p30 .post-content {
 margin-top: 20px !important;
 margin-left: 0 !important;
 margin-right: 0 !important
}
#p30 .post-box {
 margin: 0px !important
}
</style>

Цитировать Сообщение 9

Поделиться102021-11-21 18:17:37

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->

<div class="pain-container" style="background: url(https://i.ibb.co/23ZsJRF/Group-1.png)">
  <div class="pain-header">
    Вещий дух
    <span>счастлив пытаться в JS</span>
  </div>
  <div class="pain-informer">
    <ul>
      <li>ни разу не скучает по временам, когда смена фона форума делала тебя сверхразумом, а твой дизайн - шедевром креативной мысли;</li>
      <li>считает, что верстка под ябло-девайсы послана на землю самим сатаной, чтобы сеять хаос и разрушение;</li>
      <li>хочет на ручки. и dragon age 4;</li>
    </ul>
  </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Lobster&display=swap');

ul {scrollbar-width: thin;
scrollbar-color: #F0F0F0 rgba(0, 0, 0,0.01);}
ul::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: rgba(0, 0, 0,0.1);
border-radius: 10px !important;}
ul::-webkit-scrollbar-thumb {
  background-color:#f0f0f0;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(20, 18, 15,0.1) inset;
border-radius: 1px !important;
}


.pain-container {
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  width: 500px;
  height: 300px;
  margin: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.pain-header {
  font: normal 30px lobster;
  color: #F0F0F0;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(to top, rgba(10,10,10,.9) 20%, rgba(10,10,10,0) 100%);
  padding: 0 40px;
  box-sizing: border-box;
  height: 130px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer
}

.pain-header span {
  font: 300 10px IBM Plex Sans;
  text-transform: uppercase;
  display: block;
  margin-top: 8px
}

.pain-informer {
  background: rgba(10,10,10,.9);
  font: 400 12px/150% IBM Plex Sans;
  color: #F0F0F0;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 130px);
  padding: 0px 10px 50px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none
}

.pain-informer li + li {
  margin-top: 10px
}

.pain-informer ul {
  box-sizing: border-box;
  width: 90%;
  height: 100%;
  overflow-y: auto;
  padding-right: 5px;
  padding-left:15px;
  margin: auto
}
</style>
<script>
$('.pain-header').each(function() {
    $(this).on('click', function() { $('.pain-header').not($(this)).next().slideUp();
      $(this).next().slideToggle(); 
    });
  });
</script>

Цитировать Сообщение 10

Поделиться112021-11-21 21:49:35

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->

<div class="timeline_wrap">
    <div class="timeline_container_bg"></div>
  <div class="timeline_container">
    <div class="timeline_inner">
      
      <div class="timeline_block">
        <div class="time_year">9:00 века Дракона</div>
        <div class="time_event">
          <p>Наместником Киркволла становится Отвага Тренхольд.</p>
        </div>
      </div>
      
            <div class="timeline_block">
        <div class="time_year">9:01 века Дракона</div>
              
        <div class="time_event">
          <p>Битва при Авинаше между Орлеем и Ферелденом. Логэйн Мак-Тир убивает в бою Луиса Монтсиммара, командующего шевалье Денерима.</p>
<p>Рыцарь-храмовник Грегор возвращается в башне ферелденского круга после полуторалетнего отсутствия, и становится рыцарем-капитаном.</p>
<p>Старший чародей Киркволла Консуэлон в письме Первому чародею Хонорусу делится подозрениями о том, что Малкольм Хоук намеренно скрывает свой незаурядный талант к магии.</p>
        </div>
      </div>
      
                  <div class="timeline_block">
        <div class="time_year">9:02 века Дракона</div>
        <div class="time_event">
          <p>Армия ферелденских повстанцев захватывает Денерим и осаждает Форт Драккон. Перед воротами крепости принц Мэрик Тейрин убивает узурпатора Мегрена Дуфайэля на дуэли.</p>
<p>Битва за Гавани Денерима — флот повстанцев по командованием банна Ферхара Мак Энрига уничтожает морские силы орлесианской империи. Восстание Ферелдена окончено.</p>
<p>В башне Кинлоха родился Рис.</p>
<p>Скончался Уильям Кусланд, тэйрн Хайевера. Новым тэйрном становится его сын, Брайс.
Эамон Геррин возвращается в Ферелден и становится эрлом Редклифа.</p>
        </div>
      </div>
      
                  <div class="timeline_block">
        <div class="time_year">9:03 века Дракона</div>
        <div class="time_event">
          <p>Согласно архивам антиванских воронов, в это время один из них в Сегероне встретился с юным стражником-кунари, который в будущем станет известным Стэном из Бересаада.</p>
        </div>
      </div>
      
                        <div class="timeline_block">
        <div class="time_year">9:04 века Дракона</div>
        <div class="time_event">
          <p>У Мэрика и королевы Роуэн родился сын Кайлан, кронпринц Ферелдена.</p>
<p>В честь визита великой герцогини Флорианны де Шалон в Киркволле состоялся бал. На нём присутствовали представители всех знатных домов города и круга магов. Там познакомились Лиандра Амелл и Малкольм Хоук.</p>
<p>Родился Зевран.</p>
        </div>
      </div>
      
    </div>
    </div>
</div>

<style>

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400;1,600;1,700;1,800&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,300&display=swap');

.timeline_inner::-webkit-scrollbar {display:none;}
.timeline_inner {scrollbar-width: none;}

.timeline_wrap {
    height: 700px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    font: 400 12px/150% Source Sans Pro
}
.timeline_container_bg {
    position: absolute;
    background-image: url(https://i.ibb.co/q5J2VWn/fredrik-solli-wandem-cpi-H-8-I3cc-unsplash.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 110%;
    height: 110%;
    transition: all 0.1s ease;  
    filter: grayscale(100%) brightness(.85) contrast(.9); 
}

.timeline_container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex; 
  justify-content: center;
  align-items: center
}

.timeline_inner {
  background: #F8F8F8;
  width: 75%;
  height: 75%;
  box-shadow: 21px 0px 20px -20px rgba(0,0,0,.23), -21px 0px 20px -20px rgba(0,0,0,.23), 0 0 3px 0 rgba(0,0,0,.08);
  padding: 40px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
}

.timeline_container:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 37.1%;
  bottom: 0px;
  width: 2px;
  height: 75%;
  background: #CFCFCF;
  z-index: 1
}

.timeline_block {
  display: flex;
}

.time_year {
  width: 25%;
  margin-right:12%;
  text-align: right;
  font: 700 14px nunito;
  text-transform: uppercase;
  position: relative;
}

.time_year:after {
    content: "";
  position: absolute;
  right: -26%;
  top: 1px;
  width: 8px;
  height: 8px;
  background: #F8F8F8;
  border: 2px solid #CFCFCF;
  border-radius: 100%;
  z-index: 2
}

.time_event {
  flex: 1;
  position: relative
}

.time_event p {
  padding: 0 !important;
  margin: 0 !important;
  font: 400 13px/150% Source Sans Pro !important;
}

.time_event p + p {
  margin-top: 10px !important;
}

.timeline_block + .timeline_block {
  margin-top: 34px
}
</style>
<script>
let bg = document.querySelector('.timeline_container_bg');
window.addEventListener('mousemove', function(e) {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;  
    bg.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)';
});
</script>

Цитировать Сообщение 11

Поделиться122021-11-22 18:16:31

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML-->
<script>
$('.scrolling-container').fsScroll({
        direction: 'horizontal',
        duration: 1000,
        loop: true
        });
</script>

<div class="scrolling-container" data-fs-scroll>
    <div class="scrolling-sections">
      <div class="scrolling-section section1">
        <div class="scrolling-inner">
          <h5>Foreshadowing Ghost.</h5>
          <span>Death, it's shadows, spreads its wings around me.</span>
        </div>
      </div>
      <div class="scrolling-section section2">
        <div class="scrolling-inner">
        <p>Ни разу не скучает по временам, когда смена фона форума делала тебя сверхразумом, а твой дизайн - шедевром креативной мысли.</p>
      </div>
      </div>
      <div class="scrolling-section section3">
         <div class="scrolling-inner">
          <div class="scrolling-box">Считает, что верстка под ябло-девайсы послана на землю самим сатаной, чтобы сеять хаос и разрушение.</div>
        </div>
      </div>
      <div class="scrolling-section section4">
          <div class="scrolling-inner">
          <div class="scrolling-box">Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем.</div>
        </div>
      </div>
       <div class="scrolling-section section5">
         <div class="scrolling-inner">
        <p>Хочет на ручки.</p>
         <p>И dragon age 4.</p>
         </div>
      </div>
    </div>
</div>

<style>

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@200;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

[data-fs-scroll] {
  position: relative;
}

[data-fs-scroll] ul {
  padding: 0
}

[data-fs-scroll] .scrolling-page {
  position: absolute;
  list-style: none;
  z-index: 999
}

[data-fs-scroll] .scrolling-page.vertical {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

[data-fs-scroll] .scrolling-page.horizontal {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

[data-fs-scroll] .scrolling-page li {
  width: 15px;
  height: 15px;
  background: rgba(255,255,255,.6);
  border-radius: 50%;
  margin: 5px 6px;
  cursor: pointer;
  transition: all .5s cubic-bezier(.63,.34,.09,.96) 0s;
}

[data-fs-scroll] .scrolling-page li.activepage {
  border-radius: 15px;
  background: #fff;
}

[data-fs-scroll] .scrolling-page.horizontal li {
  display: inline-block;
}

[data-fs-scroll] .scrolling-page.horizontal .activepage {
  width: 25px;
}

[data-fs-scroll] .scrolling-page.vertical .activepage {
  height: 25px;
}

.scrolling-container {
overflow: hidden;
  margin: auto;
  height: 400px
}
    .scrolling-container, .scrolling-sections, .scrolling-section {
      position: relative;
      width: 100%;
      height: 400px
    }

    .section1 {
      background: url(https://i.ibb.co/s2mVGfh/julian-steenbergen-y-IWXizbj7d-M-unsplash.jpg);
      background-size: cover;
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }
   .section1 h5 {
       font: normal 50px Abril Fatface
}
.section1 span {
       font: 300 10px Montagu Slab;
       text-transform: uppercase;
       letter-spacing: 1px;
  margin-top: 12px
}
    .section2{
      background: url(https://i.ibb.co/rFh9zkp/julian-steenbergen-q-Tv-EJv-Svh-Q-unsplash.jpg);
      background-size: cover
    }

.section2 p {
  padding: 0 !important;
  margin: 0 !important;
  font: 300 14px/150% jost !important;
  color: #fefefe;
  width: 50%;
  text-align: center; 
}
    .section3 {
      background: url(https://i.ibb.co/BVvrYFc/giordano-rossoni-WRt-KOq-WQ20-A-unsplash.jpg) center;
      background-size: cover
    }
    .section4 {
      background: url(https://i.ibb.co/GRXdQ9S/reed-geiger-5b-IP8-GRXuv-A-unsplash.jpg) center;
      background-size: cover
    }
      .section5 {
      background: url(https://i.ibb.co/6NLfTn0/eugene-golovesov-4-UIr-Kx-4s-c-unsplash.jpg) center;
      background-size: cover
    }

.section5 p {
  padding: 0 !important;
  margin: 10px 0 !important;
  font: 300 11px/150% jost !important; 
  letter-spacing: 2px;
  color: #fefefe;
  width: 50%;
  text-align: center; 
  text-transform: uppercase
}

.scrolling-inner {
  background: rgba(0,0,0,.35);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.scrolling-box {
  background: #fefefe;
  max-width: 80%;
  max-height: 80%;
  box-sizing: border-box;
  padding: 40px;
  font: 400 14px/150% jost;
  text-align: center;
  overflow: auto
}
</style>

Цитировать Сообщение 12

Поделиться132021-11-25 13:30:37

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

let bg = document.querySelector('.timeline_container_bg');
window.addEventListener('mousemove', function(e) {
let x = e.clientX / window.innerWidth;
let y = e.clientY / window.innerHeight;
bg.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)';
});

let bg2 = document.querySelector('.timeline_inner');
window.addEventListener('mousemove', function(e) {
let x2 = e.clientX / window.innerWidth;
let y2 = e.clientY / window.innerHeight;
bg2.style.transform = 'translate(+' + x2 * 50 + 'px, +' + y2 * 50 + 'px)';
});

Цитировать Сообщение 13

Поделиться142021-11-29 19:34:13

булочка с пиздюлями
Автор: Фенрис
Зарегистрирован: 2021-07-19
лз:
Лириумный Призрак;
тевинтерский беглец, 41 год; агент Инквизиции. Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
награды: 0,4
Сообщений: 55
Уважение: +0

Код:

<!--HTML--><style>

.namebar {
height: 15px;
width:440px;
font-family: 'Rajdhani', sans-serif;
background-color: #000;
font-size: 15px;
text-align: right;
padding: 30px;
color: #FFF;
}

.aliasbar {
height: 15px;
width:480px;
font-family: 'Rajdhani', sans-serif;
background-color: #000;
font-size: 10px;
text-align: center;
padding: 10px;
color: #FFF;
}

.mainpic {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
}

.mainpich {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
opacity: 0;
}

.mainpich:hover {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
opacity: 1;
}

.actualpic {
width: 500px;
height: 283px;
background: url(https://i.ibb.co/CM4FXJ7/b2e6bee42e14385ac1f7c0bad0056459.gif);

}

.actualpic:hover {
-webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: url(grayscale.svg); /* Firefox 4+ */
 filter: gray; /* IE 6-9 */;
}

.secondpic {
width: 200px;
height:100px;
}

.infoblocks {
width:194px;
height:15px;
background-color:#000;
color:#fff;
font-family: 'Rajdhani', sans-serif;
font-size: 9px;
text-align: left;
padding:3px;
}

.mainapp {
width: 200px;
height: 210px;
background-color:#fff;
color:#000;
overflow:auto;
font-size: 10px;
line-height:10px;
}

.mainapp p::first-letter {
font-family: 'Rajdhani', sans-serif;
font-size: 300%;
color: #759984;
}
</style>

<center><div class="namebar">ASHTON LYNX</div>
<center><div class="mainpic">
<div class="actualpic">

<div class="mainpich">
<div style="height:25px;"></div><div style="width: 450px; height:250px; background-color: #fff;"><div style="height:15px;"></div>
<table><td><div class="secondpic"><img src="https://i.ibb.co/kyKzJKG/photo-2021-08-05-16-22-08-1.jpg"></div><div style="height:1px;"></div>
<div class="infoblocks">рост: 179</div><div style="height:1px;"></div>
<div class="infoblocks">вес: 71</div><div style="height:1px;"></div>
<div class="infoblocks">группа крови: 0(I) rh+</div><div style="height:1px;"></div>
<div class="infoblocks">пирсинг: правая бровь, уши, нижняя губа</div><div style="height:1px;"></div>
<div class="infoblocks">тату: полностью правая рука</div><div style="height:1px;"></div>
</td><td><div class="mainapp"><p> Не стоит себя винить. Начнешь винить себя - не сможешь трезво мыслить, и тогда другие будут решать за тебя, тогда проще просто сдохнуть.<br><br> Никто не может предвидеть исхода. Любое принятое тобою решение может полностью повлиять на все последующие.<br></div></td></table>
</div></div></div></div><div class="aliasbar"> let's ▵ start ▵ a riot!</div>
<div style="font-family:arial; font-size:9px; color:#ff4670;"></div></center>