A dot makes the difference.

You are just in the right place to help! Copy the Javascript snippet below and raise awareness for the .hiv campaign and its fight against AIDS – by simply transforming every dot on your website pink!
Help now!
Copy
Hit Cmd + C to copy the code snippet below.
Paste
Paste it just before the closing <body> tag.
Be a hero
Cheerio! You now help the fight against AIDS.
<script type="text/javascript">
/**
 * AUTHOR		dotHIV gemeinnuetziger e.V.
 * LICENSE		MIT
 * REPOSITORY		https://github.com/marionebl/dothivify
 * This snippet was used for a one day campaign for .hiv turning all website dots pink.
 * It’s time guarded for DEC 1st of 2014. When over, you can delete it.
 **/
(function v(b,a,m){function p(k,w){if(!a[k]){if(!b[k]){var c="function"==typeof require&&require;if(!w&&c)return c(k,!0);if(r)return r(k,!0);c=Error("Cannot find module '"+k+"'");throw c.code="MODULE_NOT_FOUND",c;}c=a[k]={a:{}};b[k][0].call(c.a,function(a){var c=b[k][1][a];return p(c?c:a)},c,c.a,v,b,a,m)}return a[k].a}for(var r="function"==typeof require&&require,q=0;q<m.length;q++)p(m[q]);return p})({1:[function(f,b){b.a={replaced:".",prefix:"dothiv",queries:["p"],diameter:"4px",offset:"16px",dotBackground:"#ff0000",
popoverBackground:"#ffffff",popoverColor:"#000000",popoverFontSize:"14px",popoverLineHeight:"1.25em",headline:"A dot makes the difference.",headlineColor:"#e00073",headlineFontweight:"bold",text:"You are just in the right place to help! Copy the Javascript snippet below and raise awareness for the .hiv campaign and its fight against AIDS \u2013 by simply transforming every dot on your website pink!",buttonText:"Help now!",buttonHref:"https://click4life.hiv/en/",buttonTarget:"_blank",buttonBackground:"#e00073",
buttonHoverBackground:"#ff47a5",buttonColor:"#ffffff",guardDate:!1,guardDateMonth:12,guardDateDay:1,injectStyles:!0}},{}],2:[function(f,b){function a(a){var b={},c;for(c in m)m.hasOwnProperty(c)&&(b[c]="undefined"!==typeof a[c]?a[c]:m[c]);if(b.guardDate&&(a=new Date,a.setHours(0,0,0,0),a.getTime()!==(new Date(a.getFullYear(),b.guardDateMonth-1,b.guardDateDay)).getTime()))return;var f=b.prefix;a=document.querySelectorAll(b.queries.join(", "));c=r(b);var g=p(b),t=f+"-state",h=document.createElement("input");
h.type="radio";h.name=f;h.className=t;h.id=f+"-state-revert";if(!1!==b.injectStyles){var d=document.createElement("style");d.type="text/css";d.styleSheet?d.styleSheet.cssText=g:d.appendChild(document.createTextNode(g));document.head.appendChild(d)}g=document.createDocumentFragment();d=document.createElement("div");d.innerHTML=c;g.appendChild(d);c=d.firstChild;document.body.appendChild(h);for(h=0;h<a.length;h+=1)for(g=q(a[h]),d=0;d<g.length;d+=1){for(var n=[],e=g[d].nodeValue.split(b.replaced),s=[],
u=[],l=0;l<e.length;l+=1){var x=e[l+1]?e[l+1][0]:!0;s.push((e[l-1]?e[l-1][e[l-1].length-1]:"").match(/[a-z]/i));u.push(null!==x);n.push(document.createTextNode(e[l]))}for(e=0;e<n.length;e+=1)g[d].parentNode.insertBefore(n[e],g[d]),n[e].nodeValue&&s[e]&&u[e]?g[d].parentNode.insertBefore(c.cloneNode(!0),n[e]):s[e]&&(n[e].nodeValue="."+n[e].nodeValue);g[d].parentNode.removeChild(g[d])}document.addEventListener("change",function(a){if(!(1024>window.innerWidth)&&a.target.classList.contains(t)){var b=a.target.parentNode,
c=b.querySelectorAll("."+f+"-replacement-aside")[0].getBoundingClientRect(),d=c.width/2,e=b.getBoundingClientRect();if(a.target.checked){a=[];c.height>e.top&&a.push("down");d>e.left?a.push("right"):d>window.innerWidth-e.left&&a.push("left");c=b.className;for(d=0;d<a.length;d+=1)-1===c.indexOf(a[d])&&(c+=" "+a[d]);b.className=c}else window.setTimeout(function(){b.className=e.className.replace(/down|right|left/ig,"")},300)}},!1)}var m=f("./defaults"),p=f("./templates/styles.dot"),r=f("./templates/dot.dot"),
q=f("./utils/children-text-nodes");window.dotHIVify=a;b.a=a},{"./defaults":1,"./templates/dot.dot":3,"./templates/styles.dot":4,"./utils/children-text-nodes":5}],3:[function(f,b){b.a=function(a){return'<label class="'+a.prefix+'-replacement-wrapper"><input class="'+a.prefix+'-state" type="radio" name="'+a.prefix+'" /><label class="'+a.prefix+'-state-revert-trigger" for="'+a.prefix+'-state-revert"></label><aside class="'+a.prefix+'-replacement-aside"><div><strong class="'+a.prefix+'-h">'+a.headline+
"</strong>"+a.text+'</div><a class="'+a.prefix+'-cta" href="'+a.buttonHref+'" target="'+a.buttonTarget+'">'+a.buttonText+"</a></aside></label>'"}},{}],4:[function(f,b){b.a=function(a){return"@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300);."+a.prefix+"-replacement-wrapper{position: relative;display: inline-block;height: "+a.diameter+";width: "+a.diameter+";margin: 1px 0 0 1px;vertical-align: baseline;background: "+a.dotBackground+";border-radius: 50%;cursor: pointer;float: none;}."+
a.prefix+"-replacement-wrapper::before{content: '';position: absolute;width: 30px;height: 30px;top: -15px;left: -15px;float: none;}."+a.prefix+"-replacement-wrapper > ."+a.prefix+"-state,."+a.prefix+"-state{position: fixed!important;top: 0!important;left: -100000px!important;}."+a.prefix+"-replacement-wrapper > ."+a.prefix+"-state-revert{display: none;}."+a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside{z-index: 100001;box-sizing: border-box;position: absolute;left: -1000px;left: -200vw;float: none;bottom: "+
a.offset+";width: 260px;margin-left: -130px;margin-bottom: -25px;padding: 10px;opacity: 0;background: "+a.popoverBackground+";border: 1px solid #ddd;box-shadow: 0 0 10px rgba(0,0,0,.15);text-align: left;text-shadow: none;line-height: 18px;font-size: "+a.popoverFontSize+";font-family: 'Source Sans Pro', sans-serif;line-height: "+a.popoverLineHeight+";color: "+a.popoverColor+";-webkit-transition: opacity .3s ease-in-out, margin .3s, left 0s .3s; -moz-transition: opacity .3s ease-in-out, margin .3s, left 0s .3s; -ms-transition: opacity .3s ease-in-out, margin .3s, left 0s .3s; transition: opacity .3s ease-in-out, margin .3s, left 0s .3s;}."+
a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside p,."+a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside h{line-height: 1.5em;}."+a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside a{line-height: 1.25em;}."+a.prefix+"-replacement-wrapper ."+a.prefix+"-h{display: block;color: "+a.headlineColor+";font-weight: "+a.headlineFontweight+";margin: .25em 0 .5em 0;}."+a.prefix+"-replacement-wrapper ."+a.prefix+"-state:checked + ."+a.prefix+"-state-revert-trigger{position: fixed;z-index: 100000;top: 0;right: 0;bottom: 0;left: 0;}."+
a.prefix+"-replacement-wrapper ."+a.prefix+"-state:checked ~ ."+a.prefix+"-replacement-aside{left: 50%;opacity: 1;margin-bottom: 0;-webkit-transition: opacity .3s ease-in-out, margin .3s; -moz-transition: opacity .3s ease-in-out, margin .3s; -ms-transition: opacity .3s ease-in-out, margin .3s; transition: opacity .3s ease-in-out, margin .3s;}."+a.prefix+"-replacement-wrapper a."+a.prefix+"-cta{box-sizing: border-box;display: inline-block;width: 100%;margin-top: 10px;padding: 3px 5px;text-align: center;text-decoration: none!important;font-weight: bold;color: "+
a.buttonColor+"!important;background: "+a.buttonBackground+";cursor: pointer;-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}."+a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside::after{content: '';position: absolute;bottom: -7px;left: 50%;margin-left: -10px;width: 0;height: 0;border-style: solid;border-width: 7.5px 10px 0 10px;border-color: "+a.popoverBackground+" transparent transparent transparent;}."+
a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside::before{content: '';position: absolute;bottom: -8px;left: 50%;margin-left: -10px;width: 0;height: 0;border-style: solid;border-width: 7.5px 10px 0 10px;border-color: #ddd transparent transparent transparent;}."+a.prefix+"-replacement-wrapper.down > ."+a.prefix+"-replacement-aside{top: 100%;bottom: auto;margin-top: "+a.offset+";}."+a.prefix+"-replacement-wrapper.down > ."+a.prefix+"-replacement-aside::after{top: -7px;bottom: auto;border-width: 0 10px 7.5px 10px;border-color: transparent transparent "+
a.popoverBackground+" transparent;}."+a.prefix+"-replacement-wrapper.down > ."+a.prefix+"-replacement-aside::before{top: -8px;bottom: auto;border-width: 0 10px 7.5px 10px;border-color: transparent transparent #ddd transparent;}."+a.prefix+"-replacement-wrapper.left > ."+a.prefix+"-replacement-aside{margin-left: -260px;}."+a.prefix+"-replacement-wrapper.left > ."+a.prefix+"-replacement-aside::after,."+a.prefix+"-replacement-wrapper.left > ."+a.prefix+"-replacement-aside::before{left: 100%;margin-left: -25px;}."+
a.prefix+"-replacement-wrapper.right > ."+a.prefix+"-replacement-aside{margin-left: 0;}."+a.prefix+"-replacement-wrapper.right > ."+a.prefix+"-replacement-aside::after,."+a.prefix+"-replacement-wrapper.right > ."+a.prefix+"-replacement-aside::before{left: auto;right: 100%;margin-right: -25px;}."+a.prefix+"-replacement-wrapper a."+a.prefix+"-cta{color: #fff;}."+a.prefix+"-replacement-wrapper a."+a.prefix+"-cta:hover{background: "+a.buttonHoverBackground+";}@media only screen and (max-width: 700px) {."+
a.prefix+"-replacement-wrapper > ."+a.prefix+"-replacement-aside{position: fixed;right: 0;bottom: 0;left: 0;margin: 0;width: 100%;opacity: 1;padding: 25px 15px;-webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%);-webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; transition: transform .3s ease-in-out;}."+a.prefix+"-replacement-wrapper > ."+
a.prefix+"-state:checked ~ ."+a.prefix+"-replacement-aside{left: 0;-webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none;-webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; transition: transform .3s ease-in-out;}."+a.prefix+"-replacement-wrapper ."+a.prefix+"-cta{margin-top: 20px;}}"}},{}],5:[function(f,b){b.a=function(a){var b=[];for(a=a.firstChild;a;a=a.nextSibling)3===
a.nodeType&&b.push(a);return b}},{}]},{},[2]);
window.dotHIVify({});</script>
Does not float your boat? Customize it.
A dot makes the difference.

Customize the snippet by changing the defaults below

Copy

Paste

Be a hero
