الكود:

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>مركز تحميل المنتدى</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <style>
.cntr {
  margin: 0 300px;
  width: auto;
}
 body {
  color: rgb(0, 0, 0);
  font: 13pt Droid Arabic Kufi;
}
.button_sign {
  background-color: rgba(253, 194, 194, 0.6);
  border: 1px solid rgba(255, 150, 150, 0.4);
  border-radius: 30px;
  color: rgb(210, 109, 109) !important;
  cursor: pointer;
  font-weight: lighter;
  padding: 3px 8px;
  text-align: center;
}
 .button_yellow {
  background-color: rgb(245, 245, 245);
  border: 1px solid rgb(228, 228, 228);
  border-radius: 30px;
  color: rgb(199, 199, 199) !important;
  cursor: pointer;
  font-family: Droid Arabic Kufi;
  font-weight: lighter;
  margin-left: 20px;
  margin-right: 20px;
  padding: 3px 11px;
}
.logo {
  background-position: right -1px;
  background-repeat: no-repeat;
  border: 1px solid rgba(67, 219, 251, 0.14);
  border-radius: 50px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  float: right;
  font-family: "Droid Arabic Kufi",serif !important;
  font-size: 15px;
  font-weight: normal;
  line-height: 50px;
  margin-right: 40px;
  margin-top: 12px;
  padding: 1px 40px 1px 10px;
  text-align: right;
  transition: all 0.2s ease 0s;
  width: 10px;
}
.logo:hover {
  background: rgba(229, 245, 249, 0.<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> none repeat scroll 0 0;
  transition: all 0s ease 0s;
}
 .loginbutton_bar {
  float: left;
  margin-top: 12px;
}
 
 .barv4 {
  background-color: rgba(255, 255, 255, 0.97);
  background-position: 0 0;
  background-size: auto auto;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.27);
  position: fixed;
  transition: all 0.5s ease 0s;
  z-index: 1000;
    margin: -10px;
}
.bav4::before {
  background-size: 100px auto;
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  right: 0;
}
.bav4::after {
  background-color: rgb(255, 255, 255);
  content: "";
  height: 55px;
  left: 0;
  position: fixed;
  right: 0;
}
.barv4 td {
}
 #menuwrapper {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 55px;
  z-index: 105;
}
 
 
#menuwrapper ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
#sidemenu {
  background: rgb(37, 195, 204) none repeat scroll 0 0;
  height: 100%;
  width: 50px;
}
 #menuwrapper ul li {
  box-shadow: none;
  cursor: pointer;
  text-align: center;
}
 .hint, [data-hint] {
  display: inline-block;
  position: relative;
}
.hint::before, .hint::after, [data-hint]::before, [data-hint]::after {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0px, 0px, 0px);
  visibility: hidden;
  z-index: 1000000;
}
.hint:hover::before, .hint:hover::after, .hint:focus::before, .hint:focus::after, [data-hint]:hover::before, [data-hint]:hover::after, [data-hint]:focus::before, [data-hint]:focus::after {
  opacity: 1;
  visibility: visible;
}
.hint::before, [data-hint]::before {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 6px solid rgba(0, 0, 0, 0);
  content: "";
  position: absolute;
  z-index: 1000001;
}
.hint::after, [data-hint]::after {
  background: rgb(255, 255, 255) none repeat scroll 0 0;
  border-radius: 0;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  color: rgb(111, 111, 111);
  content: attr(data-hint);
  font-size: 10px;
  font-weight: normal;
  line-height: 14px;
  padding: 6px 8px;
  white-space: nowrap;
  z-index: 2147483647;
}
.hint--top::before {
  border-top-color: rgb(199, 196, 196);
}
.hint--bottom::before {
  border-bottom-color: rgb(199, 196, 196);
}
.hint--left::before {
  border-left-color: rgb(199, 196, 196);
}
.hint--right::before {
  border-right-color: rgb(199, 196, 196);
}
.hint--top::before {
  margin-bottom: -12px;
}
.hint--top::after {
  margin-left: -18px;
}
.hint--top::before, .hint--top::after {
  bottom: 100%;
  left: 50%;
}
.hint--top:hover::after, .hint--top:hover::before, .hint--top:focus::after, .hint--top:focus::before {
  transform: translateY(-8px);
}
.hint--bottom::before {
  margin-top: -12px;
}
.hint--bottom::after {
  margin-left: -14px;
}
.hint--bottom::before, .hint--bottom::after {
  left: 50%;
  top: 100%;
}
.hint--bottom:hover::after, .hint--bottom:hover::before, .hint--bottom:focus::after, .hint--bottom:focus::before {
  transform: translateY(8px);
}
.hint--right::before {
  margin-bottom: -6px;
  margin-left: -12px;
}
.hint--right::after {
  margin-bottom: -14px;
}
.hint--right::before, .hint--right::after {
  bottom: 50%;
  left: 100%;
}
.hint--right:hover::after, .hint--right:hover::before, .hint--right:focus::after, .hint--right:focus::before {
  transform: translateX(8px);
}
.hint--left::before {
  margin-bottom: -6px;
  margin-right: -12px;
}
.hint--left::after {
  margin-bottom: -14px;
}
.hint--left::before, .hint--left::after {
  bottom: 50%;
  right: 100%;
}
.hint--left:hover::after, .hint--left:hover::before, .hint--left:focus::after, .hint--left:focus::before {
  transform: translateX(-8px);
}
.hint--error::after {
  background-color: rgb(187, 0, 4);
  color: rgb(255, 255, 255);
  text-shadow: 0 -1px 0 rgb(89, 39, 38);
}
.hint--error.hint--top::before {
  border-top-color: rgb(179, 78, 77);
}
.hint--error.hint--bottom::before {
  border-bottom-color: rgb(179, 78, 77);
}
.hint--error.hint--left::before {
  border-left-color: rgb(179, 78, 77);
}
.hint--error.hint--right::before {
  border-right-color: rgb(179, 78, 77);
}
.hint--warning::after {
  background-color: rgb(192, 152, 84);
  text-shadow: 0 -1px 0 rgb(108, 83, 40);
}
.hint--warning.hint--top::before {
  border-top-color: rgb(192, 152, 84);
}
.hint--warning.hint--bottom::before {
  border-bottom-color: rgb(192, 152, 84);
}
.hint--warning.hint--left::before {
  border-left-color: rgb(192, 152, 84);
}
.hint--warning.hint--right::before {
  border-right-color: rgb(192, 152, 84);
}
.hint--info::after {
  background-color: rgb(0, 124, 191);
  color: rgb(255, 255, 255);
  text-shadow: 0 -1px 0 rgb(25, 59, 77);
}
.hint--info.hint--top::before {
  border-top-color: rgb(57, 134, 172);
}
.hint--info.hint--bottom::before {
  border-bottom-color: rgb(57, 134, 172);
}
.hint--info.hint--left::before {
  border-left-color: rgb(57, 134, 172);
}
.hint--info.hint--right::before {
  border-right-color: rgb(57, 134, 172);
}
.hint--success::after {
  background-color: rgb(124, 183, 2);
  color: rgb(255, 255, 255);
  text-shadow: 0 -1px 0 rgb(26, 50, 26);
}
.hint--success.hint--top::before {
  border-top-color: rgb(69, 135, 70);
}
.hint--success.hint--bottom::before {
  border-bottom-color: rgb(69, 135, 70);
}
.hint--success.hint--left::before {
  border-left-color: rgb(69, 135, 70);
}
.hint--success.hint--right::before {
  border-right-color: rgb(69, 135, 70);
}
.hint--always::after, .hint--always::before {
  opacity: 1;
  visibility: visible;
}
.hint--always.hint--top::after, .hint--always.hint--top::before {
  transform: translateY(-8px);
}
.hint--always.hint--bottom::after, .hint--always.hint--bottom::before {
  transform: translateY(8px);
}
.hint--always.hint--left::after, .hint--always.hint--left::before {
  transform: translateX(-8px);
}
.hint--always.hint--right::after, .hint--always.hint--right::before {
  transform: translateX(8px);
}
.hint--rounded::after {
  border-radius: 4px;
}
.hint--bounce::before, .hint--bounce::after {
  transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24) 0s;
}
#menuToggle {
 display: block;
 position: relative;
 top: 50px;
 left: 50px;
 z-index: 1;
 -webkit-user-select: none;
 user-select: none;
}

#menuToggle input {
 display: block;
 width: 33px;
 height: 28px;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */
}

/*
* Just a quick hamburger
*/

#menuToggle span {
 display: block;
 width: 33px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 background: #cdcdcd;
 border-radius: 3px;
 z-index: 1;
 transform-origin: 4px 0px;
 transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
}

#menuToggle span:first-child { transform-origin: 0% 0%; }

#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }

/*
* Transform all the slices of hamburger
* into a crossmark.
*/

#menuToggle input:checked ~ span {
 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 background: #232323;
}

/*
* But let's hide the middle one.
*/

#menuToggle input:checked ~ span:nth-last-child(3) {
 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/

#menuToggle input:checked ~ span:nth-last-child(2) {
 opacity: 1;
 transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/

#menu {
 position: absolute;
 width: 300px;
 margin: -100px 0 0 -50px;
 padding: 50px;
 padding-top: 125px;
 background: #ededed;
 list-style-type: none;
 transform-origin: 0% 0%;
 transform: translate(-100%, 0);
 transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
 padding: 10px 0;
 font-size: 22px;
}

/*
* And let's fade it in from the left
*/

#menuToggle input:checked ~ ul {
 transform: scale(1.0, 1.0);
 opacity: 1;
}
 .forumline {
 background-color: #F4F3F3;
  border: 1px solid rgb(90, 127, 151);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  clear: both;
  color: rgb(255, 255, 255);
  float: right;
  font: 11px Droid Arabic Kufi;
  margin-top: 8px;
  padding: 0;
  width: 100%;
}
</style> 
<table align="center" cellpadding="0" cellspacing="0" style="width: 100%; text-align: center; z-index: 1000; height: 55px; padding: 0px;" dir="ltr" class="barv4">
    <tbody> </tbody>
   <tr style="">
      
      <td class="logo" onclick="window.open('index.php','_self')" style="width: 200px;">
         <a href="http://www.t3qnyiat.com/h6-page" data-hint="مركز تحميل" class="hint--bottom">                <img border="0" alt="" title="" src="https://i.servimg.com/u/f86/16/46/77/76/_ioa10.png" /></a>
      </td>
      
      <!--  end container  --> 
      <td class="loginbutton_bar">
           <span data-hint="دخول" class="hint--bounce hint--bottom "><a href="http://www.eps-dz.ahlamontada.com/login" class="button_yellow"><em class="fa">  </em></a></span>
      </td>
       
      <td class="loginbutton_bar">
         <span data-hint="تسجيل عضويه جديده" class="hint--bounce hint--error hint--right "><a href="http://www.eps-dz.ahlamontada.com/register" class="button_sign" onclick="document.getElementById('loginshade').style.display = 'block'"><em class="fa fa-user-plus"></em></a></span>
      </td>
      
   </tr><tbody> </tbody>
</table>
  <br /><br /><br /><br />
<div class="cntr">
   
   <table align="center" border="0" cellpadding="4" cellspacing="0" class="forumline" style="width: 100%;">
       <tbody> </tbody>
      <tr style="">
         
         <td align="center" class="row1" style="width: 100%;">
            <script type="text/javascript">tinypic_layout = 'wide';tinypic_type = 'both';tinypic_links = 'url';tinypic_language = 'en';tinypic_search = 'false';tinypic_autoload = true;</script><script type="text/javascript" src="http://plugin.tinypic.com/j/plugin.js"></script><script type="text/javascript" src="http://www.linkbucks.com/Webservices/jsParseLinks.aspx?id=58ecfbba"></script>‎ 
         </td>
         
      </tr><tbody> </tbody>
   </table>
</div>
   
<div id="menuwrapper">
          
   <ul id="sidemenu">
                 
      <li>
          <a href="https://eps-dz.ahlamontada.com/" class="hint--bounce hint--right" data-hint="الرئيسية">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;
  cursor: pointer;

" class="fa fa-home hvr-icon-wobble-horizontal"> </em></a>
      </li>
                 
      <li>
          <a href="http://www.eps-dz.ahlamontada.com/t30-topic" class="" data-hint="القوانين السريعه">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;
  transition: 0.9s;    cursor: pointer;

" class="fa fa-gavel hvr-icon-wobble-horizontal"> </em></a>
      </li>
                                         
      <li>
          <a href="http://www.eps-dz.ahlamontada.com/" class="" data-hint="توثيق الحسابات">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;

" class="fa fa-check hvr-icon-wobble-horizontal"> </em></a>                       
      </li>
      
      <li>
          <a class="hint--error hint--right" data-hint="اغلاق المنتدي">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;
" onclick="self.close()" class="fa fa-power-off hvr-icon-wobble-horizontal"> </em></a>
      </li>
       
      <li>
          <span class="hint--bounce hint--right" data-hint="تحديث الصفحه">  <a href="javascript:window.location.reload()" target="_self" class="fa fa-repeat hvr-icon-spin" style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;

"></a></span>
      </li>
                       
      <li>
          <a href="https://www.facebook.com/LepsDz/" class="hint--info hint--right" data-hint="صفحتنا علي فيسبوك">          <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;

" class="fa fa-facebook-official hvr-icon-sink-away"> </em></a>
      </li>
      
      <li>
          <a href="http://twitter.com/" class="hint--bounce hint--right" data-hint="صفحتنا علي تويتر">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;

" class="fa fa-twitter hvr-icon-float-away"> </em></a>
      </li>
      
      <li>
          <a href="https://eps-dz.ahlamontada.com/search?search_id=newposts" class="hint--bounce hint--right" data-hint="اخر المواضيع"> <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;

" class="fa fa-newspaper-o hvr-icon-shrink"></em> </a>
      </li>
      
      <li>
          <a href="https://eps-dz.ahlamontada.com/rss" class="hint--bounce hint--right" data-hint="الأرشيف">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 14px;    cursor: pointer;

" class="fa fa-sitemap hvr-icon-shrink"></em>  </a>
      </li>
      
      <li>
          <a class="hint--error hint--right" data-hint="اغلق شريط المهام">            <em style="
  padding-top: 20px;
  padding-bottom: 30px;
  color: rgba(255, 255, 255, 0.69);
  display: inline-block;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 17px;    cursor: pointer; background: rgba(236, 164, 164, 0.99);

" href="#" class="fa fa-times-circle-o hvr-icon-pulse"> </em></a>
      </li>
               
   </ul>
</div>

الكود:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>مركز تحميل المنتدى</title>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        .cntr {
            margin: 0 300px;
            width: auto;
        }

        body {
            color: rgb(0, 0, 0);
            font: 13pt "Droid Arabic Kufi";
            background: linear-gradient(to bottom, #39b812, #248c0b);
            font-family: Arial, sans-serif;
            transition: background-color 0.5s ease;
        }

        .button_sign {
            background-color: rgba(253, 194, 194, 0.6);
            border: 1px solid rgba(255, 150, 150, 0.4);
            border-radius: 30px;
            color: rgb(210, 109, 109) !important;
            cursor: pointer;
            font-weight: lighter;
            padding: 3px 8px;
            text-align: center;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .button_sign:hover {
            background-color: #3f9f7f;
            transform: scale(1.1);
        }

        .button_yellow {
            background-color: rgb(245, 245, 245);
            border: 1px solid rgb(228, 228, 228);
            border-radius: 30px;
            color: rgb(199, 199, 199) !important;
            cursor: pointer;
            font-family: "Droid Arabic Kufi";
            font-weight: lighter;
            margin-left: 20px;
            margin-right: 20px;
            padding: 3px 11px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .button_yellow:hover {
            background-color: #3f9f7f;
            transform: scale(1.1);
        }

        .logo {
            background-position: right -1px;
            background-repeat: no-repeat;
            border: 1px solid rgba(67, 219, 251, 0.14);
            border-radius: 50px;
            color: rgb(255, 255, 255);
            cursor: pointer;
            float: right;
            font-family: "Droid Arabic Kufi", serif !important;
            font-size: 15px;
            font-weight: normal;
            line-height: 50px;
            margin-right: 40px;
            margin-top: 12px;
            padding: 1px 40px 1px 10px;
            text-align: right;
            transition: all 0.2s ease;
            width: 10px;
        }

        .logo:hover {
            background: rgba(229, 245, 249, 0.6);
            transition: all 0s ease 0s;
        }

        #menuwrapper {
            position: fixed;
            top: 55px;
            left: 0;
            width: 250px;
            height: 100%;
            background: #39b812;
            padding-top: 20px;
            z-index: 105;
            transition: width 0.3s ease;
        }

        #menuwrapper ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #menuwrapper ul li {
            text-align: center;
            margin: 20px 0;
        }

        #menuwrapper ul li a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            display: block;
            padding: 10px;
            background-color: #248c0b;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.3s;
        }

        #menuwrapper ul li a:hover {
            background-color: #3f9f7f;
            transform: scale(1.05);
        }

        .center-content {
            background-color: #39b812;
            color: white;
            padding: 50px;
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            border-radius: 10px;
            margin: 50px 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }

        .center-content:hover {
            transform: translateY(-10px);
        }

        .barv4 {
            background-color: rgba(255, 255, 255, 0.97);
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.27);
            position: fixed;
            transition: all 0.5s ease;
            z-index: 1000;
            width: 100%;
            top: 0;
            left: 0;
            padding: 10px;
        }

        .barv4 td {
            padding: 10px;
        }

        .fade-in-text {
            animation: fadeIn 2s ease-in-out;
        }

        .wave-text {
            position: relative;
            display: inline-block;
            animation: wave 1.5s ease-in-out infinite;
        }

        .wave-text span {
            display: inline-block;
            animation: wave-animation 1s ease-in-out infinite;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes wave {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }

        @keyframes wave-animation {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

    </style>
</head>
<body>

<table align="center" cellpadding="0" cellspacing="0" style="width: 100%; text-align: center; z-index: 1000; height: 55px; padding: 0px;" dir="ltr" class="barv4">
    <tbody> </tbody>
  <tr style="">
     
      <td class="logo" onclick="window.open('index.php','_self')" style="width: 200px;">
        <a href="http://www.t3qnyiat.com/h6-page" data-hint="مركز تحميل" class="hint--bottom">               
            <img border="0" alt="" title="" src="https://i.servimg.com/u/f86/16/46/77/76/_ioa10.png" />
        </a>
      </td>
     
      <td class="loginbutton_bar">
          <span data-hint="دخول" class="hint--bounce hint--bottom "><a href="http://www.eps-dz.ahlamontada.com/login" class="button_yellow"><em class="fa">  </em></a></span>
      </td>
     
      <td class="loginbutton_bar">
        <span data-hint="تسجيل عضويه جديده" class="hint--bounce hint--error hint--right "><a href="http://www.eps-dz.ahlamontada.com/register" class="button_sign" onclick="document.getElementById('loginshade').style.display = 'block'"><em class="fa fa-user-plus"></em></a></span>
      </td>
     
  </tr><tbody> </tbody>
</table>

    <div id="menuwrapper">
        <ul>
            <li><a href="#">الرئيسية</a></li>
            <li><a href="#">المنتديات</a></li>
            <li><a href="#">التسجيل</a></li>
            <li><a href="#">التحميلات</a></li>
            <li><a href="#">دليل الاستخدام</a></li>
        </ul>
    </div>

    <div class="center-content">
        <p class="fade-in-text wave-text">
            <span>مركز تحميل شبكة أساتذة التربية البدنية والرياضية</span>
        </p>
    </div>

</body>
</html>

eps primaire كتب:تم اصلاح الواجهة لكن ما زالت المشكلة قائمة لا يوجد زر تحميل

eps primaire كتب:ممكن وضع مركز لرفع الملفات للكود وليس الصور

الكود:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مركز تحميل شبكة أساتذة التربية البدنية والرياضية</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <style>
        body {
            font-family: "Droid Arabic Kufi", sans-serif;
            color: #000;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background: #00aaff;
            color: #fff;
            padding: 15px 20px;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        header .header-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        header .header-buttons a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }

        header .header-buttons a:hover {
            color: #ffd700;
        }

        header .header-buttons a::after {
            content: "";
            position: absolute;
            width: 0;
            height: 3px;
            background: #ffd700;
            left: 50%;
            bottom: -5px;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        header .header-buttons a:hover::after {
            width: 100%;
        }

        h1 {
            text-align: center;
            color: #555;
            margin-top: 80px;
        }

        .upload-container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        #upload-area {
            border: 2px dashed #ccc;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #upload-area:hover {
            border-color: #00aaff;
        }

        .file-info {
            margin-top: 20px;
            text-align: center;
        }

        .file-info p {
            font-size: 14px;
            color: #555;
        }

        .file-info a {
            color: #008000;
            font-weight: bold;
            text-decoration: none;
        }

        .file-info a:hover {
            text-decoration: underline;
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            background: #00aaff;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
            margin: 10px 0;
            transition: background 0.3s ease;
        }

        .button:hover {
            background: #0088cc;
        }

        footer {
            text-align: center;
            margin: 20px 0;
            font-size: 12px;
            color: #aaa;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-buttons">
            <a href="/"><i class="fa fa-home"></i> الرئيسية</a>
            <a href="https://www.facebook.com/LepsDz/"><i class="fa fa-facebook"></i> فيسبوك</a>
            <a href="http://twitter.com/"><i class="fa fa-twitter"></i> تويتر</a>
            <a href="https://eps-dz.ahlamontada.com/search?search_id=newposts"><i class="fa fa-newspaper-o"></i> آخر المواضيع</a>
            <a href="https://eps-dz.ahlamontada.com/rss"><i class="fa fa-sitemap"></i> الأرشيف</a>
        </div>
    </header>

    <h1>مركز تحميل شبكة أساتذة التربية البدنية والرياضية</h1>
    <div class="upload-container">
        <div id="upload-area">
            اسحب الملف هنا أو اضغط لتحميله
        </div>
        <input type="file" id="file-input" style="display: none;" />
        <div class="file-info" id="file-info"></div>
    </div>
    <footer>
        &copy; 2024 شبكة أساتذة التربية البدنية والرياضية | جميع الحقوق محفوظة
    </footer>

    <script>
        const uploadArea = document.getElementById('upload-area');
        const fileInput = document.getElementById('file-input');
        const fileInfo = document.getElementById('file-info');

        uploadArea.addEventListener('click', () => fileInput.click());
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#00aaff';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = '#ccc';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#ccc';
            handleFileUpload(e.dataTransfer.files[0]);
        });

        fileInput.addEventListener('change', () => {
            handleFileUpload(fileInput.files[0]);
        });

        async function handleFileUpload(file) {
            if (!file) return;
            fileInfo.innerHTML = `<p>جاري رفع الملف <b>${file.name}</b>...</p>`;

            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await fetch('https://file.io', {
                    method: 'POST',
                    body: formData,
                });
                const result = await response.json();

                if (result.success) {
                    fileInfo.innerHTML = `
                        <p>تم رفع الملف بنجاح!</p>
                        <p><a href="${result.link}" target="_blank">رابط التحميل</a></p>
                    `;
                } else {
                    fileInfo.innerHTML = `<p>حدث خطأ أثناء الرفع: ${result.message}</p>`;
                }
            } catch (error) {
                fileInfo.innerHTML = `<p>فشل الرفع. يرجى المحاولة مرة أخرى.</p>`;
            }
        }
    </script>
</body>
</html>

صياد اليمام كتب:جرب الكود التالى

الكود:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مركز تحميل شبكة أساتذة التربية البدنية والرياضية</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <style>
        body {
            font-family: "Droid Arabic Kufi", sans-serif;
            color: #000;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background: #00aaff;
            color: #fff;
            padding: 15px 20px;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        header .header-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        header .header-buttons a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }

        header .header-buttons a:hover {
            color: #ffd700;
        }

        header .header-buttons a::after {
            content: "";
            position: absolute;
            width: 0;
            height: 3px;
            background: #ffd700;
            left: 50%;
            bottom: -5px;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        header .header-buttons a:hover::after {
            width: 100%;
        }

        h1 {
            text-align: center;
            color: #555;
            margin-top: 80px;
        }

        .upload-container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        #upload-area {
            border: 2px dashed #ccc;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #upload-area:hover {
            border-color: #00aaff;
        }

        .file-info {
            margin-top: 20px;
            text-align: center;
        }

        .file-info p {
            font-size: 14px;
            color: #555;
        }

        .file-info a {
            color: #008000;
            font-weight: bold;
            text-decoration: none;
        }

        .file-info a:hover {
            text-decoration: underline;
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            background: #00aaff;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
            margin: 10px 0;
            transition: background 0.3s ease;
        }

        .button:hover {
            background: #0088cc;
        }

        footer {
            text-align: center;
            margin: 20px 0;
            font-size: 12px;
            color: #aaa;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-buttons">
            <a href="/"><i class="fa fa-home"></i> الرئيسية</a>
            <a href="https://www.facebook.com/LepsDz/"><i class="fa fa-facebook"></i> فيسبوك</a>
            <a href="http://twitter.com/"><i class="fa fa-twitter"></i> تويتر</a>
            <a href="https://eps-dz.ahlamontada.com/search?search_id=newposts"><i class="fa fa-newspaper-o"></i> آخر المواضيع</a>
            <a href="https://eps-dz.ahlamontada.com/rss"><i class="fa fa-sitemap"></i> الأرشيف</a>
        </div>
    </header>

    <h1>مركز تحميل شبكة أساتذة التربية البدنية والرياضية</h1>
    <div class="upload-container">
        <div id="upload-area">
            اسحب الملف هنا أو اضغط لتحميله
        </div>
        <input type="file" id="file-input" style="display: none;" />
        <div class="file-info" id="file-info"></div>
    </div>
    <footer>
        &copy; 2024 شبكة أساتذة التربية البدنية والرياضية | جميع الحقوق محفوظة
    </footer>

    <script>
        const uploadArea = document.getElementById('upload-area');
        const fileInput = document.getElementById('file-input');
        const fileInfo = document.getElementById('file-info');

        uploadArea.addEventListener('click', () => fileInput.click());
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#00aaff';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = '#ccc';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#ccc';
            handleFileUpload(e.dataTransfer.files[0]);
        });

        fileInput.addEventListener('change', () => {
            handleFileUpload(fileInput.files[0]);
        });

        async function handleFileUpload(file) {
            if (!file) return;
            fileInfo.innerHTML = `<p>جاري رفع الملف <b>${file.name}</b>...</p>`;

            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await fetch('https://file.io', {
                    method: 'POST',
                    body: formData,
                });
                const result = await response.json();

                if (result.success) {
                    fileInfo.innerHTML = `
                        <p>تم رفع الملف بنجاح!</p>
                        <p><a href="${result.link}" target="_blank">رابط التحميل</a></p>
                    `;
                } else {
                    fileInfo.innerHTML = `<p>حدث خطأ أثناء الرفع: ${result.message}</p>`;
                }
            } catch (error) {
                fileInfo.innerHTML = `<p>فشل الرفع. يرجى المحاولة مرة أخرى.</p>`;
            }
        }
    </script>
</body>
</html>

eps primaire كتب:كود شغال رووعة دائما متألق كعادتك