fixed hover link and centered images

mate-academy · Jun 23, 2024 · 4ed925a · 4ed925a
1 parent 7416297
commit 4ed925a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -415,7 +415,7 @@
             <div class="features__slider-arrows"></div>
 
             <img
-              class="features__image no-borders"
+              class="features__image no-borders???"
               src="./images/banner-images/features_image.png"
               alt="features"
             />
@@ -473,15 +473,15 @@
         </div>
 
         <div class="footer__social-media">
-          <a href="#">
+          <a href="https://www.facebook.com/" target="_blank">
             <div class="social-media__link social-media__facebook"></div>
           </a>
 
-          <a href="#">
+          <a href="https://www.twitter.com/" target="_blank">
             <div class="social-media__link social-media__twiter"></div>
           </a>
 
-          <a href="#">
+          <a href="https://www.instagram.com/" target="_blank">
             <div class="social-media__link social-media__instagram"></div>
           </a>
         </div>

diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss
@@ -1,7 +1,6 @@
 .features {
   &__container {
     background-color: $second-turquoise-color;
-    padding-inline: 30px;
 
     @include on-tablet {
       @include page-grid;
@@ -17,6 +16,7 @@
 
   &__content {
     &--sound-music {
+      margin-inline: 30px;
       @include on-tablet {
         grid-column: 2 / 5;
       }
@@ -100,7 +100,7 @@
 
   &__image {
     display: block;
-    width: 100vw;
+    width: 100%;
 
     @include on-tablet {
       position: absolute;

diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -19,20 +19,15 @@
 }
 
 // to skip autofill styles
+input:-moz-autofill {
+  box-shadow: 0 0 0 30px $main-background-color inset !important;
+  -moz-text-fill-color: #000 !important;
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px $main-background-color inset !important;
   -webkit-text-fill-color: #000 !important;
 }
-
-input:-moz-autofill {
-  box-shadow: 0 0 0 30px $main-background-color inset !important;
-  -moz-text-fill-color: #000 !important;
-}
-
-input:-ms-input-placeholder {
-  color: #000 !important;
-}
-
diff --git a/src/styles/blocks/social-media.scss b/src/styles/blocks/social-media.scss
@@ -4,6 +4,12 @@
     width: 24px;
     background-repeat: no-repeat;
     background-position: center;
+
+    transition-duration: $effect-duration;
+
+    &:hover {
+      scale: 1.1;
+    }
   }
 
   &__facebook {

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -32,9 +32,11 @@ iframe {
 
 .no-borders {
   margin-inline: -30px;
+  width: 100vw;
 
   @include on-tablet {
     margin-inline: 0;
+    width: 100%;
   }
 }