214
edits
Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: − + + + + + + + + + + + + + − body {+ − font-family: 'Nunito Sans', sans-serif;+ − }+ + + + − .res-img img {+ − max-width:100%;+ − height:auto;+ − }+ + + − #topten { + − margin-top: 2.2em;+ − }+ + − .btn {+ − display: inline-block;+ − margin-bottom: 0;+ − font-weight: 400;+ − text-align: center;+ − white-space: nowrap;+ − vertical-align: middle; − -ms-touch-action: manipulation; − touch-action: manipulation; − cursor: pointer; − background-image: none; − border: 1px solid transparent; − padding: 6px 6px; − font-size: 14px; − line-height: 1.42857143; − border-radius: 20px; − width: auto; − height: auto; − background-color: rgba(85, 73, 92,0.8); − border: 1px solid rgb(85, 73, 92); − transition: 1s ease; − } − .btn a {+ − color: rgb(255, 255, 255);+ − text-decoration: none;+ − }+ − + − color: rgb(255, 255, 255);+ − text-decoration: none;+ − }+ + + + + + + − + − color: rgb(255, 255, 255);+ − text-decoration: none;+ − }+ + + − .btn a.external:hover {+ − color: rgb(255,255,255);+ − text-decoration: underline;+ − }+ + + + + + − .btn:hover {+ − background-color: rgba(85, 73, 92,0.5);+ − transition: 1s ease;+ − text-decoration: underline; − } + + + + − .mainpage_row {+ − display: flex;+ − flex-direction: row;+ − flex-flow: row wrap;+ − justify-content: space-between; − padding: 0; − margin: 0 -5px 0 -5px; − } − .mainpage_box {+ − flex: 1;+ − margin: 5px;+ − min-width: 210px;+ − border: 0px solid #CCC; − padding: 10px 10px 10px 10px; − } − .mainpage_box h2 {+ − color: rgb(85,73,92);+ − font-family: 'Rubik', sans-serif;+ − font-size: 24px;+ − }+ + − .mainpage_box h3 {+ − color: rgb(85,73,92);+ − font-family: 'Rubik', sans-serif;+ − font-size: 21px;+ − font-weight: normal;+ − }+ + − .learnBar {+ − padding: 10px;+ − margin: 5px 0px 0px 0px;+ − border: 1px solid purple; − border-radius: 20px; − } − + − background-color: rgb(0,0,128);+ − color: rgb(255,255,255);+ − padding: 10px;+ − border: 1px solid transparent;+ − border-radius: 20px;+ − }+ + + + − .searchBar a {+ − color: rgb(255,255,255);+ − } − − .start { − font-family: 'Nunito Sans', sans-serif; − background-color: rgba(85, 73, 92,0.8); − border: 1px solid rgb(85, 73, 92); − color: rgb(255,255,255); − padding: 10px; − max-width:50%; − height:auto; − } − − .start:hover { − background-color: rgba(85, 73, 92,0.5); − transition: 1s ease; − } − − .items a { − color: rgb(255,255,255); − text-decoration: none; − white-space: nowrap; − } − − .items a:visited { − color: rgb(255,255,255); − text-decoration: none; − } − − .items a:hover { − color: rgb(255,255,255); − text-decoration: underline; − } − − .items a.external { − color: rgb(255,255,255); − text-decoration: none; − } − − .items a.external:visited { − color: rgb(255,255,255); − text-decoration: none; − } − − .items a.external:hover { − color: rgb(255,255,255); − text-decoration: underline; − } − − .fadein img { − opacity:1; − transition: 1s ease; − } − − .fadein img:hover { − opacity:0.5; − transition: 1s ease; − } − − .start-icon { − margin: 0px 5px 0px 5px; − } − − .alert { − border: 1px solid transparent; − } − − .alert-primary { − background-color: rgba(1, 204, 220, 0.16); − box-shadow: 0px 0px 2px #03fff5; − border-color: rgb(1, 204, 220); − border-style: solid; − border-left: 3px solid #2f6aa5; − border-right: 3px solid #2f6aa5; − border-bottom-right-radius: 6px; − border-top-right-radius: 6px; − border-bottom-left-radius: 6px; − border-top-left-radius: 6px; − padding: 3px 10px 3px 10px; − } − − .alert-primary:hover { − background-color: rgba(1, 204, 220, 0.3); − transition: 0.5s; − } − − .times − { − -webkit-animation: blink 2s 1 both; − animation: blink 2s 1 both; − } − − @-webkit-keyframes blink { − 0%, − 50%, − 100% { − opacity: 1; − } − 25%, − 75% { − opacity: 0; − } − } − @keyframes blink { − 0%, − 50%, − 100% { − opacity: 1; − } − 25%, − 75% { − opacity: 0; − } − } − − }} − − <multilang> − @en|__NOTOC__ − <!--The following line of code hides the page title--> − [[File:WikiButtonFrench.png|300px|frameless|right|link=https://wiki.gccollab.ca/AMC/post-secondaire]] − {{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}} − <div style="font-size: 200%"><span style="color: #55495C">'''The Office of Drug Research and Surveillance'''</div> − <div class="mainpage_row"> − <div class="mainpage_box"> − <h2><span> '''About this page''' </span></h2> − <div> − Welcome to the Office of Drug Research and Surveillance GC Wiki Page! − <h3><span> '''TEXT''' </span></h3> − TEXT − <br><br> − '''TEXT:''' − * '''Vision:''' ODRS is a credible center of experts that informs and supports Federal Policy and Programs on the use of and impacts of drugs and substances in Canada. − * '''Mission:''' ODRS collaborates with partners to collect, analyze and disseminate timely and meaningful data and information on the use and impacts of drugs and substances in Canada − <br><br> − <div class="learnBar"> − [[File:STP_ENG_wiki.png |250px|link= https://travel.gc.ca/travelling/safe-travel-planner/intro]] [[File:Webpage_ENG_wiki.png |250px|link=https://travel.gc.ca/travelling/health-safety/youth]] − </div> − </div> − − </div> − <br> − − − <div class="mainpage_box"> − <h2>'''Research and Surveillance Streams''' </h2> − <br> − − {| style="text-align: center;" − |- − | class="res-img fadein" style="padding: 0px 10px" | [[File:01.jpg|150px| link= https://wiki.gccollab.ca/The_Office_of_Drug_Research_and_Surveillance/Survey_Results]] − | class="res-img fadein" style="padding: 0px 10px" | [[File:02.jpg|150px|link= ]] − |- − | style="padding: 0px 10px" | [https://wiki.gccollab.ca/The_Office_of_Drug_Research_and_Surveillance/Survey_Results '''<big> Survey Results </big>'''] − | style="padding: 0px 10px" | [https://wiki.gccollab.ca/GAC/post-secondary/downloads '''<big> Monitoring Data </big>'''] − |} − <br> − {| style="text-align: center;" − |- − | class="res-img fadein" style="padding: 0px 10px" | [[File:03.jpg|150px|link=]] − | class="res-img fadein" style="padding: 0px 10px" | [[File:04.jpg|150px|link=]] − |- − | style="padding: 0px 10px" | [[GAC/post-secondary/predeparture | '''<big> Surveillance Data </big>''']] − | style="padding: 0px 10px" | [[GAC/post-secondary/web_Process_to_update_your_web_content | '''<big> Research Data </big>''']] − |} − </div> − </div> − <div class="mainpage_row"> − <div class="mainpage_box"> − <h2>'''Research Impact '''</h2> − <br> − − {| class="zebra" style="width:50% − |- − |- style="background-color:lightblue − | style="text-align:center;" | Cell Content − ! Header 1 !! Header 2 !! Header 3 − |- − | Row 1, Cell 1 || Row 1, Cell 2 || Row 1, Cell 3 − |- − | Row 2, Cell 1 || Row 2, Cell 2 || Row 2, Cell 3 − |} − </div> − </div> − </div> − </div> − <div class="mainpage_row"> − <div class="mainpage_box"> − <h2>'''Connect with us'''</h2> − <br> − {| style="text-align: center;" − |- − | style="padding: 0px 10px" | ['''<big> odrs-brsd@hc-sc.gc.ca </big>'''] − |} − − </div> − </div> − − − <div class="mainpage_row"> − <div class="mainpage_box"> − <h2>'''Other pages you may be interested in'''</h2> − {| style="width: 100%;" - − | style="padding: 0px 0px 0px 30px; width: 50%" | 1. [https://travel.gc.ca/travelling/documents/dual-citizenship '''Dual citizens'''] − | style="padding: 0px 0px 0px 30px; width: 50%" | 6. [https://travel.gc.ca/assistance/embassies-consulates '''Embassies and consulates by destination'''] − |- − | style="padding: 0px 0px 0px 30px; width: 50%" | 2. [https://travel.gc.ca/travelling/health-safety/youth '''Students and youth'''] − | style="padding: 0px 0px 0px 30px; width: 50%" | 7. [https://travel.gc.ca/travelling/health-safety/clinic '''Find a travel health clinic'''] − |- − | style="padding: 0px 0px 0px 30px; width: 50%" | 3. [https://travel.gc.ca/assistance/emergency-assistance '''Emergency information'''] − | style="padding: 0px 0px 0px 30px; width: 50%" | 8. [https://travel.gc.ca/assistance/emergency-info/roca-faq '''Registration of Canadians Abroad - FAQ'''] − |- − | style="padding: 0px 0px 0px 30px; width: 50%" | 4. [https://travel.gc.ca/travelling/health-safety/lgbt-travel '''2SLGBTQI+ travellers'''] − | style="padding: 0px 0px 0px 30px; width: 50%" | 9. [https://travel.gc.ca/travelling/documents '''Travel documents'''] − |- − | style="padding: 0px 0px 0px 30px; width: 50%" | 5. [https://travel.gc.ca/travelling/health-safety/advice-for-women-travellers '''Women travellers'''] − | style="padding: 0px 0px 0px 30px; width: 50%" | 10. [https://travel.gc.ca/assistance/emergency-info/consular '''About consular services'''] − |} − − </div> − </div> − − <br><br> − [[File:CAwordmark.png|500px|frameless|right]] − −
Office of Drug Research and Surveillance (view source)
Revision as of 09:32, 26 August 2025
, 26 Augustno edit summary
{{#css:
<!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;
}
.btn a.external {
.collapsible {
background-color: #eee;
cursor: pointer;
padding: 10px;
border: none;
text-align: left;
outline: none;
font-size: 1em;
margin-top: 1em;
}
.btn a.external:visited {
.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>
.searchBar {
<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>
</multilang>
