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

Compare commits

base: zepp:ac491e14d2951289607e359dfed3e42567b4b69f
Branches Tags
zepp:main
zepp:v1
...
compare: zepp:e448eb85085b4560722485e4dccc7ed966487bb1
Branches Tags
zepp:main
zepp:v1

5 Commits
ac491e14d2 ... e448eb8508

Author SHA1 Message Date
emma e448eb8508 styling loveletter.php 2025-01-02 10:06:21 -05:00
emma 903ea588d4 change out photo for loveletter.php 2025-01-02 07:03:20 -05:00
emma 6268317307 styling loveletter.php 2025-01-02 06:57:38 -05:00
emma e5cc2309f4 style loveletter.php 2025-01-02 06:39:28 -05:00
emma 70f258ec5c header styling 2025-01-02 05:43:17 -05:00
2 changed files with 58 additions and 21 deletions
Show Stats Expand all files Collapse all files

36
loveletter.php
View File

@ -10,26 +10,24 @@
<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"> <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/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.">
<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-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-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>
</section> </section>
<section>
<h2>Stuck in the middle with you...</h2> <section class="young-adult-baxter">
<div class="middle-years-text"> <h3>Stuck in the middle with you...</h3>
<p> <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 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 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
@ -37,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 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. you were the reason to keep going, to keep the fire lit.
</p> </p>
</div> <div>
<div class="middle-years-pictures"> <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-five.webp" 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-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-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.">
<img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
</div> </div>
</section> </section>
<section> <section>
<h2>And here we are...</h2> <h2>And here we are...</h2>
<div class="current-years-text"> <div class="current-years-text">

43
style/style.css
View File

@ -94,12 +94,32 @@ main {
text-align: center; text-align: center;
} }
.favorite-baxter-photos 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-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: fill; object-fit: fill;
} }
.growing-up h3, .young-adult-baxter h3, .growing-up p, .young-adult-baxter p {
padding: 1rem;
font-size: 1.25rem;
}
.growing-up div, .young-adult-baxter div {
padding-top: 2rem;
height: 100%;
width: auto;
display: grid;
grid-template-columns: 27vw 27vw;
align-items: stretch;
gap: 2rem;
}
header { header {
width: 100%; width: 100%;
height: auto; height: auto;
@ -113,10 +133,29 @@ header {
} }
header img { header img {
height: 48px; height: 72px;
width: auto; width: auto;
} }
header p {
font-size: 1.25rem;
font-weight: bold;
}
header p:not(:first-child) {
padding-bottom: 0.5rem;
}
header a {
font-size: 1.25rem;
text-decoration: none;
font-weight: bold;
}
header a:not(:first-child) {
padding-left: 0.75rem;
}
section { section {
background-color: var(--section-color); background-color: var(--section-color);
padding: 1.25rem; padding: 1.25rem;