Участник:Математические маги: различия между версиями

Материал из wiki Владимир
Перейти к навигации Перейти к поиску
(Содержимое страницы заменено на «Сетевой проект Две звезды в созвездии Числа/Страница команды Математи...»)
Метки: замена ручная отмена
 
Строка 1: Строка 1:
[[Сетевой проект Две звезды в созвездии Числа/Страница команды Математические маги|Страница команды Математические маги|]];
[[Сетевой проект Две звезды в созвездии Числа/Страница команды Математические маги|Страница команды Математические маги|]];
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Наша Команда</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f5; /* Светло-серый фон */
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden; /* Предотвращает выход фона из контейнера */
        }
        h1 {
            text-align: center;
            color: #4a00e0; /* Темный фиолетовый для заголовка */
            margin-bottom: 20px;
        }
        .team-photo {
            text-align: center;
            margin-bottom: 30px;
        }
        .team-photo img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .team-members {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .member-card {
            width: calc(33% - 20px);
            margin: 10px;
            padding: 15px;
            background-color: #e6e6fa; /* Светло-фиолетовый */
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .member-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
        }
        .member-card h3 {
            color: #4a00e0;
            margin-bottom: 5px;
        }
        .member-card p {
            color: #555;
        }
        .panel {
            background-color: #c2bfff; /* Светло-фиолетовый */
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            color: #333;
        }
        .panel h2 {
            color: #4a00e0;
            margin-bottom: 10px;
        }
        .panel ul {
            list-style: none;
            padding: 0;
        }
        .panel li {
            margin-bottom: 5px;
        }
        .bg-gradient {
            background: linear-gradient(135deg, #a2c0ff, #c2bfff);
            background-size: cover;
            background-repeat: no-repeat;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        @media (max-width: 768px) {
            .member-card {
                width: calc(50% - 20px);
            }
        }
        @media (max-width: 500px) {
            .member-card {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="bg-gradient"></div>
    <div class="container">
        <h1>Добро пожаловать на нашу страницу</h1>
        <div class="team-photo">
            <img src="https://placekitten.com/800/300" alt="Фото нашей команды">
        </div>
        <div class="team-members">
            <div class="member-card">
                <img src="https://placekitten.com/100/100" alt="Фото участника 1">
                <h3>Участник 1</h3>
                <p>Описание участника 1. Это крутой человек, который умеет в дизайн.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/101/101" alt="Фото участника 2">
                <h3>Участник 2</h3>
                <p>Описание участника 2. Она отвечает за коммуникацию в нашей команде.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/102/102" alt="Фото участника 3">
                <h3>Участник 3</h3>
                <p>Описание участника 3. Он - наш гений программирования.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/103/103" alt="Фото участника 4">
                <h3>Участник 4</h3>
                <p>Описание участника 4. Она - мастер по презентациям.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/104/104" alt="Фото участника 5">
                <h3>Участник 5</h3>
                <p>Описание участника 5. Занимается анализом данных.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/105/105" alt="Фото участника 6">
                <h3>Участник 6</h3>
                <p>Описание участника 6. Отвечает за творческую часть проекта.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/106/106" alt="Фото участника 7">
                <h3>Участник 7</h3>
                <p>Описание участника 7. Он следит за порядком в проекте.</p>
            </div>
            <div class="member-card">
                <img src="https://placekitten.com/107/107" alt="Фото участника 8">
                <h3>Участник 8</h3>
                <p>Описание участника 8. Она - наш главный критик.</p>
            </div>
        </div>
        <div class="panel">
            <h2>Информация об Учителе</h2>
            <p>Наш учитель - это опытный специалист, который всегда готов помочь и направить нас.</p>
        </div>
        <div class="panel">
            <h2>Информация о Школе</h2>
            <p>Мы гордимся, что учимся в нашей замечательной школе, которая дает нам отличные знания.</p>
        </div>
          <div class="panel">
              <h2>Наш девиз</h2>
              <p>Вместе мы сила, вместе мы команда! Идём только вперёд!</p>
          </div>
          <div class="panel">
              <h2>Список задач</h2>
              <ul>
                  <li>Первая задача: Найти решение.</li>
                  <li>Вторая задача: Провести анализ.</li>
                  <li>Третья задача: Сделать вывод.</li>
                  <li>Четвёртая задача: Зафиксировать результат.</li>
              </ul>
          </div>
    </div>
</body>
</html>

Текущая версия на 11:49, 1 февраля 2025