> > >
raina: в полуподвальном окне солнечный свет преломляется, словно чья-то оборванная линия жизни на ладони. в полуподвальной комнате тихо и пахнет лавандой, приправленной чем-то приторно-сладким, будто кто-то только что поджёг сахар. рейна в окно не смотрит, взглядом она цепляется за другой (единственный) источник света — зеленовато-синий огонь под её котлом...
navigation
f.a.q хронология и сюжет субкультуры внешности персонажи

necro test

Объявление

Введите здесь ваше объявление.

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » necro test » we are legacy » forgotten

forgotten

Страница: 1

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

1

  • Автор: necromancer
  • Администратор
  • necromancer
  • Сообщений: 10
  • Уважение: +0
  • Последний визит:
    2026-09-23 20:21:16

[hideprofile][html]<style>

/* =========================================================
   ОСНОВНИЙ БІЛИЙ КОНТЕЙНЕР
   ========================================================= */

.guest-wrap {
    width: 100%;
    max-width: 1100px;

    margin: 35px auto;
    padding: 36px;

    box-sizing: border-box;

    background: rgb(255 255 255);

    border-radius: 26px;

    color: #444;

    font-family: inherit;
}

/* =========================================================
   ШАПКА / КАРТИНКА
   ========================================================= */

.guest-header {
    position: relative;

    width: 100%;
    height: 225px;

    overflow: hidden;

    border-radius: 20px;

    background-image: url("https://upforme.ru/uploads/001c/8b/c7/2/972119.png");

    background-size: cover;

    background-position: center center;
}

.guest-header:after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(238, 238, 238, .08);

    pointer-events: none;
}

/* =========================================================
   НАЗВА PRAY&PREY
   ========================================================= */

.guest-header-title {
    position: absolute;

    left: 32px;

    bottom: 12px;

    z-index: 2;

    color: #f4f4f4;

    font-family: 'TheSilverEditorial', serif;

    font-size: 68px;

    line-height: .85;

    font-weight: 400;

    letter-spacing: -1px;
}

/* =========================================================
   №2 + №3
   ========================================================= */

.guest-body {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        400px;

    gap: 18px;

    margin-top: -28px;

    position: relative;

    z-index: 5;
}

/* =========================================================
   №2 — ІНФОРМАЦІЯ
   ========================================================= */

.guest-info {
    padding: 30px;

    box-sizing: border-box;

    background: #f4f4f4;

    border-radius: 18px;
}

.guest-info ul {
    margin: 0 0 22px;

    padding: 0;

    list-style: none;
}

.guest-info li {
    position: relative;

    margin: 0 0 7px;

    padding-left: 16px;

    font-size: 11px;

    line-height: 1.45;

    font-weight: 600;
}

/* зірочки */

.guest-info li:before {
    content: "✦";

    position: absolute;

    left: 0;
    top: 0;

    color: #415549;

    font-size: 9px;
}

/* посилання в інформаційному блоці */

.guest-info a {
    color: #415549;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;
}

.guest-info a:hover {
    color: #415549;

    text-decoration: underline;
}

/* =========================================================
   ТЕГИ
   ========================================================= */

.guest-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}

.guest-tag {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 6px 19px;

    box-sizing: border-box;

    border-radius: 20px;

    background: #cabeae;

    color: #415549;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: all .2s ease;
}

.guest-tag:hover {
    background: #cabeae;

    color: #415549;

    text-decoration: none;
}

/* =========================================================
   ПРАВА КОЛОНКА — №3
   ========================================================= */

.guest-side {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.guest-side-box {
    padding: 18px 24px;

    box-sizing: border-box;

    background: #f4f4f4;

    border-radius: 18px;
}

.guest-side-box.for-self {
    min-height: 350px;
}

.guest-side-box.for-requests {
    min-height: 150px;
}

/* =========================================================
   ЗАГОЛОВКИ "ДЛЯ СЕБЯ" / "ДЛЯ ЗАЯВОК"
   ========================================================= */

.guest-label {
    width: fit-content;

    min-width: 125px;

    margin: -1px auto 14px;

    padding: 6px 20px;

    box-sizing: border-box;

    border-radius: 20px;

    background: #cabeae;

    color: #415549;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    text-align: center;
}

/* =========================================================
   ЛИНИЯ ПОД ЗАГОЛОВКОМ
   ========================================================= */

.guest-side-content {
    border-top: 1px solid #cabeae;
}

/* =========================================================
   ОТДЕЛЬНИЙ БЛОК ЗА ДАТУ
   ========================================================= */

.guest-side-item {
    padding: 13px 5px;

    border-bottom: 1px solid #cabeae;

    text-align: center;

    font-size: 11px;

    line-height: 1.4;
}

.guest-side-item:last-child {
    border-bottom: 0;
}

/* =========================================================
   ДАТА
   ========================================================= */

.guest-date {
    display: block;

    margin-bottom: 8px;

    color: #415549;

    font-size: 11px;

    font-weight: 700;

    text-align: center;
}

/* =========================================================
   ГОТОВИЙ ЕЛЕМЕНТ СПИСКУ
   =========================================================

   САМЕ ТАКИЙ КОД ГЕНЕРУЄ ФОРМА:

   <p class="guest-item">
       имя фамилия / <a href="ССЫЛКА">внешность</a>
   </p>

   ЙОГО МОЖНА ПРЯМО КОПІЮВАТИ
   І ВСТАВЛЯТИ В БЛОК №3 АБО №4.
   ========================================================= */

.guest-item {
    display: block;

    width: 100%;

    margin: 0 0 7px;

    padding: 0;

    box-sizing: border-box;

    color: #444;

    font-family: inherit;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    text-align: center;
}

/* останній елемент */

.guest-item:last-child {
    margin-bottom: 0;
}

/* =========================================================
   ПОСИЛАННЯ НА ЗОВНІШНІСТЬ
   ========================================================= */

.guest-item a {
    color: #777;

    font-size: 11px;

    font-weight: 400;

    text-decoration: none;
}

.guest-item a:hover {
    color: #777;

    text-decoration: none;
}

/* =========================================================
   БЛОК "ПРИДЕРЖАТЬ ВНЕШНОСТЬ"
   ========================================================= */

.guest-hold {
    position: relative;

    z-index: 4;

    margin-top: 18px;

    padding: 20px;

    box-sizing: border-box;

    background: #f4f4f4;

    border-radius: 18px;
}

.guest-hold-title {
    margin: 0 0 10px;

    padding-left: 2px;

    color: #415549;

    font-size: 16px;

    font-weight: 700;
}

.guest-hold-info {
    margin-bottom: 16px;

    color: #777;

    font-size: 11px;

    line-height: 1.5;
}

/* =========================================================
   ФОРМА
   ========================================================= */

.guest-form {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;
}

/* =========================================================
   ПОЛЯ
   ========================================================= */

.guest-form .guest-input {
    flex: 1;

    min-width: 0;

    width: auto;

    height: 42px;

    padding: 10px 14px;

    box-sizing: border-box;

    border: 1px solid #cabeae;

    border-radius: 12px;

    background: #fafafa;

    color: #555;

    font-family: inherit;

    font-size: 11px;

    outline: none;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.guest-form .guest-input:focus {
    border-color: #cabeae;

    background: #fff;
}

.guest-form .guest-input::placeholder {
    color: #8a8a8a;
}

/* =========================================================
   МАЛЕНЬКА КНОПКА ГЕНЕРАЦІЇ
   ========================================================= */

.guest-form .guest-button {
    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    padding: 0;

    border: 0;

    border-radius: 12px;

    background: #cabeae;

    color: #415549;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .2s ease;
}

.guest-form .guest-button:hover {
    background: #cabeae;

    color: #415549;

    transform: translateY(-1px);
}

.guest-form .guest-button svg {
    width: 18px;

    height: 18px;
}

/* =========================================================
   ВІКНО HTML-КОДУ
   ========================================================= */

.guest-code-box {
    margin-top: 14px;

    padding: 16px 18px;

    box-sizing: border-box;

    background: #eeeeee;

    border-radius: 14px;
}

.guest-code-title {
    margin-bottom: 10px;

    color: #415549;

    font-size: 11px;

    font-weight: 700;
}

.guest-code-row {
    display: flex;

    align-items: center;

    gap: 10px;
}

.guest-code-input {
    flex: 1;

    min-width: 0;

    height: 42px;

    padding: 10px 14px;

    box-sizing: border-box;

    border: 1px solid #cabeae;

    border-radius: 12px;

    background: #fafafa;

    color: #777;

    font-family: monospace;

    font-size: 11px;

    line-height: 20px;

    resize: none;

    outline: none;

    overflow: hidden;
}

/* =========================================================
   КНОПКА КОПІЮВАННЯ HTML
   ========================================================= */

.guest-code-row .guest-button {
    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    padding: 0;

    border: 0;

    border-radius: 12px;

    background: #cabeae;

    color: #415549;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all .2s ease;
}

.guest-code-row .guest-button:hover {
    background: #cabeae;

    color: #415549;

    transform: translateY(-1px);
}

.guest-code-row .guest-button svg {
    width: 18px;

    height: 18px;
}

/* =========================================================
   СТАН "СКОПІЙОВАНО"
   ========================================================= */

.guest-button.copied {
    background: #cabeae;

    color: #415549;
}

/* =========================================================
   ПЛАНШЕТ
   ========================================================= */

@media (max-width: 850px) {

    .guest-wrap {
        padding: 24px;
    }

    .guest-body {
        grid-template-columns: 1fr;

        margin-top: 18px;
    }

    .guest-info {
        padding-bottom: 10px;
    }

}

/* =========================================================
   МОБІЛЬНИЙ
   ========================================================= */

@media (max-width: 600px) {

    .guest-wrap {
        margin: 15px auto;

        padding: 15px;

        border-radius: 18px;
    }

    .guest-header {
        height: 190px;

        border-radius: 14px;

        margin-top: -8px;

        margin-bottom: -8px;
    }

    .guest-header-title {
        left: 20px;

        bottom: 10px;

        font-size: 45px;
    }

    .guest-info {
        padding: 22px 20px;
    }

    /* =====================================================
       ФОРМА НА МОБІЛЬНОМУ
       ===================================================== */

    .guest-form {
        flex-direction: column;

        align-items: stretch;
    }

    .guest-form .guest-input {
        width: 100%;

        flex: none;
    }

    .guest-form .guest-button {
        width: 100%;

        flex: none;
    }

    /* =====================================================
       HTML-КОД НА МОБІЛЬНОМУ
       ===================================================== */

    .guest-code-row {
        flex-direction: column;

        align-items: stretch;
    }

    .guest-code-input {
        width: 100%;
    }

    .guest-code-row .guest-button {
        width: 100%;

        flex: none;
    }

}

</style>

<!-- =========================================================
     ПОЧАТОК БЛОКУ
     ========================================================= -->

<div class="guest-wrap">

    <!-- =====================================================
         №1 — ШАПКА
         ===================================================== -->

    <div class="guest-header">

        <div class="guest-header-title">
            pray&prey
        </div>

    </div>

    <!-- =====================================================
         №2 + №3
         ===================================================== -->

    <div class="guest-body">

        <!-- =================================================
             №2 — ІНФОРМАЦІЯ
             ================================================= -->

        <div class="guest-info">

            <ul>

                <li>
                    тематика: мистика (расы, открытый мир).
                    локация: денвер, сша.
                </li>

                <li>
                    внешности держим <strong>5 дней</strong>,
                    продлить можно 1 раз на 5 дней
                    (даты указаны включительно).
                </li>

                <li>
                    занятые внешности + имена/фамилии
                    можно посмотреть
                    <a href="#">здесь</a>.
                </li>

                <li>
                    заявки придерживают заказчики.
                </li>

                <li>
                    при выкупе внешности в банке
                    указываем ссылку на оплату и срок.
                </li>

                <li>
                    заменить внешность при выкупе
                    можно только в первый день покупки.
                </li>

                <li>
                    внешности для заявки выкупаются
                    <strong>только при наличии заявки.</strong>
                </li>

            </ul>

            <!-- ТЕГИ -->

            <div class="guest-tags">

                <a href="#" class="guest-tag">
                    faq о мире
                </a>

                <a href="#" class="guest-tag">
                    расы
                </a>

                <a href="#" class="guest-tag">
                    организации
                </a>

                <a href="#" class="guest-tag">
                    уровни мира
                </a>

                <a href="#" class="guest-tag">
                    сюжет
                </a>

            </div>

        </div>

        <!-- =================================================
             №3 — ДЛЯ СЕБЯ
             ================================================= -->

        <div class="guest-side">

            <div class="guest-side-box for-self">

                <div class="guest-label">
                    для себя
                </div>

                <div class="guest-side-content">

                    <!-- 4.10 -->

                    <div class="guest-side-item">

                        <span class="guest-date">
                            4.10
                        </span>

                        <p class="guest-item">
                            booboo stewart /
                            <a href="111">
                                eden lake
                            </a>
                        </p>

                    </div>

                    <!-- 9.10 -->

                    <div class="guest-side-item">

                        <span class="guest-date">
                            9.10
                        </span>

                        <p class="guest-item">
                            james spader /
                            <a href="111">
                                eden lake
                            </a>
                        </p>

                        <p class="guest-item">
                            mãdchen amick /
                            <a href="111">
                                diamond fern
                            </a>
                        </p>

                        <p class="guest-item">
                            stephen kalyn /
                            <a href="111">
                                diamond fern
                            </a>
                        </p>

                    </div>

                    <!-- 10.10 -->

                    <div class="guest-side-item">

                        <span class="guest-date">
                            10.10
                        </span>

                        <p class="guest-item">
                            belmont cameli /
                            <a href="111">
                                fraser mckee
                            </a>
                        </p>

                    </div>

                </div>

            </div>

            <!-- =================================================
                 №4 — ДЛЯ ЗАЯВОК
                 ================================================= -->

            <div class="guest-side-box for-requests">

                <div class="guest-label">
                    для заявок
                </div>

                <div class="guest-side-content">

                    <div class="guest-side-item">

                        <span class="guest-date">
                            27.09
                        </span>

                        <p class="guest-item">
                            lee felix /
                            <a href="111">
                                нужные персонажи
                            </a>
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- =====================================================
         ПРИДЕРЖАТЬ ВНЕШНОСТЬ
         ===================================================== -->

    <div class="guest-hold">

        <div class="guest-hold-title">
            придержать внешность
        </div>

        <div class="guest-hold-info">
            внешность придерживается на 5 дней,
            продлить можно 1 раз на 5 дней.
        </div>

        <!-- =================================================
             ФОРМА ГЕНЕРАЦІЇ
             ================================================= -->

        <div class="guest-form">

            <!-- ІМ'Я / НІК -->

    <input
    type="text"
    class="guest-input"
    id="guestName"
    placeholder="внешность"
>

<input
    type="text"
    class="guest-input"
    id="guestProfile"
    placeholder="ссылка на профиль"
>

<input
    type="text"
    class="guest-input"
    id="guestFace"
    placeholder="имя/ник"
>

            <!-- КНОПКА ГЕНЕРАЦІЇ -->

            <button
                type="button"
                class="guest-button"
                onclick="makeGuestCode()"
                title="Скопировать код"
            >

                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >

                    <rect
                        x="9"
                        y="9"
                        width="11"
                        height="11"
                        rx="2">
                    </rect>

                    <path
                        d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3">
                    </path>

                </svg>

            </button>

        </div>

        <!-- =================================================
             ГОТОВИЙ HTML-КОД
             ================================================= -->

        <div class="guest-code-box">

            <div class="guest-code-title">
                код для заявки
            </div>

            <div class="guest-code-row">

                <textarea
                    class="guest-code-input"
                    id="guestCode"
                    readonly
                    rows="1"
                ><p class="guest-item">внешность / <a href="ССЫЛКА НА ПРОФИЛЬ">имя</a></p></textarea>

                <button
                    type="button"
                    class="guest-button"
                    onclick="copyGuestCode()"
                    title="Скопировать код"
                >

                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >

                        <rect
                            x="9"
                            y="9"
                            width="11"
                            height="11"
                            rx="2">
                        </rect>

                        <path
                            d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3">
                        </path>

                    </svg>

                </button>

            </div>

        </div>

    </div>

</div>

<!-- =========================================================
     JAVASCRIPT
     ========================================================= -->

<script>

/* =========================================================
   ГЕНЕРАЦІЯ ГОТОВОГО КОДУ
   ========================================================= */

function makeGuestCode() {

    const name =
        document
        .getElementById('guestName')
        .value
        .trim();

    const profile =
        document
        .getElementById('guestProfile')
        .value
        .trim();

    const face =
        document
        .getElementById('guestFace')
        .value
        .trim();

    /* якщо не заповнені всі поля */

    if (!name || !profile || !face) {

        return;

    }

    /* =====================================================
       ФОРМУЄМО ТОЧНО ТАКИЙ САМИЙ ЕЛЕМЕНТ,
       ЯКИЙ ВИКОРИСТОВУЄТЬСЯ В БЛОКАХ №3 / №4
       ===================================================== */

    const code =
        '<p class="guest-item">' +
        name +
        ' / <a href="' +
        profile +
        '">' +
        face +
        '</a></p>';

    /* показуємо код */

    document
        .getElementById('guestCode')
        .value = code;

    /* одразу копіюємо */

    copyGuestCode();

}

/* =========================================================
   КОПІЮВАННЯ КОДУ
   ========================================================= */

function copyGuestCode() {

    const code =
        document
        .getElementById('guestCode');

    const button =
        document.querySelector(
            '.guest-code-row .guest-button'
        );

    /* =====================================================
       СУЧАСНИЙ СПОСІБ
       ===================================================== */

    if (
        navigator.clipboard &&
        window.isSecureContext
    ) {

        navigator.clipboard
            .writeText(code.value)

            .then(function() {

                button.classList.add('copied');

                setTimeout(function() {

                    button.classList.remove('copied');

                }, 1000);

            });

        return;

    }

    /* =====================================================
       FALLBACK ДЛЯ FORUM / RUSFF
       ===================================================== */

    code.focus();

    code.select();

    code.setSelectionRange(
        0,
        code.value.length
    );

    try {

        document.execCommand('copy');

        button.classList.add('copied');

        setTimeout(function() {

            button.classList.remove('copied');

        }, 1000);

    }

    catch (error) {

        /* код залишається виділеним,
           щоб його можна було скопіювати вручну */

    }

}

</script>[/html]

0

2

  • Автор: necromancer
  • Администратор
  • necromancer
  • Сообщений: 10
  • Уважение: +0
  • Последний визит:
    2026-09-23 20:21:16

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.

0

3

  • Автор: necromancer
  • Администратор
  • necromancer
  • Сообщений: 10
  • Уважение: +0
  • Последний визит:
    2026-09-23 20:21:16

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.

0

4

  • Автор: necromancer
  • Администратор
  • necromancer
  • Сообщений: 10
  • Уважение: +0
  • Последний визит:
    2026-09-23 20:21:16

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.

Код:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.
мммммммм

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.

0

5

  • Автор: necromancer
  • Администратор
  • necromancer
  • Сообщений: 10
  • Уважение: +0
  • Последний визит:
    2026-09-23 20:21:16

[hideprofile][html]
<div style="
    width:100%;
    max-width:1100px;
    margin:25px auto;
    padding:55px 35px 65px;
    box-sizing:border-box;

    background:#f5f5f5;

    border-radius:26px;

    font-family:Arial, Helvetica, sans-serif;
    color:#30302f;
">

    <!-- ============================= -->
    <!-- ЗАГОЛОВОК -->
    <!-- ============================= -->

    <div style="
        width:max-content;
        max-width:90%;

        margin:0 auto 70px;
        padding:11px 35px;

        box-sizing:border-box;

        background:#cabeae;

        color:#415549;

        border-radius:30px;

        font-size:10px;
        font-weight:bold;

        letter-spacing:1px;
        text-transform:uppercase;

        text-align:center;
    ">
        хронологія подій
    </div>

    <!-- ============================= -->
    <!-- ЦЕНТРАЛЬНАЯ ЛИНИЯ -->
    <!-- ============================= -->

    <div style="
        position:absolute;

        left:50%;

        width:2px;

        margin-top:0;

        background:#cabeae;
    "></div>

    <!-- ================================================= -->
    <!-- СОБЫТИЕ 1 -->
    <!-- ================================================= -->

    <div style="
        position:relative;

        display:flex;
        justify-content:flex-start;
        align-items:center;

        min-height:190px;

        margin-bottom:35px;
    ">

        <!-- КАРТОЧКА -->

        <div style="
            position:relative;

            width:calc(50% - 100px);

            padding:27px 30px;

            box-sizing:border-box;

            background:#ffffff;

            border-radius:24px;

            text-align:center;

            box-shadow:0 4px 18px rgba(65,85,73,.035);
        ">

            <!-- ЛИНИЯ К ЦЕНТРУ -->

            <div style="
                position:absolute;

                top:50%;
                right:-50px;

                width:50px;
                height:2px;

                background:#cabeae;

                transform:translateY(-50%);
            "></div>

            <!-- ТОЧКА -->

            <div style="
                position:absolute;

                top:50%;
                right:-56px;

                width:10px;
                height:10px;

                background:#415549;

                border:4px solid #f5f5f5;

                border-radius:50%;

                transform:translateY(-50%);
            "></div>

            <!-- НАЗВАНИЕ -->

            <div style="
                margin-bottom:12px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                letter-spacing:.5px;

                text-transform:uppercase;
            ">
                дескриптор
            </div>

            <!-- ТЕКСТ -->

            <div style="
                color:#30302f;

                font-size:10px;
                line-height:1.6;
            ">
                В Отделе тайн завершают работу над Дескриптором.
                Вскоре машина выходит за пределы расшифровки
                пророчеств и начинает рассчитывать возможное
                будущее. Разные сценарии снова и снова сходятся
                на одной дате — 31 октября 1981 года.
            </div>

            <!-- ССЫЛКА -->

            <a href="#" style="
                display:inline-block;

                margin-top:14px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                text-decoration:none;
            ">
                читать эпизод →
            </a>

        </div>

        <!-- ГОД -->

        <div style="
            position:absolute;

            left:50%;
            top:50%;

            width:78px;

            padding:9px 12px;

            box-sizing:border-box;

            transform:translate(-50%,-50%);

            z-index:5;

            background:#415549;

            color:#ffffff;

            border-radius:25px;

            font-size:10px;
            font-weight:bold;

            letter-spacing:1px;

            text-align:center;
        ">
            1975
        </div>

    </div>

    <!-- ================================================= -->
    <!-- СОБЫТИЕ 2 -->
    <!-- ================================================= -->

    <div style="
        position:relative;

        display:flex;
        justify-content:flex-end;
        align-items:center;

        min-height:190px;

        margin-bottom:35px;
    ">

        <div style="
            position:relative;

            width:calc(50% - 100px);

            padding:27px 30px;

            box-sizing:border-box;

            background:#ffffff;

            border-radius:24px;

            text-align:center;

            box-shadow:0 4px 18px rgba(65,85,73,.035);
        ">

            <div style="
                position:absolute;

                top:50%;
                left:-50px;

                width:50px;
                height:2px;

                background:#cabeae;

                transform:translateY(-50%);
            "></div>

            <div style="
                position:absolute;

                top:50%;
                left:-56px;

                width:10px;
                height:10px;

                background:#415549;

                border:4px solid #f5f5f5;

                border-radius:50%;

                transform:translateY(-50%);
            "></div>

            <div style="
                margin-bottom:12px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                letter-spacing:.5px;

                text-transform:uppercase;
            ">
                пророчество
            </div>

            <div style="
                color:#30302f;

                font-size:10px;
                line-height:1.6;
            ">
                Дескриптор связывает пророчество о будущем
                противнике Волдеморта с еще не родившимся
                ребенком Джеймса Поттера и Лили Эванс.
                Министр Гарольд Минчум решает не полагаться
                на пророчество и попытаться уничтожить
                Темного Лорда силами государства.
            </div>

            <a href="#" style="
                display:inline-block;

                margin-top:14px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                text-decoration:none;
            ">
                читать эпизод →
            </a>

        </div>

        <div style="
            position:absolute;

            left:50%;
            top:50%;

            width:78px;

            padding:9px 12px;

            box-sizing:border-box;

            transform:translate(-50%,-50%);

            z-index:5;

            background:#cabeae;

            color:#415549;

            border-radius:25px;

            font-size:10px;
            font-weight:bold;

            letter-spacing:1px;

            text-align:center;
        ">
            1979
        </div>

    </div>

    <!-- ================================================= -->
    <!-- СОБЫТИЕ 3 -->
    <!-- ================================================= -->

    <div style="
        position:relative;

        display:flex;
        justify-content:flex-start;
        align-items:center;

        min-height:190px;

        margin-bottom:35px;
    ">

        <div style="
            position:relative;

            width:calc(50% - 100px);

            padding:27px 30px;

            box-sizing:border-box;

            background:#ffffff;

            border-radius:24px;

            text-align:center;

            box-shadow:0 4px 18px rgba(65,85,73,.035);
        ">

            <div style="
                position:absolute;

                top:50%;
                right:-50px;

                width:50px;
                height:2px;

                background:#cabeae;

                transform:translateY(-50%);
            "></div>

            <div style="
                position:absolute;

                top:50%;
                right:-56px;

                width:10px;
                height:10px;

                background:#415549;

                border:4px solid #f5f5f5;

                border-radius:50%;

                transform:translateY(-50%);
            "></div>

            <div style="
                margin-bottom:12px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                letter-spacing:.5px;

                text-transform:uppercase;
            ">
                сорванная свадьба
            </div>

            <div style="
                color:#30302f;

                font-size:10px;
                line-height:1.6;
            ">
                Министерство срывает свадьбу Поттеров,
                рассчитывая отложить рождение ребенка.
                При следующем пересчете неожиданно меняется
                не только эта ветвь: 31 октября 1981 года
                исчезает из прогноза. Новый День К —
                31 октября 1984-го.
            </div>

            <a href="#" style="
                display:inline-block;

                margin-top:14px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                text-decoration:none;
            ">
                читать эпизод →
            </a>

        </div>

        <div style="
            position:absolute;

            left:50%;
            top:50%;

            width:78px;

            padding:9px 12px;

            box-sizing:border-box;

            transform:translate(-50%,-50%);

            z-index:5;

            background:#415549;

            color:#ffffff;

            border-radius:25px;

            font-size:10px;
            font-weight:bold;

            letter-spacing:1px;

            text-align:center;
        ">
            1979
        </div>

    </div>

    <!-- ================================================= -->
    <!-- СОБЫТИЕ 4 -->
    <!-- ================================================= -->

    <div style="
        position:relative;

        display:flex;
        justify-content:flex-end;
        align-items:center;

        min-height:190px;

        margin-bottom:35px;
    ">

        <div style="
            position:relative;

            width:calc(50% - 100px);

            padding:27px 30px;

            box-sizing:border-box;

            background:#ffffff;

            border-radius:24px;

            text-align:center;

            box-shadow:0 4px 18px rgba(65,85,73,.035);
        ">

            <div style="
                position:absolute;

                top:50%;
                left:-50px;

                width:50px;
                height:2px;

                background:#cabeae;

                transform:translateY(-50%);
            "></div>

            <div style="
                position:absolute;

                top:50%;
                left:-56px;

                width:10px;
                height:10px;

                background:#415549;

                border:4px solid #f5f5f5;

                border-radius:50%;

                transform:translateY(-50%);
            "></div>

            <div style="
                margin-bottom:12px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                letter-spacing:.5px;

                text-transform:uppercase;
            ">
                отставка минчума
            </div>

            <div style="
                color:#30302f;

                font-size:10px;
                line-height:1.6;
            ">
                Каждое вмешательство порождает новые цепочки,
                а решения по Дескриптору все сильнее замыкаются
                на одном человеке. Не справившись с системой,
                которую сам запустил, Минчум складывает
                полномочия.
            </div>

            <a href="#" style="
                display:inline-block;

                margin-top:14px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                text-decoration:none;
            ">
                читать эпизод →
            </a>

        </div>

        <div style="
            position:absolute;

            left:50%;
            top:50%;

            width:78px;

            padding:9px 12px;

            box-sizing:border-box;

            transform:translate(-50%,-50%);

            z-index:5;

            background:#cabeae;

            color:#415549;

            border-radius:25px;

            font-size:10px;
            font-weight:bold;

            letter-spacing:1px;

            text-align:center;
        ">
            1980
        </div>

    </div>

    <!-- ================================================= -->
    <!-- СОБЫТИЕ 5 -->
    <!-- ================================================= -->

    <div style="
        position:relative;

        display:flex;
        justify-content:flex-start;
        align-items:center;

        min-height:190px;

        margin-bottom:10px;
    ">

        <div style="
            position:relative;

            width:calc(50% - 100px);

            padding:27px 30px;

            box-sizing:border-box;

            background:#ffffff;

            border-radius:24px;

            text-align:center;

            box-shadow:0 4px 18px rgba(65,85,73,.035);
        ">

            <div style="
                position:absolute;

                top:50%;
                right:-50px;

                width:50px;
                height:2px;

                background:#cabeae;

                transform:translateY(-50%);
            "></div>

            <div style="
                position:absolute;

                top:50%;
                right:-56px;

                width:10px;
                height:10px;

                background:#415549;

                border:4px solid #f5f5f5;

                border-radius:50%;

                transform:translateY(-50%);
            "></div>

            <div style="
                margin-bottom:12px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                letter-spacing:.5px;

                text-transform:uppercase;
            ">
                план
            </div>

            <div style="
                color:#30302f;

                font-size:10px;
                line-height:1.6;
            ">
                Министром становится Миллисента Бэгнольд.
                Она создает тайный Директорат и превращает
                разрозненные вмешательства в План:
                Дескриптор считает, комиссия рассматривает
                варианты, министр принимает решение,
                Министерство исполняет — и будущее
                пересчитывается снова.
            </div>

            <a href="#" style="
                display:inline-block;

                margin-top:14px;

                color:#415549;

                font-size:10px;
                font-weight:bold;

                text-decoration:none;
            ">
                читать эпизод →
            </a>

        </div>

        <div style="
            position:absolute;

            left:50%;
            top:50%;

            width:78px;

            padding:9px 12px;

            box-sizing:border-box;

            transform:translate(-50%,-50%);

            z-index:5;

            background:#415549;

            color:#ffffff;

            border-radius:25px;

            font-size:10px;
            font-weight:bold;

            letter-spacing:1px;

            text-align:center;
        ">
            1980
        </div>

    </div>

</div>

[/html]

0

Страница: 1

Вы здесь » necro test » we are legacy » forgotten

Рейтинг форумов | Создать форум бесплатно