новостная лента

[hideprofile][html]<style>
.mantra-news * {
box-sizing: border-box;
}

.daily-news {
width: 740px;
max-width: 100%;
margin: auto;
padding: 35px;
position: relative;
}

.mantra-news {
width: 670px;
margin: auto;
padding: 38px 44px 34px;
position: relative;
overflow: hidden;
color: #3e4749;
font-family: "Inter", "Arial", sans-serif;
font-size: 12px;
line-height: 1.75;
background: url(https://forumstatic.ru/files/001c/ac/b2/13708.png) center no-repeat;
border: 1px solid rgba(92, 112, 116, .18);
border-radius: 8px;
box-shadow: 0 20px 45px rgba(40, 50, 52, .16), inset 0 0 0 1px rgba(255, 255, 255, .65);
}

/* ДЕКОР PNG */

.mn-decor {
position: absolute;
z-index: 2;
pointer-events: none;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.mn-decor-ticket {
width: 250px;
height: 300px;
top: 12px;
left: -50px;
opacity: .86;
transform: rotate(-7deg);
background-image: url("https://forumstatic.ru/files/001c/ac/b2/16133.png");
}

.mn-decor-butterfly {
width: 200px;
height: 200px;
right: -44px;
bottom: 255px;
opacity: 1;
background-image: url(https://forumstatic.ru/files/001c/ac/b2/25318.png);
}

.mn-decor-tag {
width: 200px;
height: 200px;
left: -22px;
bottom: -21px;
opacity: .8;
transform: rotate(4deg);
background-image: url("https://forumstatic.ru/files/001c/ac/b2/36345.png");
}

/* HEADER */

.mn-header {
position: relative;
z-index: 3;
text-align: center;
padding: 34px 90px 28px;
margin-bottom: 14px;
}

.mn-mini-line {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 12px;
color: #8c9799;
font-size: 9px;
font-weight: 700;
letter-spacing: 5px;
text-transform: uppercase;
}

.mn-mini-line:before,
.mn-mini-line:after {
content: "";
display: block;
width: 64px;
height: 1px;
background: rgba(126, 150, 155, .45);
}

.mn-title {
margin: 0;
color: #2f555d;
font-family: Inter, "Times New Roman", serif;
font-size: 47px !important;
font-weight: 200 !important;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
}

.mn-title span {
display: block;
margin-top: -2px;
color: #b98267;
font-family: Inter, "Times New Roman", serif;
text-transform: lowercase;
letter-spacing: 3px;
}

.mn-subtitle {
margin-top: 13px;
color: #8c9799;
font-size: 9px;
font-weight: 700;
letter-spacing: 5px;
text-transform: uppercase;
}

.mn-issue {
position: absolute;
right: 82px;
bottom: 112px;
color: #b98267;
font-family: Inter, "Times New Roman", serif;
font-size: 43px;
font-style: italic;
font-weight: 100;
}

/* QUOTE */

.mn-quote {
position: relative;
z-index: 3;
margin: 10px auto 30px;
padding: 12px 22px;
color: #535c5e;
text-align: center;
font-family: Inter, "Times New Roman", serif;
font-size: 12px;
background: rgba(255, 255, 255, .46);
border: 1px solid rgba(92, 112, 116, .25);
border-radius: 20px;
box-shadow: inset 0 0 18px rgba(255, 255, 255, .55);
}

.mn-quote:before,
.mn-quote:after {
position: absolute;
color: rgba(105, 138, 145, .55);
font-family: Georgia, "Times New Roman", serif;
font-size: 52px;
line-height: 1;
}

.mn-quote:before {
content: "“";
left: 20px;
top: -11px;
}

.mn-quote:after {
content: "”";
right: 20px;
bottom: -39px;
}

/* MAIN CONTENT */

.mn-content {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 200px 1fr;
gap: 28px;
margin-top: 8px;
}

.mn-left-column {
display: flex;
flex-direction: column;
gap: 14px;
}

.mn-side-card {
align-self: start;
padding: 12px 12px 16px;
background: rgba(255, 255, 255, .42);
border: 1px solid rgba(92, 112, 116, .18);
box-shadow: 0 10px 24px rgba(70, 80, 82, .08);
width: 190px;
border-radius: 5px;
}

.mn-side-image {
width: 100%;
height: 310px;
border-radius: 4px;
overflow: hidden;
background:
linear-gradient(rgba(103, 139, 145, .25), rgba(103, 139, 145, .25)),
url("https://i.pinimg.com/1200x/6b/eb/b4/6bebb4a1c22011c72562f29cbd8a8baa.jpg") center/cover;
filter: grayscale(0.4);
}

.mn-side-caption {
margin-top: 10px;
color: #7d8a8d;
font-size: 9px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
}

/* ЛУЧШАЯ ПАРА ПОД БОКОВОЙ КАРТОЧКОЙ */

.mn-side-couple {
width: 192px;
padding: 12px;
position: relative;
z-index: 3;
background: rgba(255, 255, 255, .42);
border: 1px solid rgba(92, 112, 116, .18);
border-radius: 5px;
box-shadow: 0 10px 24px rgba(70, 80, 82, .08);
}

.mn-side-couple-title {
margin-bottom: 10px;
color: #315a62;
font-family: Inter, "Times New Roman", serif;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
}

.mn-side-couple-image {
width: 104px;
height: 53px;
margin: auto;
margin-top: -8px;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
background: rgba(132, 166, 173, .16);
border: 3px solid rgba(255, 255, 255, .65);
box-shadow: 0 3px 8px rgba(50, 60, 62, .10);
}

.mn-side-couple-image img {
width: 100px;
height: 50px;
object-fit: cover;
filter: grayscale(1);
}

.mn-side-couple-names {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
color: #536163;
font-size: 10px;
line-height: 1.3;
text-align: center;
text-transform: lowercase;
}

.mn-side-couple-name a {
color: #a4705e!important;
}

.mn-side-couple-and {
color: #a4705e;
font-family: Inter, "Times New Roman", serif;
}

.mn-text p {
margin: 0 0 15px;
text-align: justify;
}

.mn-text b {
color: #315a62;
}

.mn-text a {
color: #a4705e;
text-decoration: none;
border-bottom: 1px solid rgba(164,112,94,.35);
}

.mn-note {
margin: 10px 0;
padding: 16px 20px;
background: rgba(132, 166, 173, .12);
border-left: 4px solid rgba(105, 138, 145, .55);
border-radius: 0 10px 10px 0;
color: #536163;
font-size: 11px;
}

.mn-note-title {
display: block;
margin-bottom: 4px;
color: #315a62;
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}

/* DIVIDER */

.mn-divider {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 16px;
margin: 38px 0 26px;
color: #6f8589;
}

.mn-divider:before,
.mn-divider:after {
content: "";
flex: 1;
height: 1px;
background: rgba(92, 112, 116, .28);
}

.mn-divider span {
padding: 6px 22px;
background: rgba(132, 166, 173, .22);
border-radius: 999px;
font-family: Inter, "Times New Roman", serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
}

/* WEEK RESULTS */

.mn-summary {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1.1fr .95fr 1.05fr;
gap: 18px;
margin-top: 16px;
}

.mn-box {
min-height: 170px;
padding: 18px;
position: relative;
background: rgba(255,255,255,.44);
border: 1px solid rgba(92, 112, 116, .20);
border-radius: 8px;
box-shadow: 0 10px 20px rgba(70, 80, 82, .06);
}

.mn-box-title {
margin-bottom: 14px;
color: #315a62;
font-family: Inter, "Times New Roman", serif;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
}

/* 6 АКТИВИСТОВ */

.mn-faces {
display: grid;
grid-template-columns: repeat(3, 42px);
gap: 9px;
justify-content: center;
}

.mn-face {
width: 42px;
height: 42px;
overflow: hidden;
border-radius: 8px;
border: 3px solid rgba(255,255,255,.75);
background: #d8d8d8;
box-shadow: 0 3px 8px rgba(50, 60, 62, .12);
}

.mn-face img {
width: 36px;
height: 36px;
object-fit: cover;
}

/* ЛУЧШИЙ ЭПИЗОД */

.mn-episode {
padding: 14px 12px 12px;
border-radius: 10px;
text-align: center;
background: rgba(247, 245, 239, .72);
border: 1px dashed rgba(92, 112, 116, .35);
}

.mn-episode-label {
margin-bottom: 6px;
color: #8c9799;
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}

.mn-episode-name {
display: block;
margin-bottom: 5px;
color: #315a62 !important;
font-family: Inter, "Times New Roman", serif;
font-size: 11px;
line-height: 1.25;
text-decoration: none;
}

.mn-episode-name:hover {
color: #a4705e !important;
}

.mn-episode-players {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: #536163;
font-size: 10px;
text-transform: lowercase;
flex-wrap: wrap;
}

.mn-episode-player {
color: #a4705e;
}

.mn-episode-and {
color: #a4705e;
font-family: Inter, "Times New Roman", serif;
}

/* ПОСТ НЕДЕЛИ */

.mn-post {
position: relative;
padding: 14px 16px;
background: rgba(247, 245, 239, .72);
border: 1px dashed rgba(92, 112, 116, .35);
border-radius: 12px;
font-size: 10px;
line-height: 1.3;
text-align: justify;
}

.mn-post a {
color: #a4705e;
text-decoration: none;
border-bottom: 1px solid rgba(164,112,94,.35);
}

.mn-post-author {
margin-top: 10px;
color: #a4705e;
font-family: Inter, "Times New Roman", serif;
font-size: 11px;
font-style: italic;
text-align: right;
}

/* FOOTER */

.mn-footer {
position: relative;
z-index: 3;
margin-top: 34px;
padding: 18px 70px;
color: #617074;
text-align: center;
font-family: Inter, "Times New Roman", serif;
font-size: 11px;
line-height: 1.7;
background: rgba(132, 166, 173, .20);
border-radius: 8px;
}

.mn-footer:before,
.mn-footer:after {
content: "✦";
position: absolute;
top: 50%;
transform: translateY(-50%);
color: rgba(164,112,94,.65);
font-size: 18px;
}

.mn-footer:before {
left: 28px;
}

.mn-footer:after {
right: 28px;
}

/* RESPONSIVE */

@media (max-width: 780px) {
.daily-news {
width: 94%;
padding: 25px 0;
}

.mantra-news {
width: 94%;
padding: 30px 24px;
}

.mn-header {
padding: 40px 20px 22px;
}

.mn-title {
font-size: 34px !important;
}

.mn-content {
grid-template-columns: 1fr;
}

.mn-left-column {
gap: 14px;
}

.mn-side-image {
height: 220px;
}

.mn-side-couple-image {
height: 150px;
}

.mn-summary {
grid-template-columns: 1fr;
}

.mn-faces {
grid-template-columns: repeat(6, 42px);
}

.mn-decor-ticket,
.mn-decor-butterfly,
.mn-decor-tag {
opacity: .32;
}
}

@media (max-width: 520px) {
.mn-faces {
grid-template-columns: repeat(3, 42px);
}
}
</style>

<div class="mn-header">
<div class="mn-mini-line">mantra</div>

<h1 class="mn-title">
торжественные
<span>новости</span>
</h1>

<div class="mn-subtitle">Сизам откройся, как говорится!</div>
<div class="mn-issue">#1</div>
</div>

<div class="mn-quote">
Ну что, наконец-то наступил этот день, когда мы открылись и рады всем и каждому в нашем уютном уголке Азии! Двери Mantr'ы теперь нараспашку!
</div>

<div class="mn-side-card">
<div class="mn-side-image"></div>
<div class="mn-side-caption">на связи boss</div>
</div>

<div class="mn-side-couple">
<div class="mn-side-couple-title">лучшая пара</div>

<div class="mn-side-couple-names">
<span class="mn-side-couple-name"><a href="#">yoon keeho</a></span>
<span class="mn-side-couple-and">&</span>
<span class="mn-side-couple-name"><a href="#">choi taeyang</a> </span>
</div>
</div>

</div>

<div class="mn-text">
<p>
В первых новостях хотелось бы еще раз рассказать о нашем проекте. Mantra — место, которое объединяет все уголки Азии в одно целое. Вам больше не нужно думать, почему китаец решил переехать в Корею. Не нужно париться, почему японец и кореец оказались парой, живущей в Китае. Или нужно? Ну тут уж решать вам самим)
</p>

<p>
Расслабляйтесь, отдыхайте, выбирайте себе персонажей, пишите анкеты и просто получайте удовольствие!
</p>

<div class="mn-note">
<span class="mn-note-title">еженедельные активности</span>
•<a href="https://mantra.rusff.me/viewtopic.php?id=156">дейлики</a> — легкий способ получить халяву
<br>•<a href="https://mantra.rusff.me/viewtopic.php?id=157">тесты</a> — ну куда без них
<br>•<a href="https://mantra.rusff.me/viewtopic.php?id=36">пазлы</a> — продолжаем дружно ломать глаза

</div>

<p>
Мы всегда рады вашей актвности, постам, вопросам, предложениям и отзывам!
</p>

<p>P.S. Просим прощения за задержку с открытием по времени. Технические шоколадки слачаются иногда. АМС проекта продолжает совершенствовать и дорабатывать разные темы, разделы и всегда с вами на связи <3</p>
<br>Выражаем благодарность <b>choi seungcheol</b> за помощь в трудную минуту! В благодарность набор украшений профиля!
</div>

</div>

<div class="mn-divider">
<span>итоги недели</span>
</div>

<div class="mn-box">
<div class="mn-box-title">наши активисты</div>

<div class="mn-box">
<div class="mn-box-title">лучший эпизод</div>

<div class="mn-episode">
<a href="https://mantra.rusff.me/viewtopic.php?id=146" class="mn-episode-name">
вечеринка закончилась, начался разбор полетов
</a>

<div class="mn-episode-players">
<span class="mn-episode-player">huang xing</span>
<span class="mn-episode-and">и</span>
<span class="mn-episode-player">qiu ding jie</span>
</div>
</div>
</div>

<div class="mn-box">
<div class="mn-box-title">пост недели</div>

<div class="mn-post">
– И ты на меня так не смотри. Моя жизнь, как хочу, так и порчу.
<a href="https://mantra.rusff.me/viewtopic.php?id=88#p4301">[читать далее]</a>
<div class="mn-post-author">nut supanut</div>
</div>
</div>

</div>

<div class="mn-footer">
Спасибо каждому, кто делает наш проект живым местом.
Ваши идеи, активность и поддержка — лучшее вдохновение для всех нас.
Не останавливайтесь — впереди ещё много интересного!
</div>

</div>
</div>[/html]

MANTRA

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

новостная лента

Сообщений 1 страница 1 из 1

Поделиться1Вчера 18:17:08