From 56f1e88172a3ffc4a254cad7af437cb74a5764c1 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Wed, 1 Jan 2025 06:42:24 -0500
Subject: [PATCH] initial styling for index.php

---
 index.php       | 60 ++++++++++++++++++++++++++-----------------------
 style/style.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 28 deletions(-)

diff --git a/index.php b/index.php
index ab4c9e1..586a485 100644
--- a/index.php
+++ b/index.php
@@ -35,39 +35,43 @@
       </section>
 
       <section class="baxter-info">
-        <h3>Baxter facts!</h3>
+        <h3 class="facts-header">Baxter facts!</h3>
+        <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>
+            <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>
 
 
-          <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>
+            <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>
 
-          <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 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>
 
-          <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>
+            <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>
       </section>
       
       <section class="favorite-baxter-photos">
diff --git a/style/style.css b/style/style.css
index e69de29..81e1d8e 100644
--- a/style/style.css
+++ b/style/style.css
@@ -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;
+}