يمن الواقع

<link rel="stylesheet" href="http://test-web.ucoz.com/pulloutpanel/pulloutpanel.css" type="text/css"/>
<link href="http://test-web.ucoz.com/pulloutpanel/scrollbars.css" rel="stylesheet" type="text/css"/>
<script src='http://test-web.ucoz.com/pulloutpanel/jquery.js'></script>
<script src='http://test-web.ucoz.com/pulloutpanel/pulloutpanel.js'></script>
    <script>
        $(document).ready(function($){
            $('#pocp1').pullOutContentPanel(
                
            );
        });
    </script>

<div id="pocp1" class="pocp_left">
<div class="pocp">
<div class="pocp_content">
<h2>Sliding Menu</h2>
<p>تستخدم هذه القائمة تأثير مختلف عند تفعيلها. يمكنك اختيار وضع وسلوك هذه اللوحة.</p>
<ul class="pocp_icons">
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 1</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 2</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 3</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 4</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 5</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 6</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 7</a></li>
<li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 8</a></li>
</ul>
<p>في هذه اللوحة يمكنك إضافة عناصر متداخلة تبديل لإظهار أو إخفاء المعلومات الثانوية.</p>

<ul class="pocp_toggle">
<li>
<span class="pocp_toggle_title"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"style="margin-left:5px;"/></i>عنوان الموضوع 1</span>
<div class="pocp_panel">
<p>ضع النص هنا</p>
</div>
</li>

<li>
<span class="pocp_toggle_title"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"style="margin-left:5px;"/></i>عنوان الموضوع 2</span>
<div class="pocp_panel">
<p>ضع النص هنا</p>
</div>
</li>

<li>
<span class="pocp_toggle_title"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"style="margin-left:5px;"/></i>عنوان الموضوع 3</span>
<div class="pocp_panel">
<p>ضع النص هنا</p>
</div>
</li>
</ul>

<h2>Styled Elements</h2>
<p>يشمل هذا البند العديد من العناصر على غرار مثل رؤوس الصفحات، الفقرات، والقوائم، الخ</p>
<p class="dark">هذا هو النص الوارد في الحاوية الداكنه مع الحدود</p>
<p class="brown">هذا هو النص الوارد في الحاوية البنيه مع الحدود</p>
<p class="yellow">هذا هو النص الوارد في الحاوية الصفراء مع الحدود</p>
<p class="red">هذا هو النص الوارد في الحاوية الحمراء مع الحدود</p>
<p class="blue">هذا هو النص الوارد في الحاوية الزرقاء مع الحدود</p>
<p class="green">هذا هو النص الوارد في الحاوية الخضراء مع الحدود</p>

<h2>Video</h2>
<p>شلالات جبل بعدان في إب باليمن</p>
<div class="video_container">
<iframe src="http://youtube.com/embed/360cm_VzG_I" frameborder="0" allowfullscreen></iframe>
</div>

<p>اضافات اخرى</p>

<p>اضافات اخرى</p>

</div>
</div>
</div>