нужные персонажи

Поделиться12022-12-24 21:29:21

Администратор
Автор: juju
имя фамилия, 00
My milkshake brings all the boys to the yard And they're like, it's better than yours
Сообщений: 370
Уважение: +0
баллов:
12345
I am the star in any room that I stand in

Поделиться22022-12-27 21:13:31

Администратор
Автор: juju
имя фамилия, 00
My milkshake brings all the boys to the yard And they're like, it's better than yours
Сообщений: 370
Уважение: +0
баллов:
12345
I am the star in any room that I stand in

имя фамилия
— возраст — профессия — ваши отношения —

♫ исполнитель - название трека
текст заявки
дополнительно: текст

0

Поделиться32023-10-21 20:30:51

Администратор
Автор: juju
имя фамилия, 00
My milkshake brings all the boys to the yard And they're like, it's better than yours
Сообщений: 370
Уважение: +0
баллов:
12345
I am the star in any room that I stand in

— нужные —
*наведи на картинку, имена кликабельны

Код:

<!--HTML--><style>
.needyou-ads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.needyou-ads-item {
  position: relative;
}

.needyou-pic {
  position: relative;
}

.needyou-descr {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: .5s;
}

.needyou-descr:hover {
  opacity: 1;
}

.needyou-hover-pic {
  filter: blur(5px);
}

.needyou-titles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  height: 100px;
  display: flex;
  gap: 5px;
  background-color: var(--accent-color);
  border-radius: 10px;
  box-shadow: 0 0 7px #323232;
  padding: 5px;
  box-sizing: border-box;
}

.needyou-name {
  width: 110px;
  text-transform: lowercase;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 11px;
  color: #fff;
  text-shadow: 1px 2px 3px #323232;
  word-break: break-all;
}

.needyou-name a {
  color: #fff!important;
  font-weight: 700!important;
}

.needyou-firstname {
    font-size: 26px;
}

.needyou-lastname {
  font-style: italic;
  font-size: 20px;
  display: block;
}

.needyou-text {
  width: 100px;
  overflow-y: scroll;
  text-transform: uppercase;
  font-size: 8px;
  color: #fff;
  font-weight: 500;
  line-height: 10px;
  word-break: break-all;
}
.needyou-text::-webkit-scrollbar {width:0; height:0; }
</style>

<div class="needyou-ads">
  <div class="needyou-ads-item">
    <div class="needyou-pic">
      <img src="https://i.imgur.com/C78l8ap.jpg">
    </div>
    <div class="needyou-descr">
      <div class="needyou-hover-pic"><img src="https://i.imgur.com/C78l8ap.jpg">
          </div>
      <div class="needyou-titles">
        <div class="needyou-name">
          <a href="LINK" target="_blank">
            <span class="needyou-firstname">longname</span>
            <span class="needyou-lastname">lastname</span>
          </a>
        </div>
        <div class="needyou-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quis nobis autem ducimus quidem nostrum placeat voluptates voluptate eum deleniti explicabo, consequatur est asperiores consequuntur inventore nisi expedita odit. Cupiditate.
        </div>
      </div>
    </div>
  </div>

  <div class="needyou-ads-item">
    <div class="needyou-pic">
      <img src="https://i.imgur.com/C78l8ap.jpg">
    </div>
    <div class="needyou-descr">
      <div class="needyou-hover-pic"><img src="https://i.imgur.com/C78l8ap.jpg">
          </div>
      <div class="needyou-titles">
        <div class="needyou-name">
          <a href="LINK" target="_blank">
            <span class="needyou-firstname">name</span>
            <span class="needyou-lastname">lastname</span>
          </a>
        </div>
        <div class="needyou-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quis nobis autem ducimus quidem nostrum placeat voluptates voluptate eum deleniti explicabo, consequatur est asperiores consequuntur inventore nisi expedita odit. Cupiditate.
        </div>
      </div>
    </div>
  </div>

  <div class="needyou-ads-item">
    <div class="needyou-pic">
      <img src="https://i.imgur.com/C78l8ap.jpg">
    </div>
    <div class="needyou-descr">
      <div class="needyou-hover-pic"><img src="https://i.imgur.com/C78l8ap.jpg">
          </div>
      <div class="needyou-titles">
        <div class="needyou-name">
          <a href="LINK" target="_blank">
            <span class="needyou-firstname">name</span>
            <span class="needyou-lastname">lastname</span>
          </a>
        </div>
        <div class="needyou-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quis nobis autem ducimus quidem nostrum placeat voluptates voluptate eum deleniti explicabo, consequatur est asperiores consequuntur inventore nisi expedita odit. Cupiditate.
        </div>
      </div>
    </div>
  </div>

  <div class="needyou-ads-item">
    <div class="needyou-pic">
      <img src="https://i.imgur.com/C78l8ap.jpg">
    </div>
    <div class="needyou-descr">
      <div class="needyou-hover-pic"><img src="https://i.imgur.com/C78l8ap.jpg">
          </div>
      <div class="needyou-titles">
        <div class="needyou-name">
          <a href="LINK" target="_blank">
            <span class="needyou-firstname">name</span>
            <span class="needyou-lastname">lastname</span>
          </a>
        </div>
        <div class="needyou-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quis nobis autem ducimus quidem nostrum placeat voluptates voluptate eum deleniti explicabo, consequatur est asperiores consequuntur inventore nisi expedita odit. Cupiditate.
        </div>
      </div>
    </div>
  </div>
</div>

0