Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!

Office of Drug Research and Surveillance

From wiki
Revision as of 09:32, 26 August 2025 by Renee.whittaker (talk | contribs)
Jump to navigation Jump to search

<!DOCTYPE html> <html lang="en"> <head>

 <meta charset="UTF-8">
 <title>Dynamic Wikipedia Page</title>
 <style>
   body {
     font-family: "Segoe UI", sans-serif;
     margin: 0;
     padding: 0;
     background: #f8f9fa;
     color: #202122;
   }
   header {
     background: #3366cc;
     color: white;
     padding: 1em;
     text-align: center;
   }
   main {
     display: flex;
     max-width: 1200px;
     margin: auto;
     padding: 2em;
   }
   article {
     flex: 3;
     margin-right: 2em;
   }
   aside {
     flex: 1;
     background: #e9ecef;
     padding: 1em;
     border-radius: 8px;
   }
   h1, h2 {
     border-bottom: 1px solid #ccc;
     padding-bottom: 0.3em;
   }
   .collapsible {
     background-color: #eee;
     cursor: pointer;
     padding: 10px;
     border: none;
     text-align: left;
     outline: none;
     font-size: 1em;
     margin-top: 1em;
   }
   .content {
     padding: 0 18px;
     display: none;
     overflow: hidden;
     background-color: #f1f1f1;
   }
   footer {
     text-align: center;
     padding: 1em;
     background: #ddd;
     margin-top: 2em;
   }
 </style>

</head> <body>

<header>

Sample Wikipedia Page

</header>

<main>

 <article>

Introduction

This is a visually dynamic version of a Wikipedia-style page. It includes collapsible sections, styled infoboxes, and a clean layout.

   <button class="collapsible">History</button>

The history section can be expanded or collapsed. This adds interactivity to the page.

   <button class="collapsible">Applications</button>

Applications of this layout include educational content, documentation, and personal wikis.

References

  • [1] Example Reference One
  • [2] Example Reference Two
 </article>
 <aside>

Infobox

Type: Article

Created: August 2025

Author: Renée Whittaker

 </aside>

</main>

<footer>

Page generated by Copilot

</footer>

<script>

 const collapsibles = document.querySelectorAll(".collapsible");
 collapsibles.forEach(btn => {
   btn.addEventListener("click", function () {
     this.classList.toggle("active");
     const content = this.nextElementSibling;
     content.style.display = content.style.display === "block" ? "none" : "block";
   });
 });

</script>

</body> </html>