Alena/Wedding-invitation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

section_people_table

Browse Source
This commit is contained in:
Alena Trushcheva
2026-01-20 19:27:49 +03:00
parent 8c296b3d9c
commit 3e89c1614c
21 changed files with 247 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/55555.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
images/time/beverage_4137183.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/time/cake.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/time/camera.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/time/disco-ball_1034052.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/time/disco-ball_18181959.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
images/time/food.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/time/free-icon-fireworks-7201451.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
images/time/glasses.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/time/love-letter_6425091.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/time/love-world_18905915.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
images/time/message_6649165.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/time/ring.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/time/table.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/time/wedding-day-schedule-template-design_23-2150790236.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
images/time/wedding-dinner_11196102.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/Без названия (2).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/Без названия (3).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
images/Элегантный свадебный банкет_ пастельные цветы и золотые детали.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

346
index.html
View File

@@ -23,7 +23,7 @@
<!-- 2 --> <!-- 2 -->
<li class="item"> <li class="item">
<a href="#" class="link"> <a href="#" class="link">
Люди Список гостей
</a> </a>
</li> </li>
<!-- 3 --> <!-- 3 -->
@@ -89,7 +89,7 @@
</aside> </aside>
<section class="people"> <section class="people">
<h4 class="people_title"> <h4 class="people_title">
Люди Список гостей
</h4> </h4>
<div class="newlywed"> <div class="newlywed">
<div class="newlywed_item"> <div class="newlywed_item">
@@ -112,194 +112,95 @@
</div> </div>
</div> </div>
<div class="guest_list"> <div class="guest_list">
<table> <div class="guest_inner">
<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 --> <!-- 1 -->
<tr> <div class="guest_item">
<td>Дмитрий</td> <div class="guest_index">
<td>Селяков</td> Стол 1
<td>Президиум</td> </div>
<td>Мясо</td> <div class="guest_item_list">
<td>Шампанское</td> <div class="guest_name">
</tr> 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 --> <!-- 2 -->
<tr> <div class="guest_item">
<td>Алёна</td> <div class="guest_index">
<td>Трущёва</td> Стол 1
<td>Президиум</td> </div>
<td>Мясо</td> <div class="guest_item_list">
<td>Шампанское</td> <div class="guest_name">
</tr> 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 --> <!-- 3 -->
<tr> <div class="guest_item">
<td></td> <div class="guest_index">
<td></td> Стол 1
<td></td> </div>
<td></td> <div class="guest_item_list">
<td></td> <div class="guest_name">
</tr> Lorem, ipsum.
<!-- 4 --> </div>
<tr> <div class="guest_name">
<td></td> Lorem, ipsum.
<td></td> </div>
<td></td> <div class="guest_name">
<td></td> Lorem, ipsum.
<td></td> </div>
</tr> <div class="guest_name">
<!-- 5 --> Lorem, ipsum.
<tr> </div>
<td></td> <div class="guest_name">
<td></td> Lorem, ipsum.
<td></td> </div>
<td></td> <div class="guest_name">
<td></td> Lorem, ipsum.
</tr> </div>
<!--6 --> <div class="guest_name">
<tr> Lorem, ipsum.
<td></td> </div>
<td></td> </div>
<td></td> </div>
<td></td> </div>
<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> </div>
</section> </section>
<section class="timetable"> <section class="timetable">
@@ -308,7 +209,76 @@
</h4> </h4>
<div class="time_wrapper"> <div class="time_wrapper">
<div class="time_content"> <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>
</div> </div>
</section> </section>

113
style.css
View File

@@ -162,6 +162,7 @@ img {
width: 1400px; width: 1400px;
margin: 0 auto; margin: 0 auto;
padding-bottom: 40px; padding-bottom: 40px;
padding-top: 40px;
} }
h4 { h4 {
display: block; display: block;
@@ -210,34 +211,30 @@ h4 {
font-size: 26px; font-size: 26px;
} }
.guest_list { .guest_list {
width: 70%;
margin: 0 auto;
} }
table { .guest_inner {
table-layout: fixed; display: flex;
background-color:rgba(229, 185, 126, 0.9); justify-content: space-around;
border-collapse: collapse;
box-shadow: #000 2px 4px 10px 1px;
width: 100%;
border: 3px solid #000;
} }
.table_title { .guest_item {
font-size: 34px;
font-weight: 900;
line-height: 2.2;
text-decoration: underline;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
}
.table_name {
font-size: 32px;
border-bottom: 3px solid #000;
}
th, td {
border: 2px solid #000;
height: 50px;
font-size: 32px;
text-align: center; text-align: center;
background: url("images/Элегантный\ свадебный\ банкет_\ пастельные\ цветы\ и\ золотые\ детали.jpg") 100% 100% / cover;
padding: 40px 80px;
border-radius: 33px;
}
.guest_index {
font-size: 48px;
font-weight: 900;
font-style: italic;
color: rgb(252, 220, 180);
}
.guest_item_list {
}
.guest_name {
font-size: 36px;
font-style: italic;
color: #e5b97e;
} }
/* ---------------------------------TIMETABLE----------------------------------- */ /* ---------------------------------TIMETABLE----------------------------------- */
@@ -248,8 +245,70 @@ th, td {
} }
.time_wrapper { .time_wrapper {
height: 700px; height: 700px;
background: url("images/time/ChatGPT\ Image\ 19\ янв.\ 2026\ г.\,\ 20_18_11.png") 100% 100% / cover; display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.time_wrapper::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.time_inner {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.time_content {
z-index: 10;
}
.time_row_up {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.row_up_item {
background-color: #e5b97e;
width: 320px;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 33px;
margin: 0 20px;
}
.time_img_box {
}
.time_img {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
.time_line {
}
.time_row_down {
display: flex;
justify-content: space-between;
}
.time_h6 {
font-size: 26px;
font-weight: 900;
} }
.time_p { .time_p {
font-size: 30px; font-size: 28px;
font-weight: 900;
text-decoration: underline;
margin-bottom: 10px;
}
.time_comment {
font-size: 24px;
} }