320 lines
11 KiB
HTML
320 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Wedding invitation</title>
|
|
<link rel="stylesheet" href="reset.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="header">
|
|
<nav class="nav">
|
|
<ul class="menu">
|
|
<!-- 1 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Добро пожаловать!
|
|
</a>
|
|
</li>
|
|
<!-- 2 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Люди
|
|
</a>
|
|
</li>
|
|
<!-- 3 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Расписание
|
|
</a>
|
|
</li>
|
|
<!-- 4 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Путешествие
|
|
</a>
|
|
</li>
|
|
<!-- 5 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Фотографии
|
|
</a>
|
|
</li>
|
|
<!-- 6 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Список задач
|
|
</a>
|
|
</li>
|
|
<!-- 7 -->
|
|
<li class="item">
|
|
<a href="#" class="link">
|
|
Прошу ответить
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<content class="content">
|
|
<section class="heading">
|
|
<article class="heading_content">
|
|
<div class="heading_cont">
|
|
<h1 class="heding_title">Дмитрий и Алёна</h1>
|
|
<h2 class="heading_info">
|
|
Наша история
|
|
</h2>
|
|
<h3 class="heading_date">22 августа 2026</h3>
|
|
<p class="heading_text">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste possimus ipsa, labore repudiandae
|
|
ratione placeat dolore vitae praesentium perspiciatis ipsam non illum reiciendis accusamus quae
|
|
quo veritatis maiores quod sequi. Ipsam at consequatur quia recusandae, rem dicta autem quaerat
|
|
placeat?
|
|
</p>
|
|
<button class="btn_share" button>
|
|
Подтвердить участие
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<aside>
|
|
<div class="time">
|
|
<!-- отсчет до даты -->
|
|
00:00:00
|
|
</div>
|
|
</aside>
|
|
<section class="people">
|
|
<h4 class="people_title">
|
|
Люди
|
|
</h4>
|
|
<div class="newlywed">
|
|
<div class="newlywed_item">
|
|
<img class="img_newlywed" src="images/people//IMG_20260107_140110_500.jpg" alt="groom">
|
|
<div class="newlywed_text">
|
|
<h3 class="newlywed_title">Жених</h3>
|
|
<p class="newlywed_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui voluptatum
|
|
odio autem, ut dolorum suscipit soluta reiciendis quam reprehenderit saepe doloribus asperiores
|
|
architecto? Debitis magnam, exercitationem nam temporibus eos molestias?</p>
|
|
</div>
|
|
</div>
|
|
<div class="newlywed_item">
|
|
<img class="img_newlywed" src="images/people/IMG_20260107_140120_301.jpg" alt="bride">
|
|
<div class="newlywed_text">
|
|
<h3 class="newlywed_title">Невеста</h3>
|
|
<p class="newlywed_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui voluptatum
|
|
odio autem, ut dolorum suscipit soluta reiciendis quam reprehenderit saepe doloribus asperiores
|
|
architecto? Debitis magnam, exercitationem nam temporibus eos molestias?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="guest_list">
|
|
<table>
|
|
<thead>
|
|
<th class="table_title" colspan="5">Список гостей</th>
|
|
</thead>
|
|
<tr>
|
|
<th class="table_name">Имя</th>
|
|
<th class="table_name">Фамилия</th>
|
|
<th class="table_name">Номер стола</th>
|
|
<th class="table_name">Основное блюдо</th>
|
|
<th class="table_name">Алкоголь</th>
|
|
</tr>
|
|
<!-- 1 -->
|
|
<tr>
|
|
<td>Дмитрий</td>
|
|
<td>Селяков</td>
|
|
<td>Президиум</td>
|
|
<td>Мясо</td>
|
|
<td>Шампанское</td>
|
|
</tr>
|
|
<!--2 -->
|
|
<tr>
|
|
<td>Алёна</td>
|
|
<td>Трущёва</td>
|
|
<td>Президиум</td>
|
|
<td>Мясо</td>
|
|
<td>Шампанское</td>
|
|
</tr>
|
|
<!-- 3 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 4 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 5 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!--6 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 7 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 8 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 9 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 10 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 11 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 12 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 13 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 14 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 15 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 16 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 17 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 18 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 19 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 20 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 21 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<!-- 22 -->
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<section class="timetable">
|
|
<h4 class="people_title">
|
|
Расписание
|
|
</h4>
|
|
<div class="time_wrapper">
|
|
<div class="time_content">
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</content>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html> |