feat: contact section

index.html

@@ -24,7 +24,7 @@
         </section>
         <section class="services">
             <div class="services__container">
-                <h1 class="services__heading">Our Services</h1>
+                <h2 class="services__heading">Our Services</h2>
                 <div class="services__offers">
                     <div class="services__offers__card">
                         <h1 class="services__offers__card__heading">Chat</h1>
@@ -34,9 +34,9 @@
                         </p>
                         <a
                             href="https://matrix.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Join here!</p>
+                            <p>Join a room</p>
                         </a>
                     </div>
 
@@ -49,9 +49,9 @@
                         </p>
                         <a
                             href="https://git.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Set up your account!</p>
+                            <p>Set up your account</p>
                         </a>
                     </div>
 
@@ -62,25 +62,43 @@
                         </p>
                         <a
                             href="https://boards.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Get agile!</p>
+                            <p>Get agile</p>
                         </a>
                     </div>
                     <div class="services__offers__card">
-                        <h1 class="services__offers__card__heading">Fediverse</h1>
+                        <h1 class="services__offers__card__heading">
+                            Fediverse
+                        </h1>
                         <p class="services__offers__card__description">
                             We host our own federated social media instance.
                         </p>
                         <a
                             href="https://social.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Toot with us!</p>
+                            <p>Toot with us</p>
                         </a>
                     </div>
                 </div>
             </div>
         </section>
+        <section class="contact">
+            <div class="contact__container">
+                <h2>How to join</h2>
+                <p>
+                    /dev.space is a free and open community. Anyone and everyone
+                    is welcome. Simply join our Matrix server and chat with us.
+                    Already got an account on another instance? Great! See
+                    what's up in our lobby:
+                </p>
+                <a
+                    class="button__link button__contact"
+                    href="https://matrix.to/#/#lobby:matrix.slashdev.space"
+                    ><p>#lobby:matrix.slashdev.space</p></a
+                >
+            </div>
+        </section>
     </body>
 </html>

styles/atoms.css

@@ -0,0 +1,23 @@
+.button__link {
+    font-weight: 350;
+    background: black;
+    border: 1px solid black;
+    color: white;
+    text-decoration: none;
+    padding: 0.6rem 2rem;
+    margin: 2rem 2.5rem;
+    transition: 0.2s;
+
+    display: flex;
+    align-items: center;
+}
+
+.button__link > p {
+    font-size: 1rem;
+    margin: auto;
+}
+
+.button__link:hover {
+    color: black;
+    background: white;
+}

styles/contact.css

@@ -0,0 +1,10 @@
+.contact__container {
+    margin: auto 12vw;
+    justify-content: center;
+}
+
+.button__contact {
+    margin: auto;
+    margin-bottom: 2rem;
+    width: 15rem;
+}

styles/index.css

@@ -1,8 +1,11 @@
 @import url("./typography.css");
+@import url("./atoms.css");
+
 
 /* Components */
 @import url("./welcome.css");
 @import url("./services.css");
+@import url("./contact.css");
 
 /* Fonts */
 @font-face {

styles/services.css

@@ -33,30 +33,6 @@
     font-size: 1rem;
 }
 
-.services__offers_card__button {
-    font-weight: 350;
-    background: black;
-    border: 1px solid black;
-    color: white;
-    text-decoration: none;
-    padding: 0.6rem 2rem;
-    margin: 2rem 2.5rem;
-    transition: 0.2s;
-
-    display: flex;
-    align-items: center;
-}
-
-.services__offers_card__button > p {
-    font-size: 1rem;
-    margin: auto;
-}
-
-.services__offers_card__button:hover {
-    color: black;
-    background: white;
-}
-
 @media only screen and (max-width: 380px) {
     .services__offers {
         width: 100vw;

styles/typography.css

@@ -17,4 +17,8 @@ h3 {
 p {
     font-size: 1.5rem;
 	font-weight: 200;
+}
+
+a {
+    color: black;
 }