commit a2f57310a5c2528050bddacef77b15de5d708e80 parent e299b92087c3ef7701af7f89a3d7eb780f920c7a Author: Jo Young <> Date: Sun, 15 Feb 2026 16:46:26 +0000 Added .art-grid class and image sizing rules Diffstat:
| M | index.html | | | 21 | ++++++++++++++++++--- |
| M | stylesheet.css | | | 8 | ++++++++ |
2 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html @@ -32,13 +32,28 @@ </p> </div> <div class=tabcontent id=animals> - <h1>ANIMALS!</h1> + <div class=art-grid> + <img src=placeholder.avif> + <img src=placeholder.avif> + <img src=placeholder.avif> + <img src=placeholder.avif> + </div> </div> <div class=tabcontent id=people> - <h1>PEOPLE!</h1> + <div class=art-grid> + <img src=placeholder.avif> + <img src=placeholder.avif> + <img src=placeholder.avif> + <img src=placeholder.avif> + </div> </div> <div class=tabcontent id=sketches> - <h1>SKETCHES!</h1> + <div class=art-grid> + <img src=placeholder.avif> + <img src=placeholder.avif> + <img src=placeholder.avif> + <img src=placeholder.avif> + </div> </div> </main> <script src="script.js"></script> diff --git a/stylesheet.css b/stylesheet.css @@ -24,6 +24,14 @@ header { border: 1px solid black; padding: 10px; max-width: 500px; +} .art-grid { + /*display: inline-grid; + grid-template-columns: repeat(4, minmax(11rem, 1fr));*/ + text-align: center; +} .art-grid img { + width: 400px; + max-width: 75vw; + padding: 10px; } @keyframes fadeEffect {