Top bar notice

index.html

<style>
@media all and (max-width:768px) {
    #top-wrapper * {
    float: none !important; 
    text-align: center !important;
    padding: 6px ;
}
}
#top-notice {
    background: #AE9363;
    position:relative;
    
}
#top-left {
    float: left;
    margin: 0 0 -20px 0px;
}
#top-right {
    float: right;
}
#top-left p {
    color: black;
    font-size: 16px;
    margin: 9px 0px 0 0 !important;
}
#top-wrapper {
    max-width: 960px;
    margin: auto;
    overflow:hidden;
}
#top-right button {
    text-transform: uppercase;
    background: #1d1d1d;
    border: 0;
    box-shadow: none;
    color: #fff;
    padding: 7px 12px;
    margin: 6px 0 6px 0;
}
#top-right button:hover {
    background: #4c4c4c;
}

#top-close {
    float: right;
    background: rgb(0, 0, 0);
    color: #fff !important;
    padding: 2px 8px;
    opacity: 0.2;
}
#top-close:hover {
    opacity: 1;
    transition: all ease-out 0.1s;
}
</style>

<div id="top-notice">
    <div id="top-wrapper">
    
    <div id="top-left">
    <p>Please note some extra closures are planned.</p>
    </div>
    
    <div id="top-right">
    <button>Show me when</button>    
    </div>

    </div>
     <a href="#" id="top-close">X</a>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<script>
TweenMax.from("#top-notice", 1, {
    top:-50,
    opacity:0,
    delay:0.3,
ease: Elastic.easeOut.config(1, 0.5),
    
});
</script>


<script>
jQuery( "#top-close" ).click(function() {
  jQuery( "#top-notice" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});
</script>