Тестовое сообщение

Страница: 1

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

Поделиться12021-11-07 18:14:37

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Код:

какой то код

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

какой то спойлер

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
еще спойлер
в нем цитата в цитате

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Поделиться22021-11-09 14:13:55

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

ллл

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

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

<lz>Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.</lz>

Поделиться42021-12-02 14:40:50

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

Код:

<!--HTML-->

<div class="scrolling-container" data-fs-scroll>
  <div class="scrolling-name">ashton <span>lynx</span></div>
    <div class="scrolling-underbg">
      <div class="scrolling-controls"></div>
      <div class="scrolling-bg"><img src="https://i.ibb.co/LtgGmHK/486101eac1ecc48c16dfdf5f1d4eeb6b.png"></div>
    </div>
    <div class="scrolling-sections">
            <div class="scrolling-section section1">
      </div>
      <div class="scrolling-section section2">
        <div class="scrolling-inner">
          <h5>Chapter one.</h5>
          <p>Death, it's shadows, spreads its wings around me.</p>
          <p>Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</p>
        </div>
      </div>
      <div class="scrolling-section section3">
        <div class="scrolling-inner">
        <h5>Chapter two.</h5>
          <p>Death, it's shadows, spreads its wings around me.</p>
          <p>Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</p>
      </div>
      </div>
      <div class="scrolling-section section4">
         <div class="scrolling-inner">
          <h5>Chapter three.</h5>
          <p>Death, it's shadows, spreads its wings around me.</p>
          <p>Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</p>
        </div>
      </div>
    </div>
</div>


<style>

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500&family=Teko:wght@300;400;500&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 {
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

[data-fs-scroll] .scrolling-page li {
  width: 110px;
  height: 10px;
  background: #d1d1d1;
  margin: 20px 6px;
  cursor: pointer;
  transition: all .5s cubic-bezier(.63,.34,.09,.96) 0s;
}

[data-fs-scroll] .scrolling-page li.activepage {
  background: #4e0000;
}

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

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

.scrolling-container {
overflow: hidden;
  margin: auto;
  height: 400px;
-webkit-text-size-adjust: 100%
}
    .scrolling-container {
      position: relative;
      width: 600px;
      height: 400px;
      z-index: 1
    }

.scrolling-sections {
      position: relative;
      width: 400px;
      height: 400px;
      float: right
    }

.scrolling-section {
      position: relative;
      width: 400px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .section2 {
      background: rgba(0,0,0,.1);
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }
   .scrolling-inner h5 {
     font: normal 30px Abril Fatface;
     margin: 0;
     padding: 0;
     margin-bottom: 10px
}
.scrolling-inner p {
       font: 300 13px/130% Jost !important;
       
}
    .section3{
      background: rgba(0,0,0,.3);
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }

    .section4 {
      background: rgba(0,0,0,.4);
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }

.scrolling-inner {
  border: 3px solid #d1d1d1;
  width: 85%;
  height: 85%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15px
}

.scrolling-underbg {
  position: absolute;
  background: #000000;
  width: 600px;
  height: 400px;
  z-index: -1;
  display: flex;
}

.scrolling-controls {
  width: 200px;
  border-right: 5px solid #4e0000;
  box-sizing: border-box;
}

.scrolling-bg {
  width: 400px;
}

.scrolling-bg img {
  width: 400px
}

.scrolling-name {
  position: absolute;
  color: #d1d1d1;
  font: normal 50px/100% teko;
  left: 40px;
  top: 30px;
  text-transform: uppercase;
  z-index: 2;
  width: 130px;
}

.scrolling-name span {
  color: #4e0000
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/6e/96/33188.js"></script>

Код:

<div class="scrolling-container" data-fs-scroll>
<div class="scrolling-name">

    ashton <span>lynx</span>

</div>
<div class="scrolling-underbg">
<div class="scrolling-controls"></div>
<div class="scrolling-bg">

<img src="https://i.ibb.co/LtgGmHK/486101eac1ecc48c16dfdf5f1d4eeb6b.png">

</div>
</div>
<div class="scrolling-sections">


<div class="scrolling-section section1">
</div>
<div class="scrolling-section section2">
<div class="scrolling-inner">

          <h5>Chapter one.</h5>

          <p>Death, it's shadows, spreads its wings around me.</p>

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

</div>
</div>


<div class="scrolling-section section3">
<div class="scrolling-inner">

          <h5>Chapter two.</h5>

          <p>Death, it's shadows, spreads its wings around me.</p>

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

</div>
</div>


<div class="scrolling-section section4">
<div class="scrolling-inner">

          <h5>Chapter three.</h5>

          <p>Death, it's shadows, spreads its wings around me.</p>

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


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


<style>
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&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 {
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

[data-fs-scroll] .scrolling-page li {
  width: 110px;
  height: 10px;
  background: #d1d1d1;
  margin: 20px 6px;
  cursor: pointer;
  transition: all .5s cubic-bezier(.63,.34,.09,.96) 0s;
}

[data-fs-scroll] .scrolling-page li.activepage {
  background: #4e0000;
}

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

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

.scrolling-container {
overflow: hidden;
  margin: auto;
  height: 400px;
-webkit-text-size-adjust: 100%
}
    .scrolling-container {
      position: relative;
      width: 600px;
      height: 400px;
      z-index: 1
    }

.scrolling-sections {
      position: relative;
      width: 400px;
      height: 400px;
      float: right
    }

.scrolling-section {
      position: relative;
      width: 400px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .section2 {
      background: rgba(0,0,0,.1);
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }
   .scrolling-inner h5 {
     font: normal 30px Abril Fatface;
     margin: 0;
     padding: 0;
     margin-bottom: 10px
}
.scrolling-inner p {
       font: 300 13px/130% Jost !important;
       
}
    .section3{
      background: rgba(0,0,0,.3);
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }

    .section4 {
      background: rgba(0,0,0,.4);
      color: #fefefe;
      text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }

.scrolling-inner {
  border: 3px solid #d1d1d1;
  width: 85%;
  height: 85%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15px
}

.scrolling-underbg {
  position: absolute;
  background: #000000;
  width: 600px;
  height: 400px;
  z-index: -1;
  display: flex;
}

.scrolling-controls {
  width: 200px;
  border-right: 5px solid #4e0000;
  box-sizing: border-box;
}

.scrolling-bg {
  width: 400px;
}

.scrolling-bg img {
  width: 400px
}

.scrolling-name {
  position: absolute;
  color: #d1d1d1;
  font: normal 50px/100% teko;
  left: 40px;
  top: 30px;
  text-transform: uppercase;
  z-index: 2;
  width: 130px;
}

.scrolling-name span {
  color: #4e0000
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/001b/6e/96/33188.js"></script>

Поделиться52021-12-02 15:09:56

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

Код:

<!--HTML-->
<div class="honda_wrap">
    <div class="honda_title">honda ahuli: wtf</div>
  <div class="honda_text">
    <div>Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</div>
  </div>
  <img src="https://i.ibb.co/LtgGmHK/486101eac1ecc48c16dfdf5f1d4eeb6b.png">
</div>

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

.honda_wrap {
  margin: auto;
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden
}

.honda_wrap img  {
  width: 600px;
  transition: all .2s cubic-bezier(.84, .51, .55, 1.16) 0s;
}

.honda_wrap:hover img  {
  filter: brightness(.8)
}

.honda_title {
  font: normal 70px teko;
  position: absolute;
  bottom: 20px;
  left:0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #680000;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  text-shadow: 0px 0px 0 #680000;
  z-index:2
}

.honda_title:before {
  content: "";
  background: #000000;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  transition: all .6s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: scaleX(.1);
  opacity: 0
}

.honda_wrap:hover .honda_title:before {
  transform: scaleX(1);
  opacity: 1
}

.honda_text {
  position: absolute;
  color: #fefefe;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  font: 400 13px/145% Jost;
  border: 3px solid #fefefe;
  text-align: justify;
  padding: 20px;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  box-sizing: border-box;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: translateY(-120%);
  z-index:2
}

.honda_text div {
  overflow-y: auto;
  padding: 5px;
  height: 85px
}

.honda_wrap:hover .honda_title {
  color: #fefefe;
  text-shadow: -8px -8px 0 #680000
}

.honda_wrap:hover .honda_text {
  color: #fefefe;
  transform: translateY(0%);
}
</style>

Код:

<div class="honda_wrap">
<div class="honda_title">

     honda ahuli: wtf

</div>
<div class="honda_text"><div>

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

</div></div>

     <img src="https://i.ibb.co/LtgGmHK/486101eac1ecc48c16dfdf5f1d4eeb6b.png">

</div>

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

.honda_wrap {
  margin: auto;
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden
}

.honda_wrap img  {
  width: 600px;
  transition: all .2s cubic-bezier(.84, .51, .55, 1.16) 0s;
}

.honda_wrap:hover img  {
  filter: brightness(.8)
}

.honda_title {
  font: normal 70px teko;
  position: absolute;
  bottom: 20px;
  left:0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #680000;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  text-shadow: 0px 0px 0 #680000;
  z-index:2
}

.honda_title:before {
  content: "";
  background: #000000;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  transition: all .6s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: scaleX(.1);
  opacity: 0
}

.honda_wrap:hover .honda_title:before {
  transform: scaleX(1);
  opacity: 1
}

.honda_text {
  position: absolute;
  color: #fefefe;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  font: 400 13px/145% Jost;
  border: 3px solid #fefefe;
  text-align: justify;
  padding: 20px;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  box-sizing: border-box;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: translateY(-120%);
  z-index:2
}

.honda_text div {
  overflow-y: auto;
  padding: 5px;
  height: 85px
}

.honda_wrap:hover .honda_title {
  color: #fefefe;
  text-shadow: -8px -8px 0 #680000
}

.honda_wrap:hover .honda_text {
  color: #fefefe;
  transform: translateY(0%);
}
</style>

Поделиться62021-12-02 15:40:41

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

Код:

<!--HTML-->
<div class="ddouble_wrap">
  <div class="ddouble_right">
    <div class="ddouble_text">
      <div><p>Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</p>

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

<p>Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.</p>
      </div>
    </div>
    <img src="https://i.ibb.co/V9HCYSq/Ejq8-ZS9-Wk-AYgsld.png">
  </div>
  <div class="ddouble_left">
    <img src="https://i.ibb.co/LtgGmHK/486101eac1ecc48c16dfdf5f1d4eeb6b.png">
  </div>
</div>

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

.ddouble_wrap {
  width: 600px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 15px
}

.ddouble_right, .ddouble_left {
  overflow: hidden;
  flex: 1;
  width: 50%;
  text-align: center;
  position: relative;
}

.ddouble_right img, .ddouble_left img {
  width: 400px;
}

.ddouble_text {
  position: absolute;
  z-index:1;
  border: 3px solid #fefefe;
  box-sizing: border-box;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  width: 85%;
  height: 90%;
  top: 5%;
  left: 7.5%;
  color: #fefefe;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  font: 400 13px/145% Jost;
  padding: 20px;
  transition: transform .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: translateX(-120%);
}

.ddouble_text p {
  color: #fefefe;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  font: 400 13px/150% Jost !important;
  text-align: justify;
}

.ddouble_text div {
  overflow-y: auto;
  padding-right: 3px;
  height: 100%;
}

.ddouble_wrap:hover .ddouble_text {
transform: translateX(0%);
}</style>

Код:

<div class="ddouble_wrap">
<div class="ddouble_right"><div class="ddouble_text"><div>

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

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

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


</div></div>

    <img src="https://i.ibb.co/V9HCYSq/Ejq8-ZS9-Wk-AYgsld.png">

</div>
<div class="ddouble_left">
   
    <img src="https://i.ibb.co/LtgGmHK/486101eac1ecc48c16dfdf5f1d4eeb6b.png">

</div></div>

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

.ddouble_wrap {
  width: 600px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.ddouble_right, .ddouble_left {
  overflow: hidden;
  flex: 1;
  width: 50%;
  text-align: center;
  position: relative;
}

.ddouble_right img, .ddouble_left img {
  width: 400px;
}

.ddouble_text {
  position: absolute;
  z-index:1;
  border: 3px solid #fefefe;
  box-sizing: border-box;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  width: 85%;
  height: 90%;
  top: 5%;
  left: 7.5%;
  color: #fefefe;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  font: 400 13px/145% Jost;
  padding: 20px;
  transition: transform .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: translateX(-120%);
}

.ddouble_text p {
  color: #fefefe;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  font: 400 13px/150% Jost !important;
  text-align: justify;
}

.ddouble_text div {
  overflow-y: auto;
  padding-right: 3px;
  height: 100%;
}

.ddouble_wrap:hover .ddouble_text {
transform: translateX(0%);
}</style>

Поделиться72021-12-02 17:50:50

твинки:
Автор: Fenris
Администратор
анкета: Фенрис, 41
лз: Не открывай мне своё сердце, маг. Не то рано или поздно я его у тебя вырву.
Сообщений: 12
Уважение: +0
Последний визит:
2021-12-08 13:18:35
графика: icon by ales

Код:

<!--HTML-->
<div class="contacts_wrap">

  <div class="contact_box leftside">
    <img src="https://i.ibb.co/KFqzvyY/2-1630942321.png">
    <div class="contact_name">name surname</div>
    <div class="contact_desc"><div>
      Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.
      </div>
    </div>
  </div>
  
    <div class="contact_box rightside">
    <img src="https://i.ibb.co/KFqzvyY/2-1630942321.png">
    <div class="contact_name">name surname</div>
    <div class="contact_desc"><div>
      Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.
      </div>
    </div>
  </div>
  
  <div class="contact_box leftside">
    <img src="https://i.ibb.co/KFqzvyY/2-1630942321.png">
    <div class="contact_name">name surname</div>
    <div class="contact_desc"><div>
      Он ехал по шоссе № 42 и свернул с него налево; стало быть, он въехал в город со стороны Скрипичной улицы – мимо вросших в землю трейлеров и покосившихся лачуг, мимо маленьких кладбищ, заросших сорной травой, мимо куч искореженного железа. Он не почувствовал ничего: ни ужаса, ни волнения. По большому счету, ему было все равно, где жить. Я мог бы доехать до Сан-Франциско, – подумал он, – и глядя на мост «Золотые Ворота» и на огни Китайского квартала, я чувствовал бы то же самое. Ему нельзя было вернуться в Новый Орлеан, так что он мог поселиться в любом другом городе. Все равно, в каком.
      </div>
    </div>
  </div>
  
</div>

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

.contacts_wrap {
  margin: auto;
  width: 500px;
  box-sizing: border-box;
  border: 3px solid #fefefe;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px
}

.contact_box img {
  width: 100px;
  height: 100px;
  border: 3px solid #680000;
}

.leftside {
  display: flex;
  flex-direction: row;
  position: relative
}

.leftside .contact_name {
  border-bottom: 3px solid #680000;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 105px);
  text-align: right;
  color: #111;
  text-transform: uppercase;
  font: normal 22px teko;
  line-height:80%;
  padding-bottom: 5px;
  letter-spacing: .06em;
  text-shadow: 0 0 0 rgba(17,17,17,0)
}

.leftside .contact_desc {
  border: 3px solid #fefefe;
  position: absolute;
  right: 0;
  top: 40px;
  padding: 10px;
  box-sizing: border-box;
  width: calc(100% - 125px);
  text-align: justify;
  color: #fff;
  font: normal 11px/130% jost;
  padding-bottom: 5px;
  letter-spacing: .06em;
  background: rgba(17,17,17,1);
  height: 66px;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: scale(0)
}

.leftside .contact_desc div {
  overflow-y: auto;
  height: 100%;
  padding-right: 2px
}

.rightside {
  display: flex;
  flex-direction: row-reverse;
  position: relative
}

.rightside .contact_name {
  border-bottom: 3px solid #680000;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 105px);
  text-align: left;
  color: #111;
  text-transform: uppercase;
  font: normal 22px teko;
  line-height:80%;
  padding-bottom: 5px;
  letter-spacing: .06em;
  text-shadow: 0 0 0 rgba(17,17,17,0)
}

.rightside .contact_desc {
  border: 3px solid #fefefe;
  position: absolute;
  left: 0;
  top: 40px;
  padding: 10px;
  box-sizing: border-box;
  width: calc(100% - 125px);
  text-align: justify;
  color: #fff;
  font: normal 11px/130% jost;
  padding-bottom: 5px;
  letter-spacing: .06em;
  background: rgba(17,17,17,1);
  height: 66px;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: scale(0)
}

.rightside .contact_desc div {
  overflow-y: auto;
  height: 100%;
  padding-right: 2px
}

.contact_box:hover .contact_desc {
  transform: scale(1)
}
</style>

Код:

<div class="contacts_wrap">

/*картинка слева */
<div class="contact_box leftside">

    <img src="https://i.ibb.co/KFqzvyY/2-1630942321.png">

<div class="contact_name">

    name surname

</div><div class="contact_desc"><div>

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

</div></div></div>
/*картинка слева конец */
  
/*картинка справа */
<div class="contact_box rightside">

    <img src="https://i.ibb.co/KFqzvyY/2-1630942321.png">

<div class="contact_name">

    name surname

</div><div class="contact_desc"><div>

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

</div></div></div>
/*картинка справа конец */

/*картинка слева */  
<div class="contact_box leftside">

    <img src="https://i.ibb.co/KFqzvyY/2-1630942321.png">

<div class="contact_name">

    name surname

</div><div class="contact_desc"><div>

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

</div></div></div>
/*картинка слева конец */  
  

</div>

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

.contacts_wrap {
  margin: auto;
  width: 500px;
  box-sizing: border-box;
  border: 3px solid #fefefe;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px
}

.contact_box img {
  width: 100px;
  height: 100px;
  border: 3px solid #680000;
}

.leftside {
  display: flex;
  flex-direction: row;
  position: relative
}

.leftside .contact_name {
  border-bottom: 3px solid #680000;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 105px);
  text-align: right;
  color: #111;
  text-transform: uppercase;
  font: normal 22px teko;
  line-height:80%;
  padding-bottom: 5px;
  letter-spacing: .06em;
  text-shadow: 0 0 0 rgba(17,17,17,0)
}

.leftside .contact_desc {
  border: 3px solid #fefefe;
  position: absolute;
  right: 0;
  top: 40px;
  padding: 10px;
  box-sizing: border-box;
  width: calc(100% - 125px);
  text-align: justify;
  color: #fff;
  font: normal 11px/130% jost;
  padding-bottom: 5px;
  letter-spacing: .06em;
  background: rgba(17,17,17,1);
  height: 66px;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: scale(0)
}

.leftside .contact_desc div {
  overflow-y: auto;
  height: 100%;
  padding-right: 2px
}

.rightside {
  display: flex;
  flex-direction: row-reverse;
  position: relative
}

.rightside .contact_name {
  border-bottom: 3px solid #680000;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 105px);
  text-align: left;
  color: #111;
  text-transform: uppercase;
  font: normal 22px teko;
  line-height:80%;
  padding-bottom: 5px;
  letter-spacing: .06em;
  text-shadow: 0 0 0 rgba(17,17,17,0)
}

.rightside .contact_desc {
  border: 3px solid #fefefe;
  position: absolute;
  left: 0;
  top: 40px;
  padding: 10px;
  box-sizing: border-box;
  width: calc(100% - 125px);
  text-align: justify;
  color: #fff;
  font: normal 11px/130% jost;
  padding-bottom: 5px;
  letter-spacing: .06em;
  background: rgba(17,17,17,1);
  height: 66px;
  transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
  transform: scale(0)
}

.rightside .contact_desc div {
  overflow-y: auto;
  height: 100%;
  padding-right: 2px
}

.contact_box:hover .contact_desc {
  transform: scale(1)
}
</style>

Страница: 1