diff --git a/server/frontend/main/images/free-icon-wedding-ring-4155044.ico b/server/frontend/main/images/free-icon-wedding-ring-4155044.ico new file mode 100644 index 0000000..7bb6ac0 Binary files /dev/null and b/server/frontend/main/images/free-icon-wedding-ring-4155044.ico differ diff --git a/server/frontend/main/index.html b/server/frontend/main/index.html index e67bb1a..3ad9de9 100644 --- a/server/frontend/main/index.html +++ b/server/frontend/main/index.html @@ -3,12 +3,14 @@ - + + Wedding invitation + diff --git a/server/frontend/main/style.css b/server/frontend/main/style.css index 8fb0d6b..1be2658 100644 --- a/server/frontend/main/style.css +++ b/server/frontend/main/style.css @@ -23,27 +23,32 @@ /* --------------------------------MAIN-------------------------------- */ +html, body { + height: 100vh; +} body { - margin: 0; - font-family: "MurreyC"; - font-size: 16px; - font-weight: 400; - letter-spacing: 3px; + font-family: "MurreyC"; + font-size: 16px; + font-weight: 400; + letter-spacing: 3px; + background-color: #c68a5e; } .bg { - position: fixed; - inset: 0; - - background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.webp") center center / cover no-repeat; - - z-index: -1; + position: fixed; + top: -100px; + left: 0; + right: 0; + bottom: -100px; + background: url("images/ChatGPT Image 5 янв. 2026 г., 15_49_39.webp") center center / cover no-repeat ; + z-index: -1; + transform: translateZ(0); + -webkit-transform: translateZ(0); } - .content { position: relative; - min-height: 100vh; + min-height: 100dvh; } button { background-color: #3a1f09; @@ -61,21 +66,19 @@ button:hover { img { max-width: 100%; } -.content { -} /* -------------------------------HEADER------------------------------ */ .header { - width: 100%; - background-color: #663c24; - padding: 20px 180px; - margin-top: 40px; - margin-bottom: 40px; - box-shadow: 0 2px 6px rgba(0,0,0,0.2); -} -.nav { + width: 100%; + background-color: #663c24; + padding: 20px 180px; + padding-top: calc(20px + env(safe-area-inset-top)); + + margin-bottom: 40px; + box-shadow: 0 2px 6px rgba(0,0,0,0.2); } + .menu { display: flex; justify-content: center; @@ -166,6 +169,8 @@ img { border-radius: 10px; margin-left: 40px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); + + } .burger { @@ -173,27 +178,22 @@ img { 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 { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: rgba(102, 60, 36, 0.97); + backdrop-filter: blur(12px); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; } .nav.active { - transform: translateY(0); + display: flex; } .nav::before { content: ""; @@ -440,17 +440,13 @@ h4 { text-align: center; border-radius: 33px; margin: 0 20px; -} -.time_img_box { - } .time_img { width: 60px; height: 60px; margin-bottom: 10px; } -.time_line { -} + .time_row_down { display: flex; justify-content: space-between; @@ -1312,7 +1308,7 @@ textarea { margin-bottom: 20px; background: none; box-shadow: none; - height: 450px; + height: 550px; } .heading_content { padding: 0; @@ -1377,6 +1373,7 @@ textarea { @media (max-width: 720px) { .heading { margin: 40px 0; + height: 550px; } .newlywed { width: 85%; @@ -1430,9 +1427,6 @@ textarea { } .items_up, .items_down { flex-direction: column; - } - .heading { - height: 450px; } .map > div { width: 400px; @@ -1504,7 +1498,7 @@ textarea { padding: 0px 20px; } .heading { - height: 500px; + height: 600px; } .map_adress {