Update index-style.css

css/index-style.css

@@ -1,118 +1,130 @@
-/* * {
-  padding: 0;
-  margin: 0;
-} */
+
 body {
-  background-color: whitesmoke;
-  font-family: outfit, rubik;
+  background: linear-gradient(135deg, #ece9e6, #ffffff);
+  font-family: 'Outfit', 'Rubik', sans-serif;
+  color: #333;
 }
+
 .container {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   min-height: 80vh;
+  gap: 1rem;
+  padding: 2rem;
 }
+
 .container-item {
-  background-color: white;
-  border-radius: 5px;
-  margin: 1rem;
-  padding: 1rem;
-  height: min-content;
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+
+.container-item:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
 .container-item > .img-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 13rem;
+  height: 14rem;
+  overflow: hidden;
+  transition: all 0.3s ease;
 }
+
 .container-item > .img-wrapper > img {
-  object-fit: contain;
+  object-fit: cover;
   width: 100%;
-  border-radius: 5px;
+  height: 100%;
+  transition: transform 0.4s ease;
+  border-radius: 10px 10px 0 0;
 }
-.container-item > .img-wrapper > img:hover {
+
+.container-item > .img-wrapper:hover > img {
+  transform: scale(1.1);
   cursor: pointer;
 }
-.container-item > .img-wrapper:hover + h3 {
-  text-decoration: underline;
-}
+
 .container-item > h3 {
-  transition: all;
-  transition-duration: 200ms;
-  cursor: pointer;
-  margin: 0rem;
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+  margin: 0.75rem 0;
+  font-size: 1.2rem;
+  color: #333;
+  transition: color 0.3s ease;
+  white-space: nowrap;
   overflow: hidden;
-
-  /* text-decoration: solid; */
+  text-overflow: ellipsis;
 }
+
 .container-item > h3:hover {
+  color: #3498db;
   text-decoration: underline;
 }
+
 .container-item > p {
-  font-size: 10px;
-  color: gray;
-  line-clamp: 2;
+  font-size: 0.9rem;
+  color: #777;
+  margin-bottom: 1rem;
+  line-height: 1.5;
   display: -webkit-box;
-  -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  padding: 0;
-}
-.container-item > div > button > h3 {
-  margin: 0;
-  padding: 0;
-  font-family: rubik;
-  font-weight: 100;
 }
+
 .container-item > div > button {
-  border: 1px solid gainsboro;
-  border-radius: 3px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  margin-top: 0.9rem;
-  background: none;
+  border: 1px solid #3498db;
+  border-radius: 5px;
+  padding: 0.6rem 1rem;
+  margin-top: 0.5rem;
+  background: transparent;
+  color: #3498db;
+  font-size: 0.9rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 10px;
-  transition: all;
-  transition-duration: 300ms;
-  background: transparent;
+  transition: all 0.3s ease;
 }
+
 .container-item > div > button:hover {
-  border: 1px solid rgb(187, 187, 187);
-  background: rgba(0, 0, 0, 0.01);
+  background-color: #3498db;
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
 }
 
-@media only screen and (max-width: 600px) {
+.container-item > div > button > h3 {
+  margin: 0;
+  padding: 0;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 500;
+}
+
+@media only screen and (max-width: 900px) {
   .container {
-    display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.5rem;
   }
-  .container-item > h3 {
-    font-size: 13px;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .container-item {
-    background-color: white;
-    border-radius: 5px;
-    margin: 0.3rem;
-    padding: 0.8rem;
+}
+
+@media only screen and (max-width: 600px) {
+  .container {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    padding: 1rem;
   }
+
   .container-item > .img-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 8rem;
+    height: 10rem;
+  }
+
+  .container-item > h3 {
+    font-size: 1rem;
+  }
+
+  .container-item > p {
+    font-size: 0.8rem;
   }
 }