123
шаблон газета
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12026-09-03 21:30:03
- Администратор
ирма кернс, 118 ведьма ┏━━━━•❃°•°❀°•°❃•━━━━┓
все дороги ведут к нашей встрече
всё моё найдёт меня точно
┗━━━━•❃°•°❀°•°❃•━━━━┛- Сообщений: 59
- Уважение: +1
- валюта: 123
- Посты: 123
первая строка текста
Поделиться22026-09-03 21:42:48
- Администратор
ирма кернс, 118 ведьма ┏━━━━•❃°•°❀°•°❃•━━━━┓
все дороги ведут к нашей встрече
всё моё найдёт меня точно
┗━━━━•❃°•°❀°•°❃•━━━━┛- Сообщений: 59
- Уважение: +1
- валюта: 123
- Посты: 123
первая строка текста
[html]
<style>
.info-paper {
max-width: 850px;
margin: 0 auto;
padding: 25px;
border-top: 1px solid rgba(0,0,0,0.8);
position: relative;
color: rgba(0,0,0,0.9);
background: url(https://forumstatic.ru/files/001c/a5/43/53584.jpg);
}
.info-paper * { box-sizing: border-box; }
.info-paper::before,
.info-paper::after {
position: absolute;
top: 5px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-paper::before { content: attr(data-date); left: 0; }
.info-paper::after { content: attr(data-loc); right: 0; }
.info-paper > header {
text-align: center;
border-top: 1px solid rgba(0,0,0,0.8);
border-bottom: 1px solid rgba(0,0,0,0.8);
padding: 15px 0 10px;
margin-bottom: 20px;
}
.info-paper > header h1 {
font-family: 'CDOvuer', serif;
font-size: 52px;
font-weight: normal;
margin: 0 0 5px;
transform: scaleY(1.3);
letter-spacing: 1px;
display: block !important;
}
.info-paper h2 {
display: block !important;
padding: 5px 0 !important;
}
.info-paper > header span {
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.info-paper .layout {
display: flex;
gap: 20px;
}
.info-paper .col-main { flex: 2.15; }
.info-paper .col-side {
flex: 1;
border-left: 1px solid rgba(0,0,0,0.8);
padding-left: 20px;
}
.info-paper .img-box {
background-color: #000;
width: 100%;
margin-bottom: 15px;
}
.info-paper .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.info-paper .title-main,
.info-paper .title-split {
font-family: 'CDOvuer', serif;
font-weight: normal;
margin: 10px 0 5px;
text-transform: uppercase;
transform-origin: left bottom;
}
.info-paper .title-main {
font-size: 42px;
transform: scaleY(1.2);
}
.info-paper .title-split {
font-size: 28px;
transform: scaleY(1.15);
margin-top: 0;
}
.info-paper .title-sub {
font-family: 'CDOvuer', serif;
font-weight: normal;
font-size: 22px;
margin: 0 0 15px;
text-transform: uppercase;
}
.info-paper p {
font-size: 11px;
line-height: 1.4;
text-align: justify;
margin: 0 0 15px;
max-height: 228px;
overflow: auto;
padding-right: 5px !important;
}
.info-paper .scroll-text {
max-height: 110px;
overflow-y: auto;
padding-right: 10px;
}
.info-paper .scroll-text::-webkit-scrollbar { width: 3px; }
.info-paper .scroll-text::-webkit-scrollbar-track { background: transparent; }
.info-paper .scroll-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.8); }
.info-paper .split-block {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.info-paper .drop-box {
margin: 15px 0;
display: block;
border-radius: 0;
position: relative;
width: 100%;
}
.info-paper .drop-box summary {
background: rgba(0,0,0,0.25);
text-align: center;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px;
width: 100%;
cursor: pointer;
list-style: none;
outline: none;
border-radius: 0;
}
.info-paper .drop-box summary::-webkit-details-marker { display: none; }
.info-paper .drop-box p {
position: absolute;
top: 50%;
left: calc(100% + 15px);
transform: translateY(-50%);
width: 260px;
z-index: 100;
background: rgba(245, 245, 245, 0.95);
border: 1px solid rgba(0,0,0,0.8);
box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
padding: 12px;
margin: 0;
text-transform: none;
}
.info-paper .awareness {
margin-top: 40px;
text-align: center;
}
.info-paper .awareness h4 {
font-family: 'CDOvuer', serif;
font-weight: normal;
font-size: 20px;
text-transform: uppercase;
line-height: 1.1;
margin: 0 0 15px;
}
.info-paper .bar-bg {
background: rgba(0,0,0,0.2);
border-radius: 15px;
height: 22px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.info-paper .bar-bg::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--val, 0%);
background: rgba(0,0,0,0.6);
z-index: 1;
transition: width 0.3s ease;
}
.info-paper .bar-bg span {
position: relative;
z-index: 2;
font-size: 11px;
font-weight: bold;
}
</style>
<section class="info-paper" data-date="00 МЕС 2026" data-loc="СОЛТ-ЛЕЙК-СИТИ">
<header>
<h1>THE SALT LAKE TRIBUNE</h1>
<span>A VOICE FOR UTAH SINCE 1871</span>
</header>
<div class="layout">
<div class="col-main">
<div class="img-box" style="height: 330px;"><img src='https://i.pinimg.com/1200x/f8/82/6a/f8826a066882e7114ac8238f5f7ffd5d.jpg'>
</div>
<h2 class="title-main">ЗЕМЛЕТРЯСЕНИЕ</h2>
<h3 class="title-sub">ТЕКСТ ТЕКСТ ТЕКСТ</h3>
<p class="scroll-text">ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ</p>
<details class="drop-box">
<summary>ВЫПАДАЮЩИЙ ТЕКСТ</summary>
<p>Здесь можно разместить предложенные для выполнения задания.</p>
</details>
<div class="split-block">
<div class="img-box" style="width: 220px; height: 260px; flex-shrink: 0;"><img src='https://i.pinimg.com/1200x/f8/82/6a/f8826a066882e7114ac8238f5f7ffd5d.jpg'></div>
<div class="split-content">
<h2 class="title-split">новость:</h2>
<h3 class="title-sub">содержание</h3>
<p>ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ</p>
</div>
</div>
<details class="drop-box">
<summary>ВЫПАДАЮЩИЙ ТЕКСТ</summary>
<p>Здесь можно разместить предложенные для выполнения задания.</p>
</details>
</div>
<div class="col-side">
<div class="img-box" style="height: 220px;"><img src='https://i.pinimg.com/1200x/f8/82/6a/f8826a066882e7114ac8238f5f7ffd5d.jpg'>
</div>
<p class="scroll-text"> ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ</p>
<div class="img-box" style="height: 220px;"><img src='https://i.pinimg.com/1200x/f8/82/6a/f8826a066882e7114ac8238f5f7ffd5d.jpg'>
</div>
<p class="scroll-text">ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ ТЕКСТ НОВОСТИ</p>
<div class="awareness">
<h4>СТЕПЕНЬ<br>ОСВЕДОМЛЕННОСТИ<br>О ВЕСПЕРЕ</h4>
<div class="bar-bg" style="--val: 20%;">
<span>20%</span>
</div></div></div></div</section>
[/html][hideprofile]
Страница: 1