Adding Info Page for Community Channels

_includes/footer.html

@@ -60,7 +60,7 @@ <h4 class="footerHeaderStyle align-center-md"><b>Development</b></h4>
 			    <li class="footerListStyle"><a href="{{ site.baseurl }}/develop">Read about development</a></li>
                             <li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Mailing_Lists">Join mailing list</a></li>
                             <li class="footerListStyle"><a href="https://help.sugarlabs.org/en/">Documentation</a></li>
-                            <li class="footerListStyle"><a href="https://matrix.to/#/#sugar:matrix.org">Chat with us on Matrix</a></li>
+                            <li class="footerListStyle"><a href="{{ site.baseurl }}/chat-with-the-community">Chat with the community</a></li>
                             <li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Development_Team/Source_Code">Development code</a></li>
                             <li class="footerListStyle"><a href="https://translate.sugarlabs.org">Translation Platform</a></li>
                             <li class="footerListStyle"><a href="https://wiki.sugarlabs.org/">Sugar Labs Wiki</a></li>

chat-with-the-community.html

@@ -0,0 +1,84 @@
+---
+layout: default
+title: Music Blocks - Sugar Labs
+permalink: /chat-with-the-community/index.html
+---
+<!-- Title section -->
+<div class="section-title1" >
+    <span class="tag tag-regular">Join the Community</span>
+</div>
+
+<!-- Matrix Elements -->
+<section id="testimonial" class="zeroMarPadBtm">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2" > 
+                        <div class="section-title text-center">
+                            <h2>SUGAR LABS ON MATRIX ELEMENT</h2>
+                            <br>
+                            <p class="customParagraphStyle">Element is a secure messaging and collaboration application built on the Matrix protocol, an open standard for decentralized communication. It offers end-to-end encryption, ensuring that conversations remain private and secure. Element supports features such as group chats, file sharing, voice and video calls, and integrates with various other communication platforms through bridging. It's available as a web application and has desktop versions for Windows, macOS, and Linux, as well as mobile apps for Android and iOS.<br/><a href="https://element.io/user-guide">User Guide</a> to create account on Element</p>
+                            <br><a class="join-mat" href="https://matrix.to/#/#sugar:matrix.org" target="_blank">Join us on Matrix</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Discord -->
+<section id="testimonial" class="zeroMarPadBtm">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2" > 
+                        <div class="section-title text-center">
+                            <h2>SUGARIZER ON DISCORD</h2>
+                            <br>
+                            <p class="customParagraphStyle">Discord is a popular communication platform that combines the features of chat lobbies, message boards, and VoIP chat systems. It allows users to create and join servers—dedicated spaces for communities or groups—where they can participate in text channels, voice calls, video calls, and share media and files. While Discord provides various privacy settings and safety features, concerns have been raised about data collection and user privacy. The platform collects user data, including messages and IP logs, which are retained for up to two years.<br/><a href="https://support.discord.com/hc/en-us/articles/360033931551-Getting-Started">User Guide</a> to create account on Discord</p>
+                            <br><a class="join-mat" href="https://discord.com/channels/1078051575580336249/1078051576284975226" target="_blank">Join us on Discord</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Slideshow -->
+<section id="intro" class="zeroMarPadBtm">
+    <div class="container" >
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2">
+                        <div class="testimonial-carousel">
+                            <div id="testimonial-slider1" class="owl-carousel">
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/Elements.png" alt="Matrix Elements create account interface " class="customImageStyle">    
+                                </div>
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/Discord.png" alt="Discord create account interface" class="customImageStyle">
+                                </div>
+                            </div>
+                        </div>
+                    </div> 
+                    <br><p style="text-align: center;">Create account Interface of <a href ="https://app.element.io/#/register">Matrix Element</a> and <a href ="https://discord.com/register">Discord</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- "Return to main page" -->
+<section id="call-to-action">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <a href="{{ site.baseurl }}/" ><button type="button" class="btn bt-raised btn-custom bt lastButtonMargin" >Return to main page</button></a>
+            </div>
+        </div>
+    </div>
+</section>

css/airspace.css

@@ -2777,14 +2777,13 @@ font-size:30px;
 .try-mb:active {
   top:0.1em;
   color: #fff !important;
-}  
+}   
 table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
   text-align: center;
   align-items: center;
 }
-
 .count{
 /* Nothing related to styling needed to be described for this  */
-}
+}

css/custom.css

@@ -560,7 +560,6 @@ ul {
 }
 
 /* Testimonial Styling */
-
 #testimonials {
   background-color: #3b3b4f; /* Change the background color */
   padding: 5rem 0;
@@ -722,3 +721,26 @@ ul {
     font-size: 1.2rem !important;
   }
 }
+/* Chat with the Community Page */
+.join-mat {
+  display:inline-block;
+  padding:0.7em 1.4em;
+  margin:0 0.3em 0.3em 0;
+  border-radius:0.15em;
+  box-sizing: border-box;
+  text-decoration:none;
+  font-family:'Roboto',sans-serif;
+  text-transform:uppercase;
+  font-weight:400;
+  color:#FFFFFF !important;
+  background-color:#00a40e;
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+  text-align:center;
+  position:relative;
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  font-size: 1.5em;
+}
+.join-mat:active {
+  top:0.1em;
+  color: #fff !important;
+}