meditations.html - master - aramatsis/BackToYourself

meditations.html
220 строк8 KB
aramatsis
create: about.html, audio.html, blog.html, channellings.html, contact.html, index.html, literature.html, login.html, meditations.html, recover.html, register.html, videos.html
05 апр 2026, 13:32
Верифицирован
05 апр 2026, 13:32c604255
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Медитации — Мой путь к себе</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Montserrat', sans-serif;
            background: #f4f4f4;
            color: #333;
        }
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 5%;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        .logo {
            font-size: 1.8em;
            font-weight: bold;
            color: #4a4a9e;
        }
        nav ul {
            display: flex;
            list-style: none;
        }
        nav ul li {
            margin-left: 30px;
        }
        nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: 600;
            transition: color 0.3s;
        }
        nav ul li a:hover {
            color: #4a4a9e;
        }
        .auth {
            margin-left: 40px;
        }
        main {
            margin-top: 80px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .videos {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 40px 0;
            width: 100%;
        }
        .video-item {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .video-item:hover {
            transform: translateY(-5px);
        }
        .video-item img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        .video-item .title {
            padding: 10px;
            text-align: center;
            font-weight: 600;
        }
        .audio-section {
            margin-top: 50px;
            width: 100%;
            max-width: 800px;
            text-align: center;
        }
        .audio-section h2 {
            margin-bottom: 20px;
            color: #4a4a9e;
        }
        .audio-player {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        footer {
            background: #333;
            color: #fff;
            padding: 40px 5%;
            text-align: center;
            margin-top: 50px;
        }
        footer p {
            margin: 10px 0;
        }
        footer a {
            color: #4a9eff;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">Мой путь к себе</div>
        <nav>
            <ul>
                <li><a href="index.html">Главная</a></li>
                <li><a href="meditations.html">Медитации</a></li>
                <li><a href="blog.html">Блог</a></li>
                <li><a href="about.html">О сайте</a></li>
            </ul>
        </nav>
        <div class="auth">
            <a href="login.html">Авторизация</a>
        </div>
    </header>

    <main>
        <h1>Медитации</h1>
<section class="videos">
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Любовь к своему телу</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Прощение себя</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Прощение других</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Смелость</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Нейтралитет и Принятие</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Благодарность</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Празднование</div>
    </div>
    <div class="video-item">
        <video controls width="100%" height="180" style="object-fit: cover;" poster="images/key1.jpeg">
            <source src="video/key1.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <div class="title">Благоговение</div>
    </div>
</section>

        <section class="audio-section">
            <h2>Аудио для медитаций</h2>
            <div class="audio-player">
                <img src="images/key9.jpeg" alt="Аудио медитация" style="width: 100%; max-width: 300px; border-radius: 10px; margin-bottom: 15px;">
                <p>Погрузитесь в глубокое состояние покоя.</p>
                <audio controls style="margin-top: 10px;">
                    <source src="audio/meditation1.mp3" type="audio/mpeg">
                    Ваш браузер не поддерживает аудио.
                </audio>
            </div>
        </section>
    </main>

    <footer>
        <p><a href="index.html">Главная</a> | <a href="meditations.html">Медитации</a> | <a href="videos.html">Видео</a> | <a href="blog.html">Блог</a> | <a href="audio.html">Аудио</a> | <a href="literature.html">Литература</a> | <a href="channellings.html">Ченнелинги</a> | <a href="about.html">О сайте</a> | <a href="contact.html">Контакты</a></p>
        <p>Телефон: +7 (XXX) XXX-XX-XX | Email: info@mypath.ru | Мессенджер: MAX</p>
        <p>&copy; 2026 Мой путь к себе. Все права защищены.</p>
    </footer>
</body>
</html>