Wiki Владимир:Авторские права

Материал из wiki Владимир
Перейти к навигации Перейти к поиску
Наша команда: Железная логика


<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       }
       
       body {
           background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
           color: #333;
           min-height: 100vh;
           padding: 20px;
       }
       
       .container {
           display: flex;
           max-width: 1400px;
           margin: 0 auto;
           background-color: white;
           border-radius: 15px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           min-height: 90vh;
       }
       
       /* Левая панель с участниками */
       .participants-panel {
           width: 35%;
           background-color: #2c3e50;
           color: white;
           padding: 30px 20px;
           overflow-y: auto;
       }
       
       .participants-panel h2 {
           text-align: center;
           margin-bottom: 25px;
           font-size: 28px;
           color: #ecf0f1;
           padding-bottom: 15px;
           border-bottom: 2px solid #3498db;
       }
       
       .participant-list {
           display: flex;
           flex-direction: column;
           gap: 15px;
       }
       
       .participant-item {
           display: flex;
           align-items: center;
           padding: 15px;
           background-color: rgba(255, 255, 255, 0.1);
           border-radius: 10px;
           cursor: pointer;
           transition: all 0.3s ease;
           border-left: 4px solid transparent;
       }
       
       .participant-item:hover {
           background-color: rgba(255, 255, 255, 0.15);
           transform: translateX(5px);
       }
       
       .participant-item.active {
           background-color: rgba(52, 152, 219, 0.3);
           border-left: 4px solid #3498db;
       }
       
       .avatar {
           width: 60px;
           height: 60px;
           border-radius: 50%;
           overflow: hidden;
           margin-right: 15px;
           border: 3px solid #3498db;
       }
       
       .avatar img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }
       
       .participant-info {
           flex-grow: 1;
       }
       
       .participant-name {
           font-weight: 600;
           font-size: 18px;
           margin-bottom: 5px;
       }
       
       .participant-category {
           font-size: 14px;
           color: #bdc3c7;
       }
       
       /* Правая панель с описанием */
       .description-panel {
           width: 65%;
           padding: 40px;
           overflow-y: auto;
       }
       
       .description-panel h2 {
           color: #2c3e50;
           font-size: 32px;
           margin-bottom: 10px;
           padding-bottom: 10px;
           border-bottom: 2px solid #3498db;
       }
       
       .participant-category-badge {
           display: inline-block;
           background-color: #3498db;
           color: white;
           padding: 5px 15px;
           border-radius: 20px;
           font-size: 14px;
           margin-bottom: 25px;
       }
       
       .description-content {
           margin-top: 20px;
       }
       
       .description-text {
           line-height: 1.6;
           font-size: 16px;
           margin-bottom: 25px;
           color: #555;
       }
       
       .participant-details {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
           margin-bottom: 30px;
       }
       
       .detail-item {
           background-color: #f8f9fa;
           padding: 15px;
           border-radius: 8px;
           border-left: 4px solid #3498db;
       }
       
       .detail-item h4 {
           color: #2c3e50;
           margin-bottom: 8px;
           font-size: 16px;
       }
       
       .detail-item p {
           color: #666;
           font-size: 14px;
       }
       
       .participant-stats {
           display: flex;
           justify-content: space-between;
           margin-top: 30px;
       }
       
       .stat-item {
           text-align: center;
           padding: 15px;
           background-color: #f8f9fa;
           border-radius: 10px;
           flex: 1;
           margin: 0 10px;
       }
       
       .stat-value {
           font-size: 28px;
           font-weight: 700;
           color: #2c3e50;
       }
       
       .stat-label {
           font-size: 14px;
           color: #7f8c8d;
           margin-top: 5px;
       }
       
       .no-selection {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           height: 100%;
           color: #7f8c8d;
           text-align: center;
       }
       
       .no-selection i {
           font-size: 60px;
           margin-bottom: 20px;
           color: #bdc3c7;
       }
       
       .no-selection h3 {
           font-size: 24px;
           margin-bottom: 10px;
       }
       
       /* Адаптивность */
       @media (max-width: 992px) {
           .container {
               flex-direction: column;
               max-width: 95%;
           }
           
           .participants-panel, .description-panel {
               width: 100%;
           }
           
           .participants-panel {
               max-height: 40vh;
           }
           
           .description-panel {
               max-height: 60vh;
           }
           
           .participant-details {
               grid-template-columns: 1fr;
           }
       }
       
       @media (max-width: 576px) {
           .participant-stats {
               flex-direction: column;
               gap: 15px;
           }
           
           .stat-item {
               margin: 0;
           }
           
           .description-panel {
               padding: 25px;
           }
       }
   </style>

</head> <body>

Участники конкурса

                       <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Александр Петров">
Александр Петров
Дизайн интерьеров
                       <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Мария Смирнова">
Мария Смирнова
Графический дизайн
                       <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Дмитрий Иванов">
Дмитрий Иванов
Веб-разработка
                       <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Екатерина Козлова">
Екатерина Козлова
Фотография
                       <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Илья Соколов">
Илья Соколов
Видеомонтаж

Александр Петров

Дизайн интерьеров
                       Александр — талантливый дизайнер интерьеров с более чем 10-летним опытом работы. 
                       Специализируется на создании современных жилых и коммерческих пространств, 
                       сочетающих функциональность и эстетику. Его работы отмечены несколькими 
                       профессиональными наградами в области дизайна.

Образование

Московский архитектурный институт, факультет дизайна интерьеров

Опыт работы

12 лет в сфере дизайна интерьеров, 5 лет преподавания

Специализация

Жилые интерьеры, офисные пространства, рестораны и кафе

Награды

3 премии "Дизайнер года", 2 золотых медали на международных выставках

150+
Завершенных проектов
98%
Довольных клиентов
12
Профессиональных наград
   <script>
       document.addEventListener('DOMContentLoaded', function() {
           const participantItems = document.querySelectorAll('.participant-item');
           const participantDescriptions = document.querySelectorAll('.participant-description');
           
           // Функция для переключения активного участника
           function setActiveParticipant(participantId) {
               // Убираем активный класс у всех участников
               participantItems.forEach(item => {
                   item.classList.remove('active');
               });
               
               // Добавляем активный класс выбранному участнику
               const selectedItem = document.querySelector(`.participant-item[data-id="${participantId}"]`);
               selectedItem.classList.add('active');
               
               // Скрываем все описания
               participantDescriptions.forEach(desc => {
                   desc.style.display = 'none';
               });
               
               // Показываем описание выбранного участника
               const selectedDescription = document.getElementById(`description-${participantId}`);
               selectedDescription.style.display = 'block';
           }
           
           // Добавляем обработчики событий для каждого участника
           participantItems.forEach(item => {
               item.addEventListener('click', function() {
                   const participantId = this.getAttribute('data-id');
                   setActiveParticipant(participantId);
               });
           });
           
           // Инициализация с первым активным участником
           setActiveParticipant(1);
       });
   </script>

</body> </html>

Источник — https://wiki.i-edu.ru/mediawiki/index.php?title=Wiki_Владимир:Авторские_права&oldid=76482