[html]
<div class="folder-template">
<div class="tab-top">эпиграф</div>
<div class="header">НАЗВАНИЕ</div>
<div class="tab-middle">ЗАГОЛОВОК</div>
<div class="body">
<div class="scroll-content">
<div class="themes-block">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст .<br><br>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст .<br><br>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст .<br><br>
</div>
</div>
</div>
</div>
<style>
.folder-template {
width: 100%;
margin: 0 auto;
position: relative;
height: 600px;
background: #e6e1d4;
border-radius: 4px;
box-shadow: 4px 4px 0px 0px rgba(140,133,127,0.5);
overflow: hidden;
}
/* ======================== ТАБЫ ======================== */
.tab-top, .tab-middle, .header { border-radius: 4px; }
/* Верхний таб */
.tab-top {
position: absolute; top: -3%; left: -2%;
width: 55%; height: 4%;
background: #3f3a35;
background: url('https://upforme.ru/uploads/000c/08/c1/2/206278.jpg') center/cover no-repeat;
z-index: 30;
display: flex; align-items: center; justify-content: center; height: 0,5%;
color: #fff; font-style: italic; font-size: 10px; text-transform: uppercase;
padding-top: 18px;
}
/* Правый средний таб (теперь точно на крышке) */
.tab-middle {
position: absolute; top: 16%; right: -2%;
width: 60%; height: 5%;
background: #3f3a35;
background: url('https://upforme.ru/uploads/000c/08/c1/2/206278.jpg') center/cover no-repeat;
z-index: 30;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: bold; font-size: 14px; text-transform: uppercase;
}
/* Крышка папки — теперь выше и выглядит как крышка */
.header {
position: absolute; top: -3%; left: 0; right: 0;
height: 20%;
background: #a39a8a;
background: url('https://upforme.ru/uploads/000c/08/c1/2/852640.jpg') center/cover no-repeat;
z-index: 20;
display: flex; align-items: center; justify-content: center;
color: #3f3a35; font-weight: bold; font-size: 18px; text-transform: uppercase;
padding-top: 18px;
}
/* Тело — сразу под крышкой */
.body {
position: absolute;
top: 15%;
left: 0; right: 0; bottom: 0;
background: #e6e1d4;
padding: 50px 15px 10px 15px;
box-sizing: border-box;
overflow: hidden;
}
.scroll-content {
height: 100%;
overflow-y: auto;
padding-right: 8px;
color: #3f3a35;
font-size: 12px;
line-height: 1.2;
}
/* Скроллбар */
.scroll-content::-webkit-scrollbar { width: 3px; }
.scroll-content::-webkit-scrollbar-track { background: transparent; }
.scroll-content::-webkit-scrollbar-thumb { background: #3f3a35; }
.scroll-content::-webkit-scrollbar-thumb:hover { background: #5c5347; }
.scroll-content { scrollbar-width: thin; scrollbar-color: #3f3a35 transparent; }
</style>
[/html]
[hideprofile]
