Сделал комментарии к коду, и немножко исправил код.

mveu-code · May 8, 2023 · 61ae1db · 61ae1db
1 parent 3845ce2
commit 61ae1db
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 113 deletions.
diff --git a/index.html b/index.html
@@ -342,7 +342,7 @@ <h2>Как происходит доставка?</h2>
             <input class="f11" placeholder="Введите Имя" style="margin-bottom: 20px;" type="text"><br>
             <input class="f11" placeholder="Введите E-mail" style="margin-bottom: 20px;" type="text"><br>
             <input class="f11" placeholder="Введите ваш вопрос" style="margin-bottom: 20px;" type="comment"><br>
-            <button class="button123" type="submit">Отправить</button>
+            <button class="button link" type="submit">Отправить</button>
         </div>
         <img alt="" class="women" src="img/consult1.png">
     </section>

diff --git a/style.css b/style.css
@@ -1,3 +1,4 @@
+/* Стиль всего сайта */
 * {
     box-sizing: border-box;
     padding: 0;
@@ -11,10 +12,12 @@ body {
     font-size: 15px;
 }
 
+/* Стиль ссылок */
 a {
     text-decoration: none;
 }
 
+/* Хедер */
 nav {
     display: flex;
     padding: 10px;
@@ -70,9 +73,11 @@ nav {
     height: fit-content;
     background-color: blue;
     border-radius: 30px;
+    border: none;
     padding: 10px;
 }
 
+/* Главный баннер сайта */
 .banner {
     display: flex;
     justify-content: center;
@@ -89,6 +94,7 @@ nav {
     margin-bottom: 30px;
 }
 
+/* Слайдер */
 .slider {
     width: 100%;
     height: 180px;
@@ -151,13 +157,7 @@ a.slide__next {
     right: 5%;
 }
 
-footer {
-    background-color: blue;
-    padding-bottom: 30px;
-    padding-right: 30px;
-    padding-left: 30px;
-}
-
+/* О нас */
 .banner-about {
     display: flex;
     justify-content: center;
@@ -185,6 +185,7 @@ footer {
     text-align: center;
 }
 
+/* "Почему?" */
 .banner-why {
     display: flex;
     justify-content: center;
@@ -216,6 +217,14 @@ footer {
     margin-bottom: 30px;
 }
 
+/* Футер */
+footer {
+    background-color: blue;
+    padding-bottom: 30px;
+    padding-right: 30px;
+    padding-left: 30px;
+}
+
 .nizz {
     justify-content: space-between;
     display: flex;
@@ -227,6 +236,7 @@ footer {
     color: white;
 }
 
+/* Наши партнёры */
 .our-partners {
     padding: 30px;
 }
@@ -260,6 +270,7 @@ footer {
     margin-bottom: 10px;
 }
 
+/* Блок процесса доставки */
 .how-we-delivery {
     background: url("img/delivery_banner.webp") no-repeat center;
     background-size: cover;
@@ -294,86 +305,7 @@ footer {
     font-size: 1.5em;
 }
 
-@media (max-width: 899px) {
-    nav {
-        padding-bottom: 20px;
-    }
-
-    .menu-links {
-        margin-bottom: 20px;
-    }
-
-    .delivery-steps {
-        margin-bottom: 15px;
-    }
-
-    .nizz, nav, .our-partners-brands-logos,
-    .how-we-delivery-text, .post,
-    .subscribeblock, .contacts, .container1, .container2 {
-        flex-direction: column;
-    }
-
-    .subscribeblock {
-        padding-bottom: 30px;
-    }
-
-    .contact-form {
-        margin-top: 50px;
-    }
-
-    .carta1, .carta2, .carta3, .carta4 {
-        margin-top: 15px;
-        margin-bottom: 15px;
-    }
-
-    .our-partners-brands-logos {
-        align-items: center;
-    }
-
-    .filters {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-@media (min-width: 900px) {
-    .menu {
-        display: flex;
-    }
-
-    .banner-textbutton-about .banner-text-about p {
-        margin-right: 25%;
-        margin-left: 25%;
-    }
-
-    .banner-textbutton-why .banner-text-why li,
-    .banner-textbutton-why .banner-text-why .button {
-        margin-right: 60%;
-        margin-left: 5%;
-    }
-
-    .our-partners-brands-logos {
-        justify-content: center;
-    }
-
-    .card1, .card2, .card3, .card4 {
-        margin-right: 30px;
-        margin-left: 30px;
-    }
-
-    .carta2, .carta4 {
-        margin-left: 50px;
-    }
-
-    .container1, .container2 {
-        padding: 30px;
-    }
-
-    .filters {
-        justify-content: center;
-    }
-}
-
+/* Блок со списком товаров */
 .productsblock2 {
     display: flex;
     flex-direction: column;
@@ -436,6 +368,7 @@ input[type="radio"] {
     margin: auto;
 }
 
+/* Блок с отзывами */
 .feedback {
     background-color: #DBF2FF;
 }
@@ -467,6 +400,7 @@ input[type="radio"] {
     padding: 10px;
 }
 
+/* Блок подписки на рассылку */
 .subscribeblock {
     align-items: center;
     justify-content: center;
@@ -499,6 +433,7 @@ input[type="radio"] {
     color: rgba(255, 255, 255, 0.7);
 }
 
+/* Блок "контакты" */
 .contacts {
     gap: 100px;
     justify-content: center;
@@ -512,20 +447,6 @@ input[type="radio"] {
     text-align: center;
 }
 
-.button123 {
-    border-radius: 20px;
-    background-color: blue;
-    color: white;
-    width: 100px;
-    height: 40px;
-    border: none;
-}
-
-.button123:hover {
-    transition: 0.5s;
-    color: rgba(255, 255, 255, 0.7);
-}
-
 .f11 {
     outline: none;
     padding: 20px;
@@ -534,18 +455,20 @@ input[type="radio"] {
     background-color: #F3F3F3;
     height: 40px;
 }
+
+/* Кнопка "вверх" */
 #myBtn {
-    position: fixed; /* Fixed/sticky position */
-    bottom: 20px; /* Place the button at the bottom of the page */
-    right: 30px; /* Place the button 30px from the right */
-    z-index: 99; /* Make sure it does not overlap */
-    border: none; /* Remove borders */
-    outline: none; /* Remove outline */
-    background-color: blue; /* Set a background color */
-    cursor: pointer; /* Add a mouse pointer on hover */
-    padding: 15px; /* Some padding */
-    border-radius: 10px; /* Rounded corners */
-    font-size: 18px; /* Increase font size */
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: blue;
+    cursor: pointer;
+    padding: 15px;
+    border-radius: 10px;
+    font-size: 18px;
 }
 
 #myBtn a {
@@ -554,6 +477,7 @@ input[type="radio"] {
 
 #myBtn a:hover {
     color: rgba(255, 255, 255, 0.7);
+    transition: 0.5s;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
@@ -562,3 +486,87 @@ input[type="radio"] {
         scroll-behavior: smooth;
     }
 }
+
+/* Настройки адаптивности для поддержки мобильных устройств */
+
+/* Настройки для смартфонов и небольших планшетов */
+@media (max-width: 899px) {
+    nav {
+        padding-bottom: 20px;
+    }
+
+    .menu-links {
+        margin-bottom: 20px;
+    }
+
+    .delivery-steps {
+        margin-bottom: 15px;
+    }
+
+    .nizz, nav, .our-partners-brands-logos,
+    .how-we-delivery-text, .post,
+    .subscribeblock, .contacts, .container1, .container2 {
+        flex-direction: column;
+    }
+
+    .subscribeblock {
+        padding-bottom: 30px;
+    }
+
+    .contact-form {
+        margin-top: 50px;
+    }
+
+    .carta1, .carta2, .carta3, .carta4 {
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    .our-partners-brands-logos {
+        align-items: center;
+    }
+
+    .filters {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+/* Настройки для больших планшетов, ноутбуков и ПК */
+@media (min-width: 900px) {
+    .menu {
+        display: flex;
+    }
+
+    .banner-textbutton-about .banner-text-about p {
+        margin-right: 25%;
+        margin-left: 25%;
+    }
+
+    .banner-textbutton-why .banner-text-why li,
+    .banner-textbutton-why .banner-text-why .button {
+        margin-right: 60%;
+        margin-left: 5%;
+    }
+
+    .our-partners-brands-logos {
+        justify-content: center;
+    }
+
+    .card1, .card2, .card3, .card4 {
+        margin-right: 30px;
+        margin-left: 30px;
+    }
+
+    .carta2, .carta4 {
+        margin-left: 50px;
+    }
+
+    .container1, .container2 {
+        padding: 30px;
+    }
+
+    .filters {
+        justify-content: center;
+    }
+}