section_people
This commit is contained in:
BIN
images/people/IMG_20260107_135956_402.jpg
Normal file
BIN
images/people/IMG_20260107_135956_402.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
images/people/IMG_20260107_140110_500.jpg
Normal file
BIN
images/people/IMG_20260107_140110_500.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
images/people/IMG_20260107_140120_301.jpg
Normal file
BIN
images/people/IMG_20260107_140120_301.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
165
index.html
165
index.html
@@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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="reset.css">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
@@ -74,7 +76,10 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<h3 class="heading_date">22 августа 2026</h3>
|
<h3 class="heading_date">22 августа 2026</h3>
|
||||||
<p class="heading_text">
|
<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>
|
</p>
|
||||||
<button class="btn_share" button>
|
<button class="btn_share" button>
|
||||||
Подтвердить участие
|
Подтвердить участие
|
||||||
@@ -88,8 +93,166 @@
|
|||||||
00:00:00
|
00:00:00
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</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>
|
</content>
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
117
style.css
117
style.css
@@ -25,7 +25,8 @@
|
|||||||
/* --------------------------------MAIN-------------------------------- */
|
/* --------------------------------MAIN-------------------------------- */
|
||||||
|
|
||||||
body {
|
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-family: "MurreyC";
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -36,7 +37,7 @@ button {
|
|||||||
background-color: #3a1f09;
|
background-color: #3a1f09;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
border-radius: 33px;
|
border-radius: 33px;
|
||||||
transition: all .3s;
|
transition: all .1s;
|
||||||
color: #e5b97e;
|
color: #e5b97e;
|
||||||
box-shadow: #3a1f09 2px 4px 10px 2px;
|
box-shadow: #3a1f09 2px 4px 10px 2px;
|
||||||
}
|
}
|
||||||
@@ -45,6 +46,9 @@ button:hover {
|
|||||||
color: #b06029;
|
color: #b06029;
|
||||||
transform: scale(1.015);
|
transform: scale(1.015);
|
||||||
}
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* -------------------------------HEADER------------------------------ */
|
/* -------------------------------HEADER------------------------------ */
|
||||||
.header {
|
.header {
|
||||||
@@ -88,7 +92,7 @@ button:hover {
|
|||||||
margin: 0px 400px;
|
margin: 0px 400px;
|
||||||
/* border: 10px solid rgb(184, 136, 48); */
|
/* border: 10px solid rgb(184, 136, 48); */
|
||||||
/* border: 15px double rgb(184, 136, 48); */
|
/* border: 15px double rgb(184, 136, 48); */
|
||||||
height: 620px;
|
height: 640px;
|
||||||
box-shadow: #000000 2px 4px 10px 2px;
|
box-shadow: #000000 2px 4px 10px 2px;
|
||||||
}
|
}
|
||||||
.heading_content {
|
.heading_content {
|
||||||
@@ -113,33 +117,122 @@ button:hover {
|
|||||||
border: 1px solid #42240c;
|
border: 1px solid #42240c;
|
||||||
}
|
}
|
||||||
.heding_title {
|
.heding_title {
|
||||||
font-size: 34px;
|
font-size: 42px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
text-decoration: underline;
|
/* text-decoration: underline; */
|
||||||
}
|
}
|
||||||
.heading_info {
|
.heading_info {
|
||||||
font-size: 30px;
|
font-size: 36px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
/* color: #eccfae; */
|
||||||
}
|
}
|
||||||
.heading_date {
|
.heading_date {
|
||||||
font-size: 26px;
|
font-size: 32px;
|
||||||
font-weight: 700;
|
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 {
|
.heading_text {
|
||||||
font-size: 24px;
|
font-size: 26px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.btn_share {
|
.btn_share {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 26px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
.asise {
|
.asise {
|
||||||
|
|
||||||
}
|
}
|
||||||
.time{
|
.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;
|
text-align: center;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user