web_page_2.html - master - Junadla/Web

web_page_2.html
191 строка9 KB
Junadla
задание 2
24 янв 2025, 17:48
24 янв 2025, 17:483b4554f
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Магическая битва</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('https://wallpaper.forfun.com/fetch/a6/a610151897c6550b634ea34cde24542b.jpeg?w=1470&r=0.5625'); 
            background-attachment: fixed;
            background-size: cover; /* Заполнение всего фона */
            background-repeat: no-repeat; /* Избежать повторения изображения */
        }

        header {
            background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(0, 0, 0, 0.8)); /* Градиент от красного к черному */
            color: white;
            text-align: center;
            padding: 20px;
            text-shadow: 2px 2px 0 black, 
                         -2px -2px 0 black,
                         -2px 2px 0 black,
                         2px -2px 0 black; /* Черная обводка текста */
        }
        header h1 {
            font-size: 3em; /* Увеличиваем размер шрифта заголовка */
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.5); /* Полупрозрачный белый фон для контейнера */
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        section {
            border: 2px solid #800000;
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center; /* Центрирование заголовков */
            color: #800000; /* Бордовый цвет */
        }

        p {
            text-align: justify;
            text-indent: 1em;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            border: 1px solid #800000;
            padding: 10px;
            text-align: left;
        }

        th {
            font-weight: bold;
            color: #800000; /* Бордовый цвет */
        }

        form {
            display: flex;
            flex-direction: column;
        }

        input[type="text"], textarea {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #800000;
        }

        button {
            background-color: #800000; /* Бордовый цвет */
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #a00000; /* Более светлый бордовый */
        }

        blockquote {
            border-left: 5px solid #800000; /* Бордовая полоса */
            padding-left: 10px;
            font-style: italic;
        }

        footer {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8),  rgba(255, 0, 0, 0.8));
            color: white;
            text-align: center;
            padding: 30px;
            text-shadow: 2px 2px 0 black, 
                 -2px -2px 0 black,
                 -2px 2px 0 black,
                 2px -2px 0 black; /* Черная обводка текста */
        }
    </style>
</head>
<body>

<header>
    <h1>Магическая битва</h1>
</header>

<div class="container">

    <section>
        <h2><img src="favicon.ico" alt="Иконка">История</h2>
        <p>Юдзи Итадори — атлетически сложенный старшеклассник, живущий в Сендае вместе со своим дедушкой. Из-за своей нелюбви к спорту он постоянно избегает школьной команды по лёгкой атлетике, хоть и обладает сверхчеловеческой физической силой. Вместо этого он присоединяется к школьному клубу изучения оккультизма, зависает со старшеклассниками в нём и ровно в 17:00 уходит из школы, чтобы навещать своего дедушку Васукэ Итадори в больнице. На смертном одре дед оставляет Юдзи два наказа: «Всегда помогай людям» и «Умри, окружённый людьми». После его смерти подросток сводит для себя их в одно: каждый человек должен «уйти из жизни достойно».</p>
        <p>Однажды Юдзи сталкивается с Мэгуми Фусигуро, магом, что сообщает ему о нахождении в школе талисмана с высокоуровневым проклятием. Друзья Юдзи по оккультному клубу распечатали талисман, гниющий палец, и теперь он привлекает к школе Проклятия — созданий, рождающихся из негативных эмоций и становящихся сильнее, поглощая магическую силу магов или зачарованных вещей. Из-за нехватки магической силы Юдзи не может победить Проклятия и решает проглотить палец Сукуны, чтобы защитить Мэгуми и своих друзей. Так он становится сосудом для Сукуны, мощного Проклятия. Из-за злой натуры Сукуны все шаманы обязаны немедленно изгнать его, как только встретят, но Юдзи всё ещё оказывается способен контролировать своё тело, так что Сатору Годзё, учитель Мэгуми, решает перевести Юдзи в Токийский столичный магический колледж и предлагает план: собрать все пальцы, скормить их Юдзи и только после этого убить парня, тем самым навсегда уничтожив Сукуну.</p>
    </section>

    <section>
        <h2><img src="favicon.ico" alt="Иконка">Персонажи</h2>
        <table>
            <thead>
                <tr>
                    <th>Имя</th>
                    <th>Возраст</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Годжо Сатору</td>
                    <td>29 лет</td>
                </tr>
                <tr>
                    <td>Итадори Юдзи</td>
                    <td>15 лет</td>
                </tr>
                <tr>
                    <td>Фусигуро Мэгуми</td>
                    <td>16 лет</td>
                </tr>
                <tr>
                    <td>Сугуро Гето</td>
                    <td>27 лет</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section>
        <h2><img src="favicon.ico" alt="Иконка">Связь с нами</h2>
        <form action="#" method="post">
            <label for="name">Ваше имя:</label>
            <input type="text" id="name" name="name" required>

            <label for="comment">Комментарий:</label>
            <textarea id="comment" name="comment" rows="4" required></textarea>

            <button type="submit">Отправить</button>
        </form>
    </section>

    <section>
        <h2><img src="favicon.ico" alt="Иконка">Цитата дня</h2>
        <blockquote>"И неважно, сколько вокруг тебя будет союзников. Когда ты умираешь, ты всегда одинок." - Годжо Сатору</blockquote>
    </section>

</div>

<footer>
    Желаем удачи!
</footer>

</body>
</html>