1
0
Fork 0
thiscat.rocks/index.html

124 lines
5.1 KiB
HTML

<!DOCTYPE html>
<!-- proven.lol/151033 -->
<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 class="baxter-hero-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 class="welcome-section">
<img class="baxter-welcome-img" src="img/baxter-welcome.webp" alt="My cat Baxter, sitting in a cardboard box looking at the camera.">
<div class="welcome-text">
<h2>Welcome to the homepage of all things Baxter!</h2>
<p>
Baxter is a domestic shorthair cat, with a distinct Mackerel Tabby fur pattern.
His broken stripes together with a long thick stripe down his back resemble that of a tiger!
He'd certainly like to think he's a tiger, but in reality he is a little cuddle bug who loves pets, food, and sleep.
I hope you enjoy your brief stop here to learn about my wonderful cat, and I hope if you have a pet in your life you may
be encouraged to make a spot for them here on the web too!
</p>
<p>
At 9 years old, Baxter is still full of energy and always ready to play. Though most days he prefers to relax.
That doesn't stop his kitten like curiosity from striking sometimes, causing him to burst into high energy and enjoy
his favorite toys for playtime. In addition to his normal food, Baxter loves his treats and occasional catnip.
Baxter is a fan of sleeping when I am, and often lays on a favorite blanket by my bed. Though we occasionally cuddle together
in bed and fall asleep, typically during the colder months.
</p>
</div>
</section>
<section>
<h2>Baxter facts!</h2>
<div class="quick-facts">
<div class="baxter-is">
<p>Baxter is:</p>
<ul>
<li>A cat</li>
<li>Loving to those he knows</li>
<li>The fastest gun in the West</li>
<li>Always comfy</li>
</ul>
</div>
<div class="baxter-is-not">
<p>Baxter is not:</p>
<ul>
<li>A dog</li>
<li>Automatically friendly to everyone</li>
<li>A fan of changes in routine</li>
<li>Anything other than amazing</li>
</ul>
</div>
<div class="baxter-loves">
<p>Baxter loves:</p>
<uL>
<li>Pets</li>
<li>Places to cuddle</li>
<li>Food</li>
<li>The people who care about him most</li>
</uL>
</div>
<div class="baxter-hates">
<p>Baxter hates:</p>
<ul>
<li>Loud noises</li>
<li>Loud people</li>
<li>Closed doors</li>
<li>Not getting enough cuddle time</li>
</ul>
</div>
</div>
</section>
<section>
<h2>My favorite photos of Baxter</h2>
<div class="photo-gallery">
<div class="gallery-card">
<img src="img/gallery-card-one.webp" alt="My cat Baxter eating from his auto feeder dish.">
<p>Lunch break!</p>
</div>
<div class="gallery-card">
<img src="img/gallery-card-four.webp" alt="My cat Baxter flipped upside down on the floor stretching his paws out.">
<p>Any cat owner will tell you how important their cat takes stretching exercises.</p>
</div>
<div class="gallery-card">
<img src="img/gallery-card-three.webp" alt="My cat Baxter as a kitten strecthed out enjoying the sun coming through a window.">
<p>Did I mention he loves sunbathing too?</p>
</div>
<div class="gallery-card">
<img src="img/gallery-card-two.webp" alt="My cat Baxter looking out from behind a window blind.">
<p>Looking shy but owning the look at the same time, he's a natural!</p>
</div>
</div>
</section>
<section class="goodbye">
<h2>Come back anytime!</h2>
<p>
I hope you've enjoyed your visit and learned about Baxter and just
how much he means to me. If you haven't please check out the other pages on this site.
They are accessible through the navbar at the <a href="#top">top of the page</a>. I hope you'll consider making a website, just for the sake of it.
Whether for your cat, bird, dog, or just because you can. Alright, later gator!
</p>
</section>
</main>
</body>
</html>