anime css

codingmster1 · codingmster1 · commit 7d5019063f7e · 2023-09-11T23:32:42.000-04:00
diff --git a/src/App.css b/src/App.css
@@ -39,36 +39,6 @@ html {
     justify-content: space-around;
   }
 
-  .anime {
-    width: 25%;
-    padding: 16px;
-  }
-  
-  .anime__name {
-    color: #e6700f;
-    font-size: 18px;
-  }
-  
-  .anime__img--wrapper {
-    border-radius: 8px;
-    overflow: hidden;
-    margin-bottom: 8px;
-    box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.2);
-    max-height: 380px;
-  }
-
-  .anime__img {
-    width: 100%;
-    height: 100%;
-    transform: scale(1.1);
-    transition: all 300ms ease;
-  }
-  
-  .anime:hover .anime__img {
-    filter: brightness(80%);
-    opacity: 0.86;
-    transform: scale(1.2);
-  }
   
   .container {
     padding: 24px 24px;
diff --git a/src/components/ui/Anime.css b/src/components/ui/Anime.css
@@ -0,0 +1,31 @@
+.anime {
+    width: 25%;
+    padding: 16px;
+  }
+  
+  .anime__name {
+    color: #e6700f;
+    font-size: 18px;
+  }
+  
+  .anime__img--wrapper {
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 8px;
+    box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.2);
+    max-height: 380px;
+  }
+
+  .anime__img {
+    width: 100%;
+    height: 100%;
+    transform: scale(1.1);
+    transition: all 300ms ease;
+  }
+  
+  .anime:hover .anime__img {
+    filter: brightness(80%);
+    opacity: 0.86;
+    transform: scale(1.2);
+  }
+  
diff --git a/src/components/ui/Anime.jsx b/src/components/ui/Anime.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "../src/App.css";
+import "Anime.css";
 import { Link } from "react-router-dom";
 
 function Anime({ title, cover, id }) {
