Add DevFund campaign snippet #2

Merged
Francesco Siddi merged 1 commits from feature-devfund-box into develop 2023-12-07 00:11:05 +01:00
2 changed files with 26 additions and 124 deletions

View File

@ -1,129 +1,22 @@
<div class="devfund"> <div class="devfund">
<p class="lead"> <div class="container py-4 px-5">
Blender is made possible thanks to people like you. ❤️ <div class="row dfdb mt-4">
<br> <div class="col-lg-6 col-12 col-msg text-light">
Support with a monthly donation: <h2 class="fs-0 fw-bold mb-5">
</p> A <strong>birthday gift</strong><br>
for Blender
<style> </h2>
.cards-list { <p class="fs-5">
--cards-item-max-width: 108px; On January 2<sup>nd</sup> Blender turns 30!<br>
--cards-list-items-per-row: 5; Celebrate the Freedom to Create with a donation.
max-width: 840px; </p>
} <p class="fs-5">
<a href="https://fund.blender.org">Learn more</a> and join the fun!
.cards-list-item-inner { </p>
max-width: var(--cards-item-max-width); </div>
} <div class="col-lg-6 col-12">
<div id="js-donation-box"></div>
.cards-list-item-thumbnail {
overflow: initial;
margin: .5rem auto;
max-width: 80px;
opacity: .6;
transition: all 150ms;
}
.cards-list-item-title { opacity: .6;}
.is-default .cards-list-item-title,
.is-default .cards-list-item-thumbnail,
.cards-list-item-inner:hover .cards-list-item-title,
.cards-list-item-inner:hover .cards-list-item-thumbnail { opacity: 1;}
.cards-list-item-excerpt span {opacity: .5}
</style>
<?php
/* Analytics.
* Must match the goal name set in analytics.blender.org */
$analytics_goal_name = 'DevFund+Buttons';
?>
<div class="cards-list card-layout-card-transparent card-aspect-ratio-square pb-5 pt-2 mx-auto text-center">
<div class="cards-list-item-outer card-aspect-ratio-inherit">
<div class="cards-list-item-inner mx-auto">
<a href="https://fund.blender.org/checkout/1?utm_medium=buildbot-subscribe-bronze" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=bronze plausible-event-medium=thumbnail cards-list-item-thumbnail">
<img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_bronze.png" alt="Bronze">
</a>
<div class="cards-list-item-info">
<span class="cards-list-item-excerpt">
<strong>$6</strong><span>/month</span>
<a href="https://fund.blender.org/checkout/1?utm_medium=buildbot-subscribe-bronze" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=bronze plausible-event-medium=button btn btn-link mt-3">
Donate
</a>
</span>
</div>
</div> </div>
</div> </div>
<div class="cards-list-item-outer card-aspect-ratio-inherit">
<div class="cards-list-item-inner mx-auto">
<a href="https://fund.blender.org/checkout/2?utm_medium=buildbot-subscribe-silver" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=silver plausible-event-medium=thumbnail cards-list-item-thumbnail">
<img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_silver.png" alt="Silver">
</a>
<div class="cards-list-item-info">
<span class="cards-list-item-excerpt">
<strong>$12</strong><span>/month</span>
<a href="https://fund.blender.org/checkout/2?utm_medium=buildbot-subscribe-silver" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=silver plausible-event-medium=button btn btn-link mt-3">
Donate
</a>
</span>
</div>
</div>
</div>
<div class="cards-list-item-outer card-aspect-ratio-inherit is-default">
<div class="cards-list-item-inner mx-auto">
<a href="https://fund.blender.org/checkout/3?utm_medium=buildbot-subscribe-gold" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=gold plausible-event-medium=thumbnail cards-list-item-thumbnail">
<img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_gold.png" alt="Gold">
</a>
<div class="cards-list-item-info">
<span class="cards-list-item-excerpt">
<strong>$30</strong><span>/month</span>
<a href="https://fund.blender.org/checkout/3?utm_medium=buildbot-subscribe-gold" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=gold plausible-event-medium=button btn btn-accent mt-3">
Donate
</a>
</span>
</div>
</div>
</div>
<div class="cards-list-item-outer card-aspect-ratio-inherit">
<div class="cards-list-item-inner mx-auto">
<a href="https://fund.blender.org/checkout/5?utm_medium=buildbot-subscribe-titanium" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=titanium plausible-event-medium=thumbnail cards-list-item-thumbnail">
<img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_titanium.png" alt="Titanium">
</a>
<div class="cards-list-item-info">
<span class="cards-list-item-excerpt">
<strong>$120</strong><span>/month</span>
<a href="https://fund.blender.org/checkout/5?utm_medium=buildbot-subscribe-titanium" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=titanium plausible-event-medium=button btn btn-link mt-3">
Donate
</a>
</span>
</div>
</div>
</div>
<div class="cards-list-item-outer card-aspect-ratio-inherit">
<div class="cards-list-item-inner mx-auto">
<a href="https://fund.blender.org/corporate-memberships" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=corporate plausible-event-medium=thumbnail cards-list-item-thumbnail">
<img decoding="async" src="https://www.blender.org/wp-content/uploads/2023/05/badge_devfund_corporate.png" alt="Corporate">
</a>
<div class="cards-list-item-info">
</div>
<div class="cards-list-item-excerpt d-flex align-items-end" href="https://fund.blender.org/corporate-memberships">
<a href="https://fund.blender.org/corporate-memberships" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=corporate plausible-event-medium=button btn btn-link mt-3">Corporate</a>
</div>
</div>
</div>
</div>
<div class="pb-6">
You can also <a href="https://fund.blender.org/donate-once/" class="plausible-event-name=<?=$analytics_goal_name?> plausible-event-membership=donate-once">donate once</a>.
</div> </div>
</div> </div>

View File

@ -279,5 +279,14 @@
}; };
})(); })();
</script> </script>
<script src="https://fund.blender.org/static/fetch-donation-box.js?v=1.0.1"></script>
<script>
fetchDonationBox({
jsUrl: 'https://fund.blender.org/static/js/donation-box.js',
selector: '#js-donation-box',
url: 'https://fund.blender.org/static/donation-box.html',
darkMode: false
});
</script>
</body> </body>
</html> </html>