Карта

body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; height: 100vh; background-color: #f0f0f0; } .container { display: flex; width: 100%; } .menu { width: 15%; /* Ширина меню */ background-color: #333; color: white; padding: 20px; overflow-y: auto; } .menu ul { list-style: none; padding: 0; } .menu ul li { padding: 10px; cursor: pointer; transition: background-color 0.3s; } .menu ul li:hover { background-color: #555; } .map-container { flex-grow: 1; position: relative; } .map { width: 100%; height: auto; } #imageContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-wrapper { position: absolute; text-align: center; cursor: pointer; opacity: 0; /* Начальная прозрачность для анимации */ animation: fadeIn 0.5s forwards; /* Анимация появления */ } @keyframes fadeIn { to { opacity: 1; } } .image-wrapper img { max-width: 1vw; /* Размер изображений (относительно ширины экрана) */ max-height: 1vw; } .image-wrapper .label { font-weight: bold; font-size: 1.5vw; /* Размер шрифта (относительно ширины экрана) */ background-color: rgba(255, 255, 255, 0.8); padding: 2px 5px; border-radius: 3px; margin-top: 5px; display: block; line-height: 1.2; white-space: pre-wrap; /* Перенос текста */ } .description-box { width: 20vw; /* Ширина блока описания (относительно ширины экрана) */ background-color: rgba(255, 255, 255, 0.9); border: 1px solid #ccc; padding: 10px; position: absolute; right: 2vw; /* Позиция справа (относительно ширины экрана) */ top: 2vw; /* Позиция сверху (относительно ширины экрана) */ display: none; /* Скрыт по умолчанию */ } .description-box img { max-width: 100%; height: auto; margin-bottom: 10px; } .description-box p { margin: 0; font-weight: bold; font-size: 1.2vw; /* Размер шрифта (относительно ширины экрана) */ }