Wikimedia Czech Republic/Banners/Mikrosoutez Ohrozene stavby
Appearance
Used the same code as Janberry in his banner for Czech Wikigap.
CentralNotice/Request/We Photograph Czechia Mini-Challenge
<style type="text/css"> #wlm-de { padding: 0; width: 100%; margin-bottom: 1em; position: relative; font-family: 'Linux Libertine', sans-serif; font-weight: bold; } #mw-mf-viewport #wlm-de { margin-bottom: 0!important; } #wlm-de>a { display: table; table-layout: fixed; border: 1px solid rgba(0, 0, 0, 0.3); background-color: #FFF; font-weight: bold; text-align: center; width: 100%; padding: 0; box-shadow: 0.1em 0.1em 0.6em 0 rgba(0, 0, 0, 0.4); transition: box-shadow 0.3s; height: 3em; text-decoration: none; } #wlm-de>a:hover { text-decoration: none; box-shadow: 0.06em 0.06em 0.4em 0 rgba(0, 0, 0, 0.7); } #wlm-de, #wlm-de * { box-sizing: border-box; } #wlm-de>a>* { display: table-cell; vertical-align: middle; padding: 0.7em 1.5em; } #wlm-de>a .wlm-logo { width: 8em; height: 6em; text-indent: -1000em; background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d6/Ohrozene_stavby_2024_vyznamenani.png'); background-image:url('https://upload.wikimedia.org/wikipedia/commons/2/23/Logo_Mikrosoutez_Ohrozene_stavby_nazev.png'); background-repeat: no-repeat; background-size: contain; background-position: 40% 47%; } #wlm-de>a .wlm-image { background-size: auto 100%; background-repeat: repeat-x; background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/74/Banner_background_Ohrozene_stavby.png'); animation: moveImage 180s linear infinite; /* Adjust initial duration as needed */ } #wlm-de>a .wlm-image { background-size: auto 100%; background-repeat: repeat-x; background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/74/Banner_background_Ohrozene_stavby.png'); animation: moveImage 60s linear infinite; /* Adjust initial duration as needed */ } @keyframes moveImage { 0% { background-position: 0 50%; } 100% { background-position: 100% 50%; } } #wlm-de .wlm-cta { position: relative; background-color: #990000; color: #FFF; width: 22em; padding-right: 1.1em; font-family: 'Linux Libertine', sans-serif; font-weight: bold; font-size:1em; } #wlm-de .wlm-cta:after { position: absolute; right: 0.7em; top: 50%; transform: translateY(-61%); content: '»'; display: block; font-size: 1.2em; font-weight: normal; transition: right 0.3s; } #wlm-de a:hover .wlm-cta:after { right: 0.4em; } #wlm-de .wlm-close { position: absolute; right: 0.4em; top: 0.4em; } .banner-container { margin: 0; max-width: 100%; } @media screen and (max-width:719px) { #wlm-de > a .wlm-logo { position: absolute; background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/23/Logo_Mikrosoutez_Ohrozene_stavby_nazev.png'); } #wlm-de>a { display: block; table-layout: auto; height: auto; } #wlm-de>a>* { display: block; width: 100%!important; min-height:120px; vertical-align: middle; } #wlm-de>a>.wlm-cta { font-size: 1.2em; min-height: 2.8em; padding-right: 3em; } #wlm-de>a .wlm-logo { background-position: 48% 47%; } #wlm-de>a br { display: none; } #wlm-de .wlm-close { right: 0; top: 0; } #wlm-de .wlm-close a { display: block; padding: 1em 1em .5em .5em; } } @media screen and (max-width:55.8em) { .wlm-de { position: relative; top: -1px; margin-left: -20px!important; margin-right: -20px!important; } .wlm-de .outer-box, .wlm-de .inner-box { padding-left: 2em!important; padding-right: 2em!important; } .wlm-de .inner-box { margin-left: -2em!important; margin-right: -2em!important; } .wlm-de .wlm-title { font-size: 5.4vw!important; } } @media screen and (max-width:30em) { .wlm-de .wlm-title { font-size: 7.2vw!important; } } </style> <div id="wlm-de"> <a href="https://cs.wikipedia.org/wiki/Wikipedie:Mikrosout%C4%9B%C5%BE_Ohro%C5%BEen%C3%A9_stavby" target="_blank"> <div class="wlm-logo">Wiki Loves Earth</div> <div class="wlm-image"></div> <div class="wlm-cta"> Máte ve svém okolí ohroženou stavbu? Vyfoťte ji, než ji zboří!</div> </a> </div> </div>