adaptive_3

server/frontend/main/index.html

@@ -50,7 +50,7 @@
                 </div>
                 <div class="items_down">
                 <!-- 5 -->
-                <li class="item">
+                <li class="item item_none">
                     <a href="#photos" class="link">
                         Фотографии
                     </a>
@@ -439,15 +439,15 @@
 
                     <!-- Левая колонка -->
                     <div class="form_name">
-                        <label>Имя
+                        <label class="label_style">Имя
                             <input type="text" name="firstName" id="ffname" required>
                         </label>
 
-                        <label>Отчество
+                        <label class="label_style">Отчество
                             <input type="text" name="middleName" id="fmname" required>
                         </label>
 
-                        <label>Фамилия
+                        <label class="label_style">Фамилия
                             <input type="text" name="lastName" id="flname" required>
                         </label>
 

server/frontend/main/main.js

@@ -18,7 +18,7 @@ const swiper = new Swiper('.swiper', {
 
   speed: 1000,
    breakpoints: {
-      740: {
+      330: {
           slidesPerView: 1,
       },
       1200: {

server/frontend/main/style.css

@@ -959,6 +959,9 @@ textarea {
     .heading {
     height: 600px;
   }
+    .items_up, .items_down {
+    gap: 50px;
+  }
 }
 
 @media (max-width: 1220px){
@@ -1076,7 +1079,12 @@ textarea {
   .footer_text {
   font-size: 45px;
 }
-
+  .items_up, .items_down {
+    gap: 25px;
+  }
+    .item {
+    font-size: 28px;
+  }
 }
 
 @media (max-width: 1120px) {
@@ -1104,5 +1112,435 @@ textarea {
   .footer_inner {
     padding: 20px 100px;
   }
+  h4 {
+    width: 40%;
+  }
+    .form_name input[type="text"] {
+    width: 450px;
+  }
+  .header {
+      white-space: nowrap;
+  }
 
 }
+
+@media (max-width: 1020px) {
+      .to-do-list_item_img {
+    width: 30px;
+    height: 30px;
+  }
+  .to-do-list_item{
+    font-size: 26px;
+    width: 260px;
+    height: 200px;
+  }
+    .form_name input[type="text"] {
+    width: 400px;
+  }
+    .img_newlywed {
+    height: 160px;
+    width: 160px;
+    }
+      .newlywed_text {
+    margin-left: 40px;
+  }
+    .newlywed_info {
+    font-size: 24px;
+  }
+    .newlywed_title {
+    font-size: 34px;
+  }
+      .footer_text {
+    font-size: 34px;
+  }
+  .footer_cnt {
+    font-size: 28px;
+  }
+  .footer_hashtag {
+    font-size: 32px;
+  }
+  .footer_copy {
+  font-size: 26px;
+  }
+    .answer_btn {
+    font-size: 26px;
+    padding: 12px 40px;
+  }
+  textarea {
+    height: 150px;
+  }
+}
+
+
+@media (max-width: 920px) {
+    .heading_text {
+        font-size: 24px;
+    }
+      .row_up_item {
+    width: 400px;
+    height: 300px;
+  }
+    .time_h6 {
+    font-size: 32px;
+  }
+    .time_p {
+    font-size: 28px;
+  }
+    .time_comment {
+    font-size: 26px;
+  }
+    .time_img {
+    width: 70px;
+    height: 70px;
+  }
+    .map > div {
+    width: 550px;
+    height: 350px;
+  }
+    .map_adress {
+    font-size: 34px;
+  }
+    .map_info {
+    font-size: 38px;
+  }
+    .map_time {
+    font-size: 44px;
+  }
+  .answer_heading {
+    font-size: 38px;
+  }
+    .heading {
+    margin: 0px 60px;
+  }
+    .answer_wrapper {
+    margin: 0 100px;
+  }
+    .form_name input[type="text"] {
+    width: 350px;
+  }
+    .footer_text {
+    font-size: 32px;
+  }
+    .footer_cnt {
+    font-size: 26px;
+  }
+    .footer_hashtag {
+    font-size: 30px;
+  }
+    .footer_copy {
+    font-size: 24px;
+  }
+  
+
+}
+
+@media (max-width: 820px) {
+    .heading {
+        margin-top: 60px;
+        margin-bottom: 20px;
+        background: none;
+        box-shadow: none;
+        height: 450px;
+    }
+    .heading_content {
+        padding: 0;
+    }
+    .header {
+        margin-top: -30px;
+    }
+      .items_up, .items_down {
+    gap: 20px;
+  }
+    .item {
+    font-size: 30px;
+  }
+    .newlywed_item {
+    padding: 25px;
+  }
+  .img_newlywed {
+    height: 130px;
+    width: 130px;
+  }
+    .newlywed_info {
+    font-size: 22px;
+  }
+    .newlywed_title {
+    font-size: 32px;
+  }
+    .newlywed_text {
+    margin-left: 25px;
+  }
+    h4 {
+    width: 50%;
+  }
+    .answer_wrapper {
+    margin: 0 80px;
+  }
+    .form_name input[type="text"] {
+    width: 300px;
+    }
+      .swiper_img {
+    height: 450px;
+  }
+    .to-do-list_item_img {
+    display: none;
+  }
+    .to-do-list_item {
+    font-size: 26px;
+    width: 240px;
+    height: 150px;
+  }
+    .footer_inner {
+    padding: 20px;
+  }
+
+}
+
+@media (max-width: 720px) {
+        .heading {
+        margin: 40px 0;
+    }
+      .newlywed {
+    width: 85%;
+  }
+    .img_newlywed {
+    height: 150px;
+    width: 150px;
+  }
+    .row_up_item {
+    width: 350px;
+    height: 250px;
+  }
+    .time_wrapper::after {
+    width: 100%;
+  }
+  .time_img {
+    display: none;
+  }
+    .time_h6 {
+    font-size: 40px;
+  }
+    .time_p {
+    font-size: 32px;
+    margin-bottom: 20px;
+  }
+  .answer_wrapper {
+    margin: 0;
+    border-radius: 0;
+  }
+    .answer_heading {
+    font-size: 40px;
+  }
+    .form_name input[type="text"] {
+    width: 350px;
+  }
+  .footer_cntcts {
+    flex-direction: column;
+    gap: 15px;
+  }
+    .footer_inner {
+    padding: 10px;
+  }
+   .header {
+    white-space: wrap;
+  }
+    .footer_contacts {
+    align-items: start;
+  }
+  .footer_text {
+    white-space: nowrap;
+  }
+  .items_up, .items_down {
+    flex-direction: column;
+  }
+     .heading {
+    height: 450px;
+  }
+
+}
+
+@media (max-width: 620px) {
+    .header {
+        width: 13%;
+    }
+      .newlywed {
+    width: 100%;
+  }
+    .newlywed_text {
+    margin-left: 40px;
+  }
+  .timetable {
+    width: 100%;
+  }
+    .map > div {
+    width: 450px;
+    height: 300px;
+  }
+  .swiper {
+    height: 100%;
+  }
+  img {
+  max-width: 70%;
+}
+  .swiper_img {
+    height: 250px;
+  }
+  .swiper-scrollbar {
+    display: none;
+  }
+      .to-do-list_item_img {
+    display: block;
+  }
+  .to-do-list_item {
+    width: 300px;
+    height: 200px;
+  }
+    .to-do-list_item_img {
+    width: 60px;
+    height: 60px;
+  }
+    h4 {
+    width: 100%;
+  }
+    .form_name {
+    padding: 0 20px;
+  }
+    .form_menu, .form_drink {
+    padding: 0px 20px;
+  }
+    .heading {
+    height: 500px;
+  }
+
+}
+
+@media (max-width: 520px) {
+        .newlywed_text {
+    margin-left: 20px;
+  }
+  .map{
+    width: 100%;
+  }
+    .map > div {
+        border-radius: 0px;
+        width: auto;
+    height: 350px;
+    overflow: none;
+  }
+    .form_name input[type="text"] {
+    width: 250px;
+  }
+  .footer_inner {
+    flex-direction: column;
+    gap: 20px;
+  }
+  .footer_copy {
+    width: 100%;
+    text-align: start;
+  }
+  .heading_text {
+    display: none;
+  }
+    .heading {
+    height: 200px;
+  }
+  .img_newlywed {
+    display: none;
+  }
+  .newlywed_text {
+    width: 100%;
+  }
+    .header {
+    width: 15%;
+  }
+  .photos {
+    display: none;
+  }
+  .item_none {
+    display: none;
+  }
+         .time_row_up, .time_row_down {
+        width: 100%;
+       }
+       .row_up_item {
+        width: 100%;
+        border-radius: 0px;
+       }
+       .to-do-list_items {
+        width: 100%;
+       }
+       .to-do-list_item {
+        width: 100%;
+        border-radius: 0px;
+        height: 220px;
+       }
+       .option {
+        align-items: start;
+        white-space: nowrap;
+       }
+       .input {
+        white-space: nowrap;
+       }
+       .footer_inner {
+        align-items: start;
+        padding: 30px;
+       }
+
+}
+
+@media (max-width: 420px) {
+      .map > div{
+    height: 300px;
+      }
+
+         .time {
+    font-size: 60px;
+  }
+  .header {
+    margin-left: 10px;
+  }
+    .answer_heading {
+    font-size: 32px;
+  }
+  .label_style {
+    flex-direction: column;
+  }
+    .form_name input[type="text"] {
+    width: 100%;
+  }
+  .answer_wrapper {
+    padding: 21px;
+  }
+    .time {
+    font-size: 50px;
+  }
+    .header {
+    width: 18%;
+  }
+    .header {
+    margin-top: -85px;
+  }
+   .heading {
+    margin: 100px 0 40px 0;
+  }
+  .footer_text {
+    white-space: wrap;
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: 320px) {
+     .header {
+    width: 23%;
+  }
+    .heading {
+    height: 240px;
+  }
+    .time {
+    font-size: 35px;
+    font-weight: 900;
+  }
+    .map > div {
+    height: 220px;
+  }
+}