<style>


.alert {


    padding: 20px;


    background-color: #f44336;


    color: white;


    opacity: 1;


    transition: opacity 0.6s;


    margin-bottom: 15px;


}





.alert.success {background-color: #4CAF50;}


.alert.info {background-color: #2196F3;}


.alert.warning {background-color: #ff9800;}





.closebtn {


    margin-left: 15px;


    color: white;


    font-weight: bold;


    float: right;


    font-size: 22px;


    line-height: 20px;


    cursor: pointer;


    transition: 0.3s;


}





.closebtn:hover {


    color: black;


}


</style>


</head>








<div class="alert success">


  <span class="closebtn">×</span>  


  <strong></strong> باب الترشيح لفريق العمل متاح الأن


</div>





<div class="alert info">


  <span class="closebtn">×</span>  


  <strong></strong> باب الترشيح لفريق عمل المانجا متاح الأن


</div>





<div class="alert warning">


  <span class="closebtn">×</span>  


  <strong></strong> أشترك الأن في تنبيهات المنتدى مجانآ


</div>





<script>


var close = document.getElementsByClassName("closebtn");


var i;





for (i = 0; i < close.length; i++) {


    close[i].onclick = function(){


        var div = this.parentElement;


        div.style.opacity = "0";


        setTimeout(function(){ div.style.display = "none"; }, 600);


    }


}


</script>





</body>


</noscript>


<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">





</div></div>


</noscript>


<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">





</div></div>


</html>