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

Compare commits

base: zepp:becd2f4b27a0bd55a420ae61f58b2cf21cd7c0e8
Branches Tags
zepp:main
zepp:v1
..
compare: zepp:56f1e88172a3ffc4a254cad7af437cb74a5764c1
Branches Tags
zepp:main
zepp:v1

2 Commits
becd2f4b27 ... 56f1e88172

Author SHA1 Message Date
emma 56f1e88172 initial styling for index.php 2025-01-01 06:42:24 -05:00
emma 22f0f0bad1 add classes to individual sections 2025-01-01 06:16:32 -05:00
2 changed files with 95 additions and 31 deletions
Show Stats Expand all files Collapse all files

12
index.php
View File

@ -11,7 +11,7 @@
<body>
<?php include "./includes/nav.php" ?>
<main>
<section>
<section class="welcome-section">
<img src="img/baxter-welcome.webp" alt="My cat Baxter, sitting in a cardboard box looking at the camera.">
<h1>Welcome to the homepage of all things Baxter!</h1>
@ -34,8 +34,9 @@
</section>
<section>
<h3>Baxter facts!</h3>
<section class="baxter-info">
<h3 class="facts-header">Baxter facts!</h3>
<div class="baxter-is">
<p>Baxter is:</p>
<ul>
<li>A cat</li>
@ -52,7 +53,9 @@
<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>
@ -68,9 +71,10 @@
<li>Closed doors</li>
<li>Not getting enough cuddle time</li>
</ul>
</div>
</section>
<section>
<section class="favorite-baxter-photos">
<h3>My favorite photos of Baxter</h3>
<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">

60
style/style.css
View File

@ -0,0 +1,60 @@
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
.welcome-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
width: 50rem;
height: auto;
}
.baxter-info {
display: grid;
grid-template-rows: 1.5rem 1fr;
grid-template-columns: 1fr 1fr;
justify-items: center;
gap: 2rem;
width: 50rem;
height: auto;
}
.baxter-info p {
margin: 1rem;
}
.baxter-info ul {
margin: 1rem;
list-style-type: none;
}
.facts-header {
grid-column: 1/4;
grid-row: 1/2;
}
.baxter-is {
grid-column: 1/3;
grid-row: 2/3;
padding-right: 20rem;
}
.baxter-loves {
grid-column: 2/4;
grid-row: 2/3;
padding-left: 5rem;
}