zepp
/
thiscat.rocks
1
0
Fork 0
Code Issues Activity

styling loveletter.php

This commit is contained in:
emma 2025-01-02 10:06:21 -05:00
parent 903ea588d4
commit e448eb8508
2 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
loveletter.php
View File

@ -19,23 +19,15 @@
Small showcases of the love that was to be ever present as you grew.
</p>
<div>
<figure>
<img class="cards" src="img/card-one.webp" alt="A young kitten era photo of Baxter. Laying his head against the arm of the couch.">
</figure>
<figure>
<img class="cards" src="./img/baxter-window.jpg" alt="A young kitten era photo of baxter. He is lodged between the window and the screen for the window while it is open on a summer day.">
</figure>
<figure>
<img class="cards" src="img/card-two.webp" alt="A young kitten era photo of Baxter. Flopped upside down on the couch and semi curled up.">
</figure>
<figure>
<img class="cards" src="img/card-three.webp" alt="A young kitten era photo of Baxter. Partialy curled up sleeping on the couch.">
</figure>
</div>
</section>
<section>
<h2>Stuck in the middle with you...</h2>
<div class="middle-years-text">
<section class="young-adult-baxter">
<h3>Stuck in the middle with you...</h3>
<p>
As you reached a young adult, more of who you really were started to show. When we got our own place I saw so many
new sides of you I had never yet seen. You loved sunbathing in the windows in the morning, I'd have my cup of coffee
@ -43,14 +35,14 @@
When the world got uncertain, I knew you were always at home waiting for me. When I was uncertain about life, I always knew
you were the reason to keep going, to keep the fire lit.
</p>
</div>
<div class="middle-years-pictures">
<img class="cards" src="img/card-five.webp" alt="My cat Baxter laying against a wall looking at the camera.">
<div>
<img class="cards" src="./img/baxter-floor-apartment.jpg" alt="My cat Baxter laying against a wall looking at the camera.">
<img class="cards" src="img/card-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
<img class="cards" src="img/card-seven.webp" alt="My cat Baxter curled up in a box looking up at the camera.">
<img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
</div>
</section>
<section>
<h2>And here we are...</h2>
<div class="current-years-text">

20
style/style.css
View File

@ -94,24 +94,30 @@ main {
text-align: center;
}
.favorite-baxter-photos img, .growing-up img {
.growing-up figure, .young-adult-baxter figure {
height: 50vh;
width: auto;
}
.favorite-baxter-photos img, .growing-up img, .young-adult-baxter img {
max-width: 100%;
max-height: 100%;
object-fit: fill;
}
.growing-up h3, .growing-up p {
.growing-up h3, .young-adult-baxter h3, .growing-up p, .young-adult-baxter p {
padding: 1rem;
font-size: 1.25rem;
}
.growing-up div {
.growing-up div, .young-adult-baxter div {
padding-top: 2rem;
height: 100%;
width: auto;
display: grid;
grid-template-rows: 22.5rem 15rem;
grid-template-columns: 25rem 25rem;
justify-content: space-evenly;
align-items: baseline;
grid-template-columns: 27vw 27vw;
align-items: stretch;
gap: 2rem;
}
header {