From 2327880c41c4881d0df77b0a55b4b1a47670fe30 Mon Sep 17 00:00:00 2001
From: FiliusPatris <filiuspatrisapps@gmail.com>
Date: Sat, 27 Mar 2021 17:27:35 +0100
Subject: [PATCH] Put the cards into a css grid

---
 index.html          | 74 +++++++++++++++++++++------------------------
 styles/services.css | 23 ++++++++++----
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index e706795..e0645b9 100644
--- a/index.html
+++ b/index.html
@@ -27,45 +27,41 @@
             <div class="services__container">
                 <h1 class="services__heading">What you get</h1>
                 <div class="services__offers">
-                    <div class="services__offers__card">
-                        <h1 class="services__offers__card__heading">Chat</h1>
-                        <p class="services__offers__card__description">
-                            We're hosting our own Matrix server to keep in touch
-                            and share ideas.
-                        </p>
-                        <a
-                            href="https://matrix.slashdev.space"
-                            class="services__offers_card__button"
-                        >
-                            Join here!
-                        </a>
-                    </div>
-                    <div class="services__offers__card">
-                        <h1 class="services__offers__card__heading">
-                            Code Hosting
-                        </h1>
-                        <p class="services__offers__card__description">
-                            We use Gitea to collaboratively work on our code.
-                        </p>
-                        <a
-                            href="https://git.slashdev.space"
-                            class="services__offers_card__button"
-                        >
-                            Set up your account!
-                        </a>
-                    </div>
-                    <div class="services__offers__card">
-                        <h1 class="services__offers__card__heading">Boards</h1>
-                        <p class="services__offers__card__description">
-                            We provide free Kanban boards to plan your projects.
-                        </p>
-                        <a
-                            href="https://boards.slashdev.space"
-                            class="services__offers_card__button"
-                        >
-                            Get agile!
-                        </a>
-                    </div>
+                    <h1 class="services__offers__card__heading matrix-heading">Chat</h1>
+                    <p class="services__offers__card__description matrix-description">
+                        We're hosting our own Matrix server to keep in touch
+                        and share ideas.
+                    </p>
+                    <a
+                        href="https://matrix.slashdev.space"
+                        class="services__offers_card__button matrix-button"
+                    >
+                        Join here!
+                    </a>
+
+                    <h1 class="services__offers__card__heading git-heading">
+                        Code Hosting
+                    </h1>
+                    <p class="services__offers__card__description git-description">
+                        We use Gitea to collaboratively work on our code.
+                    </p>
+                    <a
+                        href="https://git.slashdev.space"
+                        class="services__offers_card__button git-button"
+                    >
+                        Set up your account!
+                    </a>
+
+                    <h1 class="services__offers__card__heading boards-heading">Boards</h1>
+                    <p class="services__offers__card__description boards-description">
+                        We provide free Kanban boards to plan your projects.
+                    </p>
+                    <a
+                        href="https://boards.slashdev.space"
+                        class="services__offers_card__button boards-button"
+                    >
+                        Get agile!
+                    </a>
                 </div>
             </div>
         </section>
diff --git a/styles/services.css b/styles/services.css
index 4baf097..6f5175e 100644
--- a/styles/services.css
+++ b/styles/services.css
@@ -13,15 +13,14 @@
 }
 
 .services__offers {
-    display: flex;
+    display: grid;
+    grid-template-areas: 
+        "matrix-heading      git-heading      boards-heading"
+        "matrix-description  git-description  boards-description"
+        "matrix-button       git-button       boards-button";
     width: 100vw;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
 }
 
-.services__offers__card {
-    width: 15rem;
-}
 .services__offers__card__heading {
     font-weight: 350;
     font-size: 2rem;
@@ -46,3 +45,15 @@
     color: black;
     background: white;
 }
+
+.matrix-heading {grid-area: matrix-heading;}
+.matrix-description {grid-area: matrix-description;}
+.matrix-button {grid-area: matrix-button;}
+
+.git-heading {grid-area: git-heading;}
+.git-description {grid-area: git-description;}
+.git-button {grid-area: git-button;}
+
+.boards-heading {grid-area: boards-heading;}
+.boards-description {grid-area: boards-description;}
+.boards-button {grid-area: boards-button;}
\ No newline at end of file