add panels around sub-areas of larger web vs print

Author: possumbilities

src/index.html

@@ -351,29 +351,35 @@ <h3>Website</h3>
             <p>If you are licensing or marking one work, paste the code next to it. If you are licensing or marking the whole page or blog, you can paste the code at the bottom of the page.</p>
 
             <article>
-                <h4>Rich Text</h4>
-                <p class="rich-text mark">[contextually formatted mark here]</p>
-
-                <footer>
-                    <div>
-                        <input type="checkbox" id="rich-text-full-name" name="rich-text-full-name" value="rich-text-full-name" />
-                        <label for="rich-text-full-name">full tool name</label>
-                    </div>
-                    <button id="copy-rich-text-mark">Copy</button>
-                </footer>
+                <h4><button>Rich Text</button></h4>
+
+                <div class="panel">
+                    <p class="rich-text mark">[contextually formatted mark here]</p>
+
+                    <footer>
+                        <div>
+                            <input type="checkbox" id="rich-text-full-name" name="rich-text-full-name" value="rich-text-full-name" />
+                            <label for="rich-text-full-name">full tool name</label>
+                        </div>
+                        <button id="copy-rich-text-mark">Copy</button>
+                    </footer>
+                </div>
             </article>
 
             <article>
-                <h4>HTML</h4>
-                <p class="html mark">[contextually formatted mark here]</p>
-
-                <footer>
-                    <div>
-                        <input type="checkbox" id="html-full-name" name="html-full-name" value="html-full-name" />
-                        <label for="html-full-name">full tool name</label>
-                    </div>
-                    <button id="copy-html-mark">Copy</button>
-                </footer>
+                <h4><button>HTML</button></h4>
+
+                <div class="panel">
+                    <p class="html mark">[contextually formatted mark here]</p>
+
+                    <footer>
+                        <div>
+                            <input type="checkbox" id="html-full-name" name="html-full-name" value="html-full-name" />
+                            <label for="html-full-name">full tool name</label>
+                        </div>
+                        <button id="copy-html-mark">Copy</button>
+                    </footer>
+                </div>
             </article>
 
             <!-- <h4>XMP</h4>
@@ -383,17 +389,19 @@ <h3>Print Work or Media</h3>
             <p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
 
             <article>
-                <h4>Plain Text</h4>
-
-                <p class="plain-text mark">[contextually formatted mark here]</p>
-
-                <footer>
-                    <div>
-                        <input type="checkbox" id="plain-text-full-name" name="plain-text-full-name" value="plain-text-full-name" />
-                        <label for="plain-text-full-name">full tool name</label>
-                    </div>
-                    <button id="copy-plain-text-mark">Copy</button>
-                </footer>
+                <h4><button>Plain Text</button></h4>
+
+                <div class="panel">
+                    <p class="plain-text mark">[contextually formatted mark here]</p>
+
+                    <footer>
+                        <div>
+                            <input type="checkbox" id="plain-text-full-name" name="plain-text-full-name" value="plain-text-full-name" />
+                            <label for="plain-text-full-name">full tool name</label>
+                        </div>
+                        <button id="copy-plain-text-mark">Copy</button>
+                    </footer>
+                </div>
             </article>
 
         </div>