corrections for design added

mate-academy · Jul 16, 2024 · a18188f · a18188f
1 parent 3c0d2ad
commit a18188f
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 20 deletions.
diff --git a/src/index.html b/src/index.html
@@ -562,31 +562,49 @@ <h3 class="contacts__title">Contact us</h3>
               href="#"
               class="contacts__socials-link"
             >
-              <img
-                class="contacts__socials-facebook"
-                src="./images/icons/facebook.svg"
-                alt="Facebook"
-              />
+              <svg
+                class="contacts__socials-link-app"
+                width="15"
+                height="24"
+                viewBox="0 0 15 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.6667 0.666738C14.6667 0.489927 14.5964 0.320358 14.4714 0.195334C14.3464 0.0703093 14.1768 7.12564e-05 14 7.12564e-05H10.6667C8.98816 -0.0835409 7.3448 0.500593 6.09563 1.62484C4.84646 2.7491 4.09305 4.32207 4 6.00007V9.60007H0.666667C0.489856 9.60007 0.320287 9.67031 0.195262 9.79533C0.070238 9.92036 0 10.0899 0 10.2667V13.7334C0 13.9102 0.070238 14.0798 0.195262 14.2048C0.320287 14.3298 0.489856 14.4001 0.666667 14.4001H4V23.3334C4 23.5102 4.07024 23.6798 4.19526 23.8048C4.32029 23.9298 4.48986 24.0001 4.66667 24.0001H8.66667C8.84348 24.0001 9.01305 23.9298 9.13807 23.8048C9.2631 23.6798 9.33333 23.5102 9.33333 23.3334V14.4001H12.8267C12.9749 14.4022 13.1197 14.3548 13.238 14.2655C13.3563 14.1762 13.4415 14.0499 13.48 13.9067L14.44 10.4401C14.4665 10.3416 14.4701 10.2383 14.4504 10.1382C14.4308 10.0381 14.3884 9.94384 14.3265 9.8627C14.2647 9.78155 14.1851 9.71568 14.0938 9.67015C14.0025 9.62462 13.902 9.60064 13.8 9.60007H9.33333V6.00007C9.3665 5.67004 9.52149 5.36422 9.76803 5.14233C10.0146 4.92044 10.335 4.79841 10.6667 4.80007H14C14.1768 4.80007 14.3464 4.72983 14.4714 4.60481C14.5964 4.47978 14.6667 4.31021 14.6667 4.1334V0.666738Z"
+                />
+              </svg>
             </a>
             <a
               href="#"
               class="contacts__socials-link"
             >
-              <img
-                class="contacts__socials-twitter"
-                src="./images/icons/twitter.svg"
-                alt="Twitter"
-              />
+              <svg
+                class="contacts__socials-link-app"
+                width="32"
+                height="32"
+                viewBox="0 0 32 32"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.7724 26.6671C12.744 26.733 14.7088 26.4031 16.5507 25.6968C18.3926 24.9905 20.0743 23.9221 21.4963 22.5548C22.9183 21.1875 24.0517 19.549 24.8297 17.7362C25.6077 15.9234 26.0144 13.973 26.0257 12.0004C26.9293 10.8823 27.6002 9.59482 27.9991 8.21372C28.0289 8.1046 28.0264 7.9892 27.9922 7.88142C27.9579 7.77363 27.8931 7.67806 27.8058 7.6062C27.7184 7.53435 27.6122 7.48928 27.4998 7.47642C27.3874 7.46356 27.2737 7.48346 27.1724 7.53372C26.6997 7.76126 26.1675 7.83475 25.6509 7.74386C25.1342 7.65296 24.6591 7.40225 24.2924 7.02705C23.8243 6.51449 23.2582 6.10109 22.6274 5.81135C21.9966 5.52162 21.3141 5.36143 20.6203 5.3403C19.9265 5.31916 19.2356 5.4375 18.5883 5.6883C17.9411 5.9391 17.3508 6.31727 16.8524 6.80038C16.17 7.46126 15.6702 8.28744 15.4015 9.19862C15.1328 10.1098 15.1044 11.075 15.3191 12.0004C10.8524 12.2671 7.78574 10.1471 5.33241 7.24038C5.25871 7.15692 5.1623 7.09672 5.05495 7.06714C4.9476 7.03757 4.83396 7.03989 4.72791 7.07382C4.62186 7.10776 4.52799 7.17184 4.45775 7.25825C4.38752 7.34465 4.34397 7.44964 4.33241 7.56038C3.86504 10.1529 4.20218 12.8264 5.29857 15.2218C6.39495 17.6172 8.19807 19.6197 10.4657 20.9604C8.94526 22.7042 6.81002 23.7933 4.50575 24.0004C4.38229 24.0209 4.26833 24.0794 4.17981 24.1679C4.09129 24.2563 4.03264 24.3702 4.01207 24.4937C3.9915 24.6171 4.01003 24.7439 4.06508 24.8563C4.12013 24.9686 4.20894 25.061 4.31908 25.1204C6.32377 26.1222 8.53139 26.6513 10.7724 26.6671Z"
+                />
+              </svg>
             </a>
             <a
               href="#"
               class="contacts__socials-link"
             >
-              <img
-                class="contacts__socials-instagram"
-                src="./images/icons/instagram.svg"
-                alt="Instagram"
-              />
+              <svg
+                class="contacts__socials-link-app"
+                width="32"
+                height="32"
+                viewBox="0 0 32 32"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16.0027 9.8467C12.5974 9.8467 9.85075 12.594 9.85075 16C9.85075 19.406 12.5974 22.1533 16.0027 22.1533C19.4079 22.1533 22.1546 19.406 22.1546 16C22.1546 12.594 19.4079 9.8467 16.0027 9.8467ZM16.0027 20.0004C13.8021 20.0004 12.0031 18.2064 12.0031 16C12.0031 13.7936 13.7968 11.9996 16.0027 11.9996C18.2086 11.9996 20.0022 13.7936 20.0022 16C20.0022 18.2064 18.2032 20.0004 16.0027 20.0004ZM23.8412 9.595C23.8412 10.3929 23.1987 11.0302 22.4062 11.0302C21.6085 11.0302 20.9713 10.3876 20.9713 9.595C20.9713 8.80241 21.6138 8.15977 22.4062 8.15977C23.1987 8.15977 23.8412 8.80241 23.8412 9.595ZM27.9157 11.0517C27.8247 9.12909 27.3856 7.42608 25.9775 6.02298C24.5747 4.61988 22.8721 4.18074 20.9499 4.08435C18.9689 3.97188 13.0311 3.97188 11.0501 4.08435C9.1333 4.17539 7.43068 4.61453 6.02253 6.01763C4.61439 7.42073 4.1807 9.12373 4.08433 11.0463C3.97189 13.0278 3.97189 18.9669 4.08433 20.9483C4.17535 22.8709 4.61439 24.5739 6.02253 25.977C7.43068 27.3801 9.12794 27.8193 11.0501 27.9157C13.0311 28.0281 18.9689 28.0281 20.9499 27.9157C22.8721 27.8246 24.5747 27.3855 25.9775 25.977C27.3803 24.5739 27.8193 22.8709 27.9157 20.9483C28.0281 18.9669 28.0281 13.0331 27.9157 11.0517ZM25.3564 23.0744C24.9388 24.1241 24.1303 24.9327 23.0755 25.3558C21.496 25.9824 17.7481 25.8378 16.0027 25.8378C14.2572 25.8378 10.504 25.977 8.92984 25.3558C7.88042 24.9381 7.07195 24.1294 6.64897 23.0744C6.02253 21.4946 6.16709 17.7458 6.16709 16C6.16709 14.2542 6.02789 10.5001 6.64897 8.92558C7.06659 7.87593 7.87507 7.06728 8.92984 6.6442C10.5093 6.01763 14.2572 6.16222 16.0027 6.16222C17.7481 6.16222 21.5014 6.02298 23.0755 6.6442C24.1249 7.06192 24.9334 7.87058 25.3564 8.92558C25.9828 10.5054 25.8383 14.2542 25.8383 16C25.8383 17.7458 25.9828 21.4999 25.3564 23.0744Z"
+                />
+              </svg>
             </a>
           </div>
         </div>

diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss
@@ -73,8 +73,7 @@
     }
 
     &:hover {
-      background-color: $c-blue-gray;
-      border: 2px solid $c-blue;
+      background-color: $c-dark-blue;
     }
   }
 }
diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss
@@ -47,6 +47,15 @@
 
     &-link {
       @include hover(scale, 1.1);
+
+      &-app {
+        fill: $c-white;
+        transition: fill 0.3s;
+
+        &:hover {
+          fill: $c-blue;
+        }
+      }
     }
   }
 }
diff --git a/src/styles/blocks/header-main.scss b/src/styles/blocks/header-main.scss
@@ -44,7 +44,7 @@
       color: $c-gray;
 
       &:hover {
-        border: 2px solid $c-gray;
+        background-color: $c-dark-blue;
       }
     }
   }

diff --git a/src/styles/blocks/message.scss b/src/styles/blocks/message.scss
@@ -81,7 +81,7 @@
 
     &__button {
       &:hover {
-        border: 2px solid $c-gray;
+        background-color: $c-dark-blue;
       }
 
       width: 100%;

diff --git a/src/styles/blocks/quote.scss b/src/styles/blocks/quote.scss
@@ -48,11 +48,12 @@
       position: relative;
       border-radius: 50%;
       left: 50%;
-      top: 50%;
+      bottom: 50%;
       transform: translate(-50%, -50%);
       width: 110px;
       height: 110px;
       object-fit: cover;
+      top: 0;
     }
   }
 

diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -1,6 +1,7 @@
 $c-gray: #eee;
 $c-white: #fff;
 $c-blue: #2060f6;
+$c-dark-blue: #144ed4;
 $c-blue-gray: #253757;
 $c-gray-text: #6c788b;
 $c-section: #c0cdd7;