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

style loveletter.php

This commit is contained in:
emma 2025-01-02 06:39:28 -05:00
parent 70f258ec5c
commit e5cc2309f4
2 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
loveletter.php
View File

@ -10,22 +10,28 @@
<body>
<?php include "./includes/nav.php" ?>
<main>
<section>
<h2>Oh how you've grown through the years...</h2>
<div class="early-years-text">
<section class="growing-up">
<h3>Oh how you've grown through the years...</h3>
<p>
As a kitten, home for the very first time. You were full of curiosity and energy.
Every moment, taking in new information. The look of learning never leaving your eyes.
Though you caused much mischeif, there were loving moments in those early years.
Small showcases of the love that was to be ever present as you grew.
</p>
</div>
<div class="early-years-pictures">
<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.">
<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.">
<img class="cards" src="img/card-three.webp" alt="A young kitten era photo of Baxter. Partialy curled up sleeping on the couch.">
<img class="cards" src="img/card-four.webp" alt="A young adulthood era photo of Baxter. In a classic cat position known as a cat loaf.">
</div>
<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/card-four.webp" alt="A young adulthood era photo of Baxter. In a classic cat position known as a cat loaf.">
</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>

21
style/style.css
View File

@ -94,12 +94,31 @@ main {
text-align: center;
}
.favorite-baxter-photos img {
.favorite-baxter-photos img, .growing-up img {
max-width: 100%;
max-height: 100%;
object-fit: fill;
}
.growing-up h3, .growing-up p {
padding: 1rem;
font-size: 1.25rem;
}
.growing-up div {
padding-top: 2rem;
display: grid;
grid-template-rows: 20rem 20rem ;
grid-template-columns: 20rem 20rem;
justify-content: space-evenly;
align-items: baseline;
}
.growing-up figure {
height: 17.5rem;
width: auto;
}
header {
width: 100%;
height: auto;