|
<!DOCTYPE html>
|
|
<html lang="uk">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Наша Історія</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Наша Історія</h1>
|
|
<p>Сім розділів нашого життя, наповнені емоціями та спогадами</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="menu">
|
|
<h2>Обери розділ:</h2>
|
|
<ul>
|
|
<li><a href="#section1">1. А якщо</a></li>
|
|
<li><a href="#section2">2. Разом</a></li>
|
|
<li><a href="#section3">3. Любити</a></li>
|
|
<li><a href="#section4">4. Життя</a></li>
|
|
<li><a href="#section5">5. По справжньому</a></li>
|
|
<li><a href="#section6">6. Радіти</a></li>
|
|
<li><a href="#section7">7. Мріяти</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
|
|
|
|
<section id="section1" class="content">
|
|
<h2>1. А якщо</h2>
|
|
<div class="media">
|
|
<h3>Фотогалерея:</h3>
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="images/photo1.jpg" alt="Фото 1"></div>
|
|
<div class="swiper-slide"><img src="images/photo2.jpg" alt="Фото 2"></div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
|
|
<h3>Відео:</h3>
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
|
|
|
|
<h3>Аудіо:</h3>
|
|
<audio controls>
|
|
<source src="audio/wedding-audio1.mp3" type="audio/mpeg">
|
|
Ваш браузер не підтримує аудіо.
|
|
</audio>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="section2" class="content">
|
|
<h2>2. Разом</h2>
|
|
<div class="media">
|
|
<h3>Фотогалерея:</h3>
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="images/photo3.jpg" alt="Фото 3"></div>
|
|
<div class="swiper-slide"><img src="images/photo4.jpg" alt="Фото 4"></div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
|
|
<h3>Відео:</h3>
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID_2" frameborder="0" allowfullscreen></iframe>
|
|
|
|
<h3>Аудіо:</h3>
|
|
<audio controls>
|
|
<source src="audio/wedding-audio2.mp3" type="audio/mpeg">
|
|
Ваш браузер не підтримує аудіо.
|
|
</audio>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="section3" class="content">
|
|
<h2>3. Любити</h2>
|
|
<div class="media">
|
|
<h3>Фотогалерея:</h3>
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="images/photo5.jpg" alt="Фото 5"></div>
|
|
<div class="swiper-slide"><img src="images/photo6.jpg" alt="Фото 6"></div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
|
|
<h3>Відео:</h3>
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID_3" frameborder="0" allowfullscreen></iframe>
|
|
|
|
<h3>Аудіо:</h3>
|
|
<audio controls>
|
|
<source src="audio/wedding-audio3.mp3" type="audio/mpeg">
|
|
Ваш браузер не підтримує аудіо.
|
|
</audio>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
<script>
|
|
var swiper = new Swiper('.swiper-container', {
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
