diff --git a/bedrock/base/templates/includes/protocol/footer/footer-refresh.html b/bedrock/base/templates/includes/protocol/footer/footer-refresh.html index e9051a01029..1d85ede53c4 100644 --- a/bedrock/base/templates/includes/protocol/footer/footer-refresh.html +++ b/bedrock/base/templates/includes/protocol/footer/footer-refresh.html @@ -71,7 +71,7 @@ diff --git a/bedrock/base/templates/includes/protocol/footer/footer.html b/bedrock/base/templates/includes/protocol/footer/footer.html index 695daa49bad..f06c99540ed 100644 --- a/bedrock/base/templates/includes/protocol/footer/footer.html +++ b/bedrock/base/templates/includes/protocol/footer/footer.html @@ -49,6 +49,9 @@ diff --git a/bedrock/mozorg/templates/mozorg/advertising.html b/bedrock/mozorg/templates/mozorg/advertising.html deleted file mode 100644 index 2779300180a..00000000000 --- a/bedrock/mozorg/templates/mozorg/advertising.html +++ /dev/null @@ -1,107 +0,0 @@ -{# - This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at https://mozilla.org/MPL/2.0/. -#} - -{% extends "base-protocol-mozilla.html" %} - -{% from "macros-protocol.html" import picto, callout with context %} - -{% block page_title %}Advertise with Mozilla{% endblock %} - -{% block page_css %} - {{ css_bundle('protocol-picto') }} - {{ css_bundle('protocol-callout') }} - {{ css_bundle('mozilla-ads') }} -{% endblock %} - -{% block content %} - -
-
-
-

Find hard-to-reach audiences with Mozilla Ads

-
-

Reach unique audiences while protecting your brand’s safety and your customer’s privacy

- Contact us -
-
-
-
- -
- {% call picto( - base_el='div', - title='Valuable audiences', - image=resp_img( - url='img/mozorg/advertising/mountain.svg', - optional_attributes={ - 'class': 'mzp-c-picto-image', - 'loading': 'lazy' - } - ), - body=True, - ) %} -

- Mozilla Ads can reach audiences that are hard to access. This includes privacy-minded and intellectually curious consumers, and a global network of software developers. -

- {% endcall %} - {% call picto( - base_el='div', - title='Brand safety', - image=resp_img( - url='img/mozorg/advertising/badge.svg', - optional_attributes={ - 'class': 'mzp-c-picto-image', - 'loading': 'lazy' - } - ), - body=True, - ) %} -

- With Mozilla’s commitment to creating safe spaces online, you can feel confident that your brand is safe and your ads will not run alongside problematic content. -

- {% endcall %} - {% call picto( - base_el='div', - title='Privacy preserving', - image=resp_img( - url='img/mozorg/advertising/mask.svg', - optional_attributes={ - 'class': 'mzp-c-picto-image', - 'loading': 'lazy' - } - ), - body=True, - ) %} -

- Most ad networks rely on privacy-invasive targeting and attribution methods. Mozilla ads will have an effective but ethical advertising approach that ensures ads are context-based, free from tracking pixels, and don't involve sharing personally identifying data. -

- {% endcall %} - {% call picto( - base_el='div', - title='Our offering', - image=resp_img( - url='img/mozorg/advertising/addon.svg', - optional_attributes={ - 'class': 'mzp-c-picto-image', - 'loading': 'lazy' - } - ), - body=True, - ) %} -

- Ad placements available across a growing number of products including the Firefox browser, Pocket, and the Mozilla Developer Network. -

- {% endcall %} -
- -
-
-

Learn more about advertising on Mozilla

- Contact us -
-
- -{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/advertising/formats.html b/bedrock/mozorg/templates/mozorg/advertising/formats.html new file mode 100644 index 00000000000..5f08b7a7a1e --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/formats.html @@ -0,0 +1,403 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{% extends "base-protocol-mozilla.html" %} + +{% from "macros-protocol.html" import callout, picto, split with context %} + +{% block page_title %}Mozilla Advertising — Formats and solutions{% endblock %} + +{% block page_css %} + {{ css_bundle('protocol-callout') }} + {{ css_bundle('protocol-picto') }} + {{ css_bundle('protocol-split') }} + {{ css_bundle('mozilla-ads') }} +{% endblock %} + +{% block sub_navigation %} + {% include 'mozorg/advertising/includes/sub-nav.html' %} +{% endblock %} + +{% block content %} +{{ callout( + class='mozads-header mzp-t-dark mozads-t-dark', + title='Advertise with Mozilla', + desc='Reach unique audiences while protecting your brand’s safety and your users’ privacy with the Mozilla network.', + heading_level=1, + brand=False, + content_width='xl', +) }} + +
+ {% call split( + base_el='div', + block_class='mzp-t-content-xl', + media_include='mozorg/advertising/includes/product-firefox-media.html', + media_class='mzp-l-split-h-center', + media_after=True, + ) %} +

Firefox

+

Firefox stands as the most trusted alternative + to default browsers, driven by a mission to ensure the internet is a global + public resource — open and accessible to all.

+ +

With 200M monthly users, Firefox allows advertisers to drive performance + in a customized, brand-safe environment. Your brand will be showcased + alongside top-tier, curated content from top publishers. Firefox’s New Tab + experience offers unique, seasonal and contextual opportunities to reach + users in more meaningful ways — far removed from the noise of + entertainment-heavy outlets.

+ +

+ + Get started + + + + + + + + + + + + +

+ {% endcall %} + + +
+ +
+ +
+ {% call split( + base_el='div', + block_class='mzp-t-content-xl', + media_include='mozorg/advertising/includes/product-mdn-media.html', + media_class='mzp-l-split-h-center', + media_after=True, + ) %} +

Mozilla Developer Network

+

The go-to resource for millions of engaged web + developers monthly, providing open-source documentation on a number of + reference and educational topics such as HTML, JavaScript, CSS and Web APIs.

+ +

We offer a variety of contextual placements throughout the site as well + as exclusive opportunities for prominent homepage visibility, giving + advertisers a unique way to capture this valuable audience’s attention.

+ +

+ + Get started + + + + + + + + + + + + +

+ {% endcall %} + + +
+ +
+ +
+ {% call split( + base_el='div', + block_class='mzp-t-content-xl', + media_include='mozorg/advertising/includes/product-fakespot-media.html', + media_class='mzp-l-split-h-center', + media_after=True, + ) %} +

Fakespot

+

Fakespot — a top 10 shopping browser extension + worldwide — helps consumers spot unreliable reviews while shopping online.

+ +

It provides detailed insights and breakdowns of review authenticity, + highlighting risks of fraudulent or manipulated reviews, while also + providing users with alternative products with more reliable reviews when + available.

+ +

+ + Get started + + + + + + + + + + + + +

+ {% endcall %} + + +
+ +
+ +
+ {% call split( + base_el='div', + block_class='mzp-t-content-xl', + media_include='mozorg/advertising/includes/product-pocket-media.html', + media_class='mzp-l-split-h-center', + media_after=True, + ) %} +

Pocket

+

The Pocket Hits newsletter provides premium + editorial content delivered directly to users’ inboxes. Our mission is to + enable users to enjoy articles from around the web on their own schedule – + saving content to personal libraries that can be accessed whenever and + wherever.

+ +

Our editor-curated newsletter highlights popular Pocket stories and saves + the second placement for your brand.

+ +

+ + Get started + + + + + + + + + + + + +

+ {% endcall %} + + +
+ +{% call callout( + class='mzp-t-l-compact mzp-t-background-secondary mozads-footer', + title='Download our Ad Standards & Guidelines', + heading_level=3, + brand=False, + content_width='xl', + include_cta=True +) %} +

Download PDF

+{% endcall %} + +{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/advertising/includes/blog-articles.html b/bedrock/mozorg/templates/mozorg/advertising/includes/blog-articles.html new file mode 100644 index 00000000000..a4d909d1e99 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/includes/blog-articles.html @@ -0,0 +1,132 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{% from "macros-protocol.html" import card with context %} + +
+
+
+

The latest from Mozilla

+
+ +
+ {{ card( + class='mzp-c-card-medium', + heading_level=3, + title='Introducing Anonym: Raising the bar for privacy-preserving digital advertising', + ga_title='Introducing Anonym: Raising the bar for privacy-preserving digital advertising', + tag_label='June 16, 2024', + image=resp_img( + url='img/mozorg/advertising/blog/introducing-anonym.jpg', + optional_attributes={ + 'loading': 'lazy', + 'class': 'mzp-c-card-image', + 'width': '600', + 'height': '400', + } + ), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://blog.mozilla.org/en/mozilla/mozilla-anonym-raising-the-bar-for-privacy-preserving-digital-advertising/' + utm_params, + )}} + + {{ card( + class='mzp-c-card-medium', + heading_level=3, + title='Google’s Protected Audience protects advertisers (and Google) more than it protects users', + ga_title='Google’s Protected Audience protects advertisers (and Google) more than it protects users', + tag_label='April 3, 2024', + image=resp_img( + url='img/mozorg/advertising/blog/google-protected-audience.jpg', + optional_attributes={ + 'loading': 'lazy', + 'class': 'mzp-c-card-image', + 'width': '600', + 'height': '400', + } + ), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://blog.mozilla.org/en/privacy-security/googles-protected-audience-protects-advertisers/' + utm_params, + )}} + + {{ card( + class='mzp-c-card-medium', + heading_level=3, + title='Firefox Android’s new privacy feature, Total Cookie Protection, stops companies from keeping tabs on users', + ga_title='Firefox Android’s new privacy feature, Total Cookie Protection, stops companies from keeping tabs on users', + tag_label='March 14, 2023', + image=resp_img( + url='img/mozorg/advertising/blog/firefox-android-new-privacy.jpg', + optional_attributes={ + 'loading': 'lazy', + 'class': 'mzp-c-card-image', + 'width': '600', + 'height': '400', + } + ), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://blog.mozilla.org/en/mozilla/firefox-androids-new-privacy-feature-total-cookie-protection-stops-companies-from-keeping-tabs-on-your-moves/' + utm_params, + )}} + + {{ card( + class='mzp-c-card-medium', + heading_level=3, + title='Privacy Preserving Attribution for Advertising', + ga_title='Privacy Preserving Attribution for Advertising', + tag_label='February 8, 2022', + image=resp_img( + url='img/mozorg/advertising/blog/privacy-preserving-attribution.jpg', + optional_attributes={ + 'loading': 'lazy', + 'class': 'mzp-c-card-image', + 'width': '600', + 'height': '400', + } + ), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://blog.mozilla.org/en/mozilla/privacy-preserving-attribution-for-advertising/' + utm_params, + )}} + + {{ card( + class='mzp-c-card-medium', + heading_level=3, + title='The future of ads and privacy', + ga_title='The future of ads and privacy', + tag_label='May 28, 2021', + image=resp_img( + url='img/mozorg/advertising/blog/som-fallback.jpg', + optional_attributes={ + 'loading': 'lazy', + 'class': 'mzp-c-card-image', + 'width': '600', + 'height': '400', + } + ), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://blog.mozilla.org/en/mozilla/the-future-of-ads-and-privacy/' + utm_params, + )}} + + {{ card( + class='mzp-c-card-medium', + heading_level=3, + title='Building a more privacy preserving ads-based ecosystem', + ga_title='Building a more privacy preserving ads-based ecosystem', + tag_label='May 28, 2021', + image=resp_img( + url='img/mozorg/advertising/blog/blog-fallback.jpg', + optional_attributes={ + 'loading': 'lazy', + 'class': 'mzp-c-card-image', + 'width': '600', + 'height': '400', + } + ), + aspect_ratio='mzp-has-aspect-16-9', + link_url='https://blog.mozilla.org/en/mozilla/building-a-more-privacy-preserving-ads-based-ecosystem/' + utm_params, + )}} + +
+
+
diff --git a/bedrock/mozorg/templates/mozorg/advertising/includes/product-fakespot-media.html b/bedrock/mozorg/templates/mozorg/advertising/includes/product-fakespot-media.html new file mode 100644 index 00000000000..276e65508da --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/includes/product-fakespot-media.html @@ -0,0 +1,24 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{{ 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-split-media-asset', + 'width': '600', + 'height': '400', + }, +)}} + + diff --git a/bedrock/mozorg/templates/mozorg/advertising/includes/product-firefox-media.html b/bedrock/mozorg/templates/mozorg/advertising/includes/product-firefox-media.html new file mode 100644 index 00000000000..c2bdb3ea840 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/includes/product-firefox-media.html @@ -0,0 +1,23 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{{ 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-split-media-asset', + 'width': '600', + 'height': '400', + }, +)}} + + diff --git a/bedrock/mozorg/templates/mozorg/advertising/includes/product-mdn-media.html b/bedrock/mozorg/templates/mozorg/advertising/includes/product-mdn-media.html new file mode 100644 index 00000000000..54549f019d5 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/includes/product-mdn-media.html @@ -0,0 +1,24 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{{ 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-split-media-asset', + 'width': '600', + 'height': '400', + }, +)}} + + diff --git a/bedrock/mozorg/templates/mozorg/advertising/includes/product-pocket-media.html b/bedrock/mozorg/templates/mozorg/advertising/includes/product-pocket-media.html new file mode 100644 index 00000000000..ddb8c870d70 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/includes/product-pocket-media.html @@ -0,0 +1,24 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{{ 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-split-media-asset', + 'width': '600', + 'height': '400', + }, +)}} + + diff --git a/bedrock/mozorg/templates/mozorg/advertising/includes/sub-nav.html b/bedrock/mozorg/templates/mozorg/advertising/includes/sub-nav.html new file mode 100644 index 00000000000..c15268b8d5b --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/includes/sub-nav.html @@ -0,0 +1,37 @@ + +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. + #} + +{% from "macros.html" import sub_nav with context %} + +{{ sub_nav( + title={ + 'text': 'Mozilla Advertising', + 'href': url('mozorg.advertising.landing') + }, + links=[ + { + 'text': 'Ad Formats & Audiences', + 'href': url('mozorg.advertising.formats'), + 'cta_name': 'Ad Formats & Audiences' + }, + { + 'text': 'Principles', + 'href': url('mozorg.advertising.principles'), + 'cta_name': 'Principles' + }, + { + 'text': 'Anonym', + 'href': 'https://www.anonymco.com/', + 'cta_name': 'Anonym' + }, + { + 'text': 'Contact', + 'href': 'https://mozilla.formstack.com/forms/advertising', + 'cta_name': 'Contact' + } + ] +) }} diff --git a/bedrock/mozorg/templates/mozorg/advertising/landing.html b/bedrock/mozorg/templates/mozorg/advertising/landing.html new file mode 100644 index 00000000000..cd9d177f467 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/landing.html @@ -0,0 +1,234 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{% extends "base-protocol-mozilla.html" %} + +{% from "macros-protocol.html" import callout, card, split with context %} + +{% block page_title %}Mozilla Advertising{% endblock %} + +{% block page_css %} + {{ css_bundle('protocol-callout') }} + {{ css_bundle('protocol-card') }} + {{ css_bundle('protocol-split') }} + {{ css_bundle('mozilla-ads') }} +{% endblock %} + +{% block sub_navigation %} + {% include 'mozorg/advertising/includes/sub-nav.html' %} +{% 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 +) %} +

+ + Contact + + + + + + + + + + + + +

+{% 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', +) %} +

Mozilla is redefining digital advertising with privacy-first, high-performance solutions.

+ +

Pushing the industry forward with advanced technology, + for a better + safer internet.

+ +

Today’s digital advertising practices put personal data at risk, tracking + people across websites without their knowledge or consent.

+ +

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.

+{% 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', +) %} +

Performance, driven by privacy

+ +

Anonym enables brands to optimize and measure + their advertising without sharing user-level data with ad platforms.

+

We’re building an ecosystem that provides consumer privacy, where data-driven + marketing thrives.

+ +

+ + Learn more + + + + + + + + + + + + +

+{% endcall %} + +
+
+
+

Advertise with Mozilla

+

Reach valuable audiences in premium, + privacy-first, brand-safe environments with Mozilla’s suite of ad solutions.

+
+ +
+ {{ 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', + )}} +
+
+
+ +{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/advertising/principles.html b/bedrock/mozorg/templates/mozorg/advertising/principles.html new file mode 100644 index 00000000000..3746803da23 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/advertising/principles.html @@ -0,0 +1,123 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + License, v. 2.0. If a copy of the MPL was not distributed with this + file, You can obtain one at https://mozilla.org/MPL/2.0/. +#} + +{% extends "base-protocol-mozilla.html" %} + +{% from "macros-protocol.html" import callout, picto with context %} + +{% block page_title %}Mozilla Advertising — Built on principles{% endblock %} + +{% block page_css %} + {{ css_bundle('protocol-callout') }} + {{ css_bundle('protocol-card') }} + {{ css_bundle('protocol-picto') }} + {{ css_bundle('mozilla-ads') }} +{% endblock %} + +{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=advertising-principles' %} + +{% block sub_navigation %} + {% include 'mozorg/advertising/includes/sub-nav.html' %} +{% endblock %} + +{% block content %} + {{ callout( + class='mozads-header mzp-t-dark mozads-t-dark', + title='Built on principles', + desc='At Mozilla, we believe in a world where a healthy advertising industry and individual privacy can co-exist. We’re advancing the technology to make it happen.', + heading_level=1, + brand=False, + content_width='xl', + ) }} + + + + {% include 'mozorg/advertising/includes/blog-articles.html' %} + +{% endblock %} diff --git a/bedrock/mozorg/urls.py b/bedrock/mozorg/urls.py index c2474daf94b..d261a265dae 100644 --- a/bedrock/mozorg/urls.py +++ b/bedrock/mozorg/urls.py @@ -138,7 +138,9 @@ ), page("analytics-tests/", "mozorg/analytics-tests/ga-index.html"), path("email-mieco/", views.mieco_email_form, name="mozorg.email_mieco"), - page("advertising/", "mozorg/advertising.html"), + page("advertising/", "mozorg/advertising/landing.html"), + page("advertising/formats/", "mozorg/advertising/formats.html"), + page("advertising/principles/", "mozorg/advertising/principles.html"), path("antiharassment-tool/", views.anti_harassment_tool_view, name="mozorg.antiharassment-tool"), page("rise25/nominate/", "mozorg/rise25/landing.html"), ] diff --git a/l10n/en/footer.ftl b/l10n/en/footer.ftl index ecaee31f7ff..2b6065c78fb 100644 --- a/l10n/en/footer.ftl +++ b/l10n/en/footer.ftl @@ -51,3 +51,4 @@ footer-spotify = { -brand-name-spotify } footer-follow-mozilla = Follow @{ -brand-name-mozilla } footer-follow-firefox = Follow @{ -brand-name-firefox } footer-about-this-site = About this site +footer-advertise = Advertise with { -brand-name-mozilla } diff --git a/media/css/mozorg/advertising.scss b/media/css/mozorg/advertising.scss index a44628c7740..851b3ff7593 100644 --- a/media/css/mozorg/advertising.scss +++ b/media/css/mozorg/advertising.scss @@ -6,17 +6,120 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/templates/multi-column'; -.c-header { - p { - @include text-body-lg; +$color-ads-off-black: #161616; + +.mzp-t-dark.mozads-t-dark { + background-color: $color-ads-off-black; +} + +.c-sub-navigation-list { + a[href*="anonymco.com"], + a[href*="mozilla.formstack.com"] { + padding-right: 1.2em; + background: url("/media/protocol/img/icons/external-link.svg") right center no-repeat; + background-size: 1em auto; + } +} + +.mozads-header { + text-align: start; + padding: $layout-md 0; + + .mzp-c-callout-desc { + @include text-body-xl; + } + + @media #{$mq-lg} { + .mzp-c-callout-title { + @include text-title-2xl; + } + + .mzp-c-callout-desc { + max-width: 60ch; + } + } +} + +.mozads-footer { + text-align: start; +} + +.mozads-anonym .mzp-c-split-media-asset { + margin: 0 auto; +} + +.mozads-content-intro { + @include text-body-xl; + + @media #{$mq-lg} { + .ads-section-header & { + max-width: 60ch; + } + } +} + +.mozads-product { + padding-bottom: $layout-md; + + .mzp-c-split-media-asset { + border-radius: $border-radius-lg; + margin: 0 auto; + } +} + +.mozads-valueprops { + .mzp-c-picto-body p { + margin: 0; + } +} + +.mozads-product-audience { + background: $color-light-gray-20; + border-radius: $border-radius-lg; + padding: $spacing-lg $spacing-md; + margin-top: $spacing-md; + text-align: start; + + & > p:last-child { + margin-bottom: 0; + } + + @media #{$mq-lg} { + @include text-body-sm; + display: flex; + text-align: center; + padding: 0; + + & > p { + border-right: 1px solid $color-light-gray-40; + flex: 1 1 0; + margin: 0; + padding: $spacing-lg $spacing-md; + + &:last-child { + border: 0; + } + } + + strong { + @include font-mozilla; + @include text-title-md; + display: block; + margin-bottom: $spacing-sm; + } } } -.c-purple-callout { - background-color: $color-purple-90; +@media #{$mq-xl} { + .mozads-principles.mzp-t-picto-side { + .mzp-c-picto { + padding-left: $layout-2xl; + } - h2 { - color: $color-white; + .mzp-c-picto-image { + width: 135px; + } } } diff --git a/media/img/mozorg/advertising/addon.svg b/media/img/mozorg/advertising/addon.svg deleted file mode 100644 index 213eaa285c2..00000000000 --- a/media/img/mozorg/advertising/addon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/img/mozorg/advertising/ads-hero-15x.png b/media/img/mozorg/advertising/ads-hero-15x.png new file mode 100644 index 00000000000..c368a1cef16 Binary files /dev/null and b/media/img/mozorg/advertising/ads-hero-15x.png differ diff --git a/media/img/mozorg/advertising/ads-hero.png b/media/img/mozorg/advertising/ads-hero.png new file mode 100644 index 00000000000..b0a273a2736 Binary files /dev/null and b/media/img/mozorg/advertising/ads-hero.png differ diff --git a/media/img/mozorg/advertising/badge.svg b/media/img/mozorg/advertising/badge.svg deleted file mode 100644 index ccef3d33830..00000000000 --- a/media/img/mozorg/advertising/badge.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/img/mozorg/advertising/blog/blog-fallback.jpg b/media/img/mozorg/advertising/blog/blog-fallback.jpg new file mode 100644 index 00000000000..4f47321bf1d Binary files /dev/null and b/media/img/mozorg/advertising/blog/blog-fallback.jpg differ diff --git a/media/img/mozorg/advertising/blog/firefox-android-new-privacy.jpg b/media/img/mozorg/advertising/blog/firefox-android-new-privacy.jpg new file mode 100644 index 00000000000..f01f2386bad Binary files /dev/null and b/media/img/mozorg/advertising/blog/firefox-android-new-privacy.jpg differ diff --git a/media/img/mozorg/advertising/blog/google-protected-audience.jpg b/media/img/mozorg/advertising/blog/google-protected-audience.jpg new file mode 100644 index 00000000000..f786d9740f4 Binary files /dev/null and b/media/img/mozorg/advertising/blog/google-protected-audience.jpg differ diff --git a/media/img/mozorg/advertising/blog/introducing-anonym.jpg b/media/img/mozorg/advertising/blog/introducing-anonym.jpg new file mode 100644 index 00000000000..760b6a9e123 Binary files /dev/null and b/media/img/mozorg/advertising/blog/introducing-anonym.jpg differ diff --git a/media/img/mozorg/advertising/blog/privacy-preserving-attribution.jpg b/media/img/mozorg/advertising/blog/privacy-preserving-attribution.jpg new file mode 100644 index 00000000000..c7be56533d9 Binary files /dev/null and b/media/img/mozorg/advertising/blog/privacy-preserving-attribution.jpg differ diff --git a/media/img/mozorg/advertising/blog/som-fallback.jpg b/media/img/mozorg/advertising/blog/som-fallback.jpg new file mode 100644 index 00000000000..61bd5d89aa0 Binary files /dev/null and b/media/img/mozorg/advertising/blog/som-fallback.jpg differ diff --git a/media/img/mozorg/advertising/icon-copy.svg b/media/img/mozorg/advertising/icon-copy.svg new file mode 100644 index 00000000000..ff23fa801a8 --- /dev/null +++ b/media/img/mozorg/advertising/icon-copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/mozorg/advertising/icon-eye.svg b/media/img/mozorg/advertising/icon-eye.svg new file mode 100644 index 00000000000..043faeeb7e1 --- /dev/null +++ b/media/img/mozorg/advertising/icon-eye.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/mozorg/advertising/icon-globe.svg b/media/img/mozorg/advertising/icon-globe.svg new file mode 100644 index 00000000000..171b9d44873 --- /dev/null +++ b/media/img/mozorg/advertising/icon-globe.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/media/img/mozorg/advertising/icon-star.svg b/media/img/mozorg/advertising/icon-star.svg new file mode 100644 index 00000000000..ee5e61a6684 --- /dev/null +++ b/media/img/mozorg/advertising/icon-star.svg @@ -0,0 +1,3 @@ + + + diff --git a/media/img/mozorg/advertising/logo-anonym.svg b/media/img/mozorg/advertising/logo-anonym.svg new file mode 100644 index 00000000000..3e0bcdbfb85 --- /dev/null +++ b/media/img/mozorg/advertising/logo-anonym.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/media/img/mozorg/advertising/mask.svg b/media/img/mozorg/advertising/mask.svg deleted file mode 100644 index 2195680c960..00000000000 --- a/media/img/mozorg/advertising/mask.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/img/mozorg/advertising/mountain.svg b/media/img/mozorg/advertising/mountain.svg deleted file mode 100644 index 5df1b012d9b..00000000000 --- a/media/img/mozorg/advertising/mountain.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/img/mozorg/advertising/principle-advertising.svg b/media/img/mozorg/advertising/principle-advertising.svg new file mode 100644 index 00000000000..2a5f9c30990 --- /dev/null +++ b/media/img/mozorg/advertising/principle-advertising.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/media/img/mozorg/advertising/principle-community.svg b/media/img/mozorg/advertising/principle-community.svg new file mode 100644 index 00000000000..e0b1c49591b --- /dev/null +++ b/media/img/mozorg/advertising/principle-community.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/media/img/mozorg/advertising/principle-privacy.svg b/media/img/mozorg/advertising/principle-privacy.svg new file mode 100644 index 00000000000..6adb5862522 --- /dev/null +++ b/media/img/mozorg/advertising/principle-privacy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/media/img/mozorg/advertising/principle-safe.svg b/media/img/mozorg/advertising/principle-safe.svg new file mode 100644 index 00000000000..28875d8dae6 --- /dev/null +++ b/media/img/mozorg/advertising/principle-safe.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/media/img/mozorg/advertising/product-fakespot-15x.png b/media/img/mozorg/advertising/product-fakespot-15x.png new file mode 100755 index 00000000000..ad6d66328cb Binary files /dev/null and b/media/img/mozorg/advertising/product-fakespot-15x.png differ diff --git a/media/img/mozorg/advertising/product-fakespot.png b/media/img/mozorg/advertising/product-fakespot.png new file mode 100755 index 00000000000..af925b0859f Binary files /dev/null and b/media/img/mozorg/advertising/product-fakespot.png differ diff --git a/media/img/mozorg/advertising/product-firefox-15x.png b/media/img/mozorg/advertising/product-firefox-15x.png new file mode 100755 index 00000000000..efe687de1f9 Binary files /dev/null and b/media/img/mozorg/advertising/product-firefox-15x.png differ diff --git a/media/img/mozorg/advertising/product-firefox.png b/media/img/mozorg/advertising/product-firefox.png new file mode 100755 index 00000000000..f2bf269b198 Binary files /dev/null and b/media/img/mozorg/advertising/product-firefox.png differ diff --git a/media/img/mozorg/advertising/product-mdn-15x.png b/media/img/mozorg/advertising/product-mdn-15x.png new file mode 100755 index 00000000000..aa128afe472 Binary files /dev/null and b/media/img/mozorg/advertising/product-mdn-15x.png differ diff --git a/media/img/mozorg/advertising/product-mdn.png b/media/img/mozorg/advertising/product-mdn.png new file mode 100755 index 00000000000..04d7c46daa4 Binary files /dev/null and b/media/img/mozorg/advertising/product-mdn.png differ diff --git a/media/img/mozorg/advertising/product-pocket-15x.png b/media/img/mozorg/advertising/product-pocket-15x.png new file mode 100755 index 00000000000..97fc213bb8b Binary files /dev/null and b/media/img/mozorg/advertising/product-pocket-15x.png differ diff --git a/media/img/mozorg/advertising/product-pocket.png b/media/img/mozorg/advertising/product-pocket.png new file mode 100755 index 00000000000..5744f5f018e Binary files /dev/null and b/media/img/mozorg/advertising/product-pocket.png differ