Update README.md

README.md

@@ -17,112 +17,73 @@ license: creativeml-openrail-m
   </a>
 </div>
 
-
-
-
-<style>.container .row {
-    column-count: 5;
-    column-gap: 10px;
-}
-
-.model-card {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    margin-bottom: 20px;
-    overflow: hidden;
-    border-radius: 10px;
-    break-inside: avoid;
-}
-
-.model-card img {
-    width: 100%;
-    display: block;
-    border-radius: 10px;
-    transition: transform 0.3s ease;
-}
-
-.model-title,
-.model-description,
-.download-section {
-    display: none;
-}
-
-.hover-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    text-align: center;
-    font-family: 'Arial', sans-serif;
-    font-weight: 600;
-    color: #FFFFFF;
-}
-
-.model-link {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 90%;
-    margin: 0 auto;
-    background: rgba(255, 255, 255, 0.3);
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 10px;
-    text-decoration: none; /* Remove underline */
-    color: #FFFFFF; /* FF pink/purple color */
-}
-
-.model-link:visited {
-    color: #b300b3; /* FF pink/purple color for visited link */
-}
-
-.from-section {
-    display: block;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(5px);
-    padding: 8px;
-    text-align: center;
-    font-size: 12px;
-}
-
-.model-link img {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 8px;
-}
-
-.model-card:hover .hover-content {
-    opacity: 1;
-}
-        svg {
-            width: 100%;
-            height: 100%;
-            visibility: hidden;
-        }
-
-        .ell, #ai {
-            fill: none;
-        }
-</style>
-
+<style>
+            body {
+                font-family: 'Arial', sans-serif;
+                background-color: #f4f4f4;
+                margin: 0;
+                padding: 20px;
+            }
+            .container {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                gap: 20px;
+                justify-items: center;
+            }
+            .model-card {
+                position: relative;
+                background-color: #fff;
+                border-radius: 10px;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                margin: 20px;
+                padding: 20px;
+                width: 300px;
+                overflow: hidden;
+                transition: transform .2s;
+            }
+            .model-card img {
+                max-width: 100%;
+                border-radius: 5px;
+            }
+            .model-title {
+                font-size: 18px;
+                font-weight: bold;
+                margin: 10px 0;
+                color: #333;
+            }
+            .model-description {
+                font-size: 14px;
+                color: #777;
+                height: 50px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .model-link {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                text-decoration: none;
+                color: #333;
+                font-size: 12px;
+                margin-top: 10px;
+            }
+            .model-link img {
+                width: 16px;
+                height: 16px;
+                margin-left: 5px;
+            }
+            .download-section {
+                font-size: 14px;
+                font-weight: bold;
+                color: #333;
+            }
+            .from-section {
+                font-size: 12px;
+                color: #777;
+            }
+        </style>
 <div class="container">
-  <div class="row">
 <!-- Card 1 -->
 <div class="model-card">
 <img alt="FFusion/FFusionXL-BASE · Hugging Face - Cover Image" src="https://ffusion-readme.hf.space/FFusion00.jpeg"/>
@@ -141,7 +102,6 @@ license: creativeml-openrail-m
 <div class="hover-content"><a class="model-link" href="https://huggingface.co/FFusion/FFusionXL-LoRa-SDXL-Potion-Art-Engine">FFusion/FFusionXL-LoRa-SDXL-Potion-Art-Engine · Hugging Face <img alt="Favicon" src="https://ffusion-readme.hf.space/huggingface.co_favicon.ico"/></a>
 <div class="from-section">Download from: (huggingface.co)</div></div>
 </div>
-
 <!-- Card 3 -->
 <div class="model-card">
 <img alt="FFusion/FFusion-BaSE · Hugging Face - Cover Image" src="https://ffusion-readme.hf.space/FFusion23.jpeg"/>
@@ -178,8 +138,6 @@ license: creativeml-openrail-m
 <div class="hover-content"><a class="model-link" href="https://huggingface.co/FFusion/FFusionXL-09-SDXL">FFusion/FFusionXL-0.9 · Hugging Face <img alt="Favicon" src="https://ffusion-readme.hf.space/huggingface.co_favicon.ico"/></a>
 <div class="from-section">Download from: (huggingface.co)</div></div>
 </div>
-
-
 <div class="model-card">
 <img alt="GAG - RPG Potions  |  LoRa 2.1 - v 0.1 | Stable Diffusion LoRA | Civitai - Cover Image" src="https://ffusion-readme.hf.space/FFusion06.jpeg"/>
 <div class="model-title">GAG - RPG Potions  |  LoRa 2.1 - v 0.1 | Stable Diffusion LoRA | Civitai</div>
@@ -204,7 +162,6 @@ license: creativeml-openrail-m
 <div class="hover-content"><a class="model-link" href="https://civitai.com/models/20617/color-fusion">Color Fusion - ver 1.o | Stable Diffusion  Checkpoint  | Civitai <img alt="Favicon" src="https://ffusion-readme.hf.space/civitai.com_favicon.ico"/></a>
 <div class="from-section">Download from: (civitai.com)</div></div>
 </div>
-
 <div class="model-card">
 <img alt="di.FFUSION.ai Text Encoder - SD 2.1 LyCORIS - FXAA v1.0 | Stable Diffusion LyCORIS | Civitai - Cover Image" src="https://ffusion-readme.hf.space/FFusion19.jpeg"/>
 <div class="model-title">di.FFUSION.ai Text Encoder - SD 2.1 LyCORIS - FXAA v1.0 | Stable Diffusion LyCORIS | Civitai</div>
@@ -301,7 +258,6 @@ license: creativeml-openrail-m
 <div class="hover-content"><a class="model-link" href="https://civitai.com/models/19093/latexid-leather-and-latex-leggings">Latex.ID - Leather &amp; Latex Leggings - v. 0.3 | Stable Diffusion LoRA | Civitai <img alt="Favicon" src="https://ffusion-readme.hf.space/civitai.com_favicon.ico"/></a>
 <div class="from-section">Download from: (civitai.com)</div></div>
 </div>
-
 <div class="model-card">
 <img alt="LATEX Generator - 1.5 | by Latex.ID - v0.9 | Stable Diffusion  Checkpoint  | Civitai - Cover Image" src="https://ffusion-readme.hf.space/FFusion20.jpeg"/>
 <div class="model-title">LATEX Generator - 1.5 | by Latex.ID - v0.9 | Stable Diffusion  Checkpoint  | Civitai</div>
@@ -310,5 +266,4 @@ license: creativeml-openrail-m
 <div class="hover-content"><a class="model-link" href="https://civitai.com/models/14503/latex-generator-15-or-by-latexid">LATEX Generator - 1.5 | by Latex.ID - v0.9 | Stable Diffusion  Checkpoint  | Civitai <img alt="Favicon" src="https://ffusion-readme.hf.space/civitai.com_favicon.ico"/></a>
 <div class="from-section">Download from: (civitai.com)</div></div>
 </div>
-</div>
 </div>