Popout figma links and added text for comic

index.html

@@ -24,10 +24,10 @@
     <div class="bg-light border-right" id="sidebar-wrapper">
       <div class="sidebar-heading"><a href="">GRASP</a></div>
       <div class="list-group list-group-flush">
-        <a href="#meter1" class="list-group-item list-group-item-action">Meter 1</a>
-        <a href="#meter2" class="list-group-item list-group-item-action">Meter 2</a>
-        <a href="#words1" class="list-group-item list-group-item-action">Words 1</a>
-        <a href="#words2" class="list-group-item list-group-item-action">Words 2</a>
+        <a href="https://www.figma.com/proto/pAPUvIs1ith2jUZPgQUH7O/GRASP?node-id=586%3A160&scaling=contain" target="_blank" class="list-group-item list-group-item-action">Meter 1</a>
+        <a href="https://www.figma.com/proto/pAPUvIs1ith2jUZPgQUH7O/GRASP?node-id=512%3A60&scaling=contain" target="_blank" class="list-group-item list-group-item-action">Meter 2</a>
+        <a href="https://www.figma.com/proto/pAPUvIs1ith2jUZPgQUH7O/GRASP?node-id=513%3A1947&scaling=contain" target="_blank" class="list-group-item list-group-item-action">Words 1</a>
+        <a href="https://www.figma.com/proto/pAPUvIs1ith2jUZPgQUH7O/GRASP?node-id=584%3A1518&scaling=contain" target="_blank" class="list-group-item list-group-item-action">Words 2</a>
         <a href="#comic1" class="list-group-item list-group-item-action">Comic 1</a>
         <a href="#comic2" class="list-group-item list-group-item-action">Comic 2</a>
       </div>
@@ -38,34 +38,23 @@
     <div id="page-content-wrapper">                                  
       <div class="page-content">
         <h1 class="mt-4">GRASP</h1>
-        <p>Please select an option the left. Your selection will open in a new window.</p>
+        <p>Please select an option on the left. Your selection will open in a new window.</p>
       </div>
       <div id="meter1" class="page-content">        
-        <iframe src="https://www.figma.com/embed?embed_host=share&url=
-                https%3A%2F%2Fwww.figma.com%2Fproto%2FpAPUvIs1ith2jUZPgQUH7O%2FGRASP%3Fnode-id%3D586%3A160%26scaling%3Dcontain"
-                width="100%" height="700"
-          ></iframe>
+
       </div>
       <div id="meter2" class="page-content">
-        <iframe src="https://www.figma.com/embed?embed_host=astra&url=
-                https%3A%2F%2Fwww.figma.com%2Fproto%2FpAPUvIs1ith2jUZPgQUH7O%2FGRASP%3Fnode-id%3D512%3A60%26scaling%3Dcontain"
-                width="100%" height="700"
-        ></iframe>
+
       </div>
       <div id="words1" class="page-content">
-        <iframe src="https://www.figma.com/embed?embed_host=astra&url=
-                https%3A%2F%2Fwww.figma.com%2Fproto%2FpAPUvIs1ith2jUZPgQUH7O%2FGRASP%3Fnode-id%3D513%253A1947%26scaling%3Dcontain%0A"
-                width="100%" height="700"
-          ></iframe>
+
       </div>
       <div id="words2" class="page-content">
-        <iframe src="https://www.figma.com/embed?embed_host=astra&url=
-                https%3A%2F%2Fwww.figma.com%2Fproto%2FpAPUvIs1ith2jUZPgQUH7O%2FGRASP%3Fnode-id%3D584%253A1518%26scaling%3Dcontain"
-                width="100%" height="700"
-          ></iframe>
+
       </div>
       <div id="comic1" class="page-content">
         <ul class="comic">
+          <p>Please click on the image to hear audio.</p>
           <li>
             <img src="BeforeSurgery.png" audio="./BeforeSurgery.m4a" />
           </li>
@@ -97,6 +86,7 @@ <h1 class="mt-4">GRASP</h1>
       </div>
       <div id="comic2" class="page-content">
         <ul class="comic">
+          <p>Please click on the image to hear audio.</p>
           <li>
             <img src="BeforeSurgery.png" audio="./BeforeSurgery.m4a" />
           </li>