Update README.md

README.md

@@ -9,156 +9,79 @@ tags:
   - stable-diffusion
 library_name: safetensors
 ---
-placeholder, ty lyn for the style (it won't look like this when I'm done no copystrike pls ty)
-
 <style>
-  .title-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh; /* Adjust this value to position the title vertically */
-  }
-  
-  .title {
-    font-size: 2.5em;
-    text-align: center;
-    color: #333;
-    font-family: 'Helvetica Neue', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    padding: 0.5em 0;
-    background: transparent;
-  }
-  
-  .title span {
-    background: -webkit-linear-gradient(45deg, #7ed56f, #28b485);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  
   .custom-table {
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
     margin-top: 2em;
   }
-  
   .custom-table td {
     width: 50%;
     vertical-align: top;
     padding: 10px;
-    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
   }
-
-  .custom-image-container {
-    position: relative;
-    width: 100%;
-    margin-bottom: 0em;
-    overflow: hidden;
-    border-radius: 10px;
-    transition: transform .7s;
-    /* Smooth transition for the container */
-  }
-
-  .custom-image-container:hover {
-    transform: scale(1.05);
-    /* Scale the container on hover */
-  }
-
   .custom-image {
     width: 100%;
     height: auto;
     object-fit: cover;
-    border-radius: 10px;
+    border-radius: 7px;
     transition: transform .7s;
-    margin-bottom: 0em;
+    margin-bottom: 1em;
   }
-
-  .nsfw-filter {
-    filter: blur(8px); /* Apply a blur effect */
-    transition: filter 0.3s ease; /* Smooth transition for the blur effect */
+  .custom-image:hover {
+    transform: scale(1.30);
   }
-
-  .custom-image-container:hover .nsfw-filter {
-    filter: none; /* Remove the blur effect on hover */
+  .special-image { 
+  border-radius: 5px 40px 5px 5px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /* Soft shadow effect */
+  max-width: 600px; /* Limit the maximum width of the image */
+  margin: 0 auto; /* Center the image within its container */
+  display: block; /* Remove any default inline styling */
+  transition: transform .7s, box-shadow .3s; /* Smooth transitions for hover effects */
   }
-  
-  .overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    color: white;
-    width: 100%;
-    height: 40%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 1vw;
-    font-style: bold;
-    text-align: center;
-    opacity: 0;
-    /* Keep the text fully opaque */
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0) 100%);
-    transition: opacity .5s;
-  }
-  .custom-image-container:hover .overlay {
-    opacity: 1;
-    /* Make the overlay always visible */
-  }
-  .overlay-text {
-    background: linear-gradient(45deg, #7ed56f, #28b485);
-    -webkit-background-clip: text;
-    color: transparent;
-    /* Fallback for browsers that do not support this effect */
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-    /* Enhanced text shadow for better legibility */
-    
-  .overlay-subtext {
-    font-size: 0.75em;
-    margin-top: 0.5em;
-    font-style: italic;
+  .special-image:hover {
+  transform: scale(1.15); /* Slightly enlarge on hover */
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
   }
-    
-  .overlay,
-  .overlay-subtext {
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  }
-    
+  stolen from Linaqruf readme for Animagine XL (and restolen from Amedira repo yoinkers)
 </style>
+<p align="center", style="font-size: 3.6rem; font-weight: bold"> ∞ 218 -v2- ∞ </p>
+
+<img class="special-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2.png" alt="Title">
+
+<p align="center", style="font-size: 1.2rem; "><strong><a href="https://huggingface.co/Enferlain/218/resolve/main/218.safetensors?download=true"</a></strong> Download</p>
+
+<hr>
 
-<h1 class="title">
-</h1>
 <table class="custom-table">
   <tr>
     <td>
-      <div class="custom-image-container">
-        <img class="custom-image" src="aaa" alt="sample1">
-      </div>
-      <div class="custom-image-container">
-        <img class="custom-image" src="aaa" alt="sample4">
-      </div>
+      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample3.png">
+        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample3.png" alt="gura">
+      </a>
+    </td>
+    <td>
+      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample5.png">
+        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample5.png" alt="raph">
+      </a>
     </td>
     <td>
-      <div class="custom-image-container">
-        <img class="custom-image" src="aaa" alt="sample2">
-      </div>
-      <div class="custom-image-container">
-        <img class="custom-image" src="aaa" alt="sample3">
+      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample8.png">
+        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample8.png" alt="nubby">
+      </a>
     </td>
     <td>
-      <div class="custom-image-container">
-        <img class="custom-image" src="aaa" alt="sample1">
-      </div>
-      <div class="custom-image-container">
-        <img class="custom-image" src="aaa" alt="sample4">
-      </div>
+      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample10.png">
+        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample10.png" alt="218">
+      </a>
     </td>
   </tr>
 </table>
+</details>
 
-<p align="center", style="font-size: 3.6rem; font-weight: bold"> ∞ 218xl ∞ </p>
+<hr>
 
 # ∞ 218 -- 6 months later