zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Playing around with thumbnail layout, wire up js 

Testing grid layout with thumbnails for images.
Beginning of writing JS for enlaring images to
their own window.
This commit is contained in:
emma 2024-10-27 22:10:16 -04:00
parent eb47e1a04b
commit bfe46a15c1
3 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@ -18,6 +18,65 @@
<div class="separator"></div> <div class="separator"></div>
<div class="window-pane"> <div class="window-pane">
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
<figure>
<img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>noisycat.jpg</figcaption>
</figure>
</div> </div>
</div> </div>
@ -28,5 +87,7 @@
<p class="dialog-text">In the "Baxter Images" dialog, you can single-click on a photo to view it with a small description.</p> <p class="dialog-text">In the "Baxter Images" dialog, you can single-click on a photo to view it with a small description.</p>
<p class="dialog-text">I hope you enjoy this little nostalgia trip featuring my cat, you can go back to his normal homepage <a href="https://thiscat.rocks/">here</a>.</p> <p class="dialog-text">I hope you enjoy this little nostalgia trip featuring my cat, you can go back to his normal homepage <a href="https://thiscat.rocks/">here</a>.</p>
</div> </div>
<script src="js/script.js"></script>
</body> </body>
</html> </html>

0
js/script.js Normal file
View File

8
style/style.css
View File

@ -34,4 +34,10 @@ p {
line-height: 1.5rem; line-height: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-left: 1rem; margin-left: 1rem;
} }
.window-pane {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: center;
}