| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| + | == Introduction == |
| − | <html lang="en">
| + | This is an example of a visually dynamic Wikipedia-style page. |
| − | <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 {
| + | == Features == |
| − | background: #3366cc;
| + | === Dark Mode === |
| − | color: white;
| + | Dark mode is not available on this wiki unless enabled by administrators. |
| − | padding: 1em;
| |
| − | text-align: center;
| |
| − | }
| |
| | | | |
| − | main {
| + | === Collapsible Content === |
| − | display: flex;
| + | You can use collapsible sections like this: |
| − | max-width: 1200px;
| |
| − | margin: auto;
| |
| − | padding: 2em;
| |
| − | }
| |
| | | | |
| − | article {
| + | <details> |
| − | flex: 3;
| + | <summary>Click to expand</summary> |
| − | margin-right: 2em;
| + | This is hidden content. |
| − | }
| + | </details> |
| − | | |
| − | 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>
| |
| − | <h1>Sample Wikipedia Page</h1>
| |
| − | </header> | |
| − | | |
| − | <main>
| |
| − | <article>
| |
| − | <h2>Introduction</h2>
| |
| − | <p>This is a visually dynamic version of a Wikipedia-style page. It includes collapsible sections, styled infoboxes, and a clean layout.</p>
| |
| − | | |
| − | <button class="collapsible">History</button>
| |
| − | <div class="content">
| |
| − | <p>The history section can be expanded or collapsed. This adds interactivity to the page.</p>
| |
| − | </div>
| |
| − | | |
| − | <button class="collapsible">Applications</button>
| |
| − | <div class="content">
| |
| − | <p>Applications of this layout include educational content, documentation, and personal wikis.</p>
| |
| − | </div>
| |
| − | | |
| − | <h2>References</h2>
| |
| − | <ul>
| |
| − | <li>[1] Example Reference One</li>
| |
| − | <li>[2] Example Reference Two</li>
| |
| − | </ul>
| |
| − | </article>
| |
| − | | |
| − | <aside>
| |
| − | <h3>Infobox</h3>
| |
| − | <p><strong>Type:</strong> Article</p>
| |
| − | <p><strong>Created:</strong> August 2025</p>
| |
| − | <p><strong>Author:</strong> Renée Whittaker</p>
| |
| − | </aside>
| |
| − | </main>
| |
| − | | |
| − | <footer>
| |
| − | <p>Page generated by Copilot</p>
| |
| − | </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> | |