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

Compare commits

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

4 Commits
e3f9e580f3 ... ac491e14d2

Author SHA1 Message Date
emma ac491e14d2 adjust section border width 2025-01-02 01:09:46 -05:00
emma e7e7df5c8f styling of section elements 2025-01-02 01:08:50 -05:00
emma 04bef99ae7 nav styling 2025-01-02 00:50:52 -05:00
emma 0ca56186b8 styling in regards to appearance. background colors and image 2025-01-02 00:33:17 -05:00
4 changed files with 59 additions and 14 deletions
Show Stats Expand all files Collapse all files

18
includes/nav.php
View File

@ -1,11 +1,13 @@
<header id="top"> <header id="top">
<img src="../site-resources/assets/header-cat.svg" height="32px" width="32px"> <img src="../site-resources/assets/header-cat.svg" height="32px" width="32px">
<p>This cat rocks!</p> <span>
<p>A homepage for my fine feline friend, Baxter</p> <p>This cat rocks!</p>
<nav> <p>A homepage for my fine feline friend, Baxter</p>
<a href="index.php">Home</a> <nav>
<a href="loveletter.php">Love you, Baxter</a> <a href="index.php">Home</a>
<a href="behavior.php">Baxter's behaviors</a> <a href="loveletter.php">Love you, Baxter</a>
<a href="about.php">About this site</a> <a href="behavior.php">Baxter's behaviors</a>
</nav> <a href="about.php">About this site</a>
</nav>
</span>
</header> </header>

4
index.php
View File

@ -34,9 +34,9 @@
</section> </section>
<h3 class="facts-header">Baxter facts!</h3>
<section class="baxter-info"> <section class="baxter-info">
<h3 class="facts-header">Baxter facts!</h3>
<div class="baxter-is"> <div class="baxter-is">
<p>Baxter is:</p> <p>Baxter is:</p>
<ul> <ul>
@ -75,9 +75,9 @@
</div> </div>
</section> </section>
<h3>My favorite photos of Baxter</h3>
<section class="favorite-baxter-photos"> <section class="favorite-baxter-photos">
<h3>My favorite photos of Baxter</h3>
<figure> <figure>
<img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible"> <img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible">

BIN
site-resources/assets/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

51
style/style.css
View File

@ -1,3 +1,9 @@
:root {
--section-color: #fccce4bb;
--border-color: #f6da92;
--header-color: #fc94bcbb;
}
*, *::before, *::after { *, *::before, *::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -9,6 +15,8 @@ html {
} }
body { body {
background-image: url("../site-resources/assets/bg.png");
background-attachment: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -20,7 +28,7 @@ main {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
width: 50rem; width: 60vw;
height: auto; height: auto;
} }
@ -67,14 +75,21 @@ main {
.favorite-baxter-photos { .favorite-baxter-photos {
display: grid; display: grid;
grid-template-rows: 25rem 25rem; grid-template-rows: 5rem 25rem 25rem;
grid-template-columns: 20rem 20rem; grid-template-columns: 20rem 20rem;
gap: 1rem;
justify-items: center; justify-items: center;
justify-content: center;
}
.favorite-baxter-photos h3 {
grid-row: 1/2;
grid-column: 1/3;
} }
.favorite-baxter-photos figure { .favorite-baxter-photos figure {
height: 20rem; height: 22.5rem;
width: 20rem; width: 22.5rem;
text-wrap: wrap; text-wrap: wrap;
text-align: center; text-align: center;
} }
@ -85,3 +100,31 @@ main {
object-fit: fill; object-fit: fill;
} }
header {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 1rem;
background-color: var(--header-color);
border-bottom: 4px solid var(--border-color);
}
header img {
height: 48px;
width: auto;
}
section {
background-color: var(--section-color);
padding: 1.25rem;
border: 4px solid var(--border-color);
border-radius: 15px;
width: 60vw;
}
section img {
border-radius: 15px;
}