Layer für Ankündigungen

Layer bieten sich an um kurze Infos wie Betriebsferien, Mitarbeitersuche, Moodvideo…  auf die Seite zu zeigen .

Da sie nicht das Grundlayout der Seite zerstören können sie ohne andere Seiteninhalte anzupassen verwendet werden.

Die Einschaltzeit, Farben, Schrift usw. können individuell eingestellt werden auch ist es möglich Bilder und videos innerhalb des Layer auszuspielen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>

.front-layer-wrapper {background: rgba(0,0,0,0.7);  height: 100%;  width: 100%;  position: fixed; top: 0;  left: 0;z-index: 10000 !important;}
.front-layer {font-family: "Raleway",sans-serif,"google"; border-radius: 25px; min-width: 300px; background: #d70000; margin: auto auto;max-width: 620px;position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.front-layer .front-layer-inner {padding:40px; text-align:center;}
.front-layer .close {position: absolute;right: 10px;top: 10px;}
.front-layer .headline {display: inline-block;font-size: 2.5em;margin:0 ;color: #fff;}
.front-layer .subhead {border-bottom: 1px solid #4a7e3e;margin: 0 auto 30px;}
.front-layer .subhead-inner {display: inline-block;background: #fff;margin-bottom: -12px;font-size: 16px;text-transform: uppercase;letter-spacing: 0.2em;color: #4a7e3e;padding: 0 20px;font-weight: normal;}
.front-layer .title-page img { width:100%;}
.front-layer p {line-height: 1.2em;  margin: 0 auto 5px; margin-bottom: 5px; color: #fff; font-size: 1.4em; max-width: 80%; margin-bottom: 1em; margin-top: 1em; display: inline-block;}
.front-layer .title-page img {width: initial; float: left;}
.front-layer .headline span { float: left;}

@media screen and (max-width: 47.9375em) {
.front-layer {padding: 5px; max-width: 320px; margin: 0 auto;}
.front-layer .close {right: 0;  top: 0;  background: transparent;  padding: 15px 6px 0 0;  border-radius: 5px 5px 0 0;}
.front-layer .front-layer-inner {padding: 0;margin:0;}
.front-layer .headline {font-size: 2em;  margin: 0 0 8px; text-align: center; font-weight: bold; line-height: 1.4em; max-width: 80%;}
.front-layer .front-layer-inner p {text-align: center; line-height: 1.2em;font-size: 13px;margin: 0 auto 10px;}
.front-layer .headline span {word-break: break-word;line-height: 1.4em; font-size: 0.8em; margin-top: 10px;}
.front-layer .title-page img {margin-top: 10px;}
.front-layer p {width: 100%; font-size: 1.4em;}
}


</style>



<div class="front-layer-wrapper" id="front-layer" style="display:block">
        <div class="front-layer">
            <div class="front-layer-inner">
                <div class="close">
                   <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sf5c2f5e9515ac54e/image/i5bc3e80f9edf2a1e/version/1514372748/image.png" onClick="document.getElementById('front-layer').style.display=document.getElementById('front-layer').style.display=='block' ? 'none' : 'block';" alt="" border="" />
              </div>
                   <div class="title-page">
                  
              
              <div class="headline"><span> Wir haben vom 00.00.00 bis einschließlich 00.00.00 Betriebsferien.</span></div>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                   
            </div>
        </div>
     </div>

<script language="JavaScript">
 
$(document).ready(function(){
         jQuery('#front-layer').delay(1000).fadeIn(5000).delay(15000).fadeOut(1000);
});
</script>