Update README.md

README.md

@@ -136,67 +136,100 @@ body {
   color: #333;
 }
 
-/* Carousel Styles */
-.carousel {
-  position: relative;
-  width: 100%;
-  max-width: 600px;
+/* Container and Section Styles */
+.container {
+  max-width: 1200px;
   margin: auto;
-  overflow: hidden;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.carousel-inner {
-  display: flex;
-  width: 100%;
-  transition: transform 0.5s ease;
+.section {
+  margin-bottom: 40px;
 }
 
-.carousel-item {
-  min-width: 100%;
-  box-sizing: border-box;
+.section-header {
+  text-align: center;
+  margin-bottom: 30px;
 }
 
-.carousel img {
-  width: 100%;
-  display: block;
+.section-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  position: relative;
+  display: inline-block;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
 }
 
-.carousel-controls {
+.section-title::after {
+  content: '';
   position: absolute;
-  top: 50%;
+  width: 50px;
+  height: 4px;
+  background-color: #007bff;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Grid Styles */
+.section-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.grid-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.grid-item img {
   width: 100%;
-  display: flex;
-  justify-content: space-between;
-  transform: translateY(-50%);
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.5s ease;
 }
 
-.carousel-control-prev,
-.carousel-control-next {
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border: none;
-  padding: 10px;
-  cursor: pointer;
+.grid-item:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }
 
+.grid-item:hover img {
+  transform: scale(1.1);
+}
+
+/* Dot Styles */
 .dot-container {
-  text-align: center;
-  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
 }
 
 .dot {
   height: 15px;
   width: 15px;
-  margin: 0 2px;
+  margin: 0 8px;
   background-color: #bbb;
   border-radius: 50%;
-  display: inline-block;
-  transition: background-color 0.6s ease;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
-.active,
+.dot.active,
 .dot:hover {
-  background-color: #717171;
+  background-color: #007bff;
+  transform: scale(1.2);
 }
   
 .detail {
@@ -482,56 +515,48 @@ body {
       <h2 class="section-title">🖼️ Example Images</h2>
     </div>
     <div class="section-content">
-      <div class="carousel">
-        <div class="carousel-inner">
-          <div class="carousel-item active">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Ancient%20Temple%20in%20a%20Lush%20Jungle.jpg" alt="Ancient Temple in a Lush Jungle">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Cyberpunk%20Metropolis%20Scene.jpg" alt="Cyberpunk Metropolis Scene">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Extraterrestrial%20Market%20on%20a%20Desert%20Planet.jpg" alt="Extraterrestrial Market on a Desert Planet">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Generate%20an%20image%20depicting%20a%20sprawling%20fantasy%20city%20at%20dusk.jpg" alt="Sprawling Fantasy City at Dusk">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Post-Apocalyptic%20Landscape.jpg" alt="Post-Apocalyptic Landscape">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Space%20Station%20Orbiting%20a%20Distant%20Planet.jpg" alt="Space Station Orbiting a Distant Planet">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Steampunk%20Adventure%20Setting.jpg" alt="Steampunk Adventure Setting">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Steampunk%20Airship%20Fleet%20Over%20a%20Cloudy%20Sky.jpg" alt="Steampunk Airship Fleet Over a Cloudy Sky">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Underwater%20City%20of%20the%20Future.jpg" alt="Underwater City of the Future">
-          </div>
-          <div class="carousel-item">
-            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/rudolph%20with%20red%20nose%20in%20cartoon%208k%20very%20detailed.jpg" alt="Rudolph with Red Nose in Cartoon 8k Very Detailed">
-          </div>
-        </div>
-        <div class="carousel-controls">
-          <button class="carousel-control-prev" onclick="prevSlide()">❮</button>
-          <button class="carousel-control-next" onclick="nextSlide()">❯</button>
-        </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Ancient%20Temple%20in%20a%20Lush%20Jungle.jpg" alt="Ancient Temple in a Lush Jungle">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Cyberpunk%20Metropolis%20Scene.jpg" alt="Cyberpunk Metropolis Scene">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Extraterrestrial%20Market%20on%20a%20Desert%20Planet.jpg" alt="Extraterrestrial Market on a Desert Planet">
       </div>
-      <div class="dot-container">
-        <span class="dot" onclick="currentSlide(1)"></span>
-        <span class="dot" onclick="currentSlide(2)"></span>
-        <span class="dot" onclick="currentSlide(3)"></span>
-        <span class="dot" onclick="currentSlide(4)"></span>
-        <span class="dot" onclick="currentSlide(5)"></span>
-        <span class="dot" onclick="currentSlide(6)"></span>
-        <span class="dot" onclick="currentSlide(7)"></span>
-        <span class="dot" onclick="currentSlide(8)"></span>
-        <span class="dot" onclick="currentSlide(9)"></span>
-        <span class="dot" onclick="currentSlide(10)"></span>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Generate%20an%20image%20depicting%20a%20sprawling%20fantasy%20city%20at%20dusk.jpg" alt="Sprawling Fantasy City at Dusk">
       </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Post-Apocalyptic%20Landscape.jpg" alt="Post-Apocalyptic Landscape">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Space%20Station%20Orbiting%20a%20Distant%20Planet.jpg" alt="Space Station Orbiting a Distant Planet">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Steampunk%20Adventure%20Setting.jpg" alt="Steampunk Adventure Setting">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Steampunk%20Airship%20Fleet%20Over%20a%20Cloudy%20Sky.jpg" alt="Steampunk Airship Fleet Over a Cloudy Sky">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/Underwater%20City%20of%20the%20Future.jpg" alt="Underwater City of the Future">
+      </div>
+      <div class="grid-item">
+        <img src="https://huggingface.co/ayjays132/CustomImageGenerator/resolve/main/ImageFiles/rudolph%20with%20red%20nose%20in%20cartoon%208k%20very%20detailed.jpg" alt="Rudolph with Red Nose in Cartoon 8k Very Detailed">
+      </div>
+    </div>
+    <div class="dot-container">
+      <span class="dot" onclick="currentSlide(1)"></span>
+      <span class="dot" onclick="currentSlide(2)"></span>
+      <span class="dot" onclick="currentSlide(3)"></span>
+      <span class="dot" onclick="currentSlide(4)"></span>
+      <span class="dot" onclick="currentSlide(5)"></span>
+      <span class="dot" onclick="currentSlide(6)"></span>
+      <span class="dot" onclick="currentSlide(7)"></span>
+      <span class="dot" onclick="currentSlide(8)"></span>
+      <span class="dot" onclick="currentSlide(9)"></span>
+      <span class="dot" onclick="currentSlide(10)"></span>
     </div>
   </div>
 </div>