M U S T A   P Ä I V Ä

Katso esimerkki

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 { }
}