قمـ باَلبحث فى قاَلب مـدوونتك عن اَلووسمـ </head> ثمـ قمـ بووضع اَلكوود اَلتاَلى فووقة<style> div#loading-abdoutechnologie { right: 0; bottom: 0; position: fixed; z-index: 99999999999999999999; display: block; left: 0; top: 0; background: #fff; width: 100%; height: 100%; } .boxed { margin: 0 auto; margin-bottom: 5rem; max-width: 90rem; min-height: 50rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15), 0 -0.5rem 1rem 0 rgba(0, 0, 0, 0.033); } .padded { padding: 2.5rem; } .padded--slightly { padding: 1.618rem; } .centered-container { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 75%; margin: 0 auto; text-align: center; } .group:after { content: ""; display: table; clear: both; } .vertical-align-helper:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -5px; } .vertical-align-helper > [class*=vertical-align--] { display: inline-block; width: 100%; } .text--centered { text-align: center; } .vertical-align--middle { vertical-align: middle; } ferry { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 64px; height: 32px; border-radius: 3px 0 0 0; background-color: #2b2b2b; z-index: 1; -webkit-animation: bop .48s ease-in-out alternate infinite; animation: bop .48s ease-in-out alternate infinite; box-shadow: inset 0 -5px 0 0 #e74c3c, inset 0 -15px 0 0 #2b2b2b, inset 0 -17px 0 0 #f0cf3c; border-top: 4px solid #ecf0f1; } @-webkit-keyframes bop { to { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } @keyframes bop { to { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } ferry:after { content: ""; position: absolute; top: -18px; right: 0; display: block; width: 45px; height: 15px; background-color: #ecf0f1; z-index: 1; border-radius: 3px 3px 0 0; } ferry:before { content: ""; position: absolute; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: -5px; left: -3px; width: 10px; height: 50px; background-color: white; } ferry chimney { position: absolute; top: -35px; display: block; width: 17px; height: 22px; background-color: #f0cf3c; left: 32px; z-index: -1; -webkit-transform: rotate(8deg); transform: rotate(8deg); box-shadow: inset 0 3px 0 0 #2b2b2b; } ferry waves { position: absolute; bottom: -37px; display: block; width: 100px; height: 50px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE1NSIgaGVpZ2h0PSI4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI4NyIgd2lkdGg9IjE1NyIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzkiPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z18xIiBjeT0iMzMuNSIgY3g9IjM0LjUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxlbGxpcHNlIHJ5PSIyNiIgcng9IjI2IiBpZD0ic3ZnXzMiIGN5PSIzMy41IiBjeD0iNjMuODY4NDkzIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z182IiBjeT0iMzMuNSIgY3g9IjkxLjcxODg4IiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z183IiBjeT0iMzMuNSIgY3g9IjEyMS4wODczNzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI0NiIgd2lkdGg9IjE0MC4wMDAwMDYiIHk9IjMyLjUiIHg9IjcuNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9IiNmZmYiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg=="); background-size: 133% 144%; -webkit-animation: sail 4s linear infinite; animation: sail 4s linear infinite; } @-webkit-keyframes sail { to { background-position: 400px 0; } } @keyframes sail { to { background-position: 400px 0; } } </style> قمـ باَلبحث فى قاَلب مـدوونتك عن اَلووسمـ </body> ثمـ قمـ بووضع اَلكوود اَلتاَلى فووقة<b:if cond='data:blog.pageType == "item"'> <div id='loading-abdoutechnologie'><center> <ferry><chimney></chimney><waves></waves></ferry> </center></div></b:if> <script type='text/javascript'> $(window).load(function(){ $("#loading-abdoutechnologie").fadeOut(1000) }); </script>
