Skip to content

Commit

Permalink
added table of contents for easy navigation on the main page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sj11105
sj11105 committed Jan 14, 2025
1 parent b2a515d commit 1a05c65
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 240 deletions.
6 changes: 3 additions & 3 deletions src/css/style.css
View file
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
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>

0 comments on commit 1a05c65

Please sign in to comment.