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

loveletter and index image adding and styling

This commit is contained in:
emma 2025-01-03 06:35:33 -05:00
parent 21238f3d71
commit 5dab09f94a
3 changed files with 21 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.php
View File

@ -78,26 +78,14 @@
<section class="favorite-baxter-photos">
<h3>My favorite photos of Baxter</h3>
<figure>
<img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible">
<img src="./img/baxter-favorite-one.jpg" alt="Baxter as a kitten laying in the window looking at the camera. His mouth is open and he is meowing. He looks as though he is attempting his best lion roar for a kitten.">
<figcaption>A very fancy photo of a very fancy cat!</figcaption>
</figure>
<figure>
<img src="./img/curious-baxter.jpg" alt="My cat Baxter inspecting the camera lens. His nose is the closest part of him to the lens as he inspects it by smelling as would be typical for a cat inspecting something unfamiliar">
<img src="./img/baxter-favorite-two.jpg" alt="Baxter is very comfy and staying warm on a winter day by laying on a large yellow blanket. His paws are stretched out.">
<figcaption>A curious baxter inspects the camera lens</figcaption>
</figure>
<figure>
<img src="img/gallery-card-three.webp" alt="My cat Baxter as a kitten strecthed out enjoying the sun coming through a window.">
<img src="./img/baxter-favorite-three.jpg" alt="A very detailed closeup of Baxter's face. Every detail of his pattern and markings are visible. This photo shows the many details that a cat's face sometimes has but aren't apparent unless you look closely.">
<figcaption>Did I mention he loves sunbathing too?</figcaption>
</figure>
<figure>
<img src="img/gallery-card-two.webp" alt="My cat Baxter looking out from behind a window blind.">
<img src="./img/baxter-favorite-four.jpg" alt="My cat Baxter posed on top of me in bed. He is very comfortable as he likes to get very cozy when laying on me in bed. He is looking at the camera and the details of his face are very visible.">
<figcaption>Looking shy but owning the look at the same time, he's a natural!</figcaption>
</figure>
</section>
<section class="goodbye">

16
loveletter.php
View File

@ -43,9 +43,8 @@
</div>
</section>
<section>
<h2>And here we are...</h2>
<div class="current-years-text">
<section class="current-baxter">
<h3>And here we are...</h3>
<p>
Through a good bit of my life at this point, you've been with me. I look forward to our future toegether, because I know
that as long as you are in it, it is a good one. You've grown into such a loving and caring cat. Wanting more pets and cuddles,
@ -53,12 +52,11 @@
look out for one another when we need to. You are the most amazing being I have had the pleasure of welcoming into my life.
I am forever thankful for it.
</p>
</div>
<div class="current-years-pictures">
<img class="cards" src="img/card-nine.webp">
<img class="cards" src="img/card-ten.webp">
<img class="cards" src="img/card-eleven.webp">
<img class="cards" src="img/card-twelve.webp">
<div>
<img src="./img/baxter-current-one.jpg">
<img src="./img/baxter-current-two.jpg">
<img src="./img/baxter-current-three.jpg">
<img src="./img/baxter-current-four.jpg">
</div>
</section>
<section class="love-you">

19
style/style.css
View File

@ -84,25 +84,26 @@ main {
.favorite-baxter-photos {
display: grid;
gap: 2rem;
align-items: stretch;
}
.favorite-baxter-photos h3 {
grid-row: 1/2;
grid-column: 1/3;
}
.favorite-baxter-photos figure {
text-wrap: wrap;
text-align: center;
font-size: 1.25rem;
padding: 1rem;
}
.favorite-baxter-photos img, .growing-up img, .young-adult-baxter img {
.favorite-baxter-photos img, .growing-up img, .young-adult-baxter img, .current-baxter img {
max-width: 100%;
max-height: 100%;
object-fit: fill;
}
.favorite-baxter-photos h3, .goodbye h3, .growing-up h3, .young-adult-baxter h3, .goodbye p, .growing-up p, .young-adult-baxter p, .favorite-baxter-photos figcaption, {
.goodbye h3, .growing-up h3, .young-adult-baxter h3, .current-baxter h3, .goodbye p, .growing-up p, .young-adult-baxter p, .current-baxter p {
padding: 1rem;
font-size: 1.25rem;
}
@ -115,12 +116,12 @@ main {
padding: 1rem;
}
.growing-up div, .young-adult-baxter div {
.growing-up div, .young-adult-baxter div, .current-baxter div {
display: grid;
grid-template-columns: 50vh 50vh;
justify-content: center;
justify-content: space-around;
align-items: stretch;
gap: 2rem;
gap: 1rem;
}
header {