diff --git a/index.html b/index.html index dd9508c..800a77b 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,44 @@
- A thumbnail of an image of baxter looking at the camera. + A thumbnail of an image of baxter looking at the camera.
baxter-stare.png
+ +
+ A thumbnail of an image of baxter sitting in a cardboard box. +
baxter-box.png
+
+ +
+ A thumbnail of an image of baxter laying upside down exposing his stomach. +
baxter-flop.png
+
+ +
+ A thumbnail of an image of baxter looking at the camera as if he were upset or grumpy. +
baxter-grumpy.png
+
+ +
+ A thumbnail of an image of baxter when he was a kitten sleeping on a couch. +
baxter-kitten.png
+
+ +
+ A thumbnail of an image of baxter looking at the camera as it is pointing down at him. +
baxter-looking.png
+
+ +
+ A thumbnail of an image of baxter laying on a blanket looking at the camera. +
baxter-sitting.png
+
+ +
+ A thumbnail of an image of baxter laying against a wall. Sunlight reflects off of his stomach. +
baxter-wall.png
+
diff --git a/js/script.js b/js/script.js index d5d1a66..7ec17a1 100644 --- a/js/script.js +++ b/js/script.js @@ -42,7 +42,8 @@ icon.forEach((item) => { let figure = document.createElement("figure"); let image = document.createElement("img"); 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.display = "flex"; figure.style.flexDirection = "column"; diff --git a/style/style.css b/style/style.css index bf3f410..d7d3c0c 100644 --- a/style/style.css +++ b/style/style.css @@ -37,8 +37,10 @@ p { .window-pane { display: grid; 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; + align-items: baseline; + gap: 12px; } .window {