[html]
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Patrick+Hand&display=swap" rel="stylesheet">
<style>
/* =========================
ОСНОВА ТЕТРАДИ
========================= */
#notebook{
width:760px;
height:820px;
margin:24px auto;
position:relative;
box-sizing:border-box;
background-image:
linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)),
url(https://upforme.ru/uploads/001c/84/93/191/81609.jpg);
background-size:cover;
background-position:center;
border:1px solid #d8cbb1;
padding:16px 52px 18px 20px;
overflow:hidden;
font-family:"Caveat", cursive;
color:#191919;
transform: rotate(-1.9deg);
transform-origin: center center;
box-shadow:
0 8px 25px rgba(0,0,0,.18),
inset 0 0 30px rgba(91,68,35,.05);
}
/* красная вертикальная линия тетради */
#notebook:after{
content:"";
position:absolute;
right:39px;
top:0;
height:100%;
width:2px;
background:rgba(194,36,56,.65);
box-shadow:1px 0 rgba(255,255,255,.35);
}
/* =========================
ШАПКА
========================= */
#notebook .nbHeader{
position:relative;
height:60px;
display:flex;
align-items:flex-start;
border-bottom:2px solid rgba(35,61,110,.12);
margin-bottom:2px;
}
#notebook .nbName{
position:relative;
font-size:35px;
font-weight:700;
letter-spacing:.5px;
transform:rotate(-1deg);
}
/* перечёркнутая приписка в заголовке */
#notebook .headerNote{
position:absolute;
left:155px;
top:15px;
font-family:"Caveat", cursive;
font-size:17px;
color:#a42135;
transform:rotate(-3deg);
}
#notebook .headerNote:before,
#notebook .headerNote:after{
content:"";
position:absolute;
left:-3px;
right:-4px;
height:1.5px;
top:48%;
background:#b0273d;
opacity:.75;
}
#notebook .headerNote:before{
transform:rotate(-5deg);
}
#notebook .headerNote:after{
transform:rotate(3deg);
}
/* маленькая финальная приписка */
#notebook .headerSide{
position:absolute;
right:18px;
top:23px;
font-size:15px;
color:#333;
opacity:.68;
transform:rotate(4deg);
}
/* =========================
ПРОКРУТКА
========================= */
#notebook .nbBody{
height:680px;
overflow:auto;
padding:6px 5px 15px 4px;
scrollbar-width:none;
}
#notebook .nbBody::-webkit-scrollbar{
width:0;
}
/* =========================
ТАБЛИЦА
========================= */
#notebook table{
width:100%;
border-collapse:separate;
border-spacing:7px 20px;
}
#notebook td{
width:50%;
vertical-align:top;
padding:0 5px;
}
/* =========================
КАРТОЧКА
========================= */
#notebook .card{
position:relative;
display:flex;
align-items:flex-start;
gap:12px;
min-height:138px;
padding:3px 6px 4px 2px;
box-sizing:border-box;
}
/* небольшие индивидуальные смещения */
#notebook .card.c1{
transform:translate(1px,2px) rotate(-.3deg);
}
#notebook .card.c2{
transform:translate(-2px,-2px) rotate(.4deg);
}
#notebook .card.c3{
transform:translate(4px,-1px) rotate(.9deg);
}
#notebook .card.c4{
transform:translate(-3px,4px) rotate(-.3deg);
}
#notebook .card.c5{
transform:translate(1px,0) rotate(.4deg);
}
#notebook .card.c6{
transform:translate(-1px,3px) rotate(-.4deg);
}
/* =========================
ФОТОГРАФИИ
========================= */
#notebook .photoWrap{
position:relative;
flex:0 0 111px;
width:111px;
}
#notebook .photo{
position:relative;
z-index:2;
display:block;
width:100px;
height:100px;
object-fit:cover;
border:3px solid rgba(255,255,255,.96);
border-bottom-width:3px;
background:#eee;
box-shadow:
0 4px 7px rgba(0,0,0,.48),
0 1px 1px rgba(0,0,0,.25);
}
/* разные наклоны */
#notebook .tilt1{
transform:rotate(-3.2deg);
}
#notebook .tilt2{
transform:rotate(2.4deg);
}
#notebook .tilt3{
transform:rotate(-1.7deg);
}
#notebook .tilt4{
transform:rotate(3.1deg);
}
#notebook .tilt5{
transform:rotate(-2.2deg);
}
#notebook .tilt6{
transform:rotate(1.8deg);
}
/* =========================
СКОТЧ
========================= */
#notebook .tape:before{
content:"";
position:absolute;
z-index:4;
width:53px;
height:17px;
left:31px;
top:-7px;
background:rgba(221,205,161,.58);
border-left:1px solid rgba(130,112,73,.12);
border-right:1px solid rgba(130,112,73,.12);
box-shadow:0 1px 2px rgba(0,0,0,.08);
transform:rotate(-8deg);
}
#notebook .tape2:before{
content:"";
position:absolute;
z-index:4;
width:46px;
height:14px;
right:-4px;
top:8px;
background:rgba(205,193,151,.52);
box-shadow:0 1px 2px rgba(0,0,0,.08);
transform:rotate(42deg);
}
/* =========================
СКРЕПКА
========================= */
#notebook .clip:after{
content:"";
position:absolute;
z-index:5;
width:8px;
height:26px;
left:8px;
top:-5px;
border:2px solid rgba(74,74,70,.65);
border-radius:8px;
transform:rotate(-14deg);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.18);
}
/* =========================
ТЕКСТ
========================= */
#notebook .charText{
position:relative;
flex:1 1 auto;
padding-top:3px;
line-height:1.06;
}
#notebook .charName{
position:relative;
display:inline-block;
margin-bottom:6px;
font-size:25px;
font-weight:700;
}
/* ссылки = синяя ручка */
#notebook .charName a,
#notebook .charName a:link,
#notebook .charName a:visited,
#notebook .charName a:hover,
#notebook .charName a:active{
color:#164b8d !important;
text-decoration:none !important;
font-size:25px;
font-weight:800;
text-shadow:.2px .2px rgba(10,30,70,.15);
}
/* рукописное подчёркивание */
#notebook .underline:after{
content:"";
position:absolute;
left:0;
right:-5px;
bottom:1px;
height:2px;
background:rgba(18,69,137,.55);
border-radius:50%;
transform:rotate(-2deg);
}
/* описание */
#notebook .charDesc{
position:relative;
display:block;
max-width:165px;
font-size:17px;
line-height:1.08;
opacity:.9;
text-align:left;
}
/* =========================
КРАСНЫЕ ПОМЕТКИ
========================= */
#notebook .scribble{
position:absolute;
z-index:8;
font-family:"Caveat", cursive;
font-size:15px;
font-weight:600;
color:#a51f35;
line-height:.9;
white-space:nowrap;
}
/* Дези */
#notebook .deziNote{
left:143px;
bottom:-2px;
transform:rotate(-4deg);
}
/* Вики */
#notebook .vickyNote{
right:77px;
bottom:24px;
font-size:16px;
transform:rotate(5deg);
}
/* Трой */
#notebook .troyNote{
left:139px;
bottom:19px;
transform:rotate(-5deg);
}
/* Сильвия */
#notebook .silviaNote{
right:12px;
bottom:3px;
transform:rotate(3deg);
}
/* =========================
СТРЕЛОЧКИ
========================= */
#notebook .arrow{
position:absolute;
z-index:7;
font-family:"Patrick Hand", cursive;
color:#a51f35;
font-size:24px;
opacity:.82;
}
/* =========================
ВИКИ — СЕРДЕЧКО,
КОТОРОГО КАК БЫ НЕТ
========================= */
#notebook .oopsHeart{
position:absolute;
right:-29px;
top:0px;
color:#ad2338;
font-family:"Caveat", cursive;
font-size:24px;
transform:rotate(8deg);
}
#notebook .angryCircle:before{
content:"";
position:absolute;
right:-10px;
top:-5px;
width:56px;
height:32px;
border:2px solid rgba(172,31,50,.73);
border-radius:48% 52% 45% 55%;
transform:rotate(-5deg);
pointer-events:none;
}
/* =========================
ТРОЙ — КРАСНЫЙ КРУГ
========================= */
/* =========================
МАЛЕНЬКИЕ РИСУНКИ
========================= */
#notebook .doodle{
position:absolute;
z-index:7;
color:#333;
font-family:"Caveat", cursive;
opacity:.72;
}
/* сигарета */
#notebook .cigarette{
right:8px;
top:7px;
width:28px;
height:5px;
border:1.5px solid #333;
border-radius:3px;
transform:rotate(-15deg);
}
#notebook .cigarette:after{
content:"";
position:absolute;
right:-7px;
top:-1px;
width:5px;
height:5px;
border-radius:50%;
background:#9e3341;
}
/* театральная маска условно */
#notebook .theatre{
right:3px;
top:2px;
font-size:19px;
transform:rotate(9deg);
}
/* =========================
ПУСТЫЕ КАРТОЧКИ
========================= */
#notebook .empty .photo{
filter:grayscale(.15);
opacity:.77;
}
#notebook .empty .charName a{
color:#555 !important;
}
#notebook .empty .charDesc{
opacity:.52;
}
/* вопросительный знак */
#notebook .unknown{
position:absolute;
right:12px;
top:1px;
color:#a51f35;
font-size:27px;
font-weight:700;
transform:rotate(12deg);
}
/* =========================
НИЖНЯЯ СЛУЧАЙНАЯ ЗАПИСКА
========================= */
#notebook .bottomNote{
position:absolute;
left:25px;
bottom:6px;
font-size:14px;
color:rgba(30,30,30,.58);
transform:rotate(-2deg);
}
</style>
<div id="notebook">
<div class="nbHeader">
<div class="nbName">
знакомства
</div>
<div class="headerNote">
люди, которых я терплю
</div>
<div class="headerSide">
более-менее
</div>
</div>
<div class="nbBody">
<table>
<!-- =====================
ДЕЗИ
===================== -->
<tr>
<td>
<div class="card c1">
<div class="photoWrap tape">
<img
class="photo tilt1"
src="https://i.pinimg.com/736x/23/cc/e8/23cce8f76c94162e9e42ef0561ad8266.jpg"
>
</div>
<div class="charText">
<span class="charName underline">
<a href="https://wounds.rusff.me/profile.php?id=148">
Дези
</a>
</span>
<span class="doodle theatre">☆</span>
<span class="charDesc">
наши отношения улучшились, после того, как я ему врезала
(это была случайность!!!)
</span>
</div>
<span class="scribble deziNote">
случайность!!!
</span>
</div>
</td>
<!-- =====================
ВИКИ
===================== -->
<td>
<div class="card c2">
<div class="photoWrap tape2">
<img
class="photo tilt2"
src="https://i.pinimg.com/1200x/2b/ba/69/2bba69f81009b220acf7b87cab3adaeb.jpg"
>
</div>
<div class="charText">
<span class="charName angryCircle">
<a href="https://wounds.rusff.me/profile.php?id=213">
Вики
</a>
<span class="oopsHeart">♡</span>
</span>
<span class="charDesc">
принцесса-тиран. может чуть лучше, чем показалась вначале
</span>
</div>
<span class="scribble vickyNote">
«чуть»
</span>
</div>
</td>
</tr>
<!-- =====================
ТРОЙ
===================== -->
<tr>
<td>
<div class="card c3">
<div class="photoWrap clip">
<img
class="photo tilt3"
src="https://i.pinimg.com/736x/d6/5d/66/d65d662be8fec439332c43c180f0390e.jpg"
>
</div>
<div class="charText">
<span class="charName underline">
<a href="https://wounds.rusff.me/profile.php?id=185">
Трой
</a>
</span>
<span class="charDesc">
бесячий засранец, который не может смириться
с чужим (моим) успехом
</span>
</div>
<span class="scribble troyNote">
skill issue /ᐠ - ˕ -マ
</span>
</div>
</td>
<!-- =====================
СИЛЬВИЯ
===================== -->
<td>
<div class="card c4">
<div class="photoWrap tape">
<img
class="photo tilt4"
src="https://i.pinimg.com/736x/02/38/50/02385043f0f912f053c4398d67f84938.jpg"
>
</div>
<div class="charText">
<span class="charName underline">
<a href="https://wounds.rusff.me/profile.php?id=96">
Сильвия
</a>
</span>
<span class="doodle cigarette"></span>
<span class="charDesc">
партнёр по перекурам
</span>
</div>
<span class="scribble silviaNote">
проверено ✓
</span>
</div>
</td>
</tr>
<!-- =====================
БУДУЩИЕ ЗНАКОМСТВА
===================== -->
<tr>
<td>
<div class="card c5 empty">
<div class="photoWrap tape2">
<img
class="photo tilt5"
src="https://upforme.ru/uploads/001c/84/93/191/173142.png"
>
</div>
<div class="charText">
<span class="charName">
<a href="https://wounds.rusff.me/">
имя
</a>
</span>
<span class="unknown">?</span>
<span class="charDesc">
описание
</span>
</div>
</div>
</td>
<td>
<div class="card c6 empty">
<div class="photoWrap clip">
<img
class="photo tilt6"
src="https://upforme.ru/uploads/001c/84/93/191/173142.png"
>
</div>
<div class="charText">
<span class="charName">
<a href="https://wounds.rusff.me/">
имя
</a>
</span>
<span class="unknown">?</span>
<span class="charDesc">
описание
</span>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="bottomNote">
примечание: первое впечатление может быть ошибочным.
</div>
</div>
[/html]
[hideprofile]
[hidesig]
Отредактировано alexandra houston (17-09-2026 12:51:53)
