<div class="layout layout--single-column">
<div class="top-bar layout__nav">
<button class="top-bar__menu-trigger"><i class="material-icons">menu</i></button>
<nav class="top-bar__menu contextual-menu">
<ul>
<li class="contextual-menu__item">
<a class="contextual-menu__button contextual-menu--active" ref="#" title="Home">
Home
</a>
</li>
<li class="contextual-menu__item">
<a class="contextual-menu__button" ref="#" title="About">
About
</a>
</li>
<li class="contextual-menu__item submenu">
<a class="contextual-menu__button" ref="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
<li class="contextual-menu__item">
<a class="contextual-menu__button contextual-menu--disabled" ref="/about.html" title="About">
About
</a>
</li>
<li class="contextual-menu__item submenu">
<a class="contextual-menu__button" ref="http://ccm.design" title="Test" target="_blank">
Test
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Lael longer">
Button Lael longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
</ul>
</nav>
<div class="off-canvas-menu" aria-hidden>
<button class="off-canvas-menu__trigger"><i class="material-icons">close</i></button>
<nav>
<ul class="off-canvas-menu__contextual">
<li class="off-canvas-menu__item">
<a href="#" class=" off-canvas-menu--active" title="Home">
Home
</a>
</li>
<li class="off-canvas-menu__item">
<a href="#" class="" title="About">
About
</a>
</li>
<li class="off-canvas-menu__item off-canvas-menu__submenu">
<a href="http://ccmdesign.ca" class="" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
<li class="off-canvas-menu__item">
<a href="/about.html" class=" off-canvas-menu--disabled" title="About">
About
</a>
</li>
<li class="off-canvas-menu__item off-canvas-menu__submenu">
<a href="http://ccm.design" class="" title="Test" target="_blank">
Test
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="" href="#" title="Button Lael longer">
Button Lael longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
</ul>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__item off-canvas-menu--disabled">
<a href="http://ccm.design">
Test
</a>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design" target="_blank">
Test
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</li>
<li class="off-canvas-menu__item
">
<h3 class="off-canvas-menu__heading">Menu Group Title</h3>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
</li>
<li class="off-canvas-menu__item
">
<h3 class="off-canvas-menu__heading">Menu Group Title</h3>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
</li>
</ul>
</nav>
</div>
</div>
<header class="layout__header">
<div class="hero-section">
<div class="wrapper">
<div class="hero hero--orange">
<!-- .hero--orange, .hero--yellow, .hero--red -->
<div class="hero__column hero__logo">
<a href="/"><img src="/images/360-logos/main/360giving-logo.svg" alt="360 Giving"></a>
</div>
<div class="hero__column hero__lead">
<h2 class="hero__title">
This is the title of the Hero
</h2>
<p class="hero__blurb">
360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.
</p>
</div>
</div>
</div>
</div>
</header>
<main class="layout__content">
<div class="cards-section">
<section class="grid grid--three-columns">
<div class="grid__all">
<h2 class="cards-section__tagline">We help organisations openly publish grants data, and help people use it to improve charitable giving. Join the <a href="#">#opengrants</a> movement.</h2>
</div>
<div class="grid__1">
<a href="#" class="base-card base-card--orange base-card--spacious">
<div class="base-card__content">
<h2 class="base-card__title | margin-bottom:1">Share</h2>
<p class="base-card__text">publish your data in the 360Giving Data Standard</p>
</div>
</a>
</div>
<div class="grid__1">
<a href="#" class="base-card base-card--teal base-card--spacious">
<div class="base-card__content | padding-left:05 padding-right:05">
<h2 class="base-card__title | margin-bottom:1">Explore</h2>
<!-- This is intentionally left here as an inline style,
since it is only needed here to adjust the leading so it fits 2 lines -->
<p class="base-card__text" style="letter-spacing: -0.1px">Use our tools to search, download and visualise funding data</p>
</div>
</a>
</div>
<div class="grid__1">
<a href="#" class="base-card base-card--yellow base-card--spacious">
<div class="base-card__content">
<h2 class="base-card__title | margin-bottom:1">Advocate</h2>
<p class="base-card__text">Get behind the open grants movement</p>
</div>
</a>
</div>
</section>
</div>
<div class="base-card">
<div class="frame">
<!--
<iframe>
<video>
<img>
etc
-->
<iframe src="https://www.youtube.com/embed/t6nzLXuntno" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<section class="cards-section">
<h2 class="cards-section__heading">Join Us</h2>
<div class="grid grid--four-columns">
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title">115</h2>
<p class="base-card__text">Funders</p>
</div>
</div>
</div>
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title">199k</h2>
<p class="base-card__text">Recipients</p>
</div>
</div>
</div>
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title">349k</h2>
<p class="base-card__text">Grants</p>
</div>
</div>
</div>
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title"><small>£</small>30B</h2>
<p class="base-card__text">of Grant Data</p>
</div>
</div>
</div>
<div class="grid__all align-center">
<a href="#" class="button button--teal">Explore the data</a>
</div>
</div>
</section>
<section class="cards-section">
<h2 class="cards-section__heading">From the Blog</h2>
<ul class="card-list">
<li class="card-list__item">
<article class="media-card media-card--teal">
<div class="media-card__content">
<div class="media-card__category-tags">
<a class="media-card__category-tag" href="#">All Content</a><a class="media-card__category-tag" href="#">News</a>
</div>
<header class="media-card__header">
<h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni </p>
<div class="media-card__byline">Written by <a href="#">Rachel Rank</a> on October 30, 2019.</div>
</div>
<div class="media-card__image-wrapper">
<img class="media-card__image" src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg">
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--teal">
<div class="media-card__content">
<div class="media-card__category-tags">
<a class="media-card__category-tag" href="#">All Content</a><a class="media-card__category-tag" href="#">News</a>
</div>
<header class="media-card__header">
<h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni </p>
<div class="media-card__byline">Written by <a href="#">Rachel Rank</a> on October 30, 2019.</div>
</div>
<div class="media-card__image-wrapper">
<img class="media-card__image" src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg">
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--teal">
<div class="media-card__content">
<div class="media-card__category-tags">
<a class="media-card__category-tag" href="#">All Content</a><a class="media-card__category-tag" href="#">News</a>
</div>
<header class="media-card__header">
<h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni </p>
<div class="media-card__byline">Written by <a href="#">Rachel Rank</a> on October 30, 2019.</div>
</div>
<div class="media-card__image-wrapper">
<img class="media-card__image" src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg">
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--teal">
<div class="media-card__content">
<div class="media-card__category-tags">
<a class="media-card__category-tag" href="#">All Content</a><a class="media-card__category-tag" href="#">News</a>
</div>
<header class="media-card__header">
<h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni </p>
<div class="media-card__byline">Written by <a href="#">Rachel Rank</a> on October 30, 2019.</div>
</div>
<div class="media-card__image-wrapper">
<img class="media-card__image" src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg">
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--teal">
<div class="media-card__content">
<div class="media-card__category-tags">
<a class="media-card__category-tag" href="#">All Content</a><a class="media-card__category-tag" href="#">News</a>
</div>
<header class="media-card__header">
<h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni </p>
<div class="media-card__byline">Written by <a href="#">Rachel Rank</a> on October 30, 2019.</div>
</div>
<div class="media-card__image-wrapper">
<img class="media-card__image" src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg">
</div>
</article>
</li>
</ul>
<div class="align-center">
<a href="#" class="button button--teal">More from the blog</a>
</div>
</section>
<div class="base-section">
<div class="base-card base-card--none" style="height: 500px; padding: 80px;">
<h1 style="opacity: .3;">INSERT HTML HERE</h1>
</div>
</div>
</main>
<footer class="layout__footer">
<div class="subscribe-section">
<div class="subscribe-section__wrapper">
<form action="#" class="subscribe-section__form">
<label for="subscribe" class="screen-reader-only">Subscribe</label>
<input type="email" id="subscribe" placeholder="Subscribe to our newsletter">
<input type="submit" value="Send">
</form>
</div>
</div>
<footer class="footer">
<div class="footer__row wrapper">
<div class="footer__column-2 footer__branding">
<div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
<p class="footer__tagline">Open data for more effective grantmaking</p>
</div>
<div class="footer__column-1 footer__social hide-print">
<a href="#" class="github-icon"><img src="/images/github-logo.svg" alt="Check our Github"></a>
<a href="#" class="twitter-icon"><img src="/images/twitter-logo.svg" alt="Follow us on Twitter"></a>
</div>
</div>
<div class="footer__row wrapper hide-print">
<div class="footer__column-2 footer__section medium-up">
<h3 class="footer__heading">Products</h3>
<ul>
<li><a href="#">GrantNav</a></li>
<li><a href="#">Insights</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Cove</a></li>
</ul>
</div>
<div class="footer__column-2 footer__section medium-up">
<h3 class="footer__heading">Other Products</h3>
<ul>
<li><a href="#">Data Registry</a></li>
<li><a href="#">Data Standard</a></li>
<li><a href="#">Data Challenge</a></li>
<li><a href="#">Data Champions</a></li>
</ul>
</div>
<div class="footer__column-3 footer__section">
<h3 class="footer__heading">360 Resources</h3>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>
</div>
<div class="footer__column-3 footer__section">
<h3 class="footer__heading">360 Resources</h3>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>
</div>
</div>
<div class="wrapper footer__small-print">
<p>
<strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
<br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
</p>
</div>
<div class="footer__row wrapper footer__small-print">
<div class="footer__column-2">
<p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
</div>
<div class="footer__column-2 footer__policy-links hide-print">
<p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
</div>
</div>
</footer>
</footer>
</div>
{% extends '@layout' %}
{% block main_content %}
<div class="cards-section">
<section class="grid grid--three-columns">
<div class="grid__all">
<h2 class="cards-section__tagline">We help organisations openly publish grants data, and help people use it to improve charitable giving. Join the <a href="#">#opengrants</a> movement.</h2>
</div>
<div class="grid__1">
<a href="#" class="base-card base-card--orange base-card--spacious">
<div class="base-card__content">
<h2 class="base-card__title | margin-bottom:1">Share</h2>
<p class="base-card__text">publish your data in the 360Giving Data Standard</p>
</div>
</a>
</div>
<div class="grid__1">
<a href="#" class="base-card base-card--teal base-card--spacious">
<div class="base-card__content | padding-left:05 padding-right:05">
<h2 class="base-card__title | margin-bottom:1">Explore</h2>
<!-- This is intentionally left here as an inline style,
since it is only needed here to adjust the leading so it fits 2 lines -->
<p class="base-card__text" style="letter-spacing: -0.1px">Use our tools to search, download and visualise funding data</p>
</div>
</a>
</div>
<div class="grid__1">
<a href="#" class="base-card base-card--yellow base-card--spacious">
<div class="base-card__content">
<h2 class="base-card__title | margin-bottom:1">Advocate</h2>
<p class="base-card__text">Get behind the open grants movement</p>
</div>
</a>
</div>
</section>
</div>
<div class="base-card">
{% render '@frame' %}
</div>
<section class="cards-section">
<h2 class="cards-section__heading">Join Us</h2>
<div class="grid grid--four-columns">
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title">115</h2>
<p class="base-card__text">Funders</p>
</div>
</div>
</div>
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title">199k</h2>
<p class="base-card__text">Recipients</p>
</div>
</div>
</div>
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title">349k</h2>
<p class="base-card__text">Grants</p>
</div>
</div>
</div>
<div class="grid__1">
<div class="base-card base-card--spacious base-card--teal">
<div class="base-card__content">
<h2 class="base-card__title"><small>£</small>30B</h2>
<p class="base-card__text">of Grant Data</p>
</div>
</div>
</div>
<div class="grid__all align-center">
<a href="#" class="button button--teal">Explore the data</a>
</div>
</div>
</section>
<section class="cards-section">
<h2 class="cards-section__heading">From the Blog</h2>
<ul class="card-list">
<li class="card-list__item">{% render '@media-card--blog' %}</li>
<li class="card-list__item">{% render '@media-card--blog' %}</li>
<li class="card-list__item">{% render '@media-card--blog' %}</li>
<li class="card-list__item">{% render '@media-card--blog' %}</li>
<li class="card-list__item">{% render '@media-card--blog' %}</li>
</ul>
<div class="align-center">
<a href="#" class="button button--teal">More from the blog</a>
</div>
</section>
<div class="base-section">
<div class="base-card base-card--none" style="height: 500px; padding: 80px;">
<h1 style="opacity: .3;">INSERT HTML HERE</h1>
</div>
</div>
{% endblock %}
/* No context defined. */
No notes defined.