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

initial commit

This commit is contained in:
zepp 2024-07-25 09:25:03 -04:00
commit 95aa7e07cc
7 changed files with 589 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
img/

4
README.md Normal file
View File

@ -0,0 +1,4 @@
# thiscat.rocks
This is the repository for my cat's homepage. I basically wanted it somewhere other than github.
With it being part of my creations for the small/indie web, I think this is the perfect place to keep it.

54
about.html Normal file
View File

@ -0,0 +1,54 @@
<!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 class="about-section">
<h2>About this website and why I made it.</h2>
<div class="about-section-text">
<p>
When I was a kid there was s service called Freewebs where you could make
your own website about whatever really. I used it for a gaming group I was a part of
to show screenshots of our games and post results of matches we had. I never really quite
knew how special all of that was at the time, you know with being younger and all. That I had made a small
place on the web for something that was important to me and my friends. That allowed us to keep track of good moments
and memories surrounding our shared intrerest of video games.
</p>
<p>
As I've grown older, I and many others see great positives to making our own spaces on the internet. Even if that space is for your cat!
There's no purpose to this other than we want to, or possibly want to share our world with others in a way you just can't through the lens of
social media. We aren't trying to go viral or max out our views or ad conversions, it is simply for the love of the web.
</p>
<p>
So dear reader, I hope you'll consider the same, and think about what your space on the web might look like. Because it can exist if you'd like it to!
Thanks for checking out a website about my cat, and reading my little soapbox here about the importance of the personal web too!
</p>
<p>
Take care intenet stranger, I hope you make something great!
</p>
</div>
</section>
</main>
</body>
</html>

74
behavior.html Normal file
View File

@ -0,0 +1,74 @@
<!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 class="behavior-section">
<h2>Things I've learned about cats from behaviors displayed by Baxter</h2>
<div class="behavior-section-text">
<p>
Before reading, I want to stress that I am not an authority on cats, and that I think we
can all agree that our cats are very unique in personality and behavior. However, I wanted to post these as
they are tidbits of information I've picked up through the years of spending my time with Baxter growing our relationship.
I want to stick to calling them information rather than facts, because I feel that us as cat owners know our cats best. However,
maybe if your cat displays some of these behaviors and you notice they are similar in how I describe them, you can take some joy from
knowing a little more about your relationship with your feline friend (or friends!)
</p>
<h3>Communication between cat and human</h3>
<p>
Cats often communicate to us through a classic "meow" as well as use of body language. This body language can really help
you strengthen the bond between you and your cat if you understand it a bit.
</p>
<p>
<strong>Slow blinks</strong> - Often jokingly referred to as eye kisses, cats slowblink at us and other cats to communicate that they are friendly and not looking for conflict.
Slow blinking at your cat can be a great way to break tension if they are anxious or to just let them know you love them. Baxter and I often exchange slow blinks when
he is getting settled in the box I have in my office. I do this to let him know I love him and as kind of a way to say "sleep well" as I know a catnap is incoming.
This can also be a great way to ease tension if you are meeting a friend's cat for the first time, as slow blinks mean you do not want conflict and wish to be friendly with the cat
</p>
<p>
<strong>Tail thumping, thwacking</strong> - New cat owners often learn the hard way that a wagging cat tail is not the same as a wagging dog tail. In many cases this is true, but it is always important
for us as cat owners to pay attention to all aspects of our cat's body language. Baxter will often thwack his tail in his box while I pet him, but all other body language indicates he is content.
He is purring, his ears are not back (airplane ears) the tail is not puffed, and he is slowly moving his head to allow me to reach other spots he would like petted.
</p>
<p>
<strong>Brr or trill type meow</strong> - This is a type of communication often reserved for cat to cat communication. Cats use these sounds occasionally with their body language to communicate with other cats. However, I include
these with human communication as it can mean something quite special if your cat is using these with you. Through what I've read, it can mean that your bond is very tight with your cat, and they are choosing to communicate with
you as if you were one of their own. While I don't know the validity of that, it is certianly nice to think about.
</p>
<p>
<strong>Laying upside down, exposing the forbidden fluff</strong> - As a cat owner you will know best whether your cat is friendly to belly rubs. Baxter is not, but when Baxter and I got our own place, I noticed he would occasionally lay upside down
exposing his belly. I knew his belly was off limits for pets, so I often used it as a chance to get a picture as he looked quite silly stretched out and often seemed content. After reading a bit I learned that
Baxter could be communicating that he feels safe and comfortable in his environment. So I would say if your cat does this but doesn't like belly rubs, take comfort in the fact that your cat feels so safe with you that they
would expose an area of themselves they would protect at all costs in the wild.
</p>
<p>That's all for now, I do hope to add more soon!</p>
<a href="#top">Top of page</a>
</div>
</section>
</main>
</body>
</html>

123
index.html Normal file
View File

@ -0,0 +1,123 @@
<!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>

86
loveletter.html Normal file
View File

@ -0,0 +1,86 @@
<!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>

247
style/style.css Normal file
View File

@ -0,0 +1,247 @@
/* general site properties begin */
* {
margin: 0;
padding: 0;
}
body {
background-color: #1B2028;
color: #C099EF;
font-family: Verdana, Geneva, Tahoma, sans-serif;
min-height: 2475px;
}
main {
padding: 1em 2em;
}
section {
padding: 0.25em 0;
}
p {
font-size: 1.25em;
}
a {
color: #81BCED;
text-decoration: none;
}
a:visited {
color: #879cb7;
}
a:hover {
color: #4E1F87;
}
li {
font-size: 1.1em;
}
h2 {
padding: 0.75em;
}
/* general site properties end */
/* multiple page properties begin */
.love-you-baxter a, .behavior-section-text a {
font-size: 1.25em;
padding: 1em 0;
}
/* multiple page properties end */
/* header and nav begin */
header {
display: flex;
justify-content: center;
border-bottom: 1px solid #C099EF;
padding: 1em 2em;
}
.baxter-hero-img {
width: 120px;
height: 160px;
}
.header-content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-top: 1.5em;
}
.header-content {
padding-left: 1em;
}
.header-content a {
padding-right: 0.25em;
font-size: 1.25em;
}
.header-content nav {
margin-top: auto;
padding-bottom: 0.75em;
}
/* header and nav end */
/* index.html begin */
.welcome-section {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
}
.welcome-text {
width: 60%;
}
.welcome-text p {
padding-left: 0.75em;
padding-bottom: 0.5em;
}
.welcome-section img {
border-radius: 1em;
}
.baxter-welcome-img {
width: 500px;
height: 412px;
}
.quick-facts {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.baxter-is p, .baxter-is-not p, .baxter-loves p, .baxter-hates p {
padding-top: 0.1em;
padding-bottom: 0.5em;
}
.baxter-is li, .baxter-is-not li, .baxter-loves li, .baxter-hates li {
padding-bottom: 0.1em;
}
.photo-gallery {
display: flex;
flex-wrap: wrap;
}
.gallery-card {
width: 49%;
text-align: center;
padding-bottom: 1em;
}
.gallery-card img {
border-radius: 1em;
height: 375px;
width: auto;
}
.goodbye {
display: flex;
flex-direction: column;
align-items: center;
}
.goodbye p {
width: 49%;
}
/* index.html end */
/* loveletter.html begin */
.early-years-text, .middle-years-text, .current-years-text {
padding: 0.25em;
display: flex;
justify-content: center;
width: 100%;
}
.early-years-text p, .middle-years-text p, .current-years-text p {
width: 49%;
}
.early-years-pictures, .middle-years-pictures, .current-years-pictures {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cards {
border-radius: 2.5em;
height: 250px;
width: 350px;
padding: 1em 0;
}
.love-you-baxter {
display: flex;
flex-direction: column;
align-items: center;
}
.love-you-baxter img {
border-radius: 2.5em;
height: 500px;
width: 30%;
}
/* loveletter.html end */
/* about.html and behavior.html begin */
.about-section {
display: flex;
flex-direction: column;
}
.about-section-text {
display: flex;
flex-direction: column;
align-items: center;
}
.about-section-text p {
width: 60%;
padding-bottom: 1em;
}
.about-section-text p:last-of-type {
padding-bottom: 0;
}
/* about.html and behavior.html end */
/* behavior.html begin */
.behavior-section {
display: flex;
flex-direction: column;
}
.behavior-section-text {
display: flex;
flex-direction: column;
}
.behavior-section-text a {
text-align: center;
}
.behavior-section-text h3, .behavior-section-text p {
padding: 0.5em 0em 0.5em 3em;
}
.behavior-section-text p {
width: 70%;
}
.about-section-text p:last-of-type {
padding-bottom: 0;
}
/* behavior.html end */