Тверь, Свободный переулок, 5
@@ -315,7 +326,7 @@ style="color:#eee;font-size:12px;position:absolute;top:0px;">Лофт 1870Тверь, улица Двор Пролетарки, 16
diff --git a/server/frontend/main/main.js b/server/frontend/main/main.js index 6ad4fb9..d683b58 100644 --- a/server/frontend/main/main.js +++ b/server/frontend/main/main.js @@ -2,6 +2,8 @@ const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', loop: true, + spaceBetween: 1, // расстояние между слайдами 10-15px + slidesPerView: 3, // Navigation arrows navigation: { @@ -22,7 +24,7 @@ const swiper = new Swiper('.swiper', { 1200: { slidesPerView: 2, }, - 1600: { + 1650: { slidesPerView: 3, }, } @@ -56,4 +58,21 @@ var x = setInterval(function() { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } -}, 1000); \ No newline at end of file +}, 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'); + }); +}); \ No newline at end of file diff --git a/server/frontend/main/style.css b/server/frontend/main/style.css index f83f10d..8042985 100644 --- a/server/frontend/main/style.css +++ b/server/frontend/main/style.css @@ -66,7 +66,16 @@ img { } .menu { display: flex; - justify-content: space-between; + justify-content: center; + gap: 20px; +} +.items_up { + display: flex; + gap: 20px; +} +.items_down { + display: flex; + gap: 20px; } .item { color: #e7b15c; @@ -86,6 +95,132 @@ img { 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----------------------------- */ .heading { @@ -181,6 +316,7 @@ h4 { margin-bottom: 40px; } .newlywed { + margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; @@ -206,10 +342,11 @@ h4 { width: 60%; } .newlywed_title { - font-size: 34px; - font-weight: 700; - text-decoration:underline; - line-height: 1.5; + font-size: 29px; + font-weight: 700; + text-decoration: underline; + line-height: 1.5; + margin-bottom: 15px; } .newlywed_info { font-size: 26px; @@ -331,6 +468,7 @@ h4 { margin-top: 60px; } .transfer_map { + margin: 0 auto; display: flex; justify-content: center; align-items: center; @@ -338,17 +476,25 @@ h4 { } .map > div { border: 1px solid #000; + width: 760px; /* или 100% */ + height: 500px; +} +.map iframe { + width: 100%; + height: 100%; + border: none; } .map_adress { font-size: 50px; text-align: center; - text-decoration: underline; margin-top: 20px; + font-weight: 900; } .map_info { font-size: 50px; text-align: center; margin-top: 10px; + font-weight: 900; } .map_time { font-size: 50px; @@ -360,7 +506,7 @@ h4 { /* --------------------------------PHOTOS-------------------------------------- */ .photos { padding-bottom: 140px; - margin: 0 auto; + margin: 0 60px; padding-top: 60px; } .photos_title { @@ -371,10 +517,12 @@ h4 { border: 5px dotted #000; } .swiper { - width: 95%; - height: 550px; - text-align: center; - padding: 20px; + width: 100%; + height: 550px; + text-align: center; + padding: 20px; + margin: 0px auto; + overflow: hidden !important; /* возвращаем скрытие слайдов */ } .swiper-wrapper { width: 100%; @@ -385,6 +533,13 @@ h4 { .swiper-navigation-icon { color: #000; } +.swiper-button-prev { + left: -10px !important; +} + +.swiper-button-next { + right: -10px !important; +} /* --------------------------------------------TODOLIST------------------------------------------------------ */ @@ -573,8 +728,9 @@ textarea { gap: 5px; } .fotter_logo { - font-size: 42px; - text-decoration: underline; + font-size: 42px; + text-decoration: underline; + margin-bottom: 25px; } .footer_date { font-size: 36px; @@ -615,7 +771,195 @@ textarea { .footer_hashtag { text-decoration: underline; font-size: 36px; - margin-bottom: 10px; + margin-bottom: 25px; } .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; + } } \ No newline at end of file