зеркало из https://github.com/mozilla/bedrock.git
Fix a11y issue by wrapping page content in a <main> element
This commit is contained in:
Родитель
99550af11a
Коммит
2dba421d9d
|
@ -22,88 +22,19 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% call callout(
|
||||
class='mozads-header',
|
||||
title='Mozilla Advertising',
|
||||
desc='Powering the evolution of performance and privacy',
|
||||
heading_level=1,
|
||||
brand=False,
|
||||
content_width='xl',
|
||||
include_cta=True
|
||||
) %}
|
||||
<p>
|
||||
<a href="https://mozilla.formstack.com/forms/advertising" rel="external noopener" target="_blank" class="mzp-c-button">
|
||||
Contact
|
||||
<span class="mzp-c-button-icon-end">
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g transform="translate(4.000000, 4.000000)" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 0 16 0 16 7"></polyline>
|
||||
<path d="M8,8 L16,0"></path>
|
||||
<path d="M4,-1.77635684e-15 L3,-1.77635684e-15 C1.34314575,-1.47199765e-15 -2.02906125e-16,1.34314575 0,3 L0,13 C2.02906125e-16,14.6568542 1.34314575,16 3,16 L13,16 C14.6568542,16 16,14.6568542 16,13 L16,12"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcall %}
|
||||
|
||||
{% call split(
|
||||
block_class='mozads-t-dark mzp-t-dark mzp-t-content-xl',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/ads-hero.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/ads-hero-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '786',
|
||||
'height': '691',
|
||||
'class': 'mzp-c-split-media-asset',
|
||||
},
|
||||
),
|
||||
body_class='mzp-l-split-v-start',
|
||||
media_class='mzp-l-split-h-center mzp-l-split-v-start',
|
||||
) %}
|
||||
<h2>Mozilla is redefining digital advertising with privacy-first, high-performance solutions.</h2>
|
||||
|
||||
<p class="mozads-content-intro">Pushing the industry forward with advanced technology,
|
||||
for a better + safer internet.</p>
|
||||
|
||||
<p>Today’s digital advertising practices put personal data at risk, tracking
|
||||
people across websites without their knowledge or consent.</p>
|
||||
|
||||
<p>Mozilla is leading the charge, creating innovative solutions that deliver
|
||||
ad performance while safeguarding privacy. Our approach creates resilience
|
||||
for advertisers and publishers against continuous changes, and privacy
|
||||
protection to consumers.</p>
|
||||
{% endcall %}
|
||||
|
||||
{% call split(
|
||||
block_class='mzp-l-split-reversed mzp-t-content-xl mozads-anonym',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/logo-anonym.svg',
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '142',
|
||||
'height': '184',
|
||||
'class': 'mzp-c-split-media-asset',
|
||||
},
|
||||
),
|
||||
media_class='mzp-l-split-h-center mzp-l-split-v-center',
|
||||
) %}
|
||||
<h2>Performance, driven by privacy</h2>
|
||||
|
||||
<p class="mozads-content-intro">Anonym enables brands to optimize and measure
|
||||
their advertising without sharing user-level data with ad platforms.</p>
|
||||
<p>We’re building an ecosystem that provides consumer privacy, where data-driven
|
||||
marketing thrives.</p>
|
||||
|
||||
<main>
|
||||
{% call callout(
|
||||
class='mozads-header',
|
||||
title='Mozilla Advertising',
|
||||
desc='Powering the evolution of performance and privacy',
|
||||
heading_level=1,
|
||||
brand=False,
|
||||
content_width='xl',
|
||||
include_cta=True
|
||||
) %}
|
||||
<p>
|
||||
<a class="mzp-c-button" href="https://www.anonymco.com/" rel="external noopener" target="_blank">
|
||||
Learn more
|
||||
<a href="https://mozilla.formstack.com/forms/advertising" rel="external noopener" target="_blank" class="mzp-c-button">
|
||||
Contact
|
||||
<span class="mzp-c-button-icon-end">
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
@ -117,118 +48,188 @@
|
|||
</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
|
||||
<section>
|
||||
<div class="mzp-l-content mzp-t-content-xl">
|
||||
<div class="mozads-section-header">
|
||||
<h2>Advertise with Mozilla</h2>
|
||||
<p class="mozads-content-intro">Reach valuable audiences in premium,
|
||||
privacy-first, brand-safe environments with Mozilla’s suite of ad solutions.</p>
|
||||
{% call split(
|
||||
block_class='mozads-t-dark mzp-t-dark mzp-t-content-xl',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/ads-hero.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/ads-hero-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '786',
|
||||
'height': '691',
|
||||
'class': 'mzp-c-split-media-asset',
|
||||
},
|
||||
),
|
||||
body_class='mzp-l-split-v-start',
|
||||
media_class='mzp-l-split-h-center mzp-l-split-v-start',
|
||||
) %}
|
||||
<h2>Mozilla is redefining digital advertising with privacy-first, high-performance solutions.</h2>
|
||||
|
||||
<p class="mozads-content-intro">Pushing the industry forward with advanced technology,
|
||||
for a better + safer internet.</p>
|
||||
|
||||
<p>Today’s digital advertising practices put personal data at risk, tracking
|
||||
people across websites without their knowledge or consent.</p>
|
||||
|
||||
<p>Mozilla is leading the charge, creating innovative solutions that deliver
|
||||
ad performance while safeguarding privacy. Our approach creates resilience
|
||||
for advertisers and publishers against continuous changes, and privacy
|
||||
protection to consumers.</p>
|
||||
{% endcall %}
|
||||
|
||||
{% call split(
|
||||
block_class='mzp-l-split-reversed mzp-t-content-xl mozads-anonym',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/logo-anonym.svg',
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '142',
|
||||
'height': '184',
|
||||
'class': 'mzp-c-split-media-asset',
|
||||
},
|
||||
),
|
||||
media_class='mzp-l-split-h-center mzp-l-split-v-center',
|
||||
) %}
|
||||
<h2>Performance, driven by privacy</h2>
|
||||
|
||||
<p class="mozads-content-intro">Anonym enables brands to optimize and measure
|
||||
their advertising without sharing user-level data with ad platforms.</p>
|
||||
<p>We’re building an ecosystem that provides consumer privacy, where data-driven
|
||||
marketing thrives.</p>
|
||||
|
||||
<p>
|
||||
<a class="mzp-c-button" href="https://www.anonymco.com/" rel="external noopener" target="_blank">
|
||||
Learn more
|
||||
<span class="mzp-c-button-icon-end">
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g transform="translate(4.000000, 4.000000)" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 0 16 0 16 7"></polyline>
|
||||
<path d="M8,8 L16,0"></path>
|
||||
<path d="M4,-1.77635684e-15 L3,-1.77635684e-15 C1.34314575,-1.47199765e-15 -2.02906125e-16,1.34314575 0,3 L0,13 C2.02906125e-16,14.6568542 1.34314575,16 3,16 L13,16 C14.6568542,16 16,14.6568542 16,13 L16,12"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcall %}
|
||||
|
||||
<section>
|
||||
<div class="mzp-l-content mzp-t-content-xl">
|
||||
<div class="mozads-section-header">
|
||||
<h2>Advertise with Mozilla</h2>
|
||||
<p class="mozads-content-intro">Reach valuable audiences in premium,
|
||||
privacy-first, brand-safe environments with Mozilla’s suite of ad solutions.</p>
|
||||
</div>
|
||||
|
||||
<div class="mzp-l-card-half">
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='Firefox',
|
||||
ga_title='Firefox',
|
||||
desc='The only major browser backed by a non-profit, Firefox has been protecting users’ personal data for over 20 years — without ever sacrificing performance.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-firefox.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-firefox-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='MDN',
|
||||
ga_title='MDN',
|
||||
desc='MDN (Mozilla Developer Network) seamlessly connects millions of developers with the tools and information they need to easily build projects on the open web.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-mdn.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-mdn-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='Fakespot',
|
||||
ga_title='Fakespot',
|
||||
desc='Fakespot empowers consumers to make more informed purchasing decisions by spotting potentially misleading or deceptive reviews, while highlighting safer options.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-fakespot.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-fakespot-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='Pocket Hits newsletter',
|
||||
ga_title='Pocket Hits newsletter',
|
||||
desc='Expertly curated content reaching millions of dedicated and engaged readers, enabling brands to contextually integrate and provide value to their audience.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-pocket.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-pocket-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mzp-l-card-half">
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='Firefox',
|
||||
ga_title='Firefox',
|
||||
desc='The only major browser backed by a non-profit, Firefox has been protecting users’ personal data for over 20 years — without ever sacrificing performance.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-firefox.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-firefox-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='MDN',
|
||||
ga_title='MDN',
|
||||
desc='MDN (Mozilla Developer Network) seamlessly connects millions of developers with the tools and information they need to easily build projects on the open web.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-mdn.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-mdn-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='Fakespot',
|
||||
ga_title='Fakespot',
|
||||
desc='Fakespot empowers consumers to make more informed purchasing decisions by spotting potentially misleading or deceptive reviews, while highlighting safer options.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-fakespot.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-fakespot-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
|
||||
{{ card(
|
||||
class='mzp-c-card-medium',
|
||||
heading_level=3,
|
||||
title='Pocket Hits newsletter',
|
||||
ga_title='Pocket Hits newsletter',
|
||||
desc='Expertly curated content reaching millions of dedicated and engaged readers, enabling brands to contextually integrate and provide value to their audience.',
|
||||
image=resp_img(
|
||||
url='img/mozorg/advertising/product-pocket.png',
|
||||
srcset={
|
||||
'img/mozorg/advertising/product-pocket-15x.png': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'class': 'mzp-c-card-image',
|
||||
'width': '600',
|
||||
'height': '400',
|
||||
}
|
||||
),
|
||||
aspect_ratio='mzp-has-aspect-3-2',
|
||||
link_url='https://mozilla.formstack.com/forms/advertising',
|
||||
link_rel='external noopener',
|
||||
link_target='_blank',
|
||||
cta='Get started',
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{% endblock %}
|
||||
|
|
Загрузка…
Ссылка в новой задаче