Moving images to a discord folder and adding a couple of new examples

Author: KeiranWDigital

discord.html

@@ -59,25 +59,25 @@ <h2>Joining the event</h2>
 <p>When you follow the invite link, you should see the following message.</p>
 
 
-<img class="discord-image mg-fluid" width="200" src="../images/discord-signup.png">
+<img class="discord-image mg-fluid" width="200" src="../images/discord/discord-signup.png">
 
 <p>
     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="discord-image mg-fluid" width="200" src="../images/discord-web.png">
+<img class="discord-image mg-fluid" width="200" src="../images/discord/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 width="200" class="discord-image mg-fluid" src="../images/discord-create.png">
+        <h3>Register</h3><img width="200" class="discord-image mg-fluid" src="../images/discord/discord-create.png">
     </div>
     <div class="discord-cols col-m-12 col-l-6">
-        <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/discord-login.png">
+        <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/discord/discord-login.png">
     </div>
 </div>
 
@@ -90,7 +90,7 @@ <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/di
     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">
+<img class="discord-image mg-fluid" src="../images/discord/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
@@ -100,24 +100,27 @@ <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/di
 
 <div class="row">
     <div class="discord-cols col-m-12 col-l-6">
-        <img class="discord-image mg-fluid" src="../images/discord-video.png">
+        <img class="discord-image mg-fluid" src="../images/discord/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">
+        <img class="discord-image mg-fluid" src="../images/discord/discord-camera.png">
     </div>
 </div>
 
 <p>
-    Your name should appear underneath the channel name. To join the channel click the name. It will then 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">
+    Your name should appear underneath the channel name. It will then show the other people in
+    the channel.</p>
+<img class="discord-image mg-fluid" src="../images/discord/discord-list.png">
+
+<p>
+    To join the channel click the name, it will look something like this:</p>
+<img width="600" class="discord-image mg-fluid" src="../images/discord/discord-call.png">
 <p>
     Turn <b>off</b> your <b>microphone</b>. This is very important! You should
     keep your microphone muted throughout the session.
 </p>
 
-<!--TODO MUTE MICROPHONE BUTTON-->
-<img class="discord-image mg-fluid" src="../images/discord-buttons.png">
+<img class="discord-image mg-fluid" src="../images/discord/discord-buttons.png">
 
 <p>
     Finally, make sure you still have your <b>microphone</b> muted. You can also
@@ -136,16 +139,15 @@ <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/di
 
 <a name="controls"></a>
 <h2>Controls</h2>
-<!--TODO IMAGES-->
 <div class="row">
     <div class="discord-cols col-m-12 col-l-4">
-        <h3>Microphone Mute</h3><img class="discord-image mg-fluid" src="../images/discord-buttons.png">
+        <h3>Microphone Mute</h3><img class="discord-image mg-fluid" src="../images/discord/discord-buttons.png">
     </div>
     <div class="discord-cols col-m-12 col-l-4">
-        <h3>Video On/Off</h3><img class="discord-image mg-fluid" width="300" src="../images/discord-video.png">
+        <h3>Video On/Off</h3><img class="discord-image mg-fluid" width="300" src="../images/discord/discord-video.png">
     </div>
     <div class="discord-cols col-m-12 col-l-4">
-        <h3>Event Chat</h3><img class="discord-image mg-fluid" width="300" src="../images/discord-event-chat.png">
+        <h3>Event Chat</h3><img class="discord-image mg-fluid" width="300" src="../images/discord/discord-event-chat.png">
     </div>
 </div>
 
@@ -155,14 +157,13 @@ <h3>Event Chat</h3><img class="discord-image mg-fluid" width="300" src="../image
 <h3>Screen Share</h3>
 <div class="row">
     <div class="discord-cols col-m-12 col-l-6">
-        <h4>Step 1</h4><img class="discord-image mg-fluid" src="../images/discord-screen-1.png">
+        <h4>Step 1</h4><img class="discord-image mg-fluid" src="../images/discord/discord-screen-1.png">
     </div>
     <div class="discord-cols col-m-12 col-l-6">
-        <h4>Step 2</h4><img class="discord-image mg-fluid" width="300" src="../images/discord-screen-2.png">
+        <h4>Step 2</h4><img class="discord-image mg-fluid" width="300" src="../images/discord/discord-screen-2.png">
     </div>
 </div>
 
-<!--TODO Troubleshooting-->
 <div class="row unpadded">
     <div class="col">
         <p class="back-to-top">
@@ -183,7 +184,7 @@ <h4>I can't see the presentation!</h4>
     Click on the channel name (on the left of the screen) and you will see everyone's' pictures. One of them will have a
     button saying "Watch Stream". Click this button.
 
-    <img class="discord-image mg-fluid" width="300" src="../images/discord-watch-stream.png">
+    <img class="discord-image mg-fluid" width="300" src="../images/discord/discord-watch-stream.png">
 
 </p>
 
@@ -193,18 +194,18 @@ <h4>I'm talking but you can't hear me!</h4>
 </p>
 <p> You can see settings by clicking the gear icon.
 </p>
-<img class="discord-image mg-fluid" width="300" src="../images/discord-setting-button.png">
+<img class="discord-image mg-fluid" width="300" src="../images/discord/discord-setting-button.png">
 
 <p>Click "Voice and Video" </p>
-<img class="discord-image mg-fluid" width="300" src="../images/discord-voice.png">
+<img class="discord-image mg-fluid" width="300" src="../images/discord/discord-voice.png">
 
 <p>Make Sure your microphone is selected here:</p>
 
-<img class="discord-image mg-fluid" width="500" src="../images/discord-microphone-dropdown.png">
+<img class="discord-image mg-fluid" width="500" src="../images/discord/discord-microphone-dropdown.png">
 
 <p>You can test it by clicking the "Let's Check" button:</p>
 
-<img class="discord-image mg-fluid" width="500" src="../images/discord-mic-test.png">
+<img class="discord-image mg-fluid" width="500" src="../images/discord/discord-mic-test.png">
 <div class="row unpadded">
     <div class="col">
         <p class="back-to-top">