Adding the bulk of the content for the discord page

Author: KeiranWDigital

css/style.css

@@ -471,6 +471,17 @@ div.event-book-button {
     text-decoration: none;
 }
 
+/*Discord*/
+
+.discord-image{
+    padding-top:10px;
+    padding-bottom:10px;
+}
+
+.discord-cols{
+    padding:10px;
+}
+
 /* RESIZING (min-width) */
 
 @media screen and (min-width: 576px) {

discord.html

@@ -16,17 +16,19 @@ <h1>{{page.title}}</h1>
 
 <h2>Index</h2>
 <ul>
-    <li><a href="#signingup">Signing up</a></li>
     <li><a href="#beforetheevent">Before the event</a></li>
     <li><a href="#instructions">Instructions</a></li>
     <li><a href="#troubleshooting">Troubleshooting</a></li>
 </ul>
 
 
-<p class="float-center">
-    <a href="#">Back to top</a>
-</p>
-<br />
+<div class="row unpadded">
+    <div class="col">
+        <p class="back-to-top">
+            <a href="#">Back to top</a>
+        </p>
+    </div>
+</div><br />
 
 <a name="beforetheevent"></a>
 <h2>Before the event</h2>
@@ -42,64 +44,95 @@ <h2>Before the event</h2>
     other than Safari.
 </p>
 <p>
-    Don’t worry, you won’t need to install anything! The webinar will be hosted on the University
-    of Reading’s Microsoft Teams software. You simply follow the link in the email which will open
+    Some workshops include "code-alongs" where you need to use a 'proper' computer to be able to access the session. If
+    you are not sure, feel free to contact the organisers via the <a href="{{site.url}}\contact">contact us</a> page.
+</p>
+<p>
+    Don’t worry, you won’t need to install anything! The webinar will be hosted on CodeWith's Discord server. You simply
+    follow the link in the email which will open
     up in a web browser.
 </p>
 
-
-
-<p class="float-center">
-    <a href="#">Back to top</a>
-</p>
+<div class="row unpadded">
+    <div class="col">
+        <p class="back-to-top">
+            <a href="#">Back to top</a>
+        </p>
+    </div>
+</div>
 <br />
 
 <a name="instructions"></a>
 <h2>Instructions</h2>
+<p>When you follow the invite link, you should see the following message.</p>
+
+
+<img class="discord-image mg-fluid" src="../images/discord-signup.png">
+
 <p>
-    When you follow the link, you should see the following message. If you don’t have Teams
+    You can either use the Discord app or, if you don’t have Discord
     installed, we recommend you join on the web. Click the button shown:
 </p>
 
-<img class="signup img-fluid" src="./Content/join-on-the-web-blue-rect.png">
+<img class="discord-image mg-fluid" src="../images/discord-web.png">
+
+<p>
+    You can then sign up or log into an existing account.
+</p>
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-6">
+        <h3>Register</h3><img class="discord-image mg-fluid" src="../images/discord-create.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-6">
+        <h3>Log in</h3><img class="discord-image mg-fluid" src="../images/discord-login.png">
+    </div>
+</div>
 
 
+<p>Once you are logged in (either by signing up or using an existing account) you can select a channel by clicking on
+    it's name on the left of the screen. </p>
 
 <p>
-    Your browser might ask if Teams can use your camera and microphone. Click <b>Allow</b> – don’t
+    Your browser might ask if Discord can use your microphone. Click <b>Allow</b> – don’t
     worry, you can turn them off whenever you like. Turning this on will allow you to ask questions
     using your microphone during intervals.
 </p>
+<img class="discord-image mg-fluid" src="../images/discord-microphone.png">
+<p>
+    If you would like to use your webcam on Discord, select the video button. It will open another digalog box. Click
+    <b>Allow</b> – don’t
+    worry, you can turn them off whenever you like.
+</p>
 
 
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-6">
+        <img class="discord-image mg-fluid" src="../images/discord-video.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-6">
+        <img class="discord-image mg-fluid" src="../images/discord-camera.png">
+    </div>
+</div>
 
-<img class="signup img-fluid" src="./Content/allow-mic-camera.png">
-
-
-
-
 <p>
-    You should then be taken to a page which looks like below. Please <b>enter your name</b>, and
-    turn <b>off</b> your <b>webcam</b> and <b>microphone</b>. This is very important! You should
-    keep your camera and microphone muted throughout the session. When you've done all that, click
-    ‘Join Now’.
+    Your name should appear underneath the channel name. Clicking the name a second time will show the other people in
+    the channel. it will look something like this:</p>
+    <img class="discord-image mg-fluid" src="../images/discord-camera.png">
+    <!--TODO image of channel with cameras-->
+<p>
+    Turn <b>off</b> your <b>microphone</b>. This is very important! You should
+    keep your microphone muted throughout the session. When you've done all that, click
 </p>
 
 
-
-<img class="signup img-fluid" src="./Content/audio-video-settings.png">
+<!--TODO MUTE MICROPHONE BUTTON-->
+<img class="discord-image mg-fluid" src="./Content/audio-video-settings.png">
 
 
 
-<p>
-    Please do not try to join the webinar using ‘Phone audio’ shown below. This option provides a
-    telephone number to ring. However, the system is disruptive to the webinar, so phone audio
-    participants cannot be accepted into the room.
-</p>
 
 
-
-<img class="signup img-fluid" src="./Content/other-join-options.png">
+<img class="discord-image mg-fluid" src="./Content/other-join-options.png">
 
 
 <p>
@@ -110,13 +143,25 @@ <h2>Instructions</h2>
 </p>
 
 
-<img class="signup img-fluid" src="./Content/cam-mic-chat.png">
+<img class="discord-image mg-fluid" src="./Content/cam-mic-chat.png">
 
-<p class="float-center">
-    <a href="#">Back to top</a>
-</p>
-<br />
+<div class="row unpadded">
+    <div class="col">
+        <p class="back-to-top">
+            <a href="#">Back to top</a>
+        </p>
+    </div>
+</div><br />
+
+<a name="controls"></a>
+<h2>Controls</h2>
+<!--TODO IMAGES-->
+<h3>Microphone Mute</h3>
+<h3>Event Chat</h3>
+<h3>Video</h3>
+<h3>Screen Share</h3>
 
+<!--TODO Troubleshooting-->
 <a name="troubleshooting"></a>
 <h2>Troubleshooting</h2>
 <h4>I can't hear anything!?!</h4>
@@ -128,7 +173,7 @@ <h4>I can't hear anything!?!</h4>
     <li>
         We are also aware of issues using Apple’s Safari browser. If you use it, you won’t be
         able to hear! Install Google Chrome instead or, if all else fails, install the
-        Microsoft Teams app. Both are available for free!
+        Discord app. Both are available for free!
     </li>
     <li>
         Did you select the Phone audio option (below) when you entered the room? If so, you
@@ -137,21 +182,21 @@ <h4>I can't hear anything!?!</h4>
 </ul>
 
 
-<img class="signup img-fluid" src="./Content/phone-audio.png">
+<img class="discord-image mg-fluid" src="./Content/phone-audio.png">
 
 
 
 <h4>I can't see the text chat!?!</h4>
 <ul>
     <li>
-        If you are using teams via Google Chrome (which is our recommended method), move
+        If you are using Discord via Google Chrome (which is our recommended method), move
         the mouse over the main screen and this menu should appear. Click the little speech
         bubble button (circled) and the chat window will pop out at the side.
     </li>
 </ul>
 
 
-<img class="signup img-fluid" src="./Content/speech-bubble.jpg">
+<img class="discord-image mg-fluid" src="./Content/speech-bubble.jpg">
 
 
 
@@ -167,15 +212,15 @@ <h4>I can't see the text chat!?!</h4>
 
 <ul>
     <li>
-        If you are using teams on a mobile device or the teams app, some attendees will not be
+        If you are using Discord on a mobile device or the Discord app, some attendees will not be
         able to gain access to the chat and will get an error message. If this happens, we
         recommend you join using a laptop or desktop computer and log in using Google Chrome.
         When the link opens in Chrome, click the ‘Join on the web instead’ button.
     </li>
 </ul>
 
 
-<img class="signup img-fluid" src="./Content/join-on-the-web-pink-oval.png">
+<img class="discord-image mg-fluid" src="./Content/join-on-the-web-pink-oval.png">
 
 
 <h4>I keep getting refused access into the room!?!</h4>
@@ -189,5 +234,4 @@ <h4>I keep getting refused access into the room!?!</h4>
 
 
 
-<img class="signup img-fluid" src="./Content/phone-audio.png">
-
+<img class="discord-image mg-fluid" src="./Content/phone-audio.png">