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

Additonal images added. Styling adjusted 

Styling and JS adjusted for additonal images being
added to the image selection window.
This commit is contained in:
emma 2024-10-28 18:40:39 -04:00
parent f0de830144
commit 91feafd5a0
3 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -24,9 +24,44 @@
<div class="window-pane"> <div class="window-pane">
<figure class="clickable-image"> <figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-stare-thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera."> <img class="img-icon" src="img/thumbnails/baxter-stare-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
<figcaption>baxter-stare.png</figcaption> <figcaption>baxter-stare.png</figcaption>
</figure> </figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-box-thumbnail.jpg" alt="A thumbnail of an image of baxter sitting in a cardboard box.">
<figcaption>baxter-box.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-flop-thumbnail.jpg" alt="A thumbnail of an image of baxter laying upside down exposing his stomach.">
<figcaption>baxter-flop.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-grumpy-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera as if he were upset or grumpy.">
<figcaption>baxter-grumpy.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-kitten-thumbnail.jpg" alt="A thumbnail of an image of baxter when he was a kitten sleeping on a couch.">
<figcaption>baxter-kitten.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-looking-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera as it is pointing down at him.">
<figcaption>baxter-looking.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-sitting-thumbnail.jpg" alt="A thumbnail of an image of baxter laying on a blanket looking at the camera.">
<figcaption>baxter-sitting.png</figcaption>
</figure>
<figure class="clickable-image">
<img class="img-icon" src="img/thumbnails/baxter-wall-thumbnail.jpg" alt="A thumbnail of an image of baxter laying against a wall. Sunlight reflects off of his stomach.">
<figcaption>baxter-wall.png</figcaption>
</figure>
</div> </div>
</div> </div>

3
js/script.js
View File

@ -42,7 +42,8 @@ icon.forEach((item) => {
let figure = document.createElement("figure"); let figure = document.createElement("figure");
let image = document.createElement("img"); let image = document.createElement("img");
image.src = `img/${item.querySelector("figcaption").textContent}`; image.src = `img/${item.querySelector("figcaption").textContent}`;
image.height = "700"; image.style.height = "550px";
image.style.width = "auto";
figure.style.marginTop = "0.75rem"; figure.style.marginTop = "0.75rem";
figure.style.display = "flex"; figure.style.display = "flex";
figure.style.flexDirection = "column"; figure.style.flexDirection = "column";

4
style/style.css
View File

@ -37,8 +37,10 @@ p {
.window-pane { .window-pane {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 12.5rem 12.5rem 12.5rem;
justify-items: center; justify-items: center;
align-items: baseline;
gap: 12px;
} }
.window { .window {