css added

Author: Sabella-8

src/components/Card/Card.jsx

@@ -8,9 +8,10 @@ const Card = (props) => {
       <h2>{title}</h2>
       <img src={image} alt={title} />
 
-      <a href={url}> {title}</a>
-
-
+      <a href={url} className="cardhref ">
+        {" "}
+        {title}
+      </a>
     </div>
   );
 };

src/components/Card/Card.scss

@@ -1,16 +1,27 @@
 .card {
-  display: grid;
-  grid-template:
-    "image image image" 1fr
-    ". title ." auto / var(--space--gap) 1fr var(--space--gap);
-  border: var(--border);
-  border-color: var(--color--accent);
+  display: flex;
+  flex-direction: column;
+}
 
-  &__title {
-    grid-area: title;
-  }
-  &__image {
-    grid-area: image;
-    mix-blend-mode: overlay;
-  }
+h2 {
+  text-align: center;
+  font-size: 2em;
+}
+h2:hover {
+  background-color: rgb(26, 3, 26);
+  color: white;
+}
+.cardhref {
+  font-size: 2em;
+  font-weight: bold;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  position: relative;
+  top: -40%;
+  text-align: center;
+}
+.cardhref:hover {
+  background-color: skyblue;
+  opacity: 0.7;
+  color: black;
 }

src/components/Search/Search.scss

@@ -3,6 +3,7 @@
     display: flex;
     gap: var(--space--gap);
     align-items: stretch;
+    margin-bottom: 15px;
   }
   &__label {
     align-self: center;

src/components/SearchButton/SearchButton.scss

@@ -0,0 +1,3 @@
+.button {
+  margin-bottom: 10px;
+}

src/components/SearchResult/SearchResult.scss

@@ -4,9 +4,12 @@ table {
 }
 
 thead {
-  background-color: #f2f2f2;
+  background-color: rgb(31, 11, 31);
+  color: white;
+}
+tbody tr:hover {
+  background-color: skyblue;
 }
-
 th,
 td {
   padding: 8px;
@@ -17,3 +20,6 @@ td {
 th {
   font-weight: bold;
 }
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}