MH.Dmitrii/wedding-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adaptive_1

Browse Source
This commit is contained in:
Alena Trushcheva
2026-04-26 20:42:33 +03:00
parent 0932c40127
commit 6b6361b25a
3 changed files with 393 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
server/frontend/main/index.html
View File

@@ -13,8 +13,16 @@
<body> <body>
<header class="header"> <header class="header">
<nav class="nav">
<div class="burger" id="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="nav" id="nav">
<ul class="menu"> <ul class="menu">
<div class="items_up">
<!-- 1 --> <!-- 1 -->
<li class="item"> <li class="item">
<a href="#" class="link"> <a href="#" class="link">
@@ -39,6 +47,8 @@
Путешествие Путешествие
</a> </a>
</li> </li>
</div>
<div class="items_down">
<!-- 5 --> <!-- 5 -->
<li class="item"> <li class="item">
<a href="#photos" class="link"> <a href="#photos" class="link">
@@ -57,6 +67,7 @@
Прошу ответить Прошу ответить
</a> </a>
</li> </li>
</div>
</ul> </ul>
</nav> </nav>
</header> </header>
@@ -302,7 +313,7 @@
Главное управление записи актов гражданского состояния</a> Главное управление записи актов гражданского состояния</a>
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2181.349338718406!2d35.901452977352925!3d56.85710390639812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b687a4d4edacad%3A0x15df9a38c874eb5d!2sGlavnoye%20Upravleniye%20Zapisi%20Aktov%20Grazhdanskogo%20Sostoyaniya%20Tverskoy%20Oblasti!5e0!3m2!1sen!2s!4v1773428540512!5m2!1sen!2s" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2181.349338718406!2d35.901452977352925!3d56.85710390639812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b687a4d4edacad%3A0x15df9a38c874eb5d!2sGlavnoye%20Upravleniye%20Zapisi%20Aktov%20Grazhdanskogo%20Sostoyaniya%20Tverskoy%20Oblasti!5e0!3m2!1sen!2s!4v1773428540512!5m2!1sen!2s"
width="760" height="500" style="border:1px;" allowfullscreen="true" loading="lazy" width="100%" height="100%" style="border:1px;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe> referrerpolicy="no-referrer-when-downgrade"></iframe>
</div> </div>
<p class="map_adress">Тверь, Свободный переулок, 5</p> <p class="map_adress">Тверь, Свободный переулок, 5</p>
@@ -315,7 +326,7 @@
style="color:#eee;font-size:12px;position:absolute;top:0px;">Лофт 1870</a> style="color:#eee;font-size:12px;position:absolute;top:0px;">Лофт 1870</a>
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1749.675516895515!2d35.86030818806184!3d56.850656040536194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b68764eb0c1387%3A0x7cb135f5414bc1e0!2zTG9mdCAxODcwIHwg0J_Qu9C-0YnQsNC00LrQsCDQtNC70Y8g0LzQtdGA0L7Qv9GA0LjRj9GC0LjQuSDQotCy0LXRgNGMIHwg0LrQtdC50YLQtdGA0LjQvdCzINC90LAg0YHQstCw0LTRjNCx0YMsINCx0LDQvdC60LXRgtC90YvQuSDQt9Cw0Ls!5e0!3m2!1sen!2s!4v1773428705434!5m2!1sen!2s" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1749.675516895515!2d35.86030818806184!3d56.850656040536194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b68764eb0c1387%3A0x7cb135f5414bc1e0!2zTG9mdCAxODcwIHwg0J_Qu9C-0YnQsNC00LrQsCDQtNC70Y8g0LzQtdGA0L7Qv9GA0LjRj9GC0LjQuSDQotCy0LXRgNGMIHwg0LrQtdC50YLQtdGA0LjQvdCzINC90LAg0YHQstCw0LTRjNCx0YMsINCx0LDQvdC60LXRgtC90YvQuSDQt9Cw0Ls!5e0!3m2!1sen!2s!4v1773428705434!5m2!1sen!2s"
width="760" height="500" style="border:1px;" allowfullscreen="true" loading="lazy" width="100%" height="100%" style="border:1px;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe> referrerpolicy="no-referrer-when-downgrade"></iframe>
</div> </div>
<p class="map_adress">Тверь, улица Двор Пролетарки, 16</p> <p class="map_adress">Тверь, улица Двор Пролетарки, 16</p>

23
server/frontend/main/main.js
View File

@@ -2,6 +2,8 @@ const swiper = new Swiper('.swiper', {
// Optional parameters // Optional parameters
direction: 'horizontal', direction: 'horizontal',
loop: true, loop: true,
spaceBetween: 1, // расстояние между слайдами 10-15px
slidesPerView: 3,
// Navigation arrows // Navigation arrows
navigation: { navigation: {
@@ -22,7 +24,7 @@ const swiper = new Swiper('.swiper', {
1200: { 1200: {
slidesPerView: 2, slidesPerView: 2,
}, },
1600: { 1650: {
slidesPerView: 3, slidesPerView: 3,
}, },
} }
@@ -56,4 +58,21 @@ var x = setInterval(function() {
clearInterval(x); clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED"; document.getElementById("demo").innerHTML = "EXPIRED";
} }
}, 1000); }, 1000);
const burger = document.getElementById('burger');
const nav = document.getElementById('nav');
const links = document.querySelectorAll('.menu .link');
burger.addEventListener('click', () => {
burger.classList.toggle('active');
nav.classList.toggle('active');
});
links.forEach(link => {
link.addEventListener('click', () => {
burger.classList.remove('active');
nav.classList.remove('active');
});
});

372
server/frontend/main/style.css
View File

@@ -66,7 +66,16 @@ img {
} }
.menu { .menu {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
gap: 20px;
}
.items_up {
display: flex;
gap: 20px;
}
.items_down {
display: flex;
gap: 20px;
} }
.item { .item {
color: #e7b15c; color: #e7b15c;
@@ -86,6 +95,132 @@ img {
text-decoration: underline; text-decoration: underline;
} }
/* BURGER */
.burger {
display: none;
width: 40px;
height: 30px;
position: relative;
cursor: pointer;
z-index: 1001;
}
.burger span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background: #e7b15c;
border-radius: 5px;
transition: 0.4s;
}
/* 3 полоски */
.burger span:nth-child(1) {
top: 0;
}
.burger span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.burger span:nth-child(3) {
bottom: 0;
}
.burger.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* MOBILE MENU */
@media (max-width: 900px) {
.header {
position: fixed;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
width: 10%;
border-radius: 10px;
margin-left: 40px;
box-shadow: #444 2px 2px 4px 0px;
}
.burger {
display: block;
display: flex;
}
.nav {
position: fixed;
top: 0;
left: 0; /* ВАЖНО */
width: 100%;
height: 100vh;
background: rgba(102, 60, 36, 0.97);
backdrop-filter: blur(12px);
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-100%);
transition: 0.5s ease;
z-index: 1000;
}
.nav.active {
transform: translateY(0);
}
.nav::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4));
}
.menu {
flex-direction: column;
gap: 30px;
text-align: center;
}
.item {
font-size: 28px;
}
.link {
position: relative;
}
/* красивый hover эффект */
.link::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0%;
height: 2px;
background: #e7b15c;
transition: 0.3s;
}
.link:hover::after {
width: 100%;
}
}
/* --------------------------------Welcome----------------------------- */ /* --------------------------------Welcome----------------------------- */
.heading { .heading {
@@ -181,6 +316,7 @@ h4 {
margin-bottom: 40px; margin-bottom: 40px;
} }
.newlywed { .newlywed {
margin: 0 auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 40px; gap: 40px;
@@ -206,10 +342,11 @@ h4 {
width: 60%; width: 60%;
} }
.newlywed_title { .newlywed_title {
font-size: 34px; font-size: 29px;
font-weight: 700; font-weight: 700;
text-decoration:underline; text-decoration: underline;
line-height: 1.5; line-height: 1.5;
margin-bottom: 15px;
} }
.newlywed_info { .newlywed_info {
font-size: 26px; font-size: 26px;
@@ -331,6 +468,7 @@ h4 {
margin-top: 60px; margin-top: 60px;
} }
.transfer_map { .transfer_map {
margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -338,17 +476,25 @@ h4 {
} }
.map > div { .map > div {
border: 1px solid #000; border: 1px solid #000;
width: 760px; /* или 100% */
height: 500px;
}
.map iframe {
width: 100%;
height: 100%;
border: none;
} }
.map_adress { .map_adress {
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
text-decoration: underline;
margin-top: 20px; margin-top: 20px;
font-weight: 900;
} }
.map_info { .map_info {
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
font-weight: 900;
} }
.map_time { .map_time {
font-size: 50px; font-size: 50px;
@@ -360,7 +506,7 @@ h4 {
/* --------------------------------PHOTOS-------------------------------------- */ /* --------------------------------PHOTOS-------------------------------------- */
.photos { .photos {
padding-bottom: 140px; padding-bottom: 140px;
margin: 0 auto; margin: 0 60px;
padding-top: 60px; padding-top: 60px;
} }
.photos_title { .photos_title {
@@ -371,10 +517,12 @@ h4 {
border: 5px dotted #000; border: 5px dotted #000;
} }
.swiper { .swiper {
width: 95%; width: 100%;
height: 550px; height: 550px;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
margin: 0px auto;
overflow: hidden !important; /* возвращаем скрытие слайдов */
} }
.swiper-wrapper { .swiper-wrapper {
width: 100%; width: 100%;
@@ -385,6 +533,13 @@ h4 {
.swiper-navigation-icon { .swiper-navigation-icon {
color: #000; color: #000;
} }
.swiper-button-prev {
left: -10px !important;
}
.swiper-button-next {
right: -10px !important;
}
/* --------------------------------------------TODOLIST------------------------------------------------------ */ /* --------------------------------------------TODOLIST------------------------------------------------------ */
@@ -573,8 +728,9 @@ textarea {
gap: 5px; gap: 5px;
} }
.fotter_logo { .fotter_logo {
font-size: 42px; font-size: 42px;
text-decoration: underline; text-decoration: underline;
margin-bottom: 25px;
} }
.footer_date { .footer_date {
font-size: 36px; font-size: 36px;
@@ -615,7 +771,195 @@ textarea {
.footer_hashtag { .footer_hashtag {
text-decoration: underline; text-decoration: underline;
font-size: 36px; font-size: 36px;
margin-bottom: 10px; margin-bottom: 25px;
} }
.footer_copyright { .footer_copyright {
}
/* --------------------------------------------------------ADAPTIVE------------------------------------------------------ */
/* обычные экраны */
@media (max-width: 1720px) {
.item {
font-size: 30px;
}
.map > div {
width: 680px;
height: 450px;
}
.heading {
margin: 0 350px;
}
}
@media (max-width: 1620px) {
.row_up_item {
width: 350px;
}
.time_img {
width: 50px;
height: 50px;
}
.time_h6 {
font-size: 22px;
}
.time_p {
font-size: 26px;
}
.time_comment {
font-size: 22px;
}
.img_newlywed {
height: 200px;
width: 200px;
}
.heading {
margin: 0 300px;
height: 580px;
}
}
@media (max-width: 1520px) {
.menu {
flex-direction: column;
}
.items_up,
.items_down {
justify-content: center;
gap: 100px;
}
.heading_content {
padding: 15px 60px;
}
.heading {
margin: 0 280px;
}
.time {
font-size: 90px;
}
.transfer_map {
gap: 50px;
}
.map > div {
width: 620px;
height: 420px;
}
.form_name {
font-size: 30px;
width: 430px;
}
.block_title {
font-size: 30px;
}
.form_name input[type="text"] {
width: 300px;
}
.answer_btn {
font-size: 30px;
}
.to-do-list_items {
width: 70%;
}
}
@media (max-width: 1420px) {
.heading {
margin: 0 250px;
}
.newlywed {
width: 50%;
}
.row_up_item {
width: 300px;
}
.time_comment {
font-size: 20px;
}
.time_p {
font-size: 22px;
}
.time_img {
width: 40px;
height: 40px;
}
.map > div {
width: 560px;
height: 400px;
}
.map_adress {
font-size: 30px;
}
.map_info {
font-size: 35px;
}
.map_time {
font-size: 40px;
}
.form-info {
display: block;
grid: none;
}
.form_name {
width: 100%;
padding: 0 140px;
margin-bottom: 30px;
}
.form_menu,
.form_drink {
padding: 0 140px;
margin-bottom: 30px;
}
.newlywed {
display: flex;
flex-direction: column;
}
.newlywed_text {
margin-left: 50px;
}
.people {
width: auto;
}
}
@media (max-width: 1320px){
.heading {
height: 480px;
}
.time {
font-size: 70px;
}
.newlywed_info {
font-size: 24px;
}
.form_name {
padding: 0 80px;
}
.form_menu, .form_drink {
padding: 0 80px;
}
.newlywed_info {
font-size: 22px;
}
.map > div {
width: 500px;
height: 350px;
}
.heading {
margin: 0 200px;
}
.to-do-list_items {
width: 80%;
}
.img_newlywed {
height: 160px;
width: 160px;
}
}
@media (max-width: 1220px){
.heading {
margin: 0 160px;
}
} }