Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for Accordions #81

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add support for Accordions #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6235c11
add accordion to faq page
Netacci Oct 4, 2024
8fc600c
remove padding x so that the accordion content is aligned with the title
Netacci Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 320 additions & 0 deletions specimen/contexts/faq-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Default Page - Context</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="../vocabulary/favicon/favicon.ico" sizes="any">
<link rel="icon" href="../vocabulary/favicon/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="../vocabulary/favicon/manifest.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="../vocabulary/favicon/apple-touch-icon.png" />

<link rel="stylesheet" media="all" href="../style.css">

</head>

<body>
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<header>
<div class="masthead">
<h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
<button class="expand-menu">Menu</button>
<nav class="primary-menu">
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Support</a></li>
</ul>
</nav>

<nav class="ancilliary-menu">
<ul>
<li><button class="locale icon-attach fa-globe">English</button></li>
<li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
<li><button class="explore">Explore CC</button></li>
</ul>
</nav>
</div>



<div class="explore-panel">

<!-- (optional main CC logo, p, link on non-home site back to main site) -->
<aside>
<a class="identity-logo" href="#">Creative Commons</a>
<h2>Our Work Relies On You!</h2>
<p>Help us keep the internet free and open.</p>
</aside>

<nav class="explore-menu">
<ul>
<li>
<a href="#">Global Network</a>
<p>Join a global community working to strengthen the Commons</p>
</li>
<li>
<a href="#">Certificate</a>
<p>Become an expert in creating and engaging with openly licensed materials</p>
</li>
<li>
<a href="#">Global Summit</a>
<p>Attend our annual event, promoting the power of open licensing</p>
</li>
<li>
<a href="#">Chooser</a>
<p>Get help choosing the appropriate license for your work</p>
</li>
<li>
<a href="#">Search Portal</a>
<p>Find engines to search openly licensed material for creative and educational reuse</p>
</li>
<li>
<a href="#">Open Source</a>
<p>Help us build products that maximize creativity and innovation</p>
</li>

</ul>
</nav>
</div>

</header>

<article class="attention">
<p>Join us in <a href="#">celebrating 100 years of the Commons</a> this Fall.</p>
</article>

<main>

<header>

<h1>Frequently Asked Questions</h1>

<!-- <span class="byline">by <a href="#">Brigitte Vezina</a>, <a href="#">Ony Anukem</a></span> -->

<p>lead in paragraph</p>

<!-- <span class="categories">
<a href="#">Open Culture</a>
</span> -->


<!-- <img src="#" /> -->

</header>

<aside class="sidebar">
<nav class="contextual-menu">
<h2>Registration</h2>
<ul>
<li><a href="#">How many hours of work does the Certificate course require?</a></li>
<li><a href="#">What do I get with the Certificate?</a></li>
</ul>
</nav>

<nav>
<h2>Course</h2>
<ul>
<li><a href="#">Does everyone participating in the course get a certificate?</a></li>
<li><a href="#">Can I represent Creative Commons once I am CC Certified?</a></li>
<li><a href="#">How Scholarships work?</a></li>
<ul>
<li>Second Level Item</li>

<ul>
<li>Third Level Item</li>
</ul>
</ul>

</ul>
</nav>
</aside>


<div class="content">

<!-- <div class="series">
<span>part of the</span>
<a href="#">Copyright and Artists</a> series, a unique take on how copyright isn't aligned with the interests of individual artists, but instead mega-corps.

</div> -->



<p>What are the barriers to open culture? What challenges do cultural heritage institutions &mdash; such as galleries, libraries, archives, and museums (GLAMs) &mdash; face in making their collections openly accessible online? How could Creative Commons support institutions in addressing these challenges and taking part in better sharing of cultural heritage?</p>

<p>In search of answers, we looked at past research, notably Andrea Wallace's Barriers to Open Access &mdash; Open GLAM, and asked more than 30 experts in the open culture movement. You can watch what they told us in our CC Open Culture VOICES vlog series. Here's a small sample of what we heard:</p>
<h2>About CC</h2>
<div id="accordionGroup" class="accordion">
<h3 class="accordion-header">
<button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="accordion-title">
Is Creative Commons against copyright?

</span>
<span class="accordion-icon"></span>
</button>
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
<div>

<p>Absolutely not. CC has responded to claims to the contrary. CC licenses are copyright licenses, and depend on the existence of copyright to work. CC licenses are legal tools that creators and other rights holders can use to offer certain usage rights to the public, while reserving other rights. Those who want to make their work available to the public for limited kinds of uses while preserving their copyright may want to consider using CC licenses. Others who want to reserve all of their rights under copyright law should not use CC licenses.</p>
</div>
</div>
<h3 class="accordion-header">
<button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect2" id="accordion2id">
<span class="accordion-title">
What does “Some Rights Reserved” mean?

</span>
<span class="accordion-icon"></span>
</button>
</h3>
<div id="sect2" role="region" aria-labelledby="accordion2id" class="accordion-panel" hidden="">
<div>
<p>
Copyright grants to creators a bundle of exclusive rights over their creative works, which generally include, at a minimum, the right to reproduce, distribute, display, and make adaptations. The phrase “All Rights Reserved” is often used by owners to indicate that they reserve all of the rights granted to them under the law. When copyright expires, the work enters the public domain, and the rights holder can no longer stop others from engaging in those activities under copyright, with the exception of moral rights reserved to creators in some jurisdictions. Creative Commons licenses offer creators a spectrum of choices between retaining all rights and relinquishing all rights (public domain), an approach we call “Some Rights Reserved.”
</p>
</div>
</div>
<h3 class="accordion-header">
<button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect3" id="accordion3id">
<span class="accordion-title">
Does Creative Commons collect or track material licensed under a CC license?

</span>
<span class="accordion-icon"></span>
</button>
</h3>
<div id="sect3" role="region" aria-labelledby="accordion3id" class="accordion-panel" hidden="">
<div>
<p>No, CC does not collect content or track licensed material. However, CC builds technical tools that help the public search for and use works licensed under our licenses and other legal tools, and many others have built such tools as well. CC Search is one tool developed by CC to help the public discover works offered under Creative Commons licenses on the internet via CC-aware search engines and repositories.</p>
</div>
</div>
</div>

<h2>General License Information</h2>

<h3>Along The Way We Try</h3>


<p>Along with 600 million people, nine-year-old Chris Hadfield is glued to his television&mdash;watching intently as American astronaut Neil Armstrong glides down the ladder of the Lunar Module, and in one swift pounce, touches the dust of a familiar yet alien world. His words forever immortalized, "That's one small step for man, one giant leap for mankind."</p>

<ul>
<li>Assemble module</li>
<li>Launch aircraft</li>
<li>Land safely</li>
</ul>

<p>“To see that successfully carried out against what seemed like impossible odds for the first time in human history,” Hadfield recalled in 2012, “was hugely inspiring.” That moment sparked his lifelong journey to become an astronaut; which he did, becoming the first Canadian to walk in space in 2001. In the 1990s, Haley Harrison first heard Armstrong's words on an educational tape about space. “I was very young, probably 4 or 5 years old,” she recollected, “I just listened to the tape over and over. I would imagine myself on the shuttle…and I would pretend I was going up to space.” Harrison is now a Ph.D. candidate studying nanoscience at The University of North Carolina at Greensboro, with goals of working in the space industry.</p>


<blockquote>
<p>NASA is not only required by law (e.g. the U.S. Copyright Act of 1976) to give the public access to many of its materials, the Agency really wants people to use them.</p>
</blockquote>

<figure>
<img src="../imgs/image.jpg" />

<span class="attribution">"<a href="https://thegreats.co/artworks/the-more-we-share-the-more-we-have-series-22">The More We Share, The More We Have (series 1/2)</a>" by <a href="https://thegreats.co/artists/pietro-soldi">Pietro Soldi</a> for Creative Commons &amp; Fine Acts is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></span>
</figure>

<p>Footage and audio of the <a href="#">Apollo 11 Commander Neil Armstrong</a> and lunar module pilot Buzz Aldrin hopping on the Moon's surface in 1969 have been remixed, remastered, and reshared countless times—inspiring generations of everyday citizens, like Hadfield and Harrison, to engage <em>with</em> space science and exploration. In fact, the use of materials created by the National Aeronautics and Space Administration (NASA) to create new works for the public doesn't end with Armstrong's history-making first steps.</p>

<h3>Steps to launch</h3>
<ol>
<li>Assemble module</li>
<li>Launch aircraft</li>
<li>Land safely</li>
</ol>

<p>For example, Alex G. Orphanos, a science communicator, engineer, and host of the Today in Space podcast, has put NASA's materials to use for over six years. In particular, he has used images from the Hubble Space Telescope and information from NASA Procurement to better explain space-related issues to his audience. Rachael Eidson, a business development specialist for <strong>Trenton Systems</strong> and social media influencer also routinely uses NASA's images in her collaborations with eco-fashion and accessory companies. In fact, it's hard to miss the resurgence of space-themed items, including t-shirts, mugs, bags, etc. featuring NASA's “meatball” logo. As the L.A. Times reported in 2019, “The NASA logo is having a moment.”</p>


<ul>

<li>Top Level Item</li>

<ul>
<li>Second Level Item</li>

<ul>
<li>Third Level Item</li>
</ul>
</ul>

<li>Top Level Item</li>
</ul>

</main>

<footer>
<a class="identity-logo" href="#">Creative Commons</a>

<nav class="footer-menu">
<ul>
<li><a href="/about/contact">Contact</a></li>
<li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/policies">Policies</a></li>
<li><a href="/terms">Terms</a></li>
</ul>
</nav>

<div class="contact">
<!-- this area lacks a heading? -->
<h2>Contact Us</h2>
<p>Creative Commons </br> PO Box 1866, Mountain View, CA 94042</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><a href="tel:+14154296753">+1-415-429-6753</a></p>

<nav class="social-menu">
<ul>
<!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
<li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>
<li><a class="icon-replace fa-mastodon" href="https://mastodon.social/@creativecommons" target="_blank">Mastodon</a></li>
<li><a class="icon-replace fa-facebook" href="https://www.facebook.com/creativecommons" target="_blank">Facebook</a></li>
<li><a class="icon-replace fa-linkedin" href="https://www.linkedin.com/company/creative-commons/" target="_blank">LinkedIn</a></li>
</ul>
</nav>
</div>

<div class="subscribe">
<h2>Subscribe to our Newsletter</h2>
<form action="https://creativecommons.us4.list-manage.com/subscribe/post?u=fd30364b6577b471373d6076c&amp;id=4603fe102a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate newsletter" target="_blank" novalidate="">
<input type="email" value="" name="EMAIL" class="email input" id="mce-EMAIL" placeholder="Your email" required="">
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_fd30364b6577b471373d6076c_4603fe102a" tabindex="-1" value="">
</div>
<input type="submit" value="subscribe" id="mc-embedded-subscribe" class="button small">
</form>
</div>

<div class="donate">
<h2>Support Our Work</h2>
<p>Our work relies on you! Help us keep the Internet free and open.</p>
<a class="donate icon-attach cc-heart-filled" href="https://www.classy.org/give/313412/#!/donation/checkout?c_src=website&c_src2=top-of-page-banner" target="_blank">Donate Now</a>
</div>


<div class="license">
<p>Except where otherwise <a href="/policies/#license">noted</a>, content on this site is licensed under a <a href="/licenses/by/4.0/">Creative Commons Attribution 4.0 International license</a>. Icons by <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>.</p>

<svg>
<use href="../../../src/svg/cc/icons/cc-icons.svg#cc-logo"></use>
</svg>
<svg>
<use href="../../../src/svg/cc/icons/cc-icons.svg#cc-by"></use>
</svg>
</div>

</footer>
<script src="../../src/js/accordion.js"></script>
<script src="../../src/js/vocabulary.js"></script>

</body>
</html>
Loading