From 790f09088c41682e938e5f557b9ef5980d4379e3 Mon Sep 17 00:00:00 2001
From: Rosia E Evans <willowro@outlook.com>
Date: Mon, 28 Apr 2025 22:27:19 +0100
Subject: [PATCH] grid layout

---
 index.html | 43 ++++++++++++++++++-------------------------
 style.css  | 38 +++++++++++++++++++++-----------------
 2 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 5e28c7f..ae4455b 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,8 @@
     <a href="Contact.html">Contact</a>
   </nav>
 
-  <main>
-  <div class='columns'>
-    <div class='rows'>
-      <header>
+  <main id="home_page_content">
+      <header id="head">
         <h1>Paws And Petals</h1>
         Paws And Petals is a small local dog grooming business
         started up by Arianwen Evans to allow her to work in
@@ -26,30 +24,25 @@
         Starting out with the pets of friends and family, she hopes to 
         slowly develop a small userbase of friends and local-clientelle.
       </header>
-      <section>
-      <h2>Qualifications</h2>
-      Arianwen Evans holds:
-      <ul>
-      <li>Level 3 City and guilds animal management</li>
-      <li>Level 3 Diploma in dog grooming</li>
-      </ul>
+      <section id="qual">
+        <h2>Qualifications</h2>
+        Arianwen Evans holds:
+        <ul>
+        <li>Level 3 City and guilds animal management</li>
+        <li>Level 3 Diploma in dog grooming</li>
+        </ul>
       </section>
-    </div>
-    <div class='rows'>
-      <section id='contact'>
-      <h2>Opening Times</h2>
-      Monday-Friday: 10am - 5pm
-      <br>
-      Saturday-Sunday: Closed
+      <section id='times'>
+        <h2>Opening Times</h2>
+        Monday-Friday: 10am - 5pm
+        <br>
+        Saturday-Sunday: Closed
       </section>
-      <section>
-      <h2>How To Book</h2>
-      To book, see our <a href="Contact.html">contact</a>
-      page and email us.
+      <section id="book">
+        <h2>How To Book</h2>
+        To book, see our <a href="Contact.html">contact</a>
+        page and email us.
       </section>
-    </div>
-  
-  </div>
   </main>
 
 </body>
diff --git a/style.css b/style.css
index df04fe8..bf994a2 100644
--- a/style.css
+++ b/style.css
@@ -81,26 +81,30 @@ a:hover{
   color: black;
 }
 
-.columns{
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  justify-content: space-between;
-  align-content: stetch;
-  align-items: stretch;
+#home_page_content{
+  display: grid;
+  gap: 7px;
+  grid-template-areas:
+  "head open"
+  "qual book";
+  grid-template-columns: 3fr 1fr;
 }
 
-.rows{
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-content: stretch;
-  align-items: stretch;
-  
-}
-
-#contact{
+#times{
   text-align: center;
+  grid-area: open
+}
+
+#head{
+  grid-area: head;
+}
+
+#qual{
+  grid-area: qual
+}
+
+#book{
+  grid-area: book;
 }
 
 .socials{