M U S T A P Ä I V Ä
HTML
<div id="copyright-campaign-box" style="display:block">
<div class="inner-campaign-box" ;=""><a href="javascript:showOrHide();" id="corner-close-button" class="close-copyright-campaign-box" style="color:#ffffff">Sulje</a>
<div class="campaign-text-content"><h1>Tänään juhlitaan<br>kansainvälistä tekijänoikeuspäivää</h1> <h1>Tekijänoikeuslain ylilyönnit johtavat Internetin pimenemiseen</h1>
<div>Yhdessä voimme tehdä Suomen tekijänoikeuslaista reilumman kuluttajille, tekijöille ja uusia palveluita kehittäville yrityksille.</div>
<div class="subscribe">Tutustu <a href="https://www.kansalaisaloite.fi/fi/aloite/70">Järkeä tekijänoikeuslakiin -aloitteeseen!</a></div>
<div style="display: block;" id="subscriptions">Jo <span id="subscriptionCount"><b>26442</b></span> allekirjoitusta!</div>
<div id="campaignInfoLink"><a href="https://www.facebook.com/events/160986290729976/" target="_blank">Musta päivä</a></div>
<div id="campaignInfoLink"><a href="http://mustapaiva.jarkea.fi/" target="_blank">Kampanjasivu (Lisää tämä Wordpressiin)</a><br/>
<a href="http://kaikkeus.dy.fi/piraattipuolue/musta" target="_blank">(Lisää muille sivustoille)</a></div>
<div>
</div>
</div>
Javascript
<script language="javascript">
function showOrHide()
{
var div = document.getElementById("copyright-campaign-box");
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
</script>
CSS
@font-face {
font-family: 'Gentium Book Basic'; font-style: normal; font-weight: 400; src: local('Gentium Book Basic'), local('GentiumBookBasic'), url(http://themes.googleusercontent.com/static/fonts/gentiumbookbasic/v3/IRFxB2matTxrjZt6a3FUnsiUQA3_wO-qQTJfqhvSKS0.woff) format('woff');
}
@font-face {
font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
#copyright-campaign-box { z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0,0,0);background:rgba(0,0,0,0.9);text-align:center;font-family:'Gentium Book Basic', serif;letter-spacing:0.1em;font-size:16px;display: ;
}
.inner-campaign-box { position:fixed;top:28px;right:28px;bottom:28px;left:28px;color:#EFEFEF;padding:20px;border:5px solid #ffffff; }
#corner-close-button {
position:fixed;top:8px;right:8px;padding:8px 16px;border-radius:2em;text-decoration:none;border:5px solid #ffffff;color:#ffffff;background:#000000;font-size:16px;font-weight:bold; z-index:5;}
#corner-close-button:hover { background:#333333; }
.campaign-text-content {
position:fixed;top:60px;left:0;right:0;bottom:0; padding: 35px; }
#copyright-campaign-box h1 {
color:grey;
position:relative;
height:auto;
width:100%;
font-family:'Open Sans', sans-serif;
text-transform:uppercase;
text-align:center;
font-size:40px;
margin: 0 auto 30px auto;
z-index:2;
}
#closeCampaignText { display: none; }
.campaign-text-content div {
max-width:35em; padding: 0 30px; margin: 0 auto 30px auto; }
#copyright-campaign-box a {
color:#aaaacc;text-decoration:none;
font-size:16px;}
#copyright-campaign-box a:hover { color:#ccccee;text-decoration:none; }
#copyright-campaign-box .subscribe { font-size:24px; }
#subscriptions { display: none; }
#copyright-campaign-box .credits { position:fixed;bottom:40px;left:0;text-align:center;width:100%; }
@media (max-width: 680px) {
#copyright-campaign-box, #copyright-campaign-box .subscribe { font-size:16px; }
#copyright-campaign-box h1 { font-size:19px; }
.campaign-text-content div,
#copyright-campaign-box h1 { margin-bottom: 20px; max-width: none; padding: 0; }
}
@media(max-height: 550px) {
.campaign-text-content { position: static; padding: 0; }
.campaign-text-content div, #copyright-campaign-box h1 { margin-bottom: 10px; }
#copyright-campaign-box .credits { position: static;width:auto;max-width:none;}
#closeCampaignText, #campaignInfoLink, .credits { }
}