final
This commit is contained in:
|
Before Width: | Height: | Size: 171 KiB After Width: | Height: | Size: 171 KiB |
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
BIN
images/icon.png
Normal file
BIN
images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
images/photos/IMG_20260223_151005_128.jpg
Normal file
BIN
images/photos/IMG_20260223_151005_128.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
images/photos/IMG_20260223_151049_713.jpg
Normal file
BIN
images/photos/IMG_20260223_151049_713.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
11
images/telegram-svgrepo-com.svg
Normal file
11
images/telegram-svgrepo-com.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7225)"/>
|
||||||
|
<path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_87_7225" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#37BBFE"/>
|
||||||
|
<stop offset="1" stop-color="#007DBB"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 920 B |
285
index.html
285
index.html
@@ -7,6 +7,10 @@
|
|||||||
<title>Wedding invitation</title>
|
<title>Wedding invitation</title>
|
||||||
<link rel="stylesheet" href="reset.css">
|
<link rel="stylesheet" href="reset.css">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -16,43 +20,43 @@
|
|||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#heading" class="link">
|
||||||
Добро пожаловать!
|
Добро пожаловать!
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#people" class="link">
|
||||||
Список гостей
|
Список гостей
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- 3 -->
|
<!-- 3 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#timetable" class="link">
|
||||||
Расписание
|
Расписание
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- 4 -->
|
<!-- 4 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#transfer" class="link">
|
||||||
Путешествие
|
Путешествие
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- 5 -->
|
<!-- 5 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#photos" class="link">
|
||||||
Фотографии
|
Фотографии
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#to-do-list" class="link">
|
||||||
Список задач
|
Список задач
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- 7 -->
|
<!-- 7 -->
|
||||||
<li class="item">
|
<li class="item">
|
||||||
<a href="#" class="link">
|
<a href="#answer" class="link">
|
||||||
Прошу ответить
|
Прошу ответить
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -61,7 +65,7 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<content class="content">
|
<content class="content">
|
||||||
<section class="heading">
|
<section class="heading" id="heading">
|
||||||
<article class="heading_content">
|
<article class="heading_content">
|
||||||
<div class="heading_cont">
|
<div class="heading_cont">
|
||||||
<h1 class="heding_title">Дмитрий и Алёна</h1>
|
<h1 class="heding_title">Дмитрий и Алёна</h1>
|
||||||
@@ -87,7 +91,7 @@
|
|||||||
00:00:00
|
00:00:00
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<section class="people">
|
<section class="people" id="people">
|
||||||
<h4 class="people_title">
|
<h4 class="people_title">
|
||||||
Список гостей
|
Список гостей
|
||||||
</h4>
|
</h4>
|
||||||
@@ -97,7 +101,8 @@
|
|||||||
<div class="newlywed_text">
|
<div class="newlywed_text">
|
||||||
<h3 class="newlywed_title">Жених</h3>
|
<h3 class="newlywed_title">Жених</h3>
|
||||||
<p class="newlywed_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui voluptatum
|
<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
|
odio autem, ut dolorum suscipit soluta reiciendis quam reprehenderit saepe doloribus
|
||||||
|
asperiores
|
||||||
architecto? Debitis magnam, exercitationem nam temporibus eos molestias?</p>
|
architecto? Debitis magnam, exercitationem nam temporibus eos molestias?</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -106,7 +111,8 @@
|
|||||||
<div class="newlywed_text">
|
<div class="newlywed_text">
|
||||||
<h3 class="newlywed_title">Невеста</h3>
|
<h3 class="newlywed_title">Невеста</h3>
|
||||||
<p class="newlywed_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui voluptatum
|
<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
|
odio autem, ut dolorum suscipit soluta reiciendis quam reprehenderit saepe doloribus
|
||||||
|
asperiores
|
||||||
architecto? Debitis magnam, exercitationem nam temporibus eos molestias?</p>
|
architecto? Debitis magnam, exercitationem nam temporibus eos molestias?</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -203,7 +209,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="timetable">
|
<section class="timetable" id="timetable">
|
||||||
<h4 class="people_title">
|
<h4 class="people_title">
|
||||||
Расписание
|
Расписание
|
||||||
</h4>
|
</h4>
|
||||||
@@ -217,7 +223,8 @@
|
|||||||
<img src="images/time/ring.png" alt="ring" class="time_img">
|
<img src="images/time/ring.png" alt="ring" class="time_img">
|
||||||
<h6 class="time_h6">10:40</h6>
|
<h6 class="time_h6">10:40</h6>
|
||||||
<p class="time_p">Церемония</p>
|
<p class="time_p">Церемония</p>
|
||||||
<div class="time_comment">Начало нашего свадебного дня и самый важный момент для нас</div>
|
<div class="time_comment">Начало нашего свадебного дня и самый важный момент для нас
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
@@ -226,7 +233,8 @@
|
|||||||
<img src="images/time/camera.png" alt="camera" class="time_img">
|
<img src="images/time/camera.png" alt="camera" class="time_img">
|
||||||
<h6 class="time_h6">11:30</h6>
|
<h6 class="time_h6">11:30</h6>
|
||||||
<p class="time_p">Фотосессия</p>
|
<p class="time_p">Фотосессия</p>
|
||||||
<div class="time_comment">После церемонии мы ненадолго отправимся на фотосессию, чтобы сохранить этот день в памяти</div>
|
<div class="time_comment">После церемонии мы ненадолго отправимся на фотосессию,
|
||||||
|
чтобы сохранить этот день в памяти</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 3 -->
|
<!-- 3 -->
|
||||||
@@ -244,7 +252,8 @@
|
|||||||
<img src="images/time/free-icon-fireworks-7201451.png" alt="" class="time_img">
|
<img src="images/time/free-icon-fireworks-7201451.png" alt="" class="time_img">
|
||||||
<h6 class="time_h6">14:30</h6>
|
<h6 class="time_h6">14:30</h6>
|
||||||
<p class="time_p">Поздравления и подарки</p>
|
<p class="time_p">Поздравления и подарки</p>
|
||||||
<div class="time_comment">Мы будем рады теплым словам и подаркам во время фуршета</div>
|
<div class="time_comment">Мы будем рады теплым словам и подаркам во время фуршета
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -256,7 +265,8 @@
|
|||||||
<img src="images/time/food.png" alt="" class="time_img">
|
<img src="images/time/food.png" alt="" class="time_img">
|
||||||
<h6 class="time_h6">17:00</h6>
|
<h6 class="time_h6">17:00</h6>
|
||||||
<p class="time_p">Банкет</p>
|
<p class="time_p">Банкет</p>
|
||||||
<div class="time_comment">Приглашаем вас за столы, чтобы продолжить вечер в тёплой и уютной атмосфере. Приветственный тост</div>
|
<div class="time_comment">Приглашаем вас за столы, чтобы продолжить вечер в тёплой и
|
||||||
|
уютной атмосфере. Приветственный тост</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
@@ -265,7 +275,8 @@
|
|||||||
<img src="images/time/cake.png" alt="" class="time_img">
|
<img src="images/time/cake.png" alt="" class="time_img">
|
||||||
<h6 class="time_h6">19:00</h6>
|
<h6 class="time_h6">19:00</h6>
|
||||||
<p class="time_p">Свадебный торт</p>
|
<p class="time_p">Свадебный торт</p>
|
||||||
<div class="time_comment">Самый сладкий момент вечера. Чай или кофе находятся в велком зоне</div>
|
<div class="time_comment">Самый сладкий момент вечера. Чай или кофе находятся в
|
||||||
|
велком зоне</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 7 -->
|
<!-- 7 -->
|
||||||
@@ -274,7 +285,8 @@
|
|||||||
<img src="images/time/disco-ball_18181959.png" alt="" class="time_img">
|
<img src="images/time/disco-ball_18181959.png" alt="" class="time_img">
|
||||||
<h6 class="time_h6">19:30</h6>
|
<h6 class="time_h6">19:30</h6>
|
||||||
<p class="time_p">Танцы</p>
|
<p class="time_p">Танцы</p>
|
||||||
<div class="time_comment">Приглашаем вас на танцпол. Танцуйте столько, сколько захочется</div>
|
<div class="time_comment">Приглашаем вас на танцпол. Танцуйте столько, сколько
|
||||||
|
захочется</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -282,8 +294,245 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="transfer" id="transfer">
|
||||||
|
<h4 class="transfer_title">
|
||||||
|
Путешествие
|
||||||
|
</h4>
|
||||||
|
<div class="transfer_inner">
|
||||||
|
<div class="transfer_map">
|
||||||
|
<map class="map">
|
||||||
|
<div style="position:relative;overflow:hidden; border-radius: 33px;">
|
||||||
|
<a href="https://yandex.com/maps/org/glavnoye_upravleniye_zapisi_aktov_grazhdanskogo_sostoyaniya/104116805635/?utm_medium=mapframe&utm_source=maps"
|
||||||
|
style="color:#eee;font-size:12px;position:absolute;top:0px;">
|
||||||
|
Главное управление записи актов гражданского состояния</a>
|
||||||
|
<iframe
|
||||||
|
src="https://yandex.com/map-widget/v1/?ll=35.903981%2C56.857281&mode=search&oid=104116805635&ol=biz&sctx=ZAAAAAgBEAAaKAoSCY3PZP88XSFAEVrW%2FWMhDklAEhIJzjgNUYU%2Fsz8RXD6Skh6Gtj8iBgABAgMEBSgKOABAgqANSAFiOnJlYXJyPXNjaGVtZV9Mb2NhbC9HZW91cHBlci9BZHZlcnRzL0N1c3RvbU1heGFkdi9FbmFibGVkPTFiOnJlYXJyPXNjaGVtZV9Mb2NhbC9HZW91cHBlci9BZHZlcnRzL0N1c3RvbU1heGFkdi9NYXhhZHY9MTViRHJlYXJyPXNjaGVtZV9Mb2NhbC9HZW91cHBlci9BZHZlcnRzL0N1c3RvbU1heGFkdi9SZWdpb25JZHM9WzEsMTAxNzRdYkByZWFycj1zY2hlbWVfTG9jYWwvR2VvdXBwZXIvQWR2ZXJ0cy9NYXhhZHZUb3BNaXgvTWF4YWR2Rm9yTWl4PTEwagJkZZ0BzczMPaABAKgBAL0BByG7v8IBBoPA4e6DA4ICE9C30LDQs9GBINGC0LLQtdGA0YyKAgCSAgIxNJoCDGRlc2t0b3AtbWFwcw%3D%3D&sll=35.903981%2C56.857281&sspn=0.001002%2C0.000999&text=%D0%B7%D0%B0%D0%B3%D1%81%20%D1%82%D0%B2%D0%B5%D1%80%D1%8C&z=19.23"
|
||||||
|
width="760" height="500" frameborder="1" allowfullscreen="true"
|
||||||
|
style="position:relative;"></iframe>
|
||||||
|
</div>
|
||||||
|
<p class="map_adress">Тверь, Свободный переулок, 5</p>
|
||||||
|
<h6 class="map_info">Начало в</h6>
|
||||||
|
<h6 class="map_time">10:30</h6>
|
||||||
|
</map>
|
||||||
|
<map class="map">
|
||||||
|
<div style="position:relative;overflow:hidden; border-radius: 33px;">
|
||||||
|
<a href="https://yandex.com/maps/org/loft_1870/90344521327/?utm_medium=mapframe&utm_source=maps"
|
||||||
|
style="color:#eee;font-size:12px;position:absolute;top:0px;">Лофт 1870</a><a
|
||||||
|
href="https://yandex.com/maps/14/tver/category/banquet_hall/184108315/?utm_medium=mapframe&utm_source=maps"
|
||||||
|
style="color:#eee;font-size:12px;position:absolute;top:14px;">Банкетный зал в
|
||||||
|
Твери</a><a
|
||||||
|
href="https://yandex.com/maps/14/tver/category/organization_of_events/184108329/?utm_medium=mapframe&utm_source=maps"
|
||||||
|
style="color:#eee;font-size:12px;position:absolute;top:28px;">Организация мероприятий в
|
||||||
|
Твери</a><iframe
|
||||||
|
src="https://yandex.com/map-widget/v1/?filter=alternate_vertical%3AWhatWhere&ll=35.862462%2C56.851043&mode=search&oid=90344521327&ol=biz&sctx=ZAAAAAgCEAAaKAoSCUqaP6a180FAEbg9QWK7bUxAEhIJ8wTCTrFqUD8RgXwJFRxeUD8iBgABAgMEBSgKOABAgaANSAFiOnJlYXJyPXNjaGVtZV9Mb2NhbC9HZW91cHBlci9BZHZlcnRzL0N1c3RvbU1heGFkdi9FbmFibGVkPTFiOnJlYXJyPXNjaGVtZV9Mb2NhbC9HZW91cHBlci9BZHZlcnRzL0N1c3RvbU1heGFkdi9NYXhhZHY9MTViRHJlYXJyPXNjaGVtZV9Mb2NhbC9HZW91cHBlci9BZHZlcnRzL0N1c3RvbU1heGFkdi9SZWdpb25JZHM9WzEsMTAxNzRdYkByZWFycj1zY2hlbWVfTG9jYWwvR2VvdXBwZXIvQWR2ZXJ0cy9NYXhhZHZUb3BNaXgvTWF4YWR2Rm9yTWl4PTEwagJydZ0BzczMPaABAKgBAL0BvACOKsIBKO%2F8z8fQAtiGgZHvBbCG7O6vBo79quPrAY6e17vSBOOAnfSN%2BvnKggGCAhPQu9C%2B0YTRgiDRgtCy0LXRgNGMigIAkgICMTSaAgxkZXNrdG9wLW1hcHM%3D&sll=35.862462%2C56.851043&sspn=0.007794%2C0.007771&text=%D0%BB%D0%BE%D1%84%D1%82%20%D1%82%D0%B2%D0%B5%D1%80%D1%8C&z=16.27"
|
||||||
|
width="760" height="500" frameborder="1" allowfullscreen="true"
|
||||||
|
style="position:relative;"></iframe>
|
||||||
|
</div>
|
||||||
|
<p class="map_adress">Тверь, улица Двор Пролетарки, 16</p>
|
||||||
|
<h6 class="map_info">Начало в</h6>
|
||||||
|
<h6 class="map_time">14:00</h6>
|
||||||
|
</map>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="photos" id="photos">
|
||||||
|
<h4 class="photos_title">
|
||||||
|
Фотографии
|
||||||
|
</h4>
|
||||||
|
<!-- Slider main container -->
|
||||||
|
<div class="swiper">
|
||||||
|
<!-- Additional required wrapper -->
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<!-- Slides -->
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos//IMG_20260223_151049_713.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151049_713.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151049_713.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img class="swiper_img" src="images/photos/IMG_20260223_151005_128.jpg" alt="photo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- If we need pagination -->
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
|
||||||
|
<!-- If we need navigation buttons -->
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
|
||||||
|
<!-- If we need scrollbar -->
|
||||||
|
<div class="swiper-scrollbar"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="to-do-list" id="to-do-list">
|
||||||
|
<h4 class="do-list_title">
|
||||||
|
Список задач
|
||||||
|
</h4>
|
||||||
|
<div class="to-do-list_wrapper">
|
||||||
|
<div class="to-do-list_items">
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Поздравить молодых и сказать тёплые слова
|
||||||
|
</div>
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Вручить подарок молодожёнам
|
||||||
|
</div>
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Сделать фото и видео, чтобы потом было что выложить
|
||||||
|
</div>
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Поднять тост за любовь
|
||||||
|
</div>
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Добраться до свадебного торта, сфотографировать его
|
||||||
|
</div>
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Потанцевать хотя бы один медленный танец
|
||||||
|
</div>
|
||||||
|
<div class="to-do-list_item">
|
||||||
|
<img class="to-do-list_item_img" src="images/icon.png" alt="icon">
|
||||||
|
Повеселиться так, чтобы этот день запомнился
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="answer" id="answer">
|
||||||
|
<h4 class="answer_title">Прошу ответить</h4>
|
||||||
|
|
||||||
|
<div class="answer_wrapper">
|
||||||
|
<h6 class="answer_heading">
|
||||||
|
Просим Вас заполнить форму и подтвердить своё участие
|
||||||
|
</h6>
|
||||||
|
|
||||||
|
<form class="form-example">
|
||||||
|
|
||||||
|
<!-- Левая колонка -->
|
||||||
|
<div class="form_name">
|
||||||
|
<label>Имя
|
||||||
|
<input type="text" name="firstName" required>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>Отчество
|
||||||
|
<input type="text" name="middleName" required>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>Фамилия
|
||||||
|
<input type="text" name="lastName" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Средняя колонка -->
|
||||||
|
<div class="form_menu">
|
||||||
|
<p class="block_title">Горячее блюдо</p>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<input type="radio" name="food" value="meat">
|
||||||
|
Мясо
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="option">
|
||||||
|
<input type="radio" name="food" value="fish">
|
||||||
|
Рыба
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Правая колонка -->
|
||||||
|
<div class="form_drink">
|
||||||
|
<p class="block_title">Напитки</p>
|
||||||
|
|
||||||
|
<label class="option"><input type="checkbox" name="drink" value="champagne"> Шампанское</label>
|
||||||
|
<label class="option"><input type="checkbox" name="drink" value="wine"> Вино</label>
|
||||||
|
<label class="option"><input type="checkbox" name="drink" value="vodka"> Водка</label>
|
||||||
|
<label class="option"><input type="checkbox" name="drink" value="whiskey"> Виски</label>
|
||||||
|
<label class="option"><input type="checkbox" name="drink" value="tequila"> Текила</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="answer_btn">
|
||||||
|
Подтвердить участие
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</content>
|
</content>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer_inner">
|
||||||
|
<div class="footer_title">
|
||||||
|
<h1 class="fotter_logo">
|
||||||
|
Алёна и Дмитрий
|
||||||
|
</h1>
|
||||||
|
<p class="footer_date">22 августа 2026</p>
|
||||||
|
<p class="footer_place">LOFT 1870</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer_contacts">
|
||||||
|
<p class="footer_text">"С нетерпением ждем встречи!"</p>
|
||||||
|
<div class="footer_cntcts">
|
||||||
|
<a class="footer_cnt" href="t.me/Alena7729"><?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7225)"/>
|
||||||
|
<path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_87_7225" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#37BBFE"/>
|
||||||
|
<stop offset="1" stop-color="#007DBB"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
Алёна</a>
|
||||||
|
<a class="footer_cnt" href="t.me/Alena7729"><?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7225)"/>
|
||||||
|
<path d="M22.9866 10.2088C23.1112 9.40332 22.3454 8.76755 21.6292 9.082L7.36482 15.3448C6.85123 15.5703 6.8888 16.3483 7.42147 16.5179L10.3631 17.4547C10.9246 17.6335 11.5325 17.541 12.0228 17.2023L18.655 12.6203C18.855 12.4821 19.073 12.7665 18.9021 12.9426L14.1281 17.8646C13.665 18.3421 13.7569 19.1512 14.314 19.5005L19.659 22.8523C20.2585 23.2282 21.0297 22.8506 21.1418 22.1261L22.9866 10.2088Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_87_7225" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#37BBFE"/>
|
||||||
|
<stop offset="1" stop-color="#007DBB"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
Дмитрий</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer_copy">
|
||||||
|
<div class="footer_hashtag">#свадьба2026</div>
|
||||||
|
<div class="footer_copyright">© 2026 Алёна и Дмитрий</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
30
main.js
30
main.js
@@ -0,0 +1,30 @@
|
|||||||
|
const swiper = new Swiper('.swiper', {
|
||||||
|
// Optional parameters
|
||||||
|
direction: 'horizontal',
|
||||||
|
loop: true,
|
||||||
|
|
||||||
|
// Navigation arrows
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},
|
||||||
|
|
||||||
|
// And if we need scrollbar
|
||||||
|
scrollbar: {
|
||||||
|
el: '.swiper-scrollbar',
|
||||||
|
},
|
||||||
|
|
||||||
|
speed: 1000,
|
||||||
|
breakpoints: {
|
||||||
|
740: {
|
||||||
|
slidesPerView: 1,
|
||||||
|
},
|
||||||
|
1200: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
},
|
||||||
|
1600: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
290
style.css
290
style.css
@@ -49,6 +49,9 @@ button:hover {
|
|||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
.content {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------HEADER------------------------------ */
|
/* -------------------------------HEADER------------------------------ */
|
||||||
.header {
|
.header {
|
||||||
@@ -85,8 +88,6 @@ img {
|
|||||||
|
|
||||||
/* --------------------------------Welcome----------------------------- */
|
/* --------------------------------Welcome----------------------------- */
|
||||||
|
|
||||||
.content {
|
|
||||||
}
|
|
||||||
.heading {
|
.heading {
|
||||||
background: url("images/25.png") 50% 100% / cover;
|
background: url("images/25.png") 50% 100% / cover;
|
||||||
margin: 0px 400px;
|
margin: 0px 400px;
|
||||||
@@ -161,9 +162,12 @@ img {
|
|||||||
.people {
|
.people {
|
||||||
width: 1400px;
|
width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 80px;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
}
|
}
|
||||||
|
.heading_h4 {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
h4 {
|
h4 {
|
||||||
display: block;
|
display: block;
|
||||||
border-top: 3px solid #000;
|
border-top: 3px solid #000;
|
||||||
@@ -218,9 +222,10 @@ h4 {
|
|||||||
}
|
}
|
||||||
.guest_item {
|
.guest_item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url("images/Элегантный\ свадебный\ банкет_\ пастельные\ цветы\ и\ золотые\ детали.jpg") 100% 100% / cover;
|
background: url("images/55555.jpg") 100% 100% / cover;
|
||||||
padding: 40px 80px;
|
padding: 40px 80px;
|
||||||
border-radius: 33px;
|
border-radius: 33px;
|
||||||
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.guest_index {
|
.guest_index {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
@@ -242,6 +247,7 @@ h4 {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
padding-bottom: 60px;
|
padding-bottom: 60px;
|
||||||
|
padding-top: 40px;
|
||||||
}
|
}
|
||||||
.time_wrapper {
|
.time_wrapper {
|
||||||
height: 700px;
|
height: 700px;
|
||||||
@@ -312,3 +318,279 @@ h4 {
|
|||||||
.time_comment {
|
.time_comment {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------TRANSFER--------------------------------------- */
|
||||||
|
|
||||||
|
.transfer {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
padding-top: 40px;
|
||||||
|
}
|
||||||
|
.transfer_title {
|
||||||
|
}
|
||||||
|
.transfer_inner {
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.transfer_map {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 100px;
|
||||||
|
}
|
||||||
|
.map > div {
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
.map_adress {
|
||||||
|
font-size: 50px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.map_info {
|
||||||
|
font-size: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.map_time {
|
||||||
|
font-size: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------PHOTOS-------------------------------------- */
|
||||||
|
.photos {
|
||||||
|
padding-bottom: 140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
.photos_title {
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
.swiper_img {
|
||||||
|
height: 500px;
|
||||||
|
border: 5px dotted #000;
|
||||||
|
}
|
||||||
|
.swiper {
|
||||||
|
width: 95%;
|
||||||
|
height: 550px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.swiper-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.swiper-navigation-icon {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------TODOLIST------------------------------------------------------ */
|
||||||
|
|
||||||
|
.to-do-list {
|
||||||
|
padding-bottom: 100px;
|
||||||
|
padding-top: 40px;
|
||||||
|
}
|
||||||
|
.do-list_title {
|
||||||
|
}
|
||||||
|
.to-do-list_wrapper {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 40px;
|
||||||
|
}
|
||||||
|
.to-do-list_items {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.to-do-list_item {
|
||||||
|
background: linear-gradient(135deg, #f3d9c6, #e8c3a4, #d9a77a);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 900;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
|
color: #3e2a1f;
|
||||||
|
text-shadow: 0 1px 1px rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
.to-do-list_item_img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------ANSWER----------------------------------- */
|
||||||
|
|
||||||
|
.answer {
|
||||||
|
padding-bottom: 100px;
|
||||||
|
padding-top: 40px;
|
||||||
|
}
|
||||||
|
.answer_wrapper {
|
||||||
|
background: linear-gradient(135deg, #f3d9c6, #e8c3a4, #d9a77a);
|
||||||
|
padding: 60px;
|
||||||
|
margin: 0 400px;
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer_heading {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 42px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
color: #2f1e14;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-example {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form_name {
|
||||||
|
color: #2f1e14;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block_title {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #2f1e14;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
background: #fffaf3;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer_btn {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 18px 40px;
|
||||||
|
border-radius: 30px;
|
||||||
|
border: none;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: #2f1e14;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answer_btn:hover {
|
||||||
|
background: #1e140d;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
.form_name input[type="text"] {
|
||||||
|
width: 320px; /* одинаковая ширина */
|
||||||
|
height: 50px; /* одинаковая высота */
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
border: none;
|
||||||
|
background-color: #ffffff;
|
||||||
|
outline: none;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------FOOTER---------------------------------- */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: #2f1e14;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.footer_inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
.footer_title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
.fotter_logo {
|
||||||
|
font-size: 42px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.footer_date {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
.footer_place {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.footer_contacts {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.footer_cnt {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 30px;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
.footer_cnt:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.footer_cnt svg:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
.footer_text {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
.footer_cntcts {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
.footer_copy {
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
.footer_hashtag {
|
||||||
|
text-decoration: underline;
|
||||||
|
font-size: 36px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.footer_copyright {
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user