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

section_people

Browse Source
This commit is contained in:
Alena Trushcheva
2026-01-07 20:45:52 +03:00
parent 7719a118a6
commit 56d394b4b8
5 changed files with 275 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/people/IMG_20260107_135956_402.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
images/people/IMG_20260107_140110_500.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

BIN
images/people/IMG_20260107_140120_301.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

165
index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +8,7 @@
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
@@ -74,7 +76,10 @@
</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?
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>
Подтвердить участие
@@ -88,8 +93,166 @@
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="3">Список гостей</th>
</thead>
<tr>
<th class="table_name">Имя</th>
<th class="table_name">Фамилия</th>
<th class="table_name">Номер телефона</th>
</tr>
<!-- 1 -->
<tr>
<td>Дмитрий</td>
<td>Селяков</td>
<td>+79001137251</td>
</tr>
<!--2 -->
<tr>
<td>Алёна</td>
<td>Трущёва</td>
<td>+79040242507</td>
</tr>
<!-- 3 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 4 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 5 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!--6 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 7 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 8 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 9 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 10 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 11 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 12 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 13 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 14 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 15 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 16 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 17 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 18 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 19 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 20 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</section>
</content>
<script src="main.js"></script>
</body>
</html>

117
style.css
View File

@@ -25,7 +25,8 @@
/* --------------------------------MAIN-------------------------------- */
body {
background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.png") 100% 40% / cover;
background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.png") no-repeat 100% 100% fixed;
background-size: cover;
font-family: "MurreyC";
font-size: 16px;
font-weight: 400;
@@ -36,7 +37,7 @@ button {
background-color: #3a1f09;
padding: 0 15px;
border-radius: 33px;
transition: all .3s;
transition: all .1s;
color: #e5b97e;
box-shadow: #3a1f09 2px 4px 10px 2px;
}
@@ -45,6 +46,9 @@ button:hover {
color: #b06029;
transform: scale(1.015);
}
img {
max-width: 100%;
}
/* -------------------------------HEADER------------------------------ */
.header {
@@ -88,7 +92,7 @@ button:hover {
margin: 0px 400px;
/* border: 10px solid rgb(184, 136, 48); */
/* border: 15px double rgb(184, 136, 48); */
height: 620px;
height: 640px;
box-shadow: #000000 2px 4px 10px 2px;
}
.heading_content {
@@ -113,33 +117,122 @@ button:hover {
border: 1px solid #42240c;
}
.heding_title {
font-size: 34px;
font-size: 42px;
font-weight: 900;
text-decoration: underline;
/* text-decoration: underline; */
}
.heading_info {
font-size: 30px;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
/* color: #eccfae; */
}
.heading_date {
font-size: 26px;
font-size: 32px;
font-weight: 700;
background-image: linear-gradient(to left, rgb(66, 36, 12), rgb(184, 136, 48));
border-top: 3px solid #000;
border-bottom: 3px solid #000;
/* background-image: linear-gradient(to left, rgb(66, 36, 12), rgb(184, 136, 48)); */
}
.heading_text {
font-size: 24px;
font-size: 26px;
padding: 0 20px;
font-weight: 700;
}
.btn_share {
margin-top: 10px;
font-size: 26px;
font-size: 30px;
}
.asise {
}
.time{
font-size: 130px;
padding-top: 15px;
font-size: 110px;
text-align: center;
background-image: linear-gradient(90deg,rgba(26, 21, 26, 1) 0%, rgba(101, 62, 39, 1) 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: #000 2px 2px 6px;
}
/* -----------------------------------PEOPLE-------------------------------------- */
.people {
width: 1400px;
margin: 0 auto;
padding-bottom: 40px;
}
h4 {
display: block;
border-top: 3px solid #000;
border-bottom: 3px solid #000 ;
font-size: 60px;
text-align: center;
font-weight: 900;
width: 30%;
margin: 0 auto;
line-height: 1.2;
margin-bottom: 40px;
}
.newlywed {
display: flex;
justify-content: space-between;
gap: 40px;
width: 100%;
margin-bottom: 40px;
}
.newlywed_item {
display: flex;
align-items: center;
background-color: rgba(245, 198, 124, 0.9);
padding: 20px;
box-shadow: #000000 2px 4px 10px 2px;
}
.img_newlywed {
width: 40%;
width: 240px;
height: 240px;
border-radius: 50%;
border: 1px solid #47312c;
}
.newlywed_text {
margin-left: 20px;
width: 60%;
}
.newlywed_title {
font-size: 34px;
font-weight: 700;
text-decoration:underline;
line-height: 1.5;
}
.newlywed_info {
font-size: 26px;
}
.guest_list {
width: 100%;
}
table {
table-layout: fixed;
background-color:#e5b97e;
border-collapse: collapse;
box-shadow: #000 2px 4px 10px 1px;
width: 100%;
border: 1px solid #000;
}
.table_title {
font-size: 35px;
font-weight: 900;
line-height: 2.2;
text-decoration: underline;
border: 3px solid #000;
}
.table_name {
font-size: 30px;
}
th, td {
border: 2px solid #000;
height: 50px;
font-size: 28px;
text-align: center;
}