290 lines
13 KiB
HTML
290 lines
13 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">
|
|
<div class="guest_inner">
|
|
<!-- 1 -->
|
|
<div class="guest_item">
|
|
<div class="guest_index">
|
|
Стол 1
|
|
</div>
|
|
<div class="guest_item_list">
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 2 -->
|
|
<div class="guest_item">
|
|
<div class="guest_index">
|
|
Стол 1
|
|
</div>
|
|
<div class="guest_item_list">
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 3 -->
|
|
<div class="guest_item">
|
|
<div class="guest_index">
|
|
Стол 1
|
|
</div>
|
|
<div class="guest_item_list">
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
<div class="guest_name">
|
|
Lorem, ipsum.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="timetable">
|
|
<h4 class="people_title">
|
|
Расписание
|
|
</h4>
|
|
<div class="time_wrapper">
|
|
<div class="time_content">
|
|
<div class="time_inner">
|
|
<div class="time_row_up">
|
|
<!-- 1 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/ring.png" alt="ring" class="time_img">
|
|
<h6 class="time_h6">10:40</h6>
|
|
<p class="time_p">Церемония</p>
|
|
<div class="time_comment">Начало нашего свадебного дня и самый важный момент для нас</div>
|
|
</div>
|
|
</div>
|
|
<!-- 2 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/camera.png" alt="camera" class="time_img">
|
|
<h6 class="time_h6">11:30</h6>
|
|
<p class="time_p">Фотосессия</p>
|
|
<div class="time_comment">После церемонии мы ненадолго отправимся на фотосессию, чтобы сохранить этот день в памяти</div>
|
|
</div>
|
|
</div>
|
|
<!-- 3 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/wedding-dinner_11196102.png" alt="" class="time_img">
|
|
<h6 class="time_h6">14:00</h6>
|
|
<p class="time_p">Фуршет и бармен</p>
|
|
<div class="time_comment">Берем напиток, закуски и наслаждаемся началом вечера</div>
|
|
</div>
|
|
</div>
|
|
<!-- 4 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/free-icon-fireworks-7201451.png" alt="" class="time_img">
|
|
<h6 class="time_h6">14:30</h6>
|
|
<p class="time_p">Поздравления и подарки</p>
|
|
<div class="time_comment">Мы будем рады теплым словам и подаркам во время фуршета</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="time_line"></div>
|
|
<div class="time_row_down">
|
|
<!-- 5 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/food.png" alt="" class="time_img">
|
|
<h6 class="time_h6">17:00</h6>
|
|
<p class="time_p">Банкет</p>
|
|
<div class="time_comment">Приглашаем вас за столы, чтобы продолжить вечер в тёплой и уютной атмосфере. Приветственный тост</div>
|
|
</div>
|
|
</div>
|
|
<!-- 6 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/cake.png" alt="" class="time_img">
|
|
<h6 class="time_h6">19:00</h6>
|
|
<p class="time_p">Свадебный торт</p>
|
|
<div class="time_comment">Самый сладкий момент вечера. Чай или кофе находятся в велком зоне</div>
|
|
</div>
|
|
</div>
|
|
<!-- 7 -->
|
|
<div class="row_up_item">
|
|
<div class="time_img_box">
|
|
<img src="images/time/disco-ball_18181959.png" alt="" class="time_img">
|
|
<h6 class="time_h6">19:30</h6>
|
|
<p class="time_p">Танцы</p>
|
|
<div class="time_comment">Приглашаем вас на танцпол. Танцуйте столько, сколько захочется</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</content>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html> |