إنشاء الملاحظات بطريقة جديدة و احترافية

/*--------------CSS Aleret Message---------------*/#jazairiweb-pd1 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd1:hover { background: #01A8AD url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 99% 0px; color: #fff; transition: 1s; } #jazairiweb-pd2 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd2:hover { background: #ab2e2e url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd3 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd3:hover { background: #788081 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd4 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd4:hover { background: #f39c12 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd5 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd5:hover { background: #27ae60 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd6 { margin: 3px -15px 3px 0px; color: #fff; font-family: JF_Flat_Regular; padding: 8px 67px 0px 0; height: 28px; width: 999px; background: #2c3e50 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 99% 0px; text-align: right; transition: 1s; overflow: hidden; } #jazairiweb-pd6:hover { background: #278879 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 99% 0px; color: #fff; } #jazairiweb-pd a { background: #FCB151; box-shadow: 0 4px 0 #EB911E; padding: 12px 25px; margin: 4px; text-align: right; font-family: JF_Flat_Regular; color: #fff; text-decoration: none; border-radius: 5px; transition: 0.5s; } #jazairiweb-pd a { padding: 12px 25px; margin: 7px; text-align: right; font-family: JF_Flat_Regular; color: #fff; text-decoration: none; border-radius: 5px; transition: 0.5s; background: #7EB3EC; box-shadow: 0 4px 0 #6B97C7; } #jazairiweb-pd a:hover{ background: #ccc; box-shadow: 0 4px 0 #aaa; transition:0.5s; } #jazairiweb-pd { margin-left: auto; margin-right: auto; text-align: right; margin-bottom: 12px; margin-top: 8px;}

</div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd1"> 

</div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd2"> 

</div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd3">

</div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd4">

</div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd5">

</div> هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة<div id="jazairiweb-pd6">