<div class="c-page-header-landing o-container" data-bkg-theme="base">
<div class="o-row">
<div class="o-col o-col-sm-4 o-col-lg-4">
<h1 class="c-page-header-landing__title f-title--h1">Support</h1>
</div>
<div class="o-col o-col-sm-6 o-col-lg-6 o-col-sm--offset-1">
<div class="c-page-header-landing__description f-text--reg">
<p>When you support the Academy of Natural Sciences, you are contributing to over 200 years of scientific discovery.</p>
</div>
<ul class="c-page-header-landing__ctas">
<li class="c-page-header-landing__ctas-cta ">
<a href=# class="o-btn o-btn--primary f-text--cta o-btn--primary--teal">Make a donation</a>
</li>
<li class="c-page-header-landing__ctas-cta ">
<a href=# class="o-btn o-btn--primary f-text--cta o-btn--primary--teal">Become a member</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-page-header-landing o-container" data-bkg-theme="base">
<div class="o-row">
<div class="o-col o-col-sm-4 o-col-lg-4">
<h1 class="c-page-header-landing__title f-title--h1">{{title}}{% if hiddenSubtitle %}<span class="u-sr-only">- {{ hiddenSubtitle }}</span>{% endif %}</h1>
</div>
<div class="o-col o-col-sm-6 o-col-lg-6 o-col-sm--offset-1">
<div class="c-page-header-landing__description f-text--reg">{{description}}</div>
{% if ctas %}
<ul class="c-page-header-landing__ctas">
{% for cta in ctas %}
<li class="c-page-header-landing__ctas-cta ">
<a href={{cta.link}} class="o-btn o-btn--primary f-text--cta o-btn--primary--teal">{{cta.text}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Support",
"description": "<p>When you support the Academy of Natural Sciences, you are contributing to over 200 years of scientific discovery.</p>",
"ctas": [
{
"text": "Make a donation",
"link": "#"
},
{
"text": "Become a member",
"link": "#"
}
]
}
.c-page-header-landing {
margin-top: 8rem;
margin-bottom: 8rem;
@include break($sm){
margin-top: 7.4rem;
margin-bottom: 12rem;
}
}
.c-page-header-landing__title {
margin-bottom: 3.2rem;
}
.c-page-header-landing__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
@include break($sm) {
justify-content: flex-start;
}
}
.c-page-header-landing__ctas-cta {
padding-right: 2rem;
margin-top: 1.6rem;
@include break($sm) {
margin-top: 3rem;
}
}
No notes defined.