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

added table of contents for easy navigation on the main page #84

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added table of contents for easy navigation on the main page #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@

.home-narrative main {
/* width: 100%; */
margin-top: 3.4em;
margin-right: 0;
margin-bottom: 0;
margin-top: 4em;
margin-right: 20em;

/* margin-left: 0;
padding: 0;
padding: 0 5%; */
Expand Down
344 changes: 107 additions & 237 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,253 +41,123 @@ <h1>
</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="https://network.creativecommons.org/" target="_blank">Global Network</a>
<p>Join a global community working to strengthen the Commons</p>
<main class="container mx-auto -ml-[20px] mt-10 p-4">
<section class="bg-gray-50 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 mb-6">
Table of Contents
</h2>
<ul class="divide-y divide-gray-200 flex gap-[4px]">
<li class="py-3">
<a
href="/src/context/archive-page.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
Archive Page
</a>
</li>
<li>
<a href="https://certificate.creativecommons.org/" target="_blank">Certificate</a>
<p>Become an expert in creating and engaging with openly licensed materials</p>
<li class="py-3">
<a
href="/src/context/blog-index-alt.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
BlogIndexAlt
</a>
</li>
<li>
<a href="https://summit.creativecommons.org/" target="_blank">Global Summit</a>
<p>Attend our annual event, promoting the power of open licensing</p>
<li class="py-3">
<a
href="/src/context/blog-index-alt2.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
BlogIndexAlt2
</a>
</li>
<li>
<a href="/choose" target="_blank">Chooser</a>
<p>Get help choosing the appropriate license for your work</p>
<li class="py-3">
<a
href="/src/context/blog-index.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
BlogIndex
</a>
</li>
<li>
<a href="https://search.creativecommons.org/" target="_blank">Search Portal</a>
<p>Find engines to search openly licensed material for creative and educational reuse</p>
<li class="py-3">
<a
href="/src/context/blog-post.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
BlogPost
</a>
</li>
<li>
<a href="https://opensource.creativecommons.org/" target="_blank">Open Source</a>
<p>Help us build products that maximize creativity and innovation</p>
<li class="py-3">
<a
href="/src/context/default-page.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
DefaultPage
</a>
</li>

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

</header>

<article class="attention">
<p></p>
</article>

<span id="main-content-marker"></span>

<article class="topic-summary">
<h2>Better Sharing, Brighter Future</h2>
<img src="#" />
<p>Creative Commons promotes the sharing of knowledge and culture that positively impacts people, their communities, and the world. </p>
<a href="#">Learn more (about x)</a>
</article>


<article>
<h2>The nonprofit behind the licenses and tools the world uses to share</h2>
<p>For 20 years, Creative Commons has supported a global movement built on a belief in the power of open access to knowledge and creativity. From Wikipedia to the Smithsonian, organizations and individuals rely on our work to share billions of historic images, scientific articles, cultural artifacts, educational resources, music, and more!</p>
<ul>
<li>
<img src="" />
<span class="caption">Farmer and his brother making music by exit78 is marked with CC PDM 1.0</span>
</li>
<li>
<img src="" />
<span class="caption">Farmer and his brother making music by exit78 is marked with CC PDM 1.0</span>
</li>
<li>
<img src="" />
<span class="caption">Farmer and his brother making music by exit78 is marked with CC PDM 1.0</span>
</li>
<li>
<img src="" />
<span class="caption">Farmer and his brother making music by exit78 is marked with CC PDM 1.0</span>
</li>
</ul>

<footer>
<article class="data-points supporting">
<ul>
<li>
<article class="data-point">
<h2>Wikipedia</h2>
<h3 class="stat">55+ million articles</h3>
<p>Every one of Wikipedia's 55 million + articles are shared openly and freely using a CC license.</p>
</article>
</li>
<li>
<article class="data-point">
<h2>The Met</h2>
<h3 class="stat">400,000+ images</h3>
<p>All images of public-domain works in the Met's collection are openly available under Creative Commons Zero (CC0).</p>
</article>
</li>
<li>
<article class="data-point">
<h2>Khan Academy</h2>
<h3 class="stat">100,000+ lessons</h3>
<p>Many of the lessons found on Khan Academy are openly licensed under CC-BY-NC-SA.</p>
</article>
</li>
</ul>
</article>
</footer>
</article>

<article>
<h2>Creating a brighter future through better, more ethical sharing</h2>
<p>New challenges to open sharing are emerging. That's why we're promoting ethical, inclusive, and purposeful sharing that serves the public interest, guided by our values of agile leadership, global inclusivity, and informed intention.</p>

<img src="#" />

<article class="topics-drilldown">
<ul>
<li>
<article class="topic-drilldown">
<h3>Advocacy</h3>
<p>Together with the Creative Commons Global Network and Chapters, we're shaping the global open ecosystem in support of open sharing that is impactful, generative, equitable, and resilient.</p>

</article>
<li class="py-3">
<a
href="/src/context/home-index.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
HomeIndex
</a>
</li>
<li>
<article class="topic-drilldown">
<h3>Innovation</h3>
<p>We develop and steward legal, social, and technical infrastructure that supports open sharing that is impactful, generative, equitable and resilient. We are developing innovative solutions that meet concrete ethical and economic challenges to make sharing better.</p>

</article>
<li class="py-3">
<a
href="/src/context/person-page.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
PersonPage
</a>
</li>
<li>
<article class="topic-drilldown">
<h3>Capacity Building</h3>
<p>We enable, support, and motivate public and private institutions in the cultural heritage, education, research, data, and government sectors to open their content in legally robust ways. We want to optimize institutions' potential to make sharing better. We prioritize institutional partners and practitioners that represent and cater to underserved communities as part of our commitment to an open ecosystem that serves all.</p>

</article>
<li class="py-3">
<a
href="/src/context/program-index.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
ProgramIndez
</a>
</li>
</ul>
</article>
</article>

<article>
<h2>Latest News</h2>

<ul>
<li>
<article>
<h3></h3>
<img src="#" />
<span class="byline"> </span>
<span class="categories"> </span>

</article>
</li>
<li>
<article>
<h3></h3>
<img src="#" />
<span class="byline"> </span>
<span class="categories"> </span>

</article>
</li>
</ul>

<a href="#">See More News</a>

</article>

<article>
<h2>Stay in Touch</h2>
<p></p>
<form></form>
</article>


<article>
<h2>We rely on individual donors to fund our work</h2>
<p>Every donation helps strengthen the open movement, powering open access and innovation everywhere.</p>
<a href="#">Donate Now</a>
</article>

<footer>
<span class="identity-logo-wrapper" tabindex="0"></span>
<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">
<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="/vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
</svg>
<svg>
<use href="/vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
</svg>
</div>

</footer>
<li class="py-3">
<a
href="/src/context/program-page.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
ProgramPage
</a>
</li>
<li class="py-3">
<a
href="/src/context/search-index.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
SearchIndex
</a>
</li>
<li class="py-3">
<a
href="/src/context/team-index.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
TeamIndex
</a>
</li>
<li class="py-3">
<a
href="/src/context/walkthrough-page.html"
class="block text-lg font-medium text-gray-700 hover:text-blue-600 transition"
>
WalkthroughPage
</a>
</li>
</ul>
</section>
</main>



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

</body>
</html>