feat: "What you get" section

index.html

@@ -23,9 +23,57 @@
                     developers to collectively learn and grow.
                 </h1>
                 <h3 class="introduction__container__subheading">
-                    Whether you're freshly starting out, or you are just looking to connect with likeminded people. We help you turn your project ideas into reality.
+                    Whether you're freshly starting out, or you are just looking
+                    to connect with likeminded people. We help you turn your
+                    project ideas into reality.
                 </h3>
             </div>
         </section>
+        <section class="services">
+            <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 our projects.
+                        </p>
+                        <a
+                            href="https://boards.slashdev.space"
+                            class="services__offers_card__button"
+                        >
+                            Get agile!
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
     </body>
 </html>

styles/index.css

@@ -4,7 +4,9 @@
 /* Components */
 @import url("./hero.css");
 @import url("./introduction.css");
+@import url("./services.css");
 
 body {
     margin: 0;
+    font-family: "Work Sans", sans-serif;
 }

styles/introduction.css

@@ -1,17 +1,15 @@
 .introduction {
     align-items: center;
     display: flex;
-    font-family: "Work Sans", sans-serif;
-    height: 30vh;
     justify-content: center;
     text-align: center;
+    margin-bottom: 10rem;
 }
 
 .introduction__container__heading {
     font-size: 2.5rem;
-
 }
 
 .introduction__container__subheading {
     font-size: 1.5rem;
-}
+}

styles/services.css

@@ -0,0 +1,45 @@
+.services {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    margin-bottom: 10rem;
+}
+
+.services__heading {
+    font-size: 5rem;
+}
+
+.services__offers {
+    display: flex;
+    width: 100vw;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.services__offers__card {
+    margin-top: 1.5rem;
+    width: 15rem;
+}
+.services__offers__card__heading {
+    font-size: 2rem;
+}
+
+.services__offers__card__description {
+    margin-bottom: 1rem;
+}
+
+.services__offers_card__button {
+    background: black;
+    border: 0px;
+    color: white;
+    text-decoration: none;
+    padding: 0.6rem 2rem;
+    transition: 0.2s;
+}
+
+.services__offers_card__button:hover {
+    border: 1px solid black;
+    color: black;
+    background: white;
+}