add media-quries

css/style.css

@@ -283,6 +283,9 @@ footer {
   justify-content: space-between;
   width: 60%;
 }
+.footer .item {
+  margin-right: 5px;
+}
 .footer .item a {
   display: block;
   width: 25px;
@@ -416,4 +419,92 @@ footer {
 }
 .see:hover {
   background-color: rgba(141, 97, 2, 0.468);
+}
+
+@media (max-width: 1024px) {
+  .cards {
+    grid-template-columns: repeat(2, 49%);
+    grid-column-gap: 20px;
+  }
+  .about-more {
+    flex-direction: column;
+    align-items: center;
+  }
+  .about__image {
+    margin-bottom: 20px;
+  }
+  .about-text {
+    width: 100%;
+  }
+  .about-text .card-inf__item {
+    margin-top: 10px;
+  }
+  .about-text .enroll {
+    margin-top: 10px;
+  }
+}
+@media (max-width: 820px) {
+  .settings-rest {
+    width: 50%;
+  }
+  .nav-header {
+    width: 50%;
+  }
+  .footer .about {
+    width: 40%;
+  }
+}
+@media (max-width: 640px) {
+  header {
+    height: 90px;
+  }
+  .header {
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 10px;
+  }
+  .nav-header {
+    margin-top: 10px;
+    width: 80%;
+  }
+  .sort {
+    margin-top: 5px;
+  }
+  .settings-rest {
+    flex-wrap: wrap;
+  }
+  .settings-rest p {
+    margin-left: 20px;
+    margin-top: 5px;
+  }
+  .settings-rest .ended {
+    margin-left: 27px;
+  }
+  .about__image {
+    width: 100%;
+  }
+  .logo {
+    text-align: center;
+  }
+  .footer {
+    display: block;
+  }
+  .footer .text {
+    width: 100%;
+  }
+  .footer .networks {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .footer .networks .text {
+    text-align: center;
+  }
+  .footer .networks .social {
+    width: 40%;
+    margin: 0 auto;
+  }
+  .footer .about {
+    width: 60%;
+    margin: 0 auto;
+  }
 }

script.js

@@ -145,8 +145,7 @@ cardsToShow.forEach((card, index) => {
     </ul>
     <p class="card__title">${card.title}</p>
     <p class="card__describe">
-      ${card.describe} <a href="about.html" onclick="${() =>
-    setCard(card)}" class="more">См. подробнее...</a>
+      ${card.describe} <a href="about.html" value=${index} class="more">См. подробнее...</a>
     </p>
     <div class="card-inf">
       <p class="card-inf__item time">${card.time}</p>
@@ -162,6 +161,7 @@ cardsToShow.forEach((card, index) => {
 
 subscribe.forEach((el) => {
   el.addEventListener("click", () => {
+    console.log(el.value);
     localStorage.setItem("card", JSON.stringify(cards[el.value]));
     location.href = "about.html";
   });

style.scss

@@ -300,6 +300,7 @@ footer {
   }
 
   .item {
+    margin-right: 5px;
     a {
       display: block;
       width: 25px;
@@ -381,15 +382,15 @@ footer {
       margin-left: 15px;
     }
 
-    .card-inf__item::before{
+    .card-inf__item::before {
       left: -15px;
     }
 
-    .date::before{
+    .date::before {
       content: url("../icons/calendar2.svg");
     }
 
-    .people::before{
+    .people::before {
       content: url("../icons/people.svg");
     }
   }
@@ -458,3 +459,114 @@ footer {
     background-color: rgba(141, 97, 2, 0.468);
   }
 }
+
+@media (max-width: 1024px) {
+  .cards {
+    grid-template-columns: repeat(2, 49%);
+    grid-column-gap: 20px;
+  }
+
+  .about {
+    &-more {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &__image {
+      margin-bottom: 20px;
+    }
+
+    &-text {
+      width: 100%;
+
+      .card-inf__item {
+        margin-top: 10px;
+      }
+      .enroll{
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+@media (max-width: 820px) {
+  .settings-rest {
+    width: 50%;
+  }
+  .nav-header {
+    width: 50%;
+  }
+  .footer {
+    .about {
+      width: 40%;
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  header {
+    height: 90px;
+  }
+
+  .header {
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 10px;
+  }
+
+  .nav-header {
+    margin-top: 10px;
+    width: 80%;
+  }
+
+  .sort {
+    margin-top: 5px;
+  }
+
+  .settings-rest {
+    flex-wrap: wrap;
+
+    p {
+      margin-left: 20px;
+      margin-top: 5px;
+    }
+
+    .ended {
+      margin-left: 27px;
+    }
+  }
+
+  .about__image{
+    width: 100%;
+  }
+
+  .logo {
+    text-align: center;
+  }
+  .footer {
+    display: block;
+
+    .text {
+      width: 100%;
+    }
+
+    .networks {
+      width: 100%;
+      margin: 0 auto;
+
+      .text {
+        text-align: center;
+      }
+
+      .social {
+        width: 40%;
+        margin: 0 auto;
+      }
+    }
+
+    .about {
+      width: 60%;
+      margin: 0 auto;
+    }
+  }
+}