Их разыскивает полиция (или нужные персонажи)

Поделиться12023-11-27 13:08:11

Автор: Raven
Администратор
I just died
in your arms
Они терзают нас в ночи, с каждым криком оставляя шрамы в наших головах.
Сообщений: 518
Уважение: +613

[html]
<div class="char-wrapper">

<div class="char-name">name, surname, age</div>

<div class="char-card"> 
<div class="char-gif">
 <img src="#" style="top: 0px;" alt="faceclaim">
</div>
 <div class="char-proto"><b>face name</b></div>
<div class="char-race">race</div>
<div class="char-occupation">деятельность, зона</div>
<div class="char-bio">
<p style='text-indent: 14px;'>ТЕКСТ ЗАЯВКИ</p>
</div>

<div class="char-taken-ribbon">ЗАНЯТ</div>
</div>
</div>

@font-face {
font-family: 'Leotaro';
src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

.char-wrapper {
position: relative;
width: 650px;
margin: 40px auto;
font-family: 'Leotaro', sans-serif;
}

.char-name {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
padding: 8px 35px;
font-size: 20px;
border: 2px solid #228B22;
border-radius: 18px;
z-index: 5;
letter-spacing: 1px;
line-height: 1;
white-space: nowrap;
color: #228B22;
font-family: 'Leotaro', sans-serif;
}

.char-card {
position: relative;
width: 100%;
height: 615px;
color: #e8e8e8;
background: url('https://i.pinimg.com/736x/22/29/2c/22292c73fc7f7f7a83e50d1aaa6a0815.jpg') center/cover no-repeat;
border-radius: 20px;
overflow: hidden;
}

.char-card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
z-index: 0;
border-radius: 20px;
}

.char-gif {
position: relative;
width: 220px;
height: 220px;
margin: 50px auto 10px auto;
border-radius: 50%;
overflow: hidden;
z-index: 2;
box-shadow: 0 0 15px rgba(0,0,0,0.8), 0 0 5px #a94a34 inset;
top: 5px;
filter:sepia(100%) hue-rotate(70deg) saturate(50%);
}
.char-gif img {
width: 220px;
height: 220px;
object-fit: cover;
object-position: center center;
filter: contrast(1.05) saturate(0.9);
}

.char-proto {
text-align: center;
font-style: italic;
font-size: 23px;
letter-spacing: 1px;
color: #228B22;
position: relative;
z-index: 2;
margin-bottom: 10px;
top: 30px;
}
.char-proto::after {
content: "";
display: block;
width: 100%;
height: 2px;
margin: 4px auto 0;
background: linear-gradient(to right, transparent, #228B22, transparent);
opacity: 0.8;
}

.char-race {
text-align: center;
font-style: italic;
font-size: 18px;
letter-spacing: 1px;
color: #228B22;
position: relative;
z-index: 2;
margin-bottom: 10px;
top: 30px;
}

.char-occupation {
width: 85%;
margin: 0 auto 12px auto;
text-align: center;
background: rgba(20,20,20,0.6);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 12px;
padding: 8px 0;
box-shadow: 0 0 8px rgba(0,0,0,0.5);
z-index: 2;
position: relative;
font-size: 15px;
top: 30px;
}

.char-bio {
position: relative;
width: 90%;
height: 170px;
margin: 0 auto;
margin-top: 5px;
padding: 15px 20px;
background: rgba(40,40,40,0.35);
border-radius: 15px;
overflow-y: auto;
z-index: 2;
backdrop-filter: blur(6px);
box-shadow: 0 0 10px rgba(0,0,0,0.4) inset;
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 25px;
font-size: 14px;
top: 30px;
}

.char-bio::-webkit-scrollbar {
width: 6px;
background: #006400;
}
.char-bio::-webkit-scrollbar-thumb {
background: #228B22;
border-radius: 10px;
}
.char-bio::-webkit-scrollbar-track {
background: rgba(0,0,0,0.3);
}

.char-taken-ribbon {
display: none;
position: absolute;
top: 35px;
right: -55px;
transform: rotate(45deg);
background: #7a1f1f;
color: #fff;
padding: 8px 80px;
font-weight: 600;
letter-spacing: 2px;
box-shadow: 0 0 8px rgba(0,0,0,0.6);
z-index: 6;
}

.char-card.taken {
filter: grayscale(1);
}
.char-card.taken .char-taken-ribbon {
display: block;
filter: none;
}

</style>
[/html]

Код:

[html]
<div class="char-wrapper">

  <!-- ИМЯ -->
  <div class="char-name">name, surname, age</div>

  <div class="char-card"> <!--ЧТОБЫ СДЕЛАТЬ ЗАБРОНИРОВАННЫМ ПОСЛЕ card через пробел добавтиь TAKEN-->
    <div class="char-gif">
   <!--ССЫЛКА НА ФОТО-->   <img src="#" style="top: 0px;" alt="faceclaim">
    </div>
   <!--ФИО--> <div class="char-proto"><b>face name</b></div>
	<div class="char-race">race</div>
    <div class="char-occupation">деятельность, зона</div>
    <div class="char-bio">
      <p style='text-indent: 14px;'>ТЕКСТ ЗАЯВКИ</p>
    </div>

    <!-- Лента "ЗАНЯТ" -->
    <div class="char-taken-ribbon">ЗАНЯТ</div>
  </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

@font-face {
  font-family: 'Leotaro';
  src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.char-wrapper {
  position: relative;
  width: 650px;
  margin: 40px auto;
  font-family: 'Leotaro', sans-serif;
}

.char-name {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); 
  background: #000;
  padding: 8px 35px;
  font-size: 20px;
  border: 2px solid #228B22;
  border-radius: 18px;
  z-index: 5;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  color: #228B22;
  font-family: 'Leotaro', sans-serif;
}

.char-card {
  position: relative;
  width: 100%;
  height: 615px;
  color: #e8e8e8;
  background: url('https://i.pinimg.com/736x/22/29/2c/22292c73fc7f7f7a83e50d1aaa6a0815.jpg') center/cover no-repeat;
  border-radius: 20px;
  overflow: hidden;
}

.char-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 0;
  border-radius: 20px;
}

.char-gif {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 50px auto 10px auto;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 15px rgba(0,0,0,0.8), 0 0 5px #a94a34 inset;
  top: 5px;
  filter:sepia(100%) hue-rotate(70deg) saturate(50%);
}
.char-gif img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.05) saturate(0.9);
}

.char-proto {
  text-align: center;
  font-style: italic;
  font-size: 23px;
  letter-spacing: 1px;
  color: #228B22;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  top: 30px;
}
.char-proto::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px auto 0;
  background: linear-gradient(to right, transparent, #228B22, transparent);
  opacity: 0.8;
}

.char-race {
  text-align: center;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 1px;
  color: #228B22;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  top: 30px;
}

.char-occupation {
  width: 85%;
  margin: 0 auto 12px auto;
  text-align: center;
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  z-index: 2;
  position: relative;
  font-size: 15px;
  top: 30px;
}

.char-bio {
  position: relative;
  width: 90%;
  height: 170px;
  margin: 0 auto;
  margin-top: 5px;
  padding: 15px 20px;
  background: rgba(40,40,40,0.35);
  border-radius: 15px;
  overflow-y: auto;
  z-index: 2;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(0,0,0,0.4) inset;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 25px;
  font-size: 14px;
  top: 30px;
}

.char-bio::-webkit-scrollbar {
  width: 6px;
  background: #006400;
}
.char-bio::-webkit-scrollbar-thumb {
  background: #228B22;
  border-radius: 10px;
}
.char-bio::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.3);
}

.char-taken-ribbon {
  display: none;
  position: absolute;
  top: 35px;
  right: -55px;
  transform: rotate(45deg);
  background: #7a1f1f;
  color: #fff;
  padding: 8px 80px;
  font-weight: 600;
  letter-spacing: 2px;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
  z-index: 6;
}

.char-card.taken {
  filter: grayscale(1);
}
.char-card.taken .char-taken-ribbon {
  display: block;
  filter: none; 
}

</style>
[/html]

+2

Поделиться22026-03-04 12:30:42

Автор: Ash Bronte
В ахере
иногда надо уметь
стрелять первым
ЭШ БРОНТЕ, 32, EPANO ✔
глава службы безопасности

Иногда месть - это и есть правосудие.
валюта: 16380$
посты: 138
Сообщений: 2073
Уважение: +1551
ОХОТНИК

[html]
<div class="char-wrapper">

<div class="char-name">Sara Bronte, 22-27</div>

<div class="char-card"> 
<div class="char-gif">
 <img src="https://64.media.tumblr.com/69c1b237db7ef4888e58e32985c7ad59/tumblr_inline_nl8wn9NijG1rifr4k.gif" style="top: 0px;" alt="faceclaim">
</div>
 <div class="char-proto"><b>Willa Holland</b></div>
<div class="char-race">человек</div>
<div class="char-occupation">любая деятельность, epano</div>
<div class="char-bio">
<p style='text-indent: 14px;'>Наша семья охотников берёт своё начало ещё в 15 веке и связана с именем Римуса Бронте — того самого, который первым написал бестиарий, содержащий в себе не только названия и подробные описания магических существ, населявших город, но и способы их истребления. Там были собраны далеко не все представители магического мира, зато для имеющихся указаны все их слабые места. Как заветный артефакт, книга передавалась из поколения в поколение, пока не дошла до нынешнего владельца — меня. Я, в свою очередь, основываясь на уже имеющейся информации и своём современном опыте, создал новый бестиарий, в который теперь входят все известные на данный момент магические существа, включая уникальные и редкие расы.
Вместе с другими людьми мы создали вирус, от которого теперь страдают сверхъестественные существа.<br><br>
♦ ВСЁ, ЧТО ТЕБЕ ВАЖНО ЗНАТЬ
Поворот истории может быть абсолютно любым. Ты можешь как поддерживать семейное дело, так и быть против него, не желая нести вред живым существам (или, например, будучи в отношениях с одним из них). У меня есть общая история семьи, в анкете нет упоминаний сестры (я тогда не планировал хд), поэтому биография Сары (имя можно изменить) практически как чистый лист.
Если нужно пожевать стекла а мы любители этого дела, то вполне можно сыграть противостояние двух наследников Римуса. Если стекла хочется поменьше, то будем идти бок о бок. В общем — открыт к обсуждениям и предложениям)</p>
</div>