<!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="style.css">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
    <!-- Подключаем Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        /* Основные стили для всего сайта */
        body {
            font-family: 'Roboto', serif;  /* Шрифт с засечками для строгого и элегантного вида */
            color: #f0f0f0;  /* Светлый текст для контраста */
            background-color: #2d2d2d;  /* Темный фон */
            margin: 0;
            padding: 0;
        }

        /* Стили для header */
        header {
            background-color: #1a1a1a;
            color: #f4c542;  /* Желтые акценты */
            padding: 20px;
            text-align: center;
        }

        header h1 {
			font-family: 'Lora', serif;
            font-size: 36px;
            margin: 0;
            font-weight: bold;
        }

        header nav ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
        }

        header nav ul li {
            display: inline-block;
            margin: 0 15px;
        }

        header nav ul li a {
            color: #f4c542;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
        }

        header nav ul li a:hover {
            color: #ffffff; /* При наведении цвет ссылки меняется на белый */
        }

        /* Блок hero */
        .hero {
            background-color: #1e1e1e;
            color: white;
            padding: 60px 20px;
            text-align: center;
            background-image: url('hero-image.jpg');  /* Фоновое изображение */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .hero h2 {
            font-size: 48px;
            margin: 0;
            font-weight: 700;
        }

        .hero p {
			font-family: 'Merriweather', serif;
            font-size: 20px;
            font-weight: 300;
            margin-top: 15px;
        }

        /* Стили для контента */
        .content-section {
            padding: 40px 20px;
            background-color: #333;
            text-align: center;
        }

        .content-section h3 {
            font-size: 30px;
            font-weight: bold;
        }

        .content-section p {
			font-family: 'Merriweather', serif;
            font-size: 18px;
            line-height: 1.6;
        }

        /* Галерея изображений */
        .image-gallery {
            text-align: center;
            margin: 40px 0;
        }

        .image-gallery img {
            width: 300px;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            margin: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* Секция карты */
        .map-section {
            margin: 40px 0;
        }

        /* Стили для footer */
        footer {
            background-color: #1a1a1a;
            color: #f0f0f0;
            text-align: center;
            padding: 20px;
        }

        footer p {
			font-family: 'Merriweather', serif;
            font-size: 14px;
            margin: 0;
        }

        /* Стиль для кнопок и ссылок */
        .btn {
            background-color: #f4c542;
            color: #1a1a1a;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            border-radius: 5px;
			cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .btn:hover {
            background-color: #ffffff;
            color: #1a1a1a;
			transform: scale(1.05);
        }
        
        /* Настройки для карты */
        #map {
            height: 400px;
            margin-top: 20px;
        }
		
		a {
          transition: color 0.3s ease, background-color 0.3s ease;
          }
		  
		a:hover {
                color: #0056b3; /* Цвет при наведении */
                background-color: rgba(0, 123, 255, 0.1); /* Легкий фон при наведении */
                }
    </style>
</head>
<body>

    <header>
        <div class="container">
            <h1>Мои Путешествия</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Главная</a></li>
                    <li><a href="travels.html">Мои путешествия</a></li>
                    <li><a href="contact.html">Контакты</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <h2>Добро пожаловать в мир путешествий</h2>
            <p>Исследуйте удивительные уголки мира через мои путешествия. Красота природы, культуры и истории.</p>
            <a href="travels.html" class="btn">Посмотреть путешествия</a>
        </div>
    </section>

    <section class="content-section">
        <div class="container">
            <h3>Путешествие по Калининграду</h3>
            <p>Калининград — город с уникальной историей, расположенный на Балтийском море. Здесь переплетаются старинная архитектура и потрясающие природные пейзажи.</p>
            <a href="kaliningrad.html" class="btn">Подробнее</a>
        </div>
    </section>

    <section class="image-gallery">
        <img src="image1.jpg" alt="Кафедральный собор Калининграда">
        <img src="image2.jpg" alt="Музей янтаря Калининград">
        <img src="image3.jpg" alt="Парк Юность, Калининград">
    </section>

    <!-- Карта с метками достопримечательностей -->
    <section class="map-section">
        <div id="map"></div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2025 Мои Путешествия | Все права защищены</p>
        </div>
    </footer>

    <!-- Подключаем Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([54.7106, 20.5019], 12);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var locations = [
            {lat: 54.7106, lon: 20.5019, name: 'Кафедральный собор Калининграда', description: 'Готический собор XIV века, расположенный на острове Канта.'},
            {lat: 54.7115, lon: 20.5126, name: 'Музей янтаря', description: 'Музей, посвященный янтарю, расположен в здании бывшего склада.'},
            {lat: 54.7060, lon: 20.4597, name: 'Парк Юность', description: 'Прекрасный городской парк с прудом и зелеными аллеями.'}
        ];

        locations.forEach(function(location) {
            L.marker([location.lat, location.lon])
                .addTo(map)
                .bindPopup('<b>' + location.name + '</b><br>' + location.description);
        });
    </script>

</body>
</html>
