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

Compare commits

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

No commits in common. "e448eb85085b4560722485e4dccc7ed966487bb1" and "ac491e14d2951289607e359dfed3e42567b4b69f" have entirely different histories.
e448eb8508 ... ac491e14d2

2 changed files with 21 additions and 58 deletions
Show Stats Expand all files Collapse all files

36
loveletter.php
View File

@ -10,24 +10,26 @@
<body> <body>
<?php include "./includes/nav.php" ?> <?php include "./includes/nav.php" ?>
<main> <main>
<section class="growing-up"> <section>
<h3>Oh how you've grown through the years...</h3> <h2>Oh how you've grown through the years...</h2>
<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>
<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."> <div class="early-years-pictures">
<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-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-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.">
</div> <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>
</section> </section>
<section>
<section class="young-adult-baxter"> <h2>Stuck in the middle with you...</h2>
<h3>Stuck in the middle with you...</h3> <div class="middle-years-text">
<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
@ -35,14 +37,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>
<img class="cards" src="./img/baxter-floor-apartment.jpg" alt="My cat Baxter laying against a wall looking at the camera."> <div class="middle-years-pictures">
<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-five.webp" alt="My cat Baxter laying against a wall looking 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-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
<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-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> </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,32 +94,12 @@ main {
text-align: center; text-align: center;
} }
.growing-up figure, .young-adult-baxter figure { .favorite-baxter-photos img {
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;
@ -133,29 +113,10 @@ header {
} }
header img { header img {
height: 72px; height: 48px;
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;