variables for colors not for background, fix alt for img, font declar…

…ation repeat removed
mate-academy · Oct 14, 2024 · c0515d5 · c0515d5
1 parent c834bf4
commit c0515d5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/src/index.html b/src/index.html
@@ -20,7 +20,7 @@
       href="https://fonts.gstatic.com"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -31,7 +31,7 @@
     >
       <img
         src="./images/imac.jpeg"
-        alt="phtot of i-mac"
+        alt="photo of i-mac"
         class="card__photo"
       />
 

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,8 +1,9 @@
-$bc-image: url(/src/images/star-active.svg);
 $btn-color: #00acdc;
+$btn-text-color: #fff;
 $main-acent: #060b35;
 $secondary: #616070;
 $btn-hover-color: #fff;
+$card-border-color: #f3f3f3;
 
 body {
   margin: 0;
@@ -13,14 +14,9 @@ body {
 }
 
 .card {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 10px;
-  line-height: 14px;
-
   box-sizing: border-box;
   width: 200px;
-  border: 1px solid #f3f3f3;
+  border: 1px solid $card-border-color;
   border-radius: 5px;
   padding: 32px 16px 16px;
 
@@ -30,11 +26,12 @@ body {
     width: 160px;
     height: 134px;
   }
+
   &__btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: $btn-text-color;
     text-transform: uppercase;
     text-decoration: none;
     font-size: 14px;
@@ -99,16 +96,15 @@ body {
   flex-direction: row;
 
   &__star {
-    background-image: url(/src/images/star.svg);
-    background-position: center;
+    background: url(/src/images/star.svg);
     height: 16px;
     margin-right: 4px;
     width: 16px;
     background-repeat: no-repeat;
   }
 
   &.stars--4 :nth-child(-n + 4) {
-    background-image: $bc-image;
+    background-image: url('/src/images/star-active.svg');
   }
 
   & :last-of-type {