1
0
Fork 0
thiscat.rocks/loveletter.html

86 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>This cat rocks!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header id="top">
<img src="img/baxter-hero.webp" alt="A picture of my cat Baxter looking at the camera.">
<div class="header-content">
<h1>This cat rocks!</h1>
<p>A homepage for my fine feline friend, Baxter</p>
<nav>
<a href="index.html">Home</a>
<a href="loveletter.html">Love you, Baxter</a>
<a href="behavior.html">Baxter's behaviors</a>
<a href="about.html">About this site</a>
</nav>
</div>
</header>
<main>
<section>
<h2>Oh how you've grown through the years...</h2>
<div class="early-years-text">
<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>
</section>
<section>
<h2>Stuck in the middle with you...</h2>
<div class="middle-years-text">
<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
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
while you got your valuable suntime. You started a collection of boxes and I jokingly called you a real-estate investor.
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.
</p>
</div>
<div class="middle-years-pictures">
<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-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>
</section>
<section>
<h2>And here we are...</h2>
<div class="current-years-text">
<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,
and being sure to return the love with your wonderful purrs and headbumps. We work together to keep an eye on each other, and always
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>
</section>
<section class="love-you">
<div class="love-you-baxter">
<h2>Love you Baxter!</h2>
<img src="img/cat.webp" alt="My cat baxter laying in bed looking at the camera.">
<a href="#top">Top of page</a>
</div>
</section>
</main>
</body>
</html>