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

20
loveletter.php
View File

@ -10,21 +10,27 @@
<body> <body>
<?php include "./includes/nav.php" ?> <?php include "./includes/nav.php" ?>
<main> <main>
<section> <section class="growing-up">
<h2>Oh how you've grown through the years...</h2> <h3>Oh how you've grown through the years...</h3>
<div class="early-years-text">
<p> <p>
As a kitten, home for the very first time. You were full of curiosity and energy. 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. 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. 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. Small showcases of the love that was to be ever present as you grew.
</p> </p>
</div> <div>
<div class="early-years-pictures"> <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."> <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."> </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>
<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."> <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> </div>
</section> </section>
<section> <section>

21
style/style.css
View File

@ -94,12 +94,31 @@ main {
text-align: center; text-align: center;
} }
.favorite-baxter-photos img { .favorite-baxter-photos img, .growing-up img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: fill; 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 { header {
width: 100%; width: 100%;
height: auto; height: auto;