initial styling for index.php

index.php

@@ -35,7 +35,8 @@
       </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>
@@ -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,6 +71,7 @@
               <li>Closed doors</li>
               <li>Not getting enough cuddle time</li>
             </ul>
+          </div>
       </section>
       
       <section class="favorite-baxter-photos">

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;
+}