Update README.md
Browse files
README.md
CHANGED
@@ -20,24 +20,26 @@ tags:
|
|
20 |
|
21 |
<style>
|
22 |
.gallery {
|
23 |
-
display:
|
24 |
-
|
|
|
25 |
gap: 15px;
|
26 |
justify-content: center;
|
27 |
-
|
28 |
-
|
29 |
padding: 15px;
|
30 |
}
|
31 |
|
|
|
|
|
|
|
|
|
|
|
32 |
.gallery img {
|
33 |
width: 384px;
|
34 |
-
height: 384px;
|
35 |
-
object-fit: cover; /* Maintains aspect ratio */
|
36 |
cursor: pointer;
|
37 |
transition: transform 0.2s;
|
38 |
border-radius: 8px;
|
39 |
-
margin: 0 auto; /* Centers images in their grid cells */
|
40 |
-
display: block;
|
41 |
}
|
42 |
|
43 |
.gallery img:hover {
|
@@ -65,7 +67,6 @@ tags:
|
|
65 |
position: relative;
|
66 |
top: 50%;
|
67 |
transform: translateY(-50%);
|
68 |
-
object-fit: contain; /* Maintains aspect ratio in modal */
|
69 |
}
|
70 |
|
71 |
.modal.active {
|
@@ -74,11 +75,21 @@ tags:
|
|
74 |
</style>
|
75 |
|
76 |
<div class="gallery">
|
77 |
-
<
|
78 |
-
|
79 |
-
|
80 |
-
<
|
81 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
82 |
</div>
|
83 |
|
84 |
<div class="modal" onclick="this.classList.remove('active')">
|
|
|
20 |
|
21 |
<style>
|
22 |
.gallery {
|
23 |
+
display: flex;
|
24 |
+
flex-direction: row; /* Force horizontal layout */
|
25 |
+
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
26 |
gap: 15px;
|
27 |
justify-content: center;
|
28 |
+
align-items: center;
|
29 |
+
width: 100%;
|
30 |
padding: 15px;
|
31 |
}
|
32 |
|
33 |
+
.gallery-item {
|
34 |
+
flex: 0 0 384px; /* Don't grow, don't shrink, fixed width */
|
35 |
+
margin: 0;
|
36 |
+
}
|
37 |
+
|
38 |
.gallery img {
|
39 |
width: 384px;
|
|
|
|
|
40 |
cursor: pointer;
|
41 |
transition: transform 0.2s;
|
42 |
border-radius: 8px;
|
|
|
|
|
43 |
}
|
44 |
|
45 |
.gallery img:hover {
|
|
|
67 |
position: relative;
|
68 |
top: 50%;
|
69 |
transform: translateY(-50%);
|
|
|
70 |
}
|
71 |
|
72 |
.modal.active {
|
|
|
75 |
</style>
|
76 |
|
77 |
<div class="gallery">
|
78 |
+
<div class="gallery-item">
|
79 |
+
<img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" alt="Example Output 1" onclick="showImage(this.src)"/>
|
80 |
+
</div>
|
81 |
+
<div class="gallery-item">
|
82 |
+
<img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" alt="Example Output 2" onclick="showImage(this.src)"/>
|
83 |
+
</div>
|
84 |
+
<div class="gallery-item">
|
85 |
+
<img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" alt="Example Output 3" onclick="showImage(this.src)"/>
|
86 |
+
</div>
|
87 |
+
<div class="gallery-item">
|
88 |
+
<img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" alt="Example Output 4" onclick="showImage(this.src)"/>
|
89 |
+
</div>
|
90 |
+
<div class="gallery-item">
|
91 |
+
<img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" alt="Example Output 5" onclick="showImage(this.src)"/>
|
92 |
+
</div>
|
93 |
</div>
|
94 |
|
95 |
<div class="modal" onclick="this.classList.remove('active')">
|